Modern, multilingual portfolio built with React + Vite, featuring smooth animations and production-ready SEO optimization.

• 🌍 Multilingual - English (default), Portuguese, Japanese with automatic detection
• 📱 Fully Responsive - Mobile-first design with fluid animations
• 🎭 Rich Animations - GSAP and Framer Motion integrations
• 🔍 SEO Optimized - Hybrid system: static HTML for crawlers + dynamic meta tags
• 📱 Social Media Ready - Open Graph, Twitter Cards with multilingual support
• ⚡ Performance Focused - Code splitting, lazy loading (~300KB gzipped)
• ♿ Accessible - WCAG 2.1 AA compliant with keyboard navigation
• 🎨 Modern Stack - React 18, Vite 5, SCSS, React Router v7

# Install dependencies
npm install

# Start development server
npm run dev

# Build for production
npm run build

# Preview production build
npm run preview

• React 18 - UI library
• Vite 5 - Build tool & dev server
• React Router DOM v7 - Client-side routing
• SCSS - Styling with responsive mixins

• Framer Motion - React animation library
• GSAP - Advanced scroll animations

• react-i18next - Translation management
• i18next-browser-languagedetector - Automatic language detection

• React Helmet Async - Dynamic meta tags
• Custom static HTML generator - Pre-rendered pages for crawlers
• nginx - Crawler detection & routing

• Formspree - Contact form backend

src/
├── components/          # Reusable components
│   ├── SEO.jsx         # Dynamic meta tags
│   ├── Router.jsx      # Client-side routing
│   ├── Navbar/         # Navigation component
│   ├── Social/         # Social media links
│   └── ...
├── pages/              # Page components
│   ├── Home/
│   ├── About/
│   ├── Portfolio/
│   └── Contact/
├── config/             # Configuration files
│   ├── constants.js    # Shared constants
│   └── internationalization/
├── data/               # Static data
│   └── projects.js     # Portfolio projects
├── utils/              # Utility functions
│   ├── languageUtils.js
│   ├── mixins.scss
│   └── variables.scss
└── assets/             # Images, icons, fonts

scripts/
├── generate-static-seo.mjs  # Static HTML generation
└── generate-sitemap.mjs     # XML sitemap generation

public/
├── og-image.png        # Social sharing (EN)
├── og-image-pt.png     # Social sharing (PT)
├── og-image-ja.png     # Social sharing (JA)
├── resume.pdf          # Resume file
├── robots.txt          # Crawler directives
└── site.webmanifest    # PWA manifest

The portfolio uses a hybrid SEO system:

1. For crawlers (Facebook, WhatsApp, Google): Pre-rendered static HTML pages with correct localized meta tags
2. For users: Full React SPA with dynamic meta tags via React Helmet

Why? Social media crawlers don't execute JavaScript, so dynamic meta tags don't work. The solution: nginx detects crawlers and serves them static pages.

Request to /pt/contact
        ↓
    nginx.conf (crawler detection)
        ↓
   Is crawler? ──Yes→ Serve /pt/contact/index.html (static)
        ↓
       No
        ↓
   Serve SPA → React Router → SEO.jsx (dynamic)

Production Build (gzipped):
├── vendor.js      141KB  (React + ReactDOM)
├── animations.js  179KB  (Framer Motion + GSAP)
├── i18n.js        81KB   (Internationalization)
├── main.js        121KB  (App core)
├── components.js  40KB   (Components)
└── utils.js       31KB   (Utilities)
────────────────────────────────────────
Total:             ~300KB

• ✅ Route-based code splitting with React.lazy()
• ✅ Vendor chunk separation
• ✅ Native image lazy loading
• ✅ Optimized Vite build configuration

# Development
npm run dev              # Start dev server (http://localhost:5173)

# Building
npm run build           # Build + generate sitemap + static SEO pages
npm run build:simple    # Build only (without post-build scripts)
npm run generate:sitemap # Generate sitemap.xml only
npm run preview         # Preview production build (http://localhost:4173)

Current Setup: CapRover with nginx

Also compatible with:

• Netlify
• Vercel
• Any static host with nginx/Apache configuration

Required Files:

• nginx.conf - Production nginx configuration
• Dockerfile - Container setup (CapRover)
• dist/ - Build output

None required! The app is fully static after build.

# Test production build locally
npm run build && npm run preview

# Test different languages
open http://localhost:4173/pt/contact
open http://localhost:4173/ja/about

# Test social media sharing
# Facebook: https://developers.facebook.com/tools/debug/
# Twitter: https://cards-dev.twitter.com/validator

1. Add project images to src/assets/portfolio/
2. Update src/data/projects.js:

   'new-project-id': {
     images: [newProjectImg],
     imagePositions: ['center top'],
     techs: ['React', 'Node.js'],
     link: 'https://...',
     repository: 'https://github.com/...'
   }

3. Add translations in all language files:

   {
     "projects": [
       {
         "id": "new-project-id",
         "title": "...",
         "description": "..."
       }
     ]
   }

Edit seo section in translation files:

{
  "seo": {
    "home": {
      "title": "...",
      "description": "...",
      "keywords": "..."
    }
  }
}

Run npm run build to regenerate static SEO pages.

Edit src/utils/variables.scss:

$dark: #242424;
$blue: #2bcab6;
$white: #ffffff;

Currently using Google Fonts (Space Grotesk). To self-host:

npm install @fontsource/space-grotesk

Update src/main.jsx:

import '@fontsource/space-grotesk/400.css'
import '@fontsource/space-grotesk/700.css'

Defined in src/utils/mixins.scss:

$breakpoints: (
  'mobile': 480px,
  'tablet': 768px,
  'tablet-landscape': 1024px,
  'desktop': 1024px,
  'large': 1400px
);

This is a personal portfolio, but you're welcome to:

• Report bugs via GitHub Issues
• Suggest improvements
• Use as inspiration for your own portfolio

MIT License - feel free to use this project as inspiration for your own portfolio.

• Framer Motion - Beautiful animations
• GSAP - Advanced scroll effects
• React Helmet Async - SEO meta tag management
• Formspree - Simple form backend

Built with ❤️ by Vitor Rita