A modern, responsive portfolio website built with Next.js 15 and React 19, showcasing projects, skills, and professional experience. Features smooth animations, dark mode support, and a clean, professional design.
- 🎨 Modern UI/UX Design - Clean, professional interface with smooth animations
- 🌙 Dark Mode Support - Seamless theme switching with system preference detection
- 📱 Fully Responsive - Optimized for all devices and screen sizes
- ⚡ High Performance - Built with Next.js 15 for optimal speed and SEO
- 🎭 Smooth Animations - Powered by Framer Motion for engaging interactions
- 📄 Project Showcase - Filterable project gallery with detailed information
- 📋 Resume Display - Interactive resume section with experience and skills
- 📧 Contact Form - Easy way for visitors to get in touch
- ♿ Accessible - Built with accessibility best practices using Radix UI
- Next.js 15 - React framework with App Router
- React 19 - Latest React features and improvements
- TypeScript - Type-safe development
- Tailwind CSS 4 - Utility-first CSS framework
- ShadCN UI - High-quality component library
- Radix UI - Accessible component primitives
- Framer Motion - Animation library for React
- Lucide React - Beautiful icon library
- next-themes - Dark mode implementation
- ESLint - Code linting
- TypeScript - Static type checking
- Prettier - Code formatting
-
Clone the repository
git clone https://github.com/loimtran/portfolio.git cd portfolio -
Install dependencies
npm install # or yarn install # or pnpm install
-
Run the development server
npm run dev # or yarn dev # or pnpm dev
-
Open your browser Navigate to http://localhost:3000
npm run dev- Start development servernpm run build- Create production buildnpm run start- Start production servernpm run lint- Run ESLint
portfolio/
├── app/ # Next.js App Router pages
│ ├── about/ # About page
│ ├── contact/ # Contact page
│ ├── projects/ # Projects listing page
│ ├── resume/ # Resume page
│ ├── layout.tsx # Root layout
│ └── page.tsx # Home page
├── src/
│ ├── components/ # React components
│ │ ├── layout/ # Layout components (Header, Footer, etc.)
│ │ ├── sections/ # Section components (ProjectCard, etc.)
│ │ └── ui/ # Reusable UI components
│ ├── data/ # Data files (projects, resume)
│ └── lib/ # Utility functions
├── public/ # Static assets
└── tailwind.config.ts # Tailwind configuration
Edit src/data/projects.ts to add or modify projects:
{
id: "project-id",
title: "Project Title",
description: "Short description",
longDescription: "Detailed description",
image: "/images/project-image.jpg",
technologies: ["Next.js", "React", "TypeScript"],
category: "Full Stack",
featured: true,
liveUrl: "https://example.com",
githubUrl: "https://github.com/username/repo",
period: "Jan 2024 – Present",
highlights: [
"Key achievement 1",
"Key achievement 2"
]
}Edit src/data/resume.json to update your resume information.
The project uses Tailwind CSS. Customize colors, fonts, and other design tokens in tailwind.config.ts.
- Push your code to GitHub
- Import your repository on Vercel
- Vercel will automatically detect Next.js and deploy
The project can be deployed to any platform that supports Next.js:
- Netlify - Connect your GitHub repository
- AWS Amplify - Deploy with AWS
- Railway - Simple deployment platform
- Docker - Containerize and deploy anywhere
This project is open source and available under the MIT License.
Loi Minh Tran
- Email: loi.tran.dev@gmail.com
- Website: loi.tran.dev
- GitHub: @loimtran
- LinkedIn: loimtran
- Dev.to: @loimtran
- Next.js - The React Framework
- ShadCN UI - Beautiful component library
- Framer Motion - Animation library
- Tailwind CSS - CSS framework
- Radix UI - Accessible component primitives
If you find this project helpful, please give it a ⭐ on GitHub!
Built by Loi Mihn Tran using Next.js and React