</>

federicojw.my.id

Loading Project Environment...

[--------------------] 0%
Back to Projects

MAR 2026 - APR 2026  •  WEB DEVELOPMENT  •  FRONTEND & ECO-INNOVATION

Percava Educational Website

HTML5 CSS3 JavaScript Cormorant Garamond Font Vercel Intersection Observer API UI/UX Design
View Code View Site

Project Overview

Percava is a web platform designed to support a sustainable upcycling initiative that turns patchwork fabric waste (kain perca) into functional products such as upcycled lanyards and cardholders. The website acts as the educational hub linked directly via QR codes printed on physical Percava products, driving awareness on textile waste reduction and Sustainable Development Goals (SDGs).

Key Features Implemented

  • Interactive Impact Counters: Real-time animated number counters driven by JS to showcase textile waste saved and products crafted.
  • SCAMPER Innovation Framework: Dedicated interactive section illustrating product innovation strategies (Substitute, Combine, Adapt, Modify, etc.).
  • Accordion Knowledge Base: Clean expandable FAQ and educational toggle for textile upcycling insights.
  • SDG Commitment Alignment: Structured educational showcase highlighting contributions to SDG 4, SDG 12, and SDG 13.
  • QR Code Educational Integration: Direct dynamic landing integration designed specifically for physical product QR code scans.

Project Info

Category Web Development / Upcycling Initiative
Role Creator & Frontend Developer
Timeline March 2026 - April 2026
Status Inactive / Not Deployed

Technical Architecture

Percava uses a clean, zero-dependency vanilla JavaScript stack structured for light execution, aesthetic editorial typography, and high mobile responsiveness:

1. Intersection Observer & Dynamic Counter Engine

Custom JavaScript implementations for scroll-triggered fade-in animations and smooth numerical counting effects:

script.js JavaScript
01// Scroll Intersection Observer & Counter Trigger
02const fadeElements = document.querySelectorAll(".fade-in");
03const observer = new IntersectionObserver((entries) => {
04  entries.forEach((entry) => {
05    if (entry.isIntersecting) entry.target.classList.add("active");
06  });
07});
08fadeElements.forEach((el) => observer.observe(el));
09
10// Accordion Toggle Functionality
11document.querySelectorAll(".accordion-btn").forEach((btn) => {
12  btn.addEventListener("click", () => {
13    const content = btn.nextElementSibling;
14    content.style.display = content.style.display === "block" ? "none" : "block";
15  });
16});
mainUTF-8JavaScriptLn 16, Col 4

2. Organic Dark Palette & Editorial CSS Tokens

A dark organic color palette utilizing CSS variable tokens combined with classical serif typography:

style.css CSS
01:root {
02  --dark-green: #0f2e1d;
03  --deep-green: #163a24;
04  --cream: #f1ede3;
05  --gold: #c2a878;
06}
mainUTF-8CSSLn 6, Col 1

Implementation Challenges

Developing Percava required balancing educational depth with sleek user experience:

  • Physical to Digital Bridge (QR Flow): Designing mobile-first layouts optimized for users scanning physical lanyard QR codes under varying screen sizes and connection conditions.
  • Cross-Device Accordion & Navigation Handling: Creating robust flexbox and grid fallbacks for mobile navigation headers and collapsible accordion panels without external frameworks.
  • High-Contrast Aesthetic Sustainability: Crafting an elegant dark-mode color scheme using natural green and gold accents that feels eco-friendly while maintaining web accessibility standards (WCAG).

Performance Optimizations

Performance measures incorporated to deliver instant loading speeds:

  1. Zero-Dependency Lightweight Build: Eliminated heavy JS frameworks to maintain lightning-fast render times on mobile devices.
  2. Optimized Web Font Loading: Preconnected and asynchronously loaded Cormorant Garamond typography to prevent render-blocking.
  3. Vercel Edge Analytics & Deployment: Leveraged edge caching and integrated Vercel Speed Insights to monitor real-world user metrics.

Conclusion

The Percava website successfully unites front-end web development with environmental advocacy. It serves as an effective digital extension for upcycled products, bridging consumer interaction, product innovation frameworks, and sustainable development awareness in an accessible digital environment.