Portfolio Website

Being a generalist is often viewed as a double-edged sword.

Having spent the majority of my career in high-stress startup environments, I’ve had to wear many hats simultaneously. However, the high stakes of being a founder demanded that I quickly build deep competence in every discipline I tackled, proving that adaptability doesn’t have to sacrificing quality.

The core challenge when designing this portfolio website was figuring out how to showcase a wide variety of subjects while clearly communicating the high standards of my work and my specific contributions across these diverse projects and areas.

During the wire-framing phase, I recognized that different hiring managers are looking for specific skill sets. To solve this, I designed a tag filtering system tailored to direct recruiters to the exact projects relevant to the jobs they are hiring for.

A visually stunning portfolio website is empty without a compelling content. For the notable projects, I focused on presenting the actual process behind each final product, creating a transparent map of my different aspects of involvement. This allows viewers to immediately understand whether I was driving the product vision, overseeing strategy, or implementing technical executions.

I scaffolded the project with a CLAUDE.md and AGENTS.md documenting the stack conventions, media strategy, and the app-like navigation model. These load into every session so the agent never drifts from the project’s rules. A persistent memory directory captures preferences and corrections across conversations, so guidance I give once doesn’t need to be repeated.

For design-to-code work, I connected the Figma and Paper MCP servers — Claude reads node metadata, screenshots, and computed styles directly from my design files instead of guessing from images. The Notion MCP keeps project briefs and copy in sync between my writing workspace and the codebase, which is how this very page gets built. Playwright MCP gives the agent a real browser to verify interactions after implementing them.

Beyond the defaults, I lean on skills for specialized work — /motion and /css-spring for animation tuning, /frontend-design for component composition, /simplify for code review passes. Heavier exploration gets delegated to subagents so the main context stays focused on decisions rather than search output.

Keeping the landing page calm and navigation-first freed up room to invest motion where it actually serves the work.

To bridge the gap between navigation and project immersion, I built a dynamic interaction where hovering over a project triggers a rich, full-screen effect tied to that piece — visual feedback that mirrors the actual experience of the project before the user even clicks. The animation isn’t decoration laid on top of the gallery; it does the job a screenshot couldn’t.