- Overview
- Features
- Tech Stack
- Screenshots
- Project Structure
- Getting Started
- Available Scripts
- Deployment
- Contributing
- License
- Contact
Welcome to my Personal Developer Portfolio — a meticulously crafted website that showcases my journey, skills, and projects as a Full Stack Developer. This portfolio is more than just a resume; it's an interactive experience built with cutting-edge web technologies.
| ⚡ | Lightning Fast | Powered by Vite 6 with optimized bundle splitting and lazy loading |
| 📱 | Fully Responsive | Pixel-perfect design from mobile devices to ultra-wide screens |
| 🎨 | Stunning Animations | Smooth transitions with Framer Motion & GSAP |
| 🌙 | Dark/Light Mode | System-aware theme with seamless switching |
| ♿ | Accessible | WCAG compliant with keyboard navigation support |
| Feature | Description |
|---|---|
| 🌌 3D Particle System | Interactive particle backgrounds that respond to mouse movements |
| 🔷 Geometric Animations | CSS-powered floating shapes with smooth parallax effects |
| 🖱️ Custom Cursor | Unique cursor that transforms on hover states |
| 🎭 Page Transitions | Cinematic transitions between routes using Framer Motion |
| 🌓 Theme Switching | Smooth dark/light mode with persistent localStorage |
| ✨ Micro-interactions | Delightful hover effects and button animations |
| Component | Description |
|---|---|
| 📄 PDF Resume Viewer | View resume directly in-browser with zoom & download options |
| 📊 GitHub Calendar | Real-time contribution graph integration |
| 📬 Contact Form | EmailJS/Formspree powered form with validation |
| 🏷️ Project Filtering | Dynamic category-based project showcase |
| ⌨️ Typewriter Effect | Engaging animated text on hero section |
| 📱 Mobile Navigation | Slide-out menu with gesture support |
| Feature | Description |
|---|---|
| ⚡ Code Splitting | Automatic chunk optimization with Vite |
| 🖼️ Lazy Loading | Images and components load on-demand |
| 🔍 SEO Optimized | Meta tags, Open Graph, and structured data |
| 📊 Performance Monitor | Built-in performance tracking utilities |
| 🗜️ Optimized Assets | Compressed images and minified code |
📦 Full Dependencies List
| Package | Version | Description |
|---|---|---|
react |
^19.0.0 | UI Library |
react-dom |
^19.0.0 | React DOM renderer |
react-router-dom |
^7.7.0 | Client-side routing |
framer-motion |
^12.9.2 | Animation library |
gsap |
^3.12.7 | Advanced animations |
tailwindcss |
^4.1.8 | Utility-first CSS |
zustand |
^5.0.3 | State management |
react-hook-form |
^7.56.1 | Form handling |
react-pdf |
^9.2.1 | PDF viewer |
react-github-calendar |
^4.5.6 | GitHub contributions |
lucide-react |
^0.525.0 | Icon library |
react-icons |
^5.5.0 | Additional icons |
sonner |
^2.0.3 | Toast notifications |
emailjs-com |
^3.2.0 | Email service |
📦 GiaSi-Portfolio
├── 📂 public/
│ ├── 📄 manifest.json # PWA manifest
│ ├── 📄 sw.js # Service worker
│ └── 📂 documents/ # PDF files
│
├── 📂 src/
│ ├── 📂 components/
│ │ ├── 📂 About/ # About section
│ │ │ ├── About.jsx
│ │ │ └── GitHubContributions.jsx
│ │ │
│ │ ├── 📂 Contact/ # Contact form
│ │ │ └── Contact.jsx
│ │ │
│ │ ├── 📂 Home/ # Landing page
│ │ │ ├── Home.jsx
│ │ │ ├── HeroModel.jsx
│ │ │ ├── MobileHome.jsx
│ │ │ └── TypeWriter.jsx
│ │ │
│ │ ├── 📂 Layout/ # Layout components
│ │ │ ├── 📂 Background/ # Visual effects
│ │ │ ├── 📂 Mobile/ # Mobile-specific
│ │ │ ├── 📂 Navigation/ # Navbar & Footer
│ │ │ ├── 📂 Utilities/ # Helpers
│ │ │ └── 📂 Viewers/ # PDF viewers
│ │ │
│ │ ├── 📂 Projects/ # Project showcase
│ │ ├── 📂 Resume/ # Resume viewer
│ │ ├── 📂 TechStack/ # Skills display
│ │ └── 📂 UI/ # Reusable UI
│ │
│ ├── 📂 context/ # React contexts
│ ├── 📂 data/ # Static data (JSON)
│ ├── 📂 hooks/ # Custom hooks
│ ├── 📂 utils/ # Utility functions
│ │
│ ├── 📄 App.jsx # Root component
│ ├── 📄 App.css # Global styles
│ ├── 📄 main.jsx # Entry point
│ └── 📄 index.css # Base styles
│
├── 📄 index.html # HTML template
├── 📄 vite.config.js # Vite configuration
├── 📄 tailwind.config.js # Tailwind configuration
├── 📄 eslint.config.js # ESLint rules
├── 📄 vercel.json # Vercel deployment
└── 📄 package.json # Dependencies
Before you begin, ensure you have the following installed:
- Node.js
v18.0.0or higher - npm
v9.0.0or higher (or yarn / pnpm)
1️⃣ Clone the repository
git clone https://github.com/giasinguyen/GiaSi-Portfolio.git2️⃣ Navigate to project directory
cd GiaSi-Portfolio3️⃣ Install dependencies
npm install
# or
yarn install
# or
pnpm install4️⃣ Start development server
npm run dev5️⃣ Open in browser
http://localhost:5173
| Script | Command | Description |
|---|---|---|
| 🔧 Dev | npm run dev |
Start development server with HMR |
| 🏗️ Build | npm run build |
Create production build |
| 👁️ Preview | npm run preview |
Preview production build locally |
| 🔍 Lint | npm run lint |
Run ESLint and auto-fix issues |
| 🧹 Clean | npm run clean |
Remove dist and cache folders |
| 📦 Build Prod | npm run build:prod |
Clean + Production build |
This portfolio is configured for seamless deployment on Vercel:
# Build for production
npm run build
# Preview build locally
npm run previewThe dist/ folder contains the production-ready files.
Contributions make the open-source community amazing! Any contributions are greatly appreciated.
- Fork the Project
- Create your Feature Branch
git checkout -b feature/AmazingFeature
- Commit your Changes
git commit -m '✨ Add some AmazingFeature' - Push to the Branch
git push origin feature/AmazingFeature
- Open a Pull Request
This project is licensed under the MIT License - see the LICENSE file for details.
MIT License
Copyright (c) 2025 Gia Si Nguyen
Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software...
Built with ❤️ and ☕ by Gia Si Nguyen
© 2025 All Rights Reserved
© 2025 All Rights Reserved