🎨 Portfolio Daniel Vale

Portfolio personnel développé avec Next.js et React, mettant en valeur mes projets, expériences et compétences dans le développement web et l'ingénierie des médias.

🚀 À propos du projet

Ce portfolio représente ma première incursion dans l'écosystème React. Bien que familier avec Vue.js, j'ai choisi de relever le défi d'apprendre React et Next.js pour élargir mes compétences et découvrir une nouvelle approche du développement front-end. Ce projet m'a permis de comprendre les concepts fondamentaux de React tels que les hooks, la gestion d'état, et le rendu côté serveur avec Next.js.

🛠️ Stack technique

Framework & Bibliothèques principales

• Next.js 14 - Framework React avec App Router
• React 18 - Bibliothèque JavaScript pour interfaces utilisateur
• Framer Motion - Animations fluides et performantes

UI & Styling

• Bootstrap 5 - Framework CSS responsive
• CSS Custom - Styles personnalisés avec variables CSS
• Remix Icon - Bibliothèque d'icônes

Composants & Fonctionnalités

• Swiper - Carrousels et sliders modernes
• React Fast Marquee - Défilements infinis
• Formspree - Gestion des formulaires de contact

Déploiement

• Export statique - Configuration optimisée pour hébergement FTP
• basic-ftp - Script de déploiement automatisé

📁 Structure du projet

portfolio/
├── public/                 # Assets statiques (images, documents)
├── src/
│   ├── app/               # Pages et routing (App Router)
│   │   ├── about/         # Page À propos
│   │   ├── contact/       # Page Contact
│   │   ├── works/         # Page Projets
│   │   └── projet/[id]/   # Pages dynamiques projets
│   ├── components/
│   │   ├── sections/      # Sections réutilisables
│   │   └── ui/            # Composants UI génériques
│   ├── assets/            # Styles CSS
│   └── utlits/
│       ├── animations/    # Composants d'animation
│       └── data/          # Données des projets/expériences
└── scripts/               # Scripts de déploiement

🎯 Fonctionnalités principales

🎨 Design & UX

• Interface moderne et responsive
• Animations fluides avec Framer Motion
• Thème sombre avec couleur d'accent personnalisable par projet
• Préchargement avec animation custom

📱 Pages & Sections

• Accueil : Présentation, compétences, clients
• À propos : Parcours détaillé, formations, expériences
• Projets : Portfolio filtrable avec pages de détails
• Contact : Formulaire fonctionnel avec Formspree

🖼️ Galerie projets

• Lightbox interactif avec navigation
• Support multi-images
• Liens externes (GitHub, Figma, sites web, etc.)
• Couleurs thématiques par projet

🏆 Distinctions

• Carrousel de récompenses
• Navigation responsive (flèches desktop / points mobile)
• Logos personnalisés

🚀 Installation et utilisation

Prérequis

• Node.js 18+
• npm, yarn, pnpm ou bun

Installation

# Cloner le repository
git clone https://github.com/d-vale/bentos-next.git

# Installer les dépendances
npm install
# ou
yarn install

🎓 Apprentissages clés

Cette première expérience avec React m'a permis de découvrir :

• JSX et la composition de composants
• Hooks React (useState, useEffect, usePathname)
• Server & Client Components avec Next.js 14
• Routing dynamique avec App Router
• Optimisation d'images avec next/image
• Animations déclaratives avec Framer Motion
• Différences avec Vue.js (approche, patterns, écosystème)

📧 Contact

Daniel Vale - LinkedIn - daniel.pintovale@heig-vd.ch

Site web : https://dvale.ch