The portfolio did not come first. I had written case studies for clients, shipped game builds, and deployed AI bots — but none of it lived in one place where a hiring manager or collaborator could scroll through and see the arc. The portfolio is the container. It had to feel like the work itself, not a résumé slapped onto a template.
The stack choices were deliberate. Astro 4 for the static backbone — every page ships zero JavaScript unless a React island needs it. Tailwind 3 for styling because I already knew the utility class system and did not want to write custom CSS for every section. TypeScript strict across the board. Framer Motion and GSAP for motion, Lenis for the scroll feel. Playwright for 27 smoke tests across three browser configurations.
The hero frames the practice in three verbs: design, build, and ship. Its headline enters word by word, the current desk names live products, and the two-state theme toggle persists without a flash.
The design tokens came before any layout. Ink, narra, gold, cream, stone, leaf — six colors pulled from the materials I grew up around. Narra furniture at my grandmother’s house, gold in the church retablo, leaf in the rice fields of Bay. Fraunces for display heads (slabby, warm, Filipino-print-weight) and Inter Tight for body. No interchangeable sans.
Writing the case studies in MDX meant I could treat content like code — version-controlled, typed with Zod schemas, sorted by a numeric order field. Each project gets a status badge (live, in-progress, archived), a cover image, a stack list, and as much prose as it needs. The [...slug].astro route renders them with a sticky sidebar and a cover image that scales on scroll via GSAP ScrollTrigger.
The interactive pieces are React islands loaded only where needed. The hero headline is a character-split GSAP animation. The work filter hides and shows cards with Framer Motion layout animations. There is a custom cursor follower, a magnetic hover effect on buttons, a 3D tilt on cards, a theme toggle that persists to localStorage, and a Konami Code easter egg that spawns a pixel sprite across the screen. Every animation checks prefers-reduced-motion first.
The dark mode is class-based — a theme script in the layout head reads localStorage or falls back to prefers-color-scheme before the first paint, so there is no flash. The marquee that scrolls tool names across the page uses pure CSS animation. The smooth scroll is Lenis with GSAP ScrollTrigger for the parallax sections.
The testing story is a single Playwright file that hits every route, checks every same-origin link resolves under 400, scrolls the full page to trigger reveal animations, freezes motion, and takes a full-page screenshot into test-results/. Three browser projects: Chrome desktop (1440×900), Chrome mobile (iPhone 13), Firefox desktop. Twenty-seven tests, all passing, every build.
Production deploys run through the Netlify CLI after a local build and browser check. The site publishes from dist/ as one atomic static deploy.
I built this because every project I finish needs somewhere to live that I control. A GitHub README is not a portfolio. A PDF is not a portfolio. A Behance page is not mine. This site is. Every case study on it was written in the same voice I am using right now — plain, specific, Filipino-rooted, dry.