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)

you scrolled all the way down here. i respect that. ✦

© 2026 abhi begur