Personal portfolio website built with Nuxt 3, featuring a modern dark/neon design, multilingual support, and smooth scroll animations.
Live: benmacha.tn
- Framework: Nuxt 3 (Static Site Generation)
- Styling: Tailwind CSS with custom dark/neon design system
- i18n: @nuxtjs/i18n — French (default), English, Arabic (RTL)
- Icons: Lucide Vue Next
- Fonts: Inter + Space Grotesk via @nuxtjs/google-fonts
- Dark Mode: @nuxtjs/color-mode (dark by default)
- Deployment: GitHub Pages via GitHub Actions
- Dark/light mode with neon green accent theme
- Trilingual support (FR / EN / AR) with full RTL layout for Arabic
- Scroll-reveal animations using Intersection Observer
- Particle canvas background on hero section
- Responsive design with mobile navigation
- Page transitions between routes
- SEO optimized with meta tags, sitemap, and canonical URLs
- Static site generation for fast loading
| Route | Description |
|---|---|
/ |
Home — Hero, experience preview, skills, projects, education highlights |
/experience |
Full work experience timeline |
/skills |
Technical skills organized by category |
/projects |
Open source projects showcase |
/education |
Education, internships, and interests |
- Node.js >= 20.12 (required —
node:util.styleTextis used by dependencies) - npm or pnpm
# Install dependencies
npm install
# Start dev server (http://localhost:3000)
npm run dev
# Generate static site
npm run generate
# Preview the generated site
npm run preview├── assets/css/ # Global styles and CSS variables
├── components/ # Vue components (header, footer, sections, UI)
├── composables/ # Reusable composition functions (scroll reveal)
├── data/ # Static data (skills, social links)
├── i18n/locales/ # Translation files (en.json, fr.json, ar.json)
├── layouts/ # Nuxt layouts (default with header/footer)
├── pages/ # File-based routing
├── public/ # Static assets (CV.pdf, logo.jpeg)
├── nuxt.config.ts # Nuxt configuration
└── tailwind.config.ts # Tailwind theme customization
The site auto-deploys to GitHub Pages on push to main via the workflow in .github/workflows/deploy.yml. It uses nuxt generate to produce static HTML files.
MIT