Construire un portfolio open-source moderne avec Nuxt 3 — thèmes CSS, données JSON, SEO automatique, et déploiement Docker.
On part d'un dépôt vide et on arrive à un portfolio qui tourne en local avec vos propres données.
git clone https://github.com/williamloree/OpenFolio.git
cd OpenFolio
npm installNode 20+ est requis. Pas de variables d'environnement à configurer — tout est statique.
npm run devNuxt démarre sur http://localhost:3000. Hot reload automatique : chaque modification d'un fichier .vue ou .json se reflète instantanément.
OpenFolio/
├── assets/
│ └── themes/ ← default.css, cyberpunk.css, forest.css, ocean.css
├── components/
│ ├── Header.vue
│ └── Footer.vue
├── pages/
│ ├── index.vue ← profil + hero
│ ├── projets.vue ← grille de projets filtrables
│ └── contact.vue ← formulaire de contact
├── public/
│ └── data/
│ ├── profile.json ← nom, bio, liens sociaux
│ ├── projects.json ← liste des projets
│ ├── experiences.json
│ ├── skills.json
│ └── education.json
├── utils/ ← fonctions utilitaires partagées
├── app.vue ← layout racine
└── nuxt.config.ts ← config Nuxt + modules + thème actifLe principe est simple : tout le contenu vit dans /public/data/. Changer un projet, une expérience, ou une compétence = éditer un fichier JSON. Aucun code Vue à toucher.
Ouvrez public/data/profile.json et remplacez les valeurs :
{
"name": "Votre Nom",
"username": "@votre-pseudo",
"title": "Développeur Full-Stack",
"bio": "Une phrase qui décrit ce que vous faites.",
"avatar": "/images/avatar.jpg",
"location": "Paris, France",
"available": true,
"social": [
{ "type": "github", "url": "https://github.com/votre-pseudo", "label": "GitHub" },
{ "type": "linkedin", "url": "https://linkedin.com/in/votre-pseudo", "label": "LinkedIn" }
]
}Le champ available affiche un badge vert "Disponible" sur le profil — pratique quand on cherche du travail.
Dans nuxt.config.ts, une seule ligne contrôle le thème actif :
css: ['~/assets/themes/ocean.css'], // ou default, cyberpunk, forestLes quatre thèmes disponibles :
default.css — sombre, bleu/violetcyberpunk.css — noir + néonforest.css — tons vertsocean.css — bleus apaisantsOn verra comment le système de thèmes fonctionne en détail au chapitre 4.