---

📋 Table of Contents

• Overview
• Features
• Tech Stack
• Screenshots
• Project Structure
• Getting Started
• Available Scripts
• Deployment
• Contributing
• License
• Contact

---

🎯 Overview

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

---

✨ Features

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

---

🛠️ Tech Stack

📦 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

---

📸 Screenshots

---

📁 Project Structure

📦 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

---

🚀 Getting Started

Prerequisites

Before you begin, ensure you have the following installed:

• Node.js v18.0.0 or higher
• npm v9.0.0 or higher (or yarn / pnpm)

Installation

1️⃣ Clone the repository

git clone https://github.com/giasinguyen/GiaSi-Portfolio.git

2️⃣ Navigate to project directory

cd GiaSi-Portfolio

3️⃣ Install dependencies

npm install
# or
yarn install
# or
pnpm install

4️⃣ Start development server

npm run dev

5️⃣ Open in browser

http://localhost:5173

---

📜 Available Scripts

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

---

🌐 Deployment

This portfolio is configured for seamless deployment on Vercel:

Manual Deployment

# Build for production
npm run build

# Preview build locally
npm run preview

The dist/ folder contains the production-ready files.

---

🤝 Contributing

Contributions make the open-source community amazing! Any contributions are greatly appreciated.

1. Fork the Project
2. Create your Feature Branch

   git checkout -b feature/AmazingFeature
   

3. Commit your Changes

   git commit -m '✨ Add some AmazingFeature'
   

4. Push to the Branch

   git push origin feature/AmazingFeature
   

5. Open a Pull Request

---

📄 License

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...

---

📞 Contact

---