Skip to main content
Portfolio Preview

​
Welcome to the Portfolio Documentation

This documentation covers the architecture, components, and deployment strategies for Luan Nguyen’s personal portfolio website. The site features a unique Spotify-inspired design with modern web technologies.

​
Key Features

Spotify-Inspired Design

Dark theme with green accents, grid-based layout, and smooth animations

Component Architecture

Modular, reusable React components with TypeScript for type safety

Lazy Loading

Optimized performance with lazy-loaded components and Suspense boundaries

Blog System

Markdown-based blog with gray-matter frontmatter and remark rendering

GitHub Integration

Live contribution graph with react-github-calendar

Spotify API

Currently playing or recently played album display

Docker Support

Production and development Docker configurations with hot reload

Analytics

Vercel Analytics and Speed Insights for performance monitoring

​
Technology Stack

The portfolio is built with cutting-edge technologies:
  • Framework: Next.js 15 with App Router
  • Language: TypeScript for type safety
  • Styling: TailwindCSS with custom Spotify-themed colors
  • UI Library: Aceternity UI components
  • Animations: Framer Motion for smooth transitions
  • Blog: Gray-matter + remark + remark-html
  • Deployment: Docker, Vercel, or AWS S3 + CloudFront

Get Started

Set up the portfolio locally in minutes

Components

Explore the component architecture

Deployment

Deploy with Docker, Vercel, or AWS

Reference

API reference and type definitions

​
Project Structure

The codebase follows Next.js 15 conventions with a clean, organized structure: 
portfolio/
├── src/
│   ├── app/
│   │   ├── components/       # React components
│   │   │   ├── sections/     # Main section components
│   │   │   ├── blog/         # Blog-related components
│   │   │   └── ui/           # Reusable UI components
│   │   ├── hooks/            # Custom React hooks
│   │   ├── blog/             # Blog page and post routes
│   │   ├── layout.tsx        # Root layout with metadata
│   │   └── page.tsx          # Home page
│   ├── content/
│   │   └── blog/             # Markdown blog posts
│   └── lib/                  # Utility functions
├── data/
│   ├── projects.ts           # Project showcase data
│   └── experience.ts         # Work experience data
├── public/                   # Static assets
├── tailwind.config.ts        # Tailwind configuration
└── next.config.mjs           # Next.js configuration

​
Design Philosophy

The portfolio embraces these principles:
Dark-First Design: The entire site is designed for dark mode, inspired by Spotify’s iconic dark interface with strategic use of green accents.
Performance Matters: Lazy loading, Suspense boundaries, and optimized images ensure fast load times and smooth interactions.
Type Safety: TypeScript is used throughout the codebase to catch errors early and improve developer experience.

​
What’s Next?

Ready to explore the portfolio codebase? Here’s where to go next:
1

Set up locally

Follow the quickstart guide to clone the repository and run the development server
2

Understand components

Learn about the component architecture and how sections are structured
3

Customize styling

Explore the Tailwind configuration and theme customization options
4

Deploy your version

Choose a deployment strategy that fits your needs

Build docs developers (and LLMs) love

Get started for freeTalk to us