Personal Portfolio Website
A cutting-edge personal portfolio featuring smooth animations, PWA capabilities, and an admin CMS with 2FA security. Built with Next.js 16 and React 19.
Overview
A modern, high-performance portfolio website designed to showcase my work as a Product Engineer. This project demonstrates advanced web development techniques including smooth scrolling animations, 3D interactions, progressive web app capabilities, and a fully-featured admin dashboard with enterprise-grade security.
The portfolio serves as both a showcase of my technical skills and a functional platform for managing content, featuring a custom-built CMS with AI-powered text optimization, two-factor authentication, and real-time content management capabilities.
The Challenge
Traditional portfolio websites often lack interactivity, suffer from poor performance, and require developer intervention for content updates. I needed a solution that would:
• Stand out with unique animations and interactions • Load instantly and work offline • Allow non-technical content management • Provide enterprise-level security for admin functions • Showcase hidden easter eggs to engage curious visitors • Support mobile installation as a Progressive Web App
Approach
Built a Next.js 16 application with:
1. Performance: Implemented code splitting, lazy loading, and image optimization (AVIF/WebP) 2. Animations: Used Framer Motion for 60fps smooth animations and Lenis for butter-smooth scrolling 3. Security: Integrated Supabase authentication with TOTP-based 2FA and Row Level Security policies 4. CMS: Created custom admin dashboard with AI text optimization using OpenAI API 5. PWA: Configured service workers for offline functionality and app installation 6. Design: Implemented Bento grid layout with 3D tilt interactions and dark theme 7. Easter Eggs: Added hidden features like consciousness mode, clipboard secrets, and exit messages
Tech Stack: Next.js 16.1, React 19.2, TypeScript, Tailwind CSS 4.1, Framer Motion 12, Supabase, Radix UI
Outcome
"• 100% Lighthouse Performance Score - Optimized for speed and accessibility • Sub-second Load Times - First Contentful Paint under 0.8s • PWA Ready - Installable on all platforms with offline support • Enterprise Security - Bank-level 2FA implementation with zero vulnerabilities • Fully Responsive - Seamless experience across mobile, tablet, and desktop • Content Management - Zero-downtime content updates via admin dashboard • Positive Engagement - Hidden easter eggs discovered by attentive visitors • Production Ready - Deployed on Vercel with automatic CI/CD pipeline • SEO Optimized - Structured data, meta tags, and semantic HTML • Accessible - WCAG compliant with keyboard navigation support"