Link

Fullstack Developer & Tech Enthusiast

• About
• Features
• Tech Stack
• Getting Started
• Project Structure
• Available Scripts
• Deployment
• Contributing
• License

This is my personal portfolio website showcasing my journey as a fullstack developer. Built with modern technologies, it features a responsive design, smooth animations, and multilingual support (English/Vietnamese).

Current Position: Fullstack Developer at Nvidia Corporation (Jan 2025 - Present)

• Responsive Design: Works seamlessly across all devices
• Multilingual Support: Available in English and Vietnamese
• Smooth Animations: Powered by Lottie and custom CSS animations
• Modern UI/UX: Clean, professional design with interactive elements
• Performance Optimized: Built with Vite for lightning-fast performance

• Hero Section: Eye-catching introduction with animated elements
• Introduction: Personal story and development philosophy
• Experience Timeline: Professional journey and achievements
• Skills Showcase: Technical expertise with visual representations

• Project Gallery: Curated selection of best works
• Tech Stack Display: Technologies used in each project
• Live Demos & Source Code: Direct links to deployments and repositories

• Detailed Biography: Personal and professional background
• Career Journey: From learning to professional development
• Interests & Hobbies: Beyond coding activities

• Language Toggle: Seamless switching between English/Vietnamese
• Dark/Light Theme: Comfortable viewing experience
• Smooth Scrolling: Enhanced navigation experience
• Loading Animations: Engaging user interactions
• SEO Optimized: Better search engine visibility

• React 18.3.1 - Modern JavaScript library for building user interfaces
• TypeScript 5.8.3 - Type-safe JavaScript with enhanced developer experience
• Vite 5.4.9 - Next-generation frontend tooling for fast development

• Bootstrap 5.3.3 - Responsive CSS framework
• React Bootstrap 2.10.5 - Bootstrap components for React
• Sass 1.77.6 - Enhanced CSS with variables and mixins
• Custom SCSS - Tailored animations and responsive design

• React Router DOM 6.27.0 - Declarative routing for React applications

• i18next 23.16.0 - Internationalization framework
• react-i18next 15.0.3 - React bindings for i18next
• i18next-browser-languagedetector 8.0.0 - Language detection
• i18next-http-backend 2.6.2 - Backend plugin for loading translations

• Lottie React 2.4.0 - Render After Effects animations
• React Parallax Tilt 1.7.246 - Smooth tilt hover effects
• React Fast Marquee 1.6.5 - Scrolling text animations
• Typewriter Effect 2.21.0 - Typing animation effects

• React Icons 5.3.0 - Popular icon libraries as React components

• ESLint 9.12.0 - Code linting and quality assurance
• TypeScript ESLint 8.38.0 - TypeScript-specific linting rules
• Vite TypeScript Paths 5.0.1 - Path mapping support

• Vercel - Optimized for seamless deployment and hosting

• Node.js (version 18 or higher)
• npm or yarn package manager
• Git for version control

1. Clone the repository

   git clone https://github.com/nvminh162/nvminh162-portfolio.git
   cd nvminh162-portfolio

2. Install dependencies

   npm install
   # or
   yarn install

3. Start development server

   npm run dev
   # or
   yarn dev

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

The application runs on port 3000 by default. You can modify this in vite.config.ts:

export default defineConfig({
  // ... other config
  server: {
    port: 3000, // Change this to your preferred port
  },
});

nvminh162-portfolio/
├── public/                     # Static assets
│   ├── locales/               # Translation files
│   │   ├── en/translation.json # English translations
│   │   └── vi/translation.json # Vietnamese translations
│   ├── nvminh162.jpg          # Profile image
│   └── vite.svg               # Vite logo
├── src/                       # Source code
│   ├── assets/                # Images, icons, and media files
│   │   ├── lottie/           # Lottie animation files
│   │   ├── project/          # Project screenshots
│   │   └── svg/              # SVG icons and graphics
│   ├── components/           # Reusable components
│   │   ├── context/          # React context providers
│   │   ├── layout/           # Layout components (header, footer)
│   │   ├── sections/         # Page sections (hero, about, skills)
│   │   └── share/            # Shared components
│   ├── helpers/              # Utility functions and data
│   ├── pages/                # Main pages (home, project, about)
│   ├── styles/               # Global styles and variables
│   ├── types/                # TypeScript type definitions
│   ├── i18n.ts              # Internationalization setup
│   ├── layout.tsx           # Main layout component
│   └── main.tsx             # Application entry point
├── docs/                     # Documentation and references
├── package.json             # Dependencies and scripts
├── tsconfig.json           # TypeScript configuration
├── vite.config.ts          # Vite configuration
├── vercel.json             # Vercel deployment config
└── README.md               # This file

• src/components/sections/: Contains all the main sections of the website (hero, introduction, experience, skills, etc.)
• src/helpers/data.ts: Centralized data management for experiences, projects, and app configuration
• public/locales/: Translation files for multilingual support
• src/assets/lottie/: Animation files for enhanced user experience
• src/styles/: Global SCSS files for consistent styling

# Start development
npm run dev

# Make your changes
# ...

# Check for linting issues
npm run lint

# Build for production
npm run build

# Preview production build
npm run preview

This project is optimized for Vercel deployment:

1. Connect your repository to Vercel

2. Configure build settings:

   • Build Command: npm run build
   • Output Directory: dist
   • Install Command: npm install

3. Deploy: Vercel will automatically deploy on every push to main branch

# Build the project
npm run build

# The dist/ folder contains the production build
# Upload contents to your hosting provider

If you need environment variables, create a .env file:

VITE_APP_NAME=NVMINH162 Portfolio
VITE_API_URL=your_api_url_here

• Global styles: src/styles/global.scss
• Variables: src/styles/variable.scss
• Animations: src/styles/animation.scss

• Personal data: src/helpers/data.ts
• Translations: public/locales/en/translation.json and public/locales/vi/translation.json
• Images: Replace files in src/assets/ and public/

Modify the CSS variables in src/styles/variable.scss to change the color scheme:

:root {
  --primary-color: #your-color;
  --secondary-color: #your-color;
  --background-color: #your-color;
}

Contributions are welcome! Please feel free to submit a Pull Request. For major changes, please open an issue first to discuss what you would like to change.

1. Follow the existing code style
2. Add comments for complex logic
3. Test your changes thoroughly
4. Update documentation if needed

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

• Design Inspiration: Modern portfolio designs and UX patterns
• Open Source Libraries: All the amazing libraries that make this project possible
• Community: Fellow developers who provided feedback and suggestions