Frontend Foundation
Built with vanilla HTML, CSS, and lightweight JS to ensure maximum performance, instant loads, and zero framework bloat.
cup.pm
A compact home for an idea worth returning to — designed to feel immediate, legible, and calm.
Visit Live SiteTechnical Architecture
Calm UI System
Utilizing CSS variables and native browser APIs to manage theming without relying on heavy external design libraries.
Static Deployment
Deployed strictly as static assets, leveraging CDN caching for near-instant global delivery.
Obstacles & Solutions
Obstacle 1: Theming Flashes on Load
The Issue: When implementing the light/dark mode toggle, users experienced a jarring flash of white before the dark theme script kicked in because the browser painted the default styles first.
The Solution: I moved a tiny synchronous JavaScript snippet into the <head> block to read localStorage and system preferences, appending a data attribute to the root HTML element before the browser rendered anything. This eliminated the flash completely.
Obstacle 2: Bloat vs. Functionality
The Issue: Modern features often push developers towards using heavy JavaScript frameworks like React, which would destroy the "immediate and calm" feeling required for cup.pm.
The Solution: I strictly limited the project to vanilla technologies. By leveraging CSS Grid for complex layouts and standard web APIs for interactions, I matched modern functionality while keeping the payload under 50kb.