Mise en place du portfolio

Présentation du projet

Ce projet consiste à concevoir, déployer et maintenir mon portfolio professionnel afin de présenter mes compétences, mes réalisations techniques et les éléments attendus dans le cadre du BTS SIO option SISR.

Le site est développé avec Hugo et structuré pour répondre à un double objectif :

professionnel (valoriser mon profil pour l’alternance et l’emploi),
pédagogique (documenter mes travaux et les rattacher aux épreuves E5/E6/EF3).

Objectifs

Créer une vitrine claire et crédible de mon parcours
Centraliser les projets et preuves techniques sur une seule plateforme
Mettre en avant les compétences mobilisées sur chaque réalisation
Faciliter la préparation de l’oral E5 avec des contenus structurés
Disposer d’un site facile à maintenir et à faire évoluer

Contexte technique

Problématique

Avant ce projet, mes réalisations étaient dispersées entre différents supports. Cela rendait la lecture globale de mon profil plus difficile, autant pour les recruteurs que pour l’évaluation BTS.

Le besoin principal était de disposer d’un support unique pour :

valoriser mon profil de manière professionnelle,
centraliser mes réalisations techniques,
lier les projets aux compétences du référentiel,
présenter des preuves exploitables à l’oral.

Solution mise en œuvre

Mise en place d’un portfolio statique basé sur Hugo avec :

un contenu rédigé en Markdown,
une organisation par sections (projets, épreuves, veille, présentation),
une navigation optimisée pour la consultation rapide,
un hébergement en production sur domaine personnalisé.

Réalisation technique

Étapes principales

Choix de l’architecture : site statique Hugo pour performance et simplicité
Structuration éditoriale : pages dédiées aux projets, épreuves BTS et veille
Personnalisation du thème : adaptation de l’interface et des composants
Rédaction technique : normalisation des pages projets (contexte, solution, résultats)
Mise en production : déploiement sur domaine personnalisé
Amélioration continue : corrections régulières, enrichissement du contenu et maintenance

Technologies utilisées

Hugo Extended : génération du site statique
Markdown : rédaction du contenu
Tailwind CSS : framework CSS pour le design
Git : gestion de version
Hébergement web : publication en production

Fonctionnalités implémentées

✅ Page d’accueil avec présentation personnelle
✅ Section Projets pour accéder à l’ensemble des réalisations
✅ Épreuves BTS (E5, E6, EF3) documentées
✅ Veille technologique et juridique
✅ Navigation orientée E5 pour centraliser les supports de synthèse
✅ Design responsive pour mobile/tablette/desktop
✅ Navigation intuitive et moderne
✅ Intégration CV en format PDF

Résultats obtenus

✅ Portfolio professionnel accessible en ligne
✅ Domaine personnalisé configuré
✅ Excellente rapidité de chargement (génération statique)
✅ Contenu facilement maintenable via Markdown
✅ Compatible navigateurs desktop et mobile
✅ Contenu structuré et professionnel

Compétences développées

Utilisation de générateurs de sites statiques (Hugo)
Rédaction en Markdown et structuration de contenu
Configuration de serveur web et DNS
Gestion de projet web de A à Z
Design responsive et UX
Déploiement et mise en production
Maintenance corrective et évolutive d’un site en production

Architecture du site

PLAINTEXT

portfolio.kairrin.net/
├── Accueil
├── Présentation
│   ├── Parcours BTS SIO
│   ├── Cadre de formation
│   └── Contexte professionnel
├── Projets
│   └── Redirection vers E5 (vue de synthèse)
├── Épreuves
│   ├── E5 - Tableau de synthèse
│   ├── E6 - Administration systèmes et réseaux
│   └── EF3 - Certifications complémentaires
└── Veille
    ├── Veille technologique
    └── Veille juridique

Cliquez pour développer et voir plus

Points clés d’apprentissage

Hugo permet de générer des sites ultra-rapides (build en millisecondes)
Le contenu en Markdown facilite la maintenance et les mises à jour
Les sites statiques offrent une sécurité optimale (pas de base de données)
La cohérence de navigation est essentielle pour la lisibilité du dossier E5
La qualité d’un portfolio dépend autant du fond technique que de la clarté éditoriale