Skip to main content
The portfolio website is built with a modular component architecture using Next.js 14, React, TypeScript, and Tailwind CSS. The design follows a Spotify-inspired aesthetic with a focus on interactivity and smooth animations.

​
Architecture

The component structure is organized into three main categories: Handle site navigation and responsive menu interactions
  • Primary navigation bar with social links
  • Mobile-responsive navigation menu
  • Dynamic routing support for multi-page navigation

​
Section Components

Display portfolio content in a grid-based layout
  • Profile information and personal statement
  • Professional experience timeline
  • Project showcases with interactive previews
  • Skills and technology stack visualization
  • GitHub contribution graphs
  • Spotify music integration

​
UI Components

Reusable animation and interaction elements
  • Typewriter text effects
  • Background gradients with animation
  • Sticky scroll reveals
  • Infinite moving carousels

​
Component Reference

Navigation

Primary and mobile navigation components with responsive design

Profile Card

Personal information display with animated gradient background

Projects

Sticky-scroll project showcase with interactive previews

Experience

Spotify-styled professional experience timeline

Skills

Infinite scrolling technology stack display

GitHub Contributions

Interactive contribution calendar integration

Spotify Album

Embedded Spotify player for music integration

Footer

Copyright and source code link footer component

Social Links

Social media icons with GitHub, LinkedIn, and X links

​
Technology Stack

All components are built with TypeScript for type safety and use Framer Motion for animations.
  • Framework: Next.js 14 (App Router)
  • Language: TypeScript
  • Styling: Tailwind CSS
  • Animation: Framer Motion
  • Icons: React Icons (Font Awesome, Heroicons, Lucide)
  • Image Optimization: Next.js Image component

​
Design System

The portfolio uses a custom Spotify-inspired color palette: 
// Tailwind theme colors
colors: {
  'spotify-green': '#1DB954',
  'spotify-dark-green': '#1AA34A',
  'spotify-black': '#191414',
  'spotify-light-dark': '#121212',
  'spotify-gray': '#282828',
  'spotify-grey': '#B3B3B3',
  'spotify-white': '#FFFFFF'
}

​
Grid Layout

The main portfolio page uses CSS Grid for responsive layout:
  • Desktop: 6-column grid with varying row spans
  • Tablet: Adapts to 4-column grid
  • Mobile: Single-column stack layout
Each section component is positioned using col-span, row-span, col-start, and row-start utilities for precise grid placement.

Build docs developers (and LLMs) love

Get started for freeTalk to us