159
This personal portfolio is made using Next.js and Tailwind CSS, with the goal of making it an interactive web application rather than a static showcase.
The site is split into two panels:
On the left, I implemented persistent navigation with keyboard shortcuts (H, A, E, P, U), live local time, social links, and a Firebase-powered like counter.
On the right, I built the core sections: About, an Experience/Education timeline with tabbed navigation, a Projects carousel with custom media-player style controls, and a real-time public chat modal that uses Firebase to store and sync messages while assigning random “Avengers-inspired” usernames.
Technically, I focused on:
Next.js (App Router) for structured layouts and SSR.
Framer Motion for performant animations and section transitions.
Firebase for persisting likes and powering real-time chat with snapshot listeners.
React hooks & context for state management.
Lazy loading + memorization for performance optimization.
Canvas + motion utilities for playful visuals like the Vegas-style cursor-following sphere and draggable floating tech-stack icons.
I designed the entire structure in Figma, then translated it into production with pixel-accurate Tailwind components, ensuring a balance between engineering depth and creative UX.
Built with