Mac Vu Anh Dai - Portfolio

A modern, responsive portfolio website built with React and TypeScript, showcasing professional projects and technical skills.

🚀 About

Professional portfolio website for Mac Vu Anh Dai, a full-stack developer from Vietnam. The site features a clean, modern design with dark/light theme support and showcases professional projects, technical skills, and contact information.

✨ Features

• Responsive Design - Optimized for desktop, tablet, and mobile devices
• Theme Toggle - Seamless dark/light mode switching with system preference detection
• Modern UI Components - Built with Radix UI and ShadCN components
• Project Showcase - Interactive portfolio section highlighting key projects
• Performance Optimized - Fast loading times with Vite bundler
• Type Safety - Full TypeScript implementation for better development experience

🛠️ Tech Stack

• Frontend Framework: React 19 - Modern web development library
• Language: TypeScript - Type-safe JavaScript
• Styling: Tailwind CSS - Utility-first CSS framework
• UI Components: ShadCN UI + Radix UI - Accessible component system
• Routing: React Router DOM - Client-side routing
• Build Tool: Vite - Next-generation frontend tooling
• Icons: Lucide React + React Icons
• Deployment: Vercel - Edge-optimized hosting

📁 Project Structure

portfolio/
├── public/                 # Static assets
├── src/
│   ├── assets/            # Images, fonts, and media files
│   ├── components/        # Reusable UI components
│   │   ├── ui/           # ShadCN UI component library
│   │   ├── navbar.tsx    # Navigation component
│   │   ├── footer.tsx    # Footer component
│   │   └── ...           # Other shared components
│   ├── lib/              # Utility functions and custom hooks
│   ├── pages/            # Page components for routing
│   │   ├── home.tsx      # Main landing page
│   │   └── project.tsx   # Projects showcase page
│   ├── App.tsx           # Root application component
│   ├── main.tsx          # Application entry point
│   └── index.css         # Global styles and Tailwind imports
├── package.json          # Project dependencies and scripts
├── tailwind.config.js    # Tailwind CSS configuration
├── tsconfig.json         # TypeScript configuration
├── vite.config.ts        # Vite build configuration
└── vercel.json           # Vercel deployment configuration

🚀 Getting Started

Prerequisites

• Node.js (v18 or higher)
• npm or yarn package manager

Installation

1. Clone the repository

   git clone https://github.com/penguninn/portfolio.git
   cd portfolio

2. Install dependencies

   npm install

3. Start development server

   npm run dev

4. Open your browser Navigate to http://localhost:5173 to view the application.

Available Scripts

npm run dev      # Start development server with hot reload
npm run build    # Create optimized production build
npm run preview  # Preview production build locally
npm run lint     # Run ESLint for code quality checks

🌟 Key Highlights

• Clean Architecture - Well-organized component structure for maintainability
• Accessibility First - Built with WCAG guidelines using Radix UI primitives
• Performance - Optimized bundle size and loading performance
• Developer Experience - TypeScript, ESLint, and modern tooling
• SEO Ready - Proper meta tags and semantic HTML structure

📧 Contact & Connect

Mac Vu Anh Dai - Full-Stack Developer

• Email: davidmva200x@gmail.com
• LinkedIn: david200x
• Twitter: david200x_
• GitHub: penguninn

📄 License

This project is licensed under the MIT License - see the LICENSE file for details.

---

⭐ Like this project? Give it a star and feel free to fork or contribute!