Tony Nguyen - Portfolio Website

A modern React-based portfolio website showcasing Tony Nguyen's work and skills.

🚀 Recent Updates (December 2024)

This project has been successfully migrated from Create React App to Vite for improved performance and development experience:

✅ Migration to Vite

• Build Tool: Migrated from react-scripts to Vite 5.4.19
• Development Server: Faster hot module replacement with Vite
• Build Performance: Significantly faster build times
• File Extensions: Updated all React components to use .jsx extension
• Build Output: Changed from build/ to dist/ directory

🚀 Previous Updates (June 2024)

This project has been successfully updated to use the latest Node.js and React versions:

✅ What Was Updated

• Node.js: Now using v22.16.0 (latest LTS)
• React: Upgraded from 16.10.2 to 18.2.0
• Bootstrap: Upgraded from 4.3.1 to 5.3.2
• jQuery: Upgraded from 3.5.0 to 3.7.1
• Popper.js: Replaced with @popperjs/core 2.11.8
• gh-pages: Upgraded from 3.1.0 to 6.1.0

🔒 Security Improvements

• Reduced vulnerabilities: From 725 to just 4 (99.4% reduction!)
• Critical vulnerabilities: Eliminated all 76 critical security issues
• High vulnerabilities: Reduced from 389 to 1
• Code quality: Fixed ESLint warnings and improved accessibility

🛠️ Technical Improvements

• React 18: Now using modern createRoot API
• Strict equality: Replaced == with === throughout codebase
• Accessibility: Added proper alt attributes to all images
• Security: Added rel="noreferrer" to external links
• Node.js version: Specified minimum Node.js 18.0.0 requirement

📋 Prerequisites

• Node.js: >= 18.0.0 (recommended: 22.16.0)
• npm: >= 8.0.0
• Yarn: >= 1.22.0 (optional, npm works too)

🚀 Getting Started

1. Clone the repository

   git clone https://github.com/tonynguyenit18/tonynguyenit18.github.io.git
   cd tonynguyenit18.github.io

2. Install dependencies

   yarn install
   # or
   npm install

3. Start development server

   yarn dev
   # or
   npm run dev

4. Open your browser Navigate to http://localhost:3000

📦 Available Scripts

• yarn dev - Runs the app in development mode with Vite
• yarn build - Builds the app for production
• yarn preview - Preview the production build locally
• yarn deploy - Builds and deploys to GitHub Pages
• yarn lint - Runs ESLint to check code quality
• yarn lint:fix - Automatically fixes ESLint issues

🏗️ Project Structure

src/
├── components/          # React components
│   ├── App.jsx         # Main application component
│   ├── Footer.jsx      # Footer component
│   ├── Portfolio.jsx   # Portfolio section
│   └── Teches.jsx      # Technologies section
├── css/                # Stylesheets
├── images/             # Static images
└── index.jsx           # Application entry point

🌐 Deployment

The site is deployed to GitHub Pages at: http://tonynguyenit.github.io

To deploy updates:

yarn deploy

🔧 Technologies Used

• React 18.2.0 - Modern React with hooks
• Vite 5.4.19 - Fast build tool and development server
• Bootstrap 5.3.2 - Responsive CSS framework
• jQuery 3.7.1 - JavaScript library

📱 Features

• Responsive Design - Works on all device sizes
• Modern UI - Clean and professional appearance
• Smooth Animations - Engaging user experience
• Portfolio Showcase - Displays projects and skills
• Social Links - Easy access to professional profiles

🤝 Contributing

1. Fork the repository
2. Create a feature branch (git checkout -b feature/amazing-feature)
3. Commit your changes (git commit -m 'Add amazing feature')
4. Push to the branch (git push origin feature/amazing-feature)
5. Open a Pull Request

📄 License

This project is private and proprietary.

👨‍💻 Author

Tony Nguyen

• GitHub: @tonynguyenit18
• LinkedIn: Tony Nguyen
• Medium: @tonynguyenit

---

Last updated: December 2024