Portfolio Site
In ProgressA personal portfolio website built with Next.js and Tailwind CSS to showcase my projects, blog posts, and professional experience. Features smooth page transitions using View Transitions API, an MDX-powered blog with syntax highlighting, dark mode, contact form with database persistence, and integrations with Spotify and GitHub APIs for live widgets.
Why I Built This
Every developer needs a home on the internet. I wanted a space that reflects my personality and technical skills — not just a template, but something I designed and built from scratch to tell my story.
Role
Solo Developer
Duration
Ongoing
Status
In Progress
Tech Stack
NextjsTailwind CSSTypeScriptPostgreSQLPrisma
Key Features
- MDX-powered blog with syntax highlighting and custom components
- Smooth page transitions using the View Transitions API
- Responsive design with dark mode and system preference detection
- Contact form with server-side validation and PostgreSQL persistence
- Spotify now-playing widget via the Spotify Web API
- GitHub contribution calendar integration
- SEO optimized with dynamic metadata and structured data
Challenges & Solutions
- Integrated the View Transitions API with Next.js App Router for seamless page-to-page animations
- Built a custom MDX pipeline that supports frontmatter, syntax highlighting, and embedded React components
- Optimized Lighthouse scores to 95+ across all categories through image optimization and code splitting
What I Learned
- View Transitions API and its integration with React frameworks
- MDX compilation pipeline and remark/rehype plugin ecosystem
- Building accessible, performant portfolio sites with modern tooling