A working lab of fictional brands and tools I designed and coded from scratch — storefronts, landing pages, static sites, and small systems. Each is a chance to build a distinct visual identity end to end. Everything here is a live, clickable demo.
← Back to portfolioBold contemporary streetwear label — oversized type, asymmetric lookbook grid, a single electric-blue slash motif.
Open demo →Warm gourmet pantry and fresh boxes — appetite-driven color blocking, forest-green bands, organic shapes, a build-a-box tool.
Open demo →Instrument-grade tech gear — graphite panels, hairline grid, monospace spec readouts, and a real side-by-side comparison table.
Open demo →Calm, data-forward SaaS with a bento feature grid, live mini-charts, and a monthly/annual pricing toggle.
Open demo →Optimistic mint fintech with CSS-drawn phone mockups, an app-screen tab switcher, and a hand-built QR code.
Open demo →Serif-led aubergine dark mode with a live draft-rewrite typewriter moment — deliberately not the neon AI cliché.
Open demo →Sports-editorial energy on a light base — huge condensed type, a phased 12-week program timeline, vermilion punches.
Open demo →Espresso-brown Poblacion café with a chalkboard-style ₱ menu, steaming SVG cup, and grain-textured warmth.
Open demo →Cobalt color-block developer conference — two-track schedule tabs, monogram speaker grid, live countdown.
Open demo →Ultra-quiet stone monochrome — an editorial project index of CSS-composed architectural forms and hairline precision.
Open demo →Sunny yellow + purple course page with an 8-module accordion curriculum, instructor block, and FAQ — all keyboard-accessible.
Open demo →Sand and deep-teal bands stitched with SVG wave dividers — impact count-ups and a ₱ donation-chip widget.
Open demo →Dark poster-energy beachfront festival — gradient logotype, typographic lineup hierarchy, drifting aurora glows.
Open demo →Eight interaction techniques in pure vanilla JS — lerped cursor follower, scroll-driven scenes, parallax, magnetic buttons, hover-reveal gallery, velocity marquee, sticky card stacks.
Open demo →Apple-style flagship phone page — a CSS-built handset that 3D-rotates on scroll through pinned chapters: camera zoom, display bloom, battery fill, chip traces. Three live colorways.
Open demo →A Manila studio site with an expanding project-ledger work index — six fictional case studies with real metrics, a typographic hero, and one ultramarine spent deliberately.
Open site →Docs architecture for a static-site CLI: sidebar nav, scroll-spy table of contents, copyable code blocks, Ctrl+K search modal, and a typing-terminal hero. The prototype that turned into a real project.
Open docs →A Filipino food-culture magazine organized by issues — two fully written feature essays, art-directed uneven grids, drop caps, pull quotes, and a reading-progress issue spine.
Open issue →The ideology as a system: log every build, watch the wall fill up. Streaks, stats, filters, search, edit/delete, JSON export/import — all real, persisted in your browser.
Open app →Every peso has an envelope: monthly budgets that drain as you spend, overspend warnings, month rollover, transactions, JSON export/import — all real, in your browser.
Open app →Move the work, see the work: drag-and-drop kanban with WIP limits that warn when you take on too much. Works by mouse, touch, and keyboard — all persisted locally.
Open app →A zero-dependency, open-source CSS framework on five native cascade layers: fluid type and spacing, a full component library, and a design-system generator that seeds a whole token system from a few brand colors and a fluid type scale, with a WCAG AA contrast guardrail. Install with npm i keelcss or link one CSS file — it drops into any stack: Astro, Vite/React, Next, WordPress, or plain HTML.