The portfolio is the seventh project in the collection. It's not just a container for the other six, it's a project in its own right, with its own design language, its own interactions, and its own personality.
Where the six concept projects are products, the portfolio is a person. Warm, editorial, unhurried. It doesn't compete with the work. It frames it.
## Design Decisions
### Why Warm Editorial?
The six projects span quiet luxury, bohemian, technical, skeuomorphic, dark atmospheric, and Material Design. The portfolio needed to be "none of these", a neutral but warm frame that lets each project's personality shine through.
Terracotta on cream. Fraunces serif. Generous whitespace. The aesthetic of a well-designed magazine, thick paper, confident typography, no rush.
### Why Fraunces?
Fraunces is a variable font with an optical size axis, it gets more refined at larger sizes. At display sizes, it has the weight and personality of a classic serif. At body sizes, it's clean and readable. One font, two roles.
### Why Vanilla JS?
The portfolio is plain HTML/CSS/JS, no build step, no framework. Open `index.html` and it works. This is intentional: the portfolio should be as accessible as possible. No Node.js required. No `npm install`. Just the web.
## Impact
- Zero dependencies, pure HTML/CSS/JS
- 12 premium interactive features
- 6 case studies with unique accent colors
- Fully responsive with `prefers-reduced-motion` support
- Contact form with Formspree integration
## What I Learned
1. The portfolio is a project, not a container. It deserves the same care as the work it showcases.
2. Warm editorial works for portfolios. Terracotta on cream, serif headings, plenty of whitespace, it feels human.
3. Custom cursors are polarizing. The `pointer: coarse` check is essential.
4. Page loaders are vanity for static HTML, but they look cool.
5. Scroll reveal animations are the single most impactful feature for a portfolio.
Designed the landing page for Smug — an AI support agent that resolves tickets, knows exactly when to escalate to a human, and has zero interest in pretending otherwise.
Most AI support tools go the humble, over-apologetic route. Smug does the opposite — the whole brand is built around a smug little cat mascot and copy like "Handled it. You're welcome." It's a genuinely fun brief: figuring out how to make confidence read as charming instead of obnoxious.
Bold electric blue and orange instead of the usual muted SaaS palette, because a product this confident shouldn't look shy about it. 💙