portfolio

Portfolio — Ezziyara Adam

Portfolio full-stack construit avec Next.js 16, React 19, Tailwind CSS v4 et Framer Motion.

Démarrer

npm install
npm run dev

Ouvre http://localhost:3000.

Configuration (.env.local)

Crée un fichier .env.local à la racine du dossier portfolio/ :

# URL de production (pour le SEO, l'Open Graph, le sitemap)
NEXT_PUBLIC_SITE_URL=https://ton-domaine.com

# Formulaire de contact — crée un form gratuit sur https://formspree.io
# puis colle ici l'ID du formulaire (la partie après /f/)
NEXT_PUBLIC_FORMSPREE_ID=xxxxxxxx

Sans NEXT_PUBLIC_FORMSPREE_ID, le formulaire de contact affichera un message d’erreur invitant à envoyer un email direct. Les liens WhatsApp / Mail / LinkedIn continuent de fonctionner via le bouton « Get In Touch ».

Ajouter du contenu

• Projets : édite data/projects.js. Chaque projet a un slug, des infos de carte (card) affichées sur /projects, et des sections optionnelles affichées sur la page détail. Toutes les sections sont facultatives : ajoute-les au fur et à mesure. Remplace les TODO par ton vrai contenu.
• Images de projet : dépose tes images dans public/projects/ (ex. public/projects/finote.webp) en respectant les chemins définis dans card.image.
• Articles de blog : ajoute un objet dans data/posts.js.
• Expérience / À propos : édite data/about.js.

Structure

app/
  page.js                 → page d'accueil
  projects/               → liste + pages détail des projets
  blog/                   → liste + pages détail des articles
  about/                  → page à propos
  sitemap.js, robots.js   → SEO
components/                → composants réutilisables
data/                      → contenu (projets, articles, à propos)

Déploiement

Déploie sur Vercel : pense à définir les variables d’environnement NEXT_PUBLIC_SITE_URL et NEXT_PUBLIC_FORMSPREE_ID dans les réglages du projet.