Okay, good question
What Is
This, Exactly?
Glad you asked. Buckle up, this one's a bit of a story.
The honest why
I want to work closer to the product. So I built one.
After years building alongside product teams, something became clear: I think like a product person, even when my title said otherwise. I obsess over details and care about the user experience more than my job description ever required.
So instead of just writing that on a resume, I built something to show it. This whole site is the project. Every design decision, every interaction, every line of code, and yes, the custom analytics tracking whether any of this actually works.
My product
This website
My clients
You (yes, you reading this right now)
My deliverable
A live analytics dashboard, built from scratch
Success metric
Whether this leads to an opportunity
Is it unconventional? A little. But whatever role brought you here, I'd like to think this says more than a resume ever could.
And if you're reading this page, the product worked. You're the user. Welcome. I'm glad you made it this far. Say hi →
Tech stack
Built with
- ▸
Next.js
Framework: App Router, server components
- ▸
TypeScript
Type safety across the whole codebase
- ▸
Tailwind CSS
Utility-first styling with a custom theme
- ▸
Framer Motion
All animations and scroll-triggered effects
- ▸
React Leaflet
Interactive travel map
- ▸
Supabase
Analytics database (stores all visitor event data)
- ▸
Claude AI
AI collaborator for design, code, and copy
- ▸
Vercel
Deployment and edge hosting
Under the hood
I built real analytics for this. No Google, no trackers.
I wanted to actually understand how people use this site. So I built the tooling to do that. It tracks page views, scroll depth, nav clicks, and even whether visitors find the easter eggs. All custom-built on top of Supabase, no third-party trackers, no cookies.
The goal is to close the feedback loop. If people are spending a lot of time on a specific project, that's a signal. Maybe I highlight that work more in a conversation, or put it front and center on my resume. If most visitors drop off before reaching a certain section, something isn't landing. The data tells me what's working and what to fix.
The results are public. You can see what the data says on the Insights page.
Design thinking
Key decisions
Dark with warmth
Most dark portfolios feel cold and a little intimidating. I wanted mine to feel like a warm evening, hence the terracotta accent, the near-black background, and the cream text. Intentional, not accidental.
DM Serif Display
The heading font does a lot of heavy lifting. Its editorial quality makes the portfolio feel crafted and considered, not like something spun up in an afternoon (even if parts of it were).
No JavaScript for layout
Everything structural (the grid, the timeline, the card sizing) is pure CSS. JavaScript (Framer Motion) is reserved for motion only. Fast by default, not by accident.
Easter eggs
The hover-name trick, the hidden dot, and the bottom message exist because I think portfolios should have a little personality. If you found them all, hi 👋.
“The best way to predict the future is to build it.”
Abraham Lincoln (probably not, but still)