Personal Portfolio
My personal portfolio website — a fast, animated Next.js site built to showcase my projects, skills, and experience, with a fully custom design system, scroll-spy navigation, and dark/light theming.
Overview
This portfolio is a Next.js 16 site built from scratch with a fully custom design system rather than a template — its own color tokens, gradients, and glassmorphism cards for both a light and a dark theme, switchable instantly with no flash-of-wrong-theme on load.
Every section — Hero, About, Skills, Services, How I Work, Projects, Testimonials, Experience, Education, and Contact — is its own component and can be shown or hidden from a single config file, with the navbar automatically staying in sync. Scroll-spy highlights the active nav link as you scroll, and Framer Motion drives the reveal animations, hero visuals, and page transitions throughout.
The project detail pages support rich write-ups — overview paragraphs, stat chips, and grouped feature lists — plus image galleries, so each case study can go as deep as the project deserves.
Design & Theming
- Fully custom design system — gradients, glass-effect cards, and a coherent color palette shared across every section, with no UI template underneath.
- Instant light/dark theme toggle with no flash of the wrong theme on page load.
- Consistent, distinctive visual language across hero, cards, buttons, and section headings rather than default component styling.
Navigation & Interactivity
- Scroll-spy navigation bar that highlights the section currently in view, on both desktop and mobile.
- Smooth section-to-section navigation from the navbar, with the URL hash kept in sync.
- Framer Motion powers reveal-on-scroll animations, the hero visual, and subtle micro-interactions throughout the page.
Architecture & Content
- Section visibility is controlled from a single config file — flip one flag to show or hide a section, and its nav link disappears automatically too.
- Fully typed content model in TypeScript, so every project, skill, and experience entry is structured and type-checked.
- Rich project detail pages with overview paragraphs, stat highlights, grouped feature lists, and image galleries for deeper case studies.