01
Description du projet
Ce portfolio est un site vitrine statique développé avec Bootstrap 5 et le générateur de site statique Pelican. Il a été réalisé dans le cadre du BTS SIO option SLAM et vise à présenter de façon professionnelle mon parcours, mes compétences et mes projets personnels et scolaires.
Le site dispose d'une navigation fluide entre les sections, d'un design responsive adapté à tous les formats d'écran (mobile, tablette, desktop) et d'une mise en page soignée valorisant le contenu technique. Chaque section est structurée de manière claire : présentation, compétences, projets et contact.
Le déploiement est réalisé via GitHub Pages, permettant une mise en ligne gratuite, accessible publiquement et automatiquement synchronisée avec le dépôt GitHub.
02
Technologies utilisées
Bootstrap 5
HTML5
CSS3
Pelican (SSG)
GitHub Pages
Figma (maquette)
VS Code
03
Compétences BTS SIO mobilisées
| Code | Compétence | Mise en œuvre dans le projet |
|---|---|---|
| B1.1 | Recenser et identifier les ressources numériques | Choix et intégration de Bootstrap 5 comme framework CSS, utilisation de Pelican pour la génération statique. |
| B1.3 | Développer la présence en ligne | Déploiement sur GitHub Pages, configuration du domaine, mise en ligne accessible publiquement avec HTTPS. |
| B2.2 | Concevoir une solution applicative | Maquettage sur Figma, architecture des sections, organisation de la navigation et de la hiérarchie du contenu. |
| B2.3 | Développer, documenter et déployer | Intégration HTML/CSS avec classes Bootstrap, responsive design, déploiement automatisé via GitHub Actions. |
| B2.4 | Travailler en mode projet | Gestion du code source avec Git, versionnage sur GitHub, documentation du projet (README). |
04
Déroulement du projet
Étape 1 — Analyse du besoin
Définition du contenu à présenter (parcours, compétences, projets, contact), identification du public cible (recruteurs, formateurs), choix du framework Bootstrap 5 pour accélérer le développement.
Étape 2 — Maquettage
Réalisation des maquettes basse puis haute fidélité sur Figma. Définition de la charte graphique, de la palette de couleurs et de la typographie.
Étape 3 — Intégration
Développement HTML/CSS avec Bootstrap 5 et personnalisation via Sass. Configuration de Pelican pour la génération des pages statiques depuis des fichiers Markdown.
Étape 4 — Déploiement
Mise en ligne sur GitHub Pages. Configuration du dépôt, activation du déploiement depuis la branche main, vérification de l'affichage sur mobile et desktop.
05
Résultats & apprentissages
Maîtrise de Bootstrap 5
Utilisation du système de grille, des composants natifs (navbar, cards, modales) et personnalisation via variables CSS.
Déploiement GitHub Pages
Mise en production d'un site statique accessible via URL publique, avec versionning du code source.
Design responsive
Interface adaptée à tous les formats d'écran grâce aux breakpoints Bootstrap et aux media queries personnalisées.
Générateur de site statique
Découverte de Pelican (SSG Python) : séparation du contenu (Markdown) et du gabarit (template HTML/Jinja2).