Context
I’ve been doing more hands-on development at work, so I wanted to try applying new workflows I learned in a personal project without constraints.
Many portfolio sites tend to prioritize either aesthetics (often harder to maintain) or structure (but feel generic). I wanted to build a system that could do both.
Approach
Stack
- TypeScript
- Next.js
- Tailwind CSS
- Visual Studio Code
- Codex + ChatGPT (used as accelerators, not decision-makers)
Design Philosophy
I approached this project the same way I approach illustrations. I prefer to start with a rough visual direction, then refine in layers instead of fully wireframing upfront.
The initial goal was a clean, porcelain-inspired aesthetic. However, early versions were too corporate-looking, so I introduced hand-drawn doodles from my sketchbook to bring in some personality. I designed this site to evolve so that new visual elements can be added incrementally without disrupting the system.
Key Decisions
- Separated content from route composition to make updating copy and adding new case studies fast and low-friction.
- Introduced hand-drawn visual elements from my sketchbook to avoid the “template” portfolio look.
- Accepted the trade-off that the doodles may interfere with text blocks. I personally find the setup quite delightful, and it doesn't meaningfully impact readability. I’m aware it’s not strictly best practice, but it felt like the right trade-off for this project.
- Used server-side rendering for floating doodles to allow for easy updates and additions.
- Used MDX and separate files for content to enable writing-focused workflow instead of code-heavy updates.
Outcome
- A portfolio site that balances structure and personality.
- Flexible content system for adding case studies without friction.
- Maintainable architecture aligned with modern React patterns.
- New case studies can be added via MDX without modifying route logic.
Takeaways
- Strong system design decisions matter more than tooling.
- AI accelerates execution, but direction still determines quality (if I didn't apply any judgment in the process, my portfolio site would look way too generic).
- Maintainability should be designed upfront, not refactored in as an afterthought (this was the downfall of many previous iterations of my websites).