Projet formation — BTS SIO SLAM

Ancien portfolio — Site personnel statique

Premier portfolio personnel développé en formation, hébergé sur GitHub Pages. Présentation du parcours BTS SIO, CV en ligne, formulaire de contact.

Voir le site
HTML CSS JavaScript Bootstrap GitHub Pages
Captures d'écran
Accueil
Ancien portfolio — accueil
CV en ligne
Ancien portfolio — CV
Formulaire de contact
Ancien portfolio — contact
Contexte du projet

Première réalisation personnelle complète en formation BTS SIO. L'objectif était de créer une présence en ligne professionnelle : présentation du parcours, CV consultable et téléchargeable, et formulaire de contact fonctionnel.

Le projet a été réalisé entièrement en HTML/CSS/JavaScript statique avec le framework Bootstrap pour la mise en page responsive. Hébergé gratuitement sur GitHub Pages, il est accessible publiquement via keryan666.github.io.

Pourquoi HTML/CSS statique plutôt qu'un framework ?

À ce stade de la formation, maîtriser les fondamentaux HTML/CSS/JS est prioritaire avant d'utiliser des abstractions comme React ou Vue. Un site statique ne nécessite aucun serveur ni backend — idéal pour GitHub Pages.

Le framework CSS Bootstrap a été utilisé pour la mise en page responsive : choix pertinent en formation car il accélère le développement tout en apprenant les concepts de grille responsive et les composants UI prêts à l'emploi.

Par rapport au portfolio actuel (keryan.net), la version actuelle utilise du CSS pur (variables CSS, flexbox, grid) sans Bootstrap — signe de progression : meilleure maîtrise du CSS natif, moins de surpoids, contrôle total du design.

Pourquoi GitHub Pages pour l'hébergement ?

GitHub Pages est un hébergement statique gratuit, avec une intégration Git native : un git push sur la branche principale déclenche automatiquement le déploiement. HTTPS inclus, aucune gestion de serveur requise.

Alternatives possibles : Netlify ou Vercel auraient également fonctionné avec des fonctionnalités supplémentaires (redirections, fonctions serverless). Pour un site statique en formation, GitHub Pages est la solution la plus simple et la plus intégrée au workflow Git.

Le portfolio actuel a migré vers un VPS Debian self-hosté avec Docker, Nginx et Authelia 2FA — progression significative dans la gestion de l'infrastructure.

Compétences BTS SIO — Annexe 8-3

Grille d'évaluation officielle de l'épreuve E5 — bloc « Support et mise à disposition de services informatiques ».

Bloc de compétence (Annexe 8-3)Application dans ce projet
Développer la présence en ligne de l'organisation Portfolio accessible publiquement via HTTPS sur GitHub Pages. Présentation professionnelle du parcours et des compétences. Formulaire de contact oprationnel. Référencement public (URL stable).
Mettre à disposition des utilisateurs un service informatique Site déployé et accessible depuis n'importe quel navigateur sans installation. Hébergement fiable via GitHub Pages avec disponibilité garantie.
Organiser son développement professionnel Construction d'une identité professionnelle en ligne dès le début de la formation. Pratique de Git pour le versionning et le déploiement continu. Base d'apprentissage du HTML/CSS/JS avant les frameworks.
Gérer le patrimoine informatique Code source versionné sur GitHub. Déploiement automatique via push. Evolution du projet tracée par l'historique Git.
FAQ — Questions probables du jury
Quelle est la différence entre ce portfolio et votre portfolio actuel ?
  • Technologie : HTML/CSS/Bootstrap statique vs CSS pur (variables CSS, flexbox, grid) sans framework
  • Hébergement : GitHub Pages (statique, gratuit) vs VPS Debian self-hosté avec Docker, Nginx, Authelia 2FA
  • Contenu : portfolio simple de formation vs fiches projets E5, slides interactifs, thème clair/sombre
  • Sécurité : HTTPS automatique GitHub vs Nginx + Authelia + certificat Let's Encrypt auto-géré
  • Progression : le portfolio actuel reflète l'évolution des compétences entre la première année de BTS et l'alternance
Pourquoi avez-vous refait votre portfolio ?
Plusieurs raisons ont motivé la refonte :

  • Progression des compétences : meilleure maîtrise du CSS natif, envie de ne plus dépendre de Bootstrap
  • Self-hosting : envie de maîtriser l'hébergement complet (VPS, Docker, Nginx) plutôt qu'un hébergement tiers
  • Besoins E5 : ajout de fiches projets détaillées pour l'épreuve BTS SIO, non prévues dans la version initiale
  • Design : design plus personnel et maîtrisé, sans la contrainte des composants Bootstrap prédéfinis
Qu'est-ce que GitHub Pages ?
GitHub Pages est un service d'hébergement de sites statiques gratuit proposé par GitHub. Fonctionnement :

  • Un dépôt GitHub avec du code HTML/CSS/JS est configuré pour être publié
  • Un git push sur la branche main (ou gh-pages) déclenche automatiquement le déploiement
  • Le site est accessible à l'URL username.github.io ou username.github.io/repo
  • HTTPS inclus automatiquement, domaine personnalisé possible
  • Limitation : uniquement pour sites statiques (pas de PHP, pas de base de données)
Qu'est-ce que Bootstrap et pourquoi l'avoir utilisé ?
Bootstrap est un framework CSS open-source développé par Twitter, qui fournit des composants UI prêts à l'emploi : système de grille responsive, navbar, boutons, formulaires, cartes, etc.

Avantages en formation : développement rapide sans écrire tout le CSS, responsive mobile-first inclus nativement, nombreuses ressources de documentation et tutoriels.

Inconvénients : surpoids CSS (le fichier complet fait plusieurs centaines de Ko), moins de contrôle sur le design (on est contraint par les classes Bootstrap), dépendance à un framework externe.

Dans le portfolio actuel, Bootstrap a été remplacé par du CSS natif (variables CSS, flexbox, grid) — plus léger, plus maîtrisé et sans dépendance externe.