Présentation du projet : Portfolio personnel

Ce portfolio est un projet personnel réalisé dans le but de valoriser mes réalisations et de partager mes connaissances en informatique. Il met en avant mes projets à travers une présentation claire et inclut une section blog destinée à la publication de contenus techniques et pédagogiques.

Mené en autonomie complète, ce projet a constitué une expérience particulièrement enrichissante. Il m’a permis d’évaluer mes compétences techniques, de renforcer mon autonomie et de m’entraîner à la gestion rigoureuse d’un projet, en l’occurrence un projet web de bout en bout.

L’un des aspects clés de ce projet réside dans la découverte et l’adoption d’une nouvelle stack technique ainsi que d’une nouvelle méthode de déploiement en production. L’utilisation du framework Astro, associée à un déploiement sur Netlify, a facilité la mise en œuvre du projet tout en m’amenant à approfondir des notions essentielles telles que le respect des bonnes pratiques, le référencement naturel (SEO) et l’optimisation des performances du site.

Cahier des charges

Partie fonctionnelle

Objectifs du projet
Présenter mon profil, mes compétences et mes projets de manière professionnelle.
Centraliser et diffuser mes connaissances techniques via un blog.
Disposer d’un support en ligne accessible aux recruteurs et collaborateurs potentiels.

Fonctionnalités principales
Page d’accueil présentant le portfolio et l’identité du développeur.
Section « Projets » détaillant les réalisations (description, technologies, liens).
Section « Blog » permettant la publication et la consultation d’articles techniques.
Dark/Light Mode et disponible en plusieurs langues
Design responsive adapté aux écrans desktop, tablette et mobile.

Partie technique

Technologies utilisées
Framework	Astro
Langage	HTML, CSS, TypeScript
Déploiement	Netlify

L’architecture du site sera entièrement basée sur la génération statique (SSG), évitant autant que possible l’utilisation du rendu côté serveur (SSR) ou côté client (CSR). Pour les fonctionnalités nécessitant l’interaction avec le navigateur, telles que le LocalStorage, les sessions ou les cookies, le JavaScript sera exécuté directement côté client.

Le site sera optimisé pour des performances maximales : temps de chargement rapides, images et ressources allégées, génération statique des pages. Le référencement naturel (SEO) sera pris en compte avec des balises sémantiques, des métadonnées complètes et une hiérarchie logique des contenus. Le code sera structuré de manière lisible et maintenable, facilitant les futures mises à jour ou évolutions.

Le déploiement se fera sur Netlify avec un workflow simple et efficace. Les mises à jour du contenu ou des fonctionnalités pourront être effectuées rapidement, sans impacter la structure du site. L’architecture est pensée pour faciliter l’évolution future, l’ajout de nouvelles pages ou fonctionnalités, tout en conservant une maintenance simple et sécurisée.

Audit Lighthouse

Audit des réalisés le 19 janvier 2026 : Google Lighthouse

Architecture simplifié du projet

La génération de la structure du projet s’est faite avec la commande suivante

tree -L 3 -v -I "node_modules|dist" --dirsfirst

L’architecture du projet présente une vue d’ensemble, certaine partie sont cachés pour des raisons de sécurité et de clarté

├── public
│   ├── fonts
│   │   ├── Roboto.ttf
│   │   ├── RobotoCondensed.ttf
│   │   ├── RobotoFlex.ttf
│   │   ├── RobotoSlab.ttf
│   │   └── SairaStencilOneRegular.ttf
│   ├── js
│   │   ├── header.js
│   │   ├── language.js
│   │   ├── navigation.js
│   │   ├── search.js
│   │   └── theme.js
│   ├── favicon-16x16.svg
│   └── robots.txt
├── src
│   ├── assets
│   │   ├── blog
│   │   ├── projects
│   │   └── avatar.png
│   ├── components
│   │   ├── article
│   │   ├── icons
│   │   ├── project
│   │   ├── CategoryAside.astro
│   │   ├── LanguageModal.astro
│   │   ├── OverlayBlur.astro
│   │   ├── SearchAside.astro
│   │   └── TagAside.astro
│   ├── config
│   ├── content
│   │   ├── blog
│   │   ├── categories
│   │   ├── projects
│   │   └── config.ts
│   ├── i18n
│   │   ├── ui.ts
│   │   └── utils.ts
│   ├── layouts
│   │   ├── footers
│   │   ├── headers
│   │   └── BaseLayout.astro
│   ├── pages
│   │   └── [lang]
│   └── styles
│       └── global.css
├── PROJECTS.md
├── README.md
├── astro.config.mjs
├── chart.blog.mdx
├── package-lock.json
├── package.json
└── tsconfig.json