Portfoleo

L’objectif principal était évidemment d’avoir un site personnel qui me serve de vitrine, mais également, et comme souvent, l’occasion d’expérimenter une technologie que je n’avais pas encore utilisé: Astro.

Features

• Gestion de contenu de portfolio
• Page CV
• Graph de visualition des compétences 😉
• Responsive 📱
• I18n 🏁
• Dark mode 🌙

Stack

Assez sobre, du fait de notre simple besoin de management de contenu dans ce projet. Astro répond parfaitement à ce besoin notamment grâce à ses Content collections.
Simplement ajouté à cela le framework TailwindCSS ainsi que l’utilisation de D3.js pour créer un graph qui attire l’oeil 👀

I18n

Afin de pouvoir accéder au site en plusieur langues (anglais et français notamment), le contenu du géré par astro doit également être traduit.

Pour cela, on utilise le plugin astro-i18next, qui permet d’avoir pour chaque content collection une version par langue du contenu: ici une anglais, une en français.

├── content
│   ├── projects
│   │   ├── fr
│   │   │   ├── portfoleo.md
│   │   │   ├── scrapart.md
│   │   ├── en
│   │   │   ├── portfoleo.md
│   ├── experiences
│   │   ├── fr
│   │   │   ├── company_1.md
│   │   │   ├── company_2.md
│   │   ├── en
│   │   │   ├── company_1.md

En fonction de l’url utilisée (qui contient la locale “en” par exemple lorsque l’on accède au site en anglais), Astro chargera le contenu approprié. Biensûr cela nécessite toujours de rédiger le contenu dans les différentes langues.