Gaétan - Full Stack Developer Portfolio

A modern, responsive personal portfolio website built with React, TypeScript, and TailwindCSS. Features multilingual support (English, French, Spanish) and a beautiful dark theme.

🚀 Features

• Multilingual Support: Easily switch between English, French, and Spanish
• Dark/Light Mode: Toggle between themes with smooth transitions
• Responsive Design: Fully responsive across all devices
• Smooth Animations: Powered by Framer Motion
• Modern UI: Built with shadcn/ui components
• SEO Optimized: Proper meta tags and semantic HTML

📋 Sections

• Hero: Eye-catching introduction with call-to-action buttons
• About: Professional bio with expandable content
• Skills: Categorized tech stack display
• Projects: Showcase of featured work
• Experience: Professional timeline and education
• Contact: Form and direct contact links
• Footer: Social links and copyright

🛠️ Tech Stack

• Framework: React 18 + Vite + TypeScript
• Styling: TailwindCSS + shadcn/ui
• Animations: Framer Motion
• Internationalization: react-i18next
• Icons: Lucide React
• Forms: React Hook Form + Zod

🌍 Adding/Editing Translations

Translation files are located in src/i18n/locales/:

• en.json - English
• fr.json - French
• es.json - Spanish

To add a new language:

1. Create a new JSON file in src/i18n/locales/ (e.g., de.json for German)
2. Copy the structure from en.json and translate all values
3. Import it in src/i18n/config.ts:

   import de from './locales/de.json';

4. Add it to the resources:

   resources: {
     en: { translation: en },
     fr: { translation: fr },
     es: { translation: es },
     de: { translation: de }, // Add this
   }

5. Add the language option to src/components/Navbar.tsx:

   { code: 'de', name: 'Deutsch', flag: '🇩🇪' }

✏️ Customization

Update Personal Information

1. Name & Title: Edit translations in src/i18n/locales/*.json under hero section
2. Projects: Update project data in src/components/Projects.tsx
3. Experience: Edit experience entries in translation files under experience section
4. Skills: Modify skill categories in src/components/Skills.tsx
5. Contact Links: Update social links in src/components/Contact.tsx and src/components/Footer.tsx

Change Colors

Edit src/index.css to modify the color scheme:

• --primary: Main accent color (default: cyan)
• --background: Background color
• --foreground: Text color

🚀 Development

# Install dependencies
npm install

# Start dev server
npm run dev

# Build for production
npm run build

# Preview production build
npm run preview

📝 Project Structure

src/
├── components/         # React components
│   ├── Navbar.tsx     # Navigation with language toggle
│   ├── Hero.tsx       # Hero section
│   ├── About.tsx      # About section
│   ├── Skills.tsx     # Skills showcase
│   ├── Projects.tsx   # Project grid
│   ├── Experience.tsx # Timeline & education
│   ├── Contact.tsx    # Contact form
│   └── Footer.tsx     # Footer
├── i18n/              # Internationalization
│   ├── config.ts      # i18n configuration
│   └── locales/       # Translation files
│       ├── en.json
│       ├── fr.json
│       └── es.json
├── pages/             # Page components
│   └── Index.tsx      # Main page
└── index.css          # Global styles & design system

📄 License

© 2025 Gaétan. All rights reserved.

---

Built with ❤️ using React, TypeScript, and TailwindCSS