Portfoleo

The main objective was obviously to have a personal site that would serve as a showcase for me, but also, as is often the case, the opportunity to experiment with technology that I had not yet used: [Astro](https:// astro.build).

Features

• Portfolio content management
• Resume page
• Skills visualization graph 😉
• Responsive 📱
• I18n 🏁
• Dark mode 🌙

Stack

Quite simple, due to our simple need for content management in this project. Astro perfectly meets this need, particularly thanks to its Content collections. Simply added to this the framework TailwindCSS as well as the use of D3.js to create a graph that catches the eye 👀

I18n

In order to access the site in several languages ​​(English and French in particular), the content managed by astro must also be translated.

To do this, we use the astro-i18next plugin, which allows for each content collection to have a version per language of the content: in this case one in English, one in French.

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

Depending on the URL used (which contains the locale “en” for example when accessing the site in English), Astro will load the appropriate content. Of course this always requires writing the content in different languages.