← Projets / Mathieu B. - Portfolio

Mathieu B. - Portfolio

Le site que vous lisez en ce moment.

Mathieu B. - Portfolio
Plateforme
web
Année
2026

Ce portfolio est un projet à part entière. Pas de backend, juste de la génération statique avec Astro, des animations scroll-driven avec GSAP, et du styling Tailwind CSS. Le tout déployé automatiquement via GitHub Actions sur un VPS perso.

→ STACK TECHNIQUE
BACKEND
FRONTEND
Astro · GSAP · Tailwind CSS
INFRA
GitHub Actions · Nginx

Contexte

J’avais besoin d’un portfolio pour présenter mes projets. Mais je ne voulais pas juste un template tout fait — je voulais quelque chose qui reflète ma façon de travailler : itératif, moderne, et un peu expérimental.

Approche

J’ai commencé avec une base visuelle générée par Claude, puis j’ai itéré. Beaucoup. Le design s’inspire du site d’Apple (l’Apple Watch Series 11) : alternance dark/light selon les sections, typographie massive et gradients sur les éléments clés.

Côté technique, c’est du Astro avec des Content Collections pour gérer les projets en Markdown. Pas de backend, tout est statique. Les animations sont gérées par GSAP avec ScrollTrigger pour des effets scroll-driven fluides. Le styling est fait avec Tailwind CSS via le plugin Vite.

Le déploiement est automatisé : à chaque push sur main, GitHub Actions build le site et le déploie via rsync sur mon VPS perso. Nginx sert les fichiers statiques.

Mathieu B. - Portfolio
→ CE QUE J'AI APPRIS

Faire pour apprendre.

01

Astro — Découverte d'un framework de génération statique moderne. Content collections pour gérer les projets en Markdown, routing dynamique, et optimisation out-of-the-box.

02

GSAP ScrollTrigger — Animations scroll-driven sophistiquées. Parallax, reveal effects, et transitions fluides qui rendent le site vivant sans sacrifier les performances.

03

CI/CD — Pipeline GitHub Actions qui build le site et le déploie via rsync sur le VPS à chaque push sur main. Pas d'intervention manuelle.

04

Design system — Création d'un système visuel cohérent inspiré du site d'Apple. Alternance dark/light, typographie massive et gradients.

→ SUIVANT

Un autre projet ?