Skip to main content

​
Installation

Clone the repository and install dependencies to get started with the portfolio.
1

Clone the Repository

First, clone the portfolio repository from GitHub:
git clone https://github.com/LuaanNguyen/portfolio.git
cd portfolio
2

Install Dependencies

Install the required packages using your preferred package manager:
npm install
This project uses Next.js 15, React 18, and Tailwind CSS 3. All dependencies are listed in package.json.
3

Start Development Server

Launch the development server with hot reload:
npm run dev
Your portfolio will be available at http://localhost:3000

​
Docker Setup

Run the portfolio in a containerized environment for consistent development and production deployments.

​
Production Build

Build and run the optimized production container: 
docker build -t luan/portfolio .
docker run --rm -p 3000:3000 luan/portfolio
The application will be accessible at http://localhost:3000

​
Development with Hot Reload

For active development with file watching and hot reload: 
docker compose -f docker-compose.dev.yml up
The development container mounts your local files as volumes, so changes are reflected immediately without rebuilding.
The docker-compose.dev.yml configuration:
  • Uses Node 18 Alpine for a lightweight environment
  • Exposes port 3000
  • Mounts your source code with hot reload enabled
  • Automatically installs dependencies on startup

​
Project Structure

Understanding the key directories and files in your portfolio: 
portfolio/
├── src/
│   ├── app/
│   │   ├── components/       # Reusable UI components
│   │   │   ├── sections/     # Main section components
│   │   │   ├── blog/         # Blog-related components
│   │   │   └── ui/           # UI utilities (Loader, Spotlight)
│   │   ├── blog/             # Blog pages and routing
│   │   ├── layout.tsx        # Root layout with metadata
│   │   ├── page.tsx          # Home page
│   │   └── globals.css       # Global styles
├── public/                   # Static assets (images, icons)
├── data/                     # Content data files
├── lib/                      # Utility functions
├── next.config.mjs           # Next.js configuration
├── tailwind.config.ts        # Tailwind CSS configuration
└── package.json              # Dependencies and scripts
The portfolio uses the Next.js App Router with the src/app directory structure.

​
First Steps

After installation, customize the portfolio to make it your own:
1

Update Metadata

Edit src/app/layout.tsx to update site metadata, SEO settings, and social media cards:
src/app/layout.tsx
export const metadata: Metadata = {
  metadataBase: new URL("https://luannguyen.net"),
  title: "Luan Nguyen",
  description: "Software Engineer",
  keywords: ["Luan Nguyen", "Software Engineer", "AI/ML", "Cloud Computing"],
  // ... update with your information
};
2

Configure Components

Modify the main sections in src/app/page.tsx:
src/app/page.tsx
<main className="w-screen max-w-[1600px] mx-auto pt-6 px-32 grid grid-cols-6 grid-rows-8">
  <ProfileCard />
  <ExperienceItem />
  <Projects onSetExperienceSection={handleSetExperienceSection} />
  <ProgrammingLanguages />
  <GithubContributions />
  <SpotifyAlbum />
  <Footer />
</main>
Customize or remove sections based on your needs.
3

Customize Styling

Update the Tailwind theme in tailwind.config.ts:
tailwind.config.ts
colors: {
  spotify: {
    green: "#1DB954",
    black: "#191414",
    white: "#FFFFFF",
    grey: "#B3B3B3",
  },
},
Adjust colors, animations, and extend the theme to match your design preferences.
4

Add Your Content

  • Replace profile images in /public
  • Update experience data in /data
  • Add blog posts (MDX format) in the blog directory
  • Configure external integrations (GitHub, Spotify, etc.)

​
Available Scripts

The portfolio includes these npm scripts for development and production:
ScriptCommandDescription
devnext devStart development server with hot reload
buildnext buildCreate optimized production build
startnext startRun production server
lintnext lintCheck code for linting errors

​
Key Technologies

This portfolio is built with modern web technologies:
  • Next.js 15 - React framework with App Router and standalone output
  • React 18 - UI library with Server Components support
  • Tailwind CSS 3 - Utility-first CSS framework with custom Spotify theme
  • TypeScript 5 - Type-safe development
  • Framer Motion - Animation library for smooth interactions
  • Vercel Analytics & Speed Insights - Performance monitoring
The project uses Next.js standalone output mode for optimized Docker deployments. Ensure your hosting environment supports this configuration.

​
Next Steps

Components

Explore available components and how to customize them

Styling

Learn about the Tailwind configuration and theme customization

Blog

Understand the blog system and create your own posts

Deployment

Deploy your portfolio to production with Docker, Vercel, or AWS

Build docs developers (and LLMs) love

Get started for freeTalk to us