🎨 Portfolio Minimaliste - Développeur Web Junior

Un portfolio moderne, sobre et élégant conçu pour mettre en valeur vos projets et compétences de développeur web. Ce template utilise Next.js, Tailwind CSS et Framer Motion pour offrir une expérience utilisateur fluide et performante.

✅ Note : Ce projet utilise Tailwind CSS v3.4 (stable) pour une compatibilité maximale.

✨ Caractéristiques

Design & UX

🎨 Design minimaliste avec palette de couleurs sombres et accents pastel
✨ Animations fluides avec Framer Motion (fade-in, slide, hover effects)
📱 100% Responsive - Mobile-first design
♿ Accessible - Navigation clavier, ARIA labels, contraste vérifié
🎯 SEO optimisé - Meta tags, structure sémantique

Sections

Hero : Présentation avec animations et liens sociaux
Projets : Cartes de projets avec images, technologies et liens
Compétences : Grille de compétences organisée par catégories
À propos : Parcours et motivations
Contact : Formulaire de contact avec validation RGPD

Technologies

⚛️ Next.js 15 - Framework React avec App Router
🎨 Tailwind CSS - Styling utilitaire et responsive
🎬 Framer Motion - Animations performantes
📦 TypeScript - Type-safety
🎯 React Icons - Bibliothèque d'icônes

🚀 Démarrage rapide

Prérequis

Node.js 18+ installé
npm ou yarn

Installation

Cloner ou télécharger le projet

git clone <votre-repo>
cd portfolio-test

Installer les dépendances

npm install

Lancer le serveur de développement

npm run dev

Ouvrir dans le navigateur

http://localhost:3000

📝 Personnalisation

1. Informations personnelles

Layout (`src/app/layout.tsx`)

Modifiez les métadonnées SEO :

export const metadata: Metadata = {
  title: "Portfolio | Votre Nom",
  description: "Votre description personnalisée",
  authors: [{ name: "Votre Nom" }],
  // ...
};

Page d'accueil (`src/app/page.tsx`)

Modifiez :

Le titre et la description dans la Hero section
Les liens vers vos réseaux sociaux (GitHub, LinkedIn, Email)
Le texte de la section "À propos"

2. Projets

Éditez src/data/projects.ts :

export const projects: Project[] = [
  {
    id: 'projet-1',
    title: 'Nom du projet',
    description: 'Description courte',
    stack: ['React', 'Node.js', ...],
    image: '/projects/mon-projet.jpg',
    githubUrl: 'https://github.com/...',
    demoUrl: 'https://...',
    featured: true,
    order: 1,
  },
  // ...
];

Ajout d'images :

Placez vos captures d'écran dans /public/projects/
Format recommandé : WebP (pour les performances)
Dimensions recommandées : 1200x800px

3. Compétences

Éditez src/data/skills.ts :

export const skills: Skill[] = [
  {
    id: 'react',
    name: 'React',
    category: 'frontend',
    icon: 'FaReact', // Nom de l'icône depuis react-icons
    level: 85,
    order: 1,
  },
  // ...
];

Icônes disponibles :

4. Couleurs et thème

Éditez tailwind.config.ts :

colors: {
  primary: {
    dark: '#0a0a0f',    // Fond principal sombre
    DEFAULT: '#14141f', // Fond par défaut
    light: '#1e1e2e',   // Fond clair
  },
  accent: {
    blue: '#6b9bd1',    // Accent bleu
    green: '#a8c5a7',   // Accent vert
    // ...
  },
}

5. Formulaire de contact

Par défaut, le formulaire est simulé. Pour l'activer :

Option A : FormSpree (gratuit, simple)

Créez un compte sur FormSpree
Obtenez votre endpoint
Dans src/components/ContactForm.tsx, remplacez :

const response = await fetch('https://formspree.io/f/YOUR_FORM_ID', {
  method: 'POST',
  headers: { 'Content-Type': 'application/json' },
  body: JSON.stringify(formData),
});

Option B : API Route Next.js

Créez src/app/api/contact/route.ts :

import { NextResponse } from 'next/server';

export async function POST(request: Request) {
  const data = await request.json();
  // Logique d'envoi d'email (Nodemailer, SendGrid, etc.)
  return NextResponse.json({ success: true });
}

6. Header & Footer

Header (`src/components/Header.tsx`)

Modifiez les liens de navigation
Changez le logo/texte

Footer (`src/components/Footer.tsx`)

Mettez à jour les liens sociaux
Ajoutez les mentions légales

🌐 Déploiement

Vercel (Recommandé)

Créer un compte sur Vercel
Connecter votre repo GitHub
Importer le projet
Déployer - C'est automatique !

Netlify

Créer un compte sur Netlify
Build command : npm run build
Publish directory : .next
Déployer

Variables d'environnement

Si vous utilisez une API ou des services externes :

# .env.local
NEXT_PUBLIC_FORMSPREE_ID=your_id
NEXT_PUBLIC_GA_ID=your_ga_id

📦 Structure du projet

portfolio-test/
├── public/
│   ├── projects/          # Images des projets
│   ├── robots.txt         # SEO
│   └── sitemap.txt        # Sitemap
├── src/
│   ├── app/
│   │   ├── layout.tsx     # Layout principal
│   │   ├── page.tsx       # Page d'accueil
│   │   └── globals.css    # Styles globaux
│   ├── components/
│   │   ├── Header.tsx     # En-tête
│   │   ├── Footer.tsx     # Pied de page
│   │   ├── ProjectCard.tsx # Carte projet
│   │   ├── SkillCard.tsx   # Carte compétence
│   │   └── ContactForm.tsx # Formulaire
│   └── data/
│       ├── projects.ts    # Données projets
│       └── skills.ts      # Données compétences
├── tailwind.config.ts     # Configuration Tailwind
├── next.config.ts         # Configuration Next.js
└── package.json

🎯 Optimisations

Performance

✅ Images optimisées avec next/image
✅ Code splitting automatique avec Next.js
✅ Lazy loading des animations
✅ CSS minifié en production

SEO

✅ Meta tags configurés
✅ Structure sémantique HTML
✅ Textes alt sur les images
✅ URLs sémantiques
✅ Robots.txt et sitemap

Accessibilité

✅ Navigation au clavier
✅ ARIA labels
✅ Contraste vérifié (WCAG AA)
✅ Focus visible

🔧 Commandes utiles

# Développement
npm run dev

# Build production
npm run build

# Démarrer en production
npm start

# Linter (Biome)
npm run lint

# Format du code
npm run format

🐛 Résolution de problèmes

Consultez le fichier TROUBLESHOOTING.md pour les problèmes courants et leurs solutions.

Problème résolu : Erreur Tailwind CSS v4 → Migration vers v3.4 stable ✅

📱 Intégration CMS (Future)

Ce projet est préparé pour intégrer un CMS headless :

Strapi

// src/data/projects.ts
export const getProjects = async (): Promise<Project[]> => {
  const res = await fetch('https://your-strapi.com/api/projects');
  return res.json();
};

Contentful

import { createClient } from 'contentful';

const client = createClient({
  space: 'your_space_id',
  accessToken: 'your_access_token',
});

📖 Ressources

🐛 Troubleshooting

Les animations ne fonctionnent pas

Vérifiez que 'use client' est présent en haut des composants utilisant Framer Motion
Effacez le cache : rm -rf .next && npm run dev

Les couleurs ne s'appliquent pas

Vérifiez tailwind.config.ts
Assurez-vous que les classes sont dans le content array

Erreurs TypeScript

Vérifiez que tous les types sont importés
Lancez npm run lint pour voir les erreurs

📄 Licence

Ce projet est libre d'utilisation pour votre portfolio personnel.

💬 Support

Pour toute question ou problème :

Consultez la documentation ci-dessus
Vérifiez les issues GitHub
Contactez-moi à [[email protected]]

Fait avec ❤️ par un développeur passionné

Name		Name	Last commit message	Last commit date
Latest commit History 6 Commits
.vscode		.vscode
public		public
src		src
.gitignore		.gitignore
README.md		README.md
biome.json		biome.json
next.config.ts		next.config.ts
package-lock.json		package-lock.json
package.json		package.json
postcss.config.mjs		postcss.config.mjs
tailwind.config.ts		tailwind.config.ts
tsconfig.json		tsconfig.json

Raphael77850/Mon-portfolio

Folders and files

Latest commit

History

Repository files navigation