Personal Portfolio Website

Next.js
React
Tailwind CSS
TypeScript
Vercel
31 Desember 2025
Personal Portfolio Website

This project is my personal portfolio website, built to showcase my skills in modern web development, backend principles, and DevOps practices. The website features multiple sections including about, projects, tech stack, blog preview, and resume, all designed to provide a comprehensive view of my work and technical expertise.

Key Features

  • Dynamic Theme Switching: Persistent light and dark mode with smooth transitions across all components using next-themes.
  • Server Components Architecture: Optimized performance by rendering static content on the server, reducing client-side JavaScript bundle size by ~40%.
  • Spotify Integration: Real-time music player displaying current or recent tracks, implemented with OAuth authentication, token refresh, and custom API routes.
  • Reusable Component Library: Cards, buttons, responsive containers, and animated elements with Framer Motion and Radix UI primitives.
  • Tech Stack Showcase: Categorized tools with grid/list view toggle, hover effects, and external link integration.

Development Process

  • Planning & Architecture: Requirement analysis, wireframes, and routing strategy.
  • Core UI & Layout: Built responsive pages with reusable components and Tailwind CSS.
  • Feature Implementation: Added Spotify API integration, dynamic theme, project showcase, and stack display system.
  • Optimization & Deployment: Lighthouse score 95+, SEO optimization, OG image generation, deployed with Vercel CI/CD.

Performance & Achievements

  • Lighthouse Performance: 95+
  • First Contentful Paint: <1.2s
  • Time to Interactive: <2.0s
  • Cumulative Layout Shift: <0.1
  • Bundle Size: ~120KB (gzipped)
  • Lines of Code: ~5,000+, fully TypeScript

Learnings & Future Enhancements

Through this project, I improved my understanding of Next.js 13 App Router, server components, API integration with OAuth, responsive design, accessibility, and CI/CD workflows. Future iterations may include a blog CMS, project search and filtering, newsletter integration, contact form, and PWA support.

Live Site: ghufronbagaskara.vercel.app