Participer à l'évolution d'un site Web

01

Comment je l'ai validée

J'ai validé cette compétence en faisant concrètement ceci : J'ai valide cette compétence en faisant évoluer le portfolio dans le temps : ajout de nouvelles pages, correction des liens, reorganisation du contenu et adaptation du design selon les retours. Le site n'est pas reste fige ; je l'ai fait vivre comme un vrai support de communication technique.

Ce travail m'a permis de valider ma capacité à faire évoluer un site existant, prendre en compte les retours et intégrer de nouveaux contenus sans perdre la cohérence globale.

Ajouter de nouvelles pages de projets et de compétences

Corriger les liens, les dates et la structure du site

Faire évoluer l'interface sans casser la navigation

Prendre en compte les retours pour prioriser les améliorations utiles

Maintenir une cohérence entre l'existant et les nouvelles pages ajoutees

TP et projets reliés

Ce que j'ai validé

évolution continue Maintenance web Intégration de contenus

02

Tâches réalisées

Design moderne

Création d'un design sombre élégant avec des dégradés, des effets glassmorphism et des animations fluides.

Pages projets

Développement de pages détaillées pour chaque projet avec captures d'écran, code et compétences associées.

Lightbox interactif

Implémentation d'une galerie d'images avec navigation au clavier et affichage plein écran.

Responsive design

Adaptation complète du site pour une navigation fluide sur desktop, tablette et mobile.

Thème sombre/clair

Système de basculement entre thème sombre et clair avec persistance des préférences utilisateur.

Blocs de code

Affichage de code source avec coloration syntaxique et fonction de copie en un clic.

03

Réalisations détaillées

1

Création du design global

J'ai conçu un design moderne avec un thème sombre par défaut, utilisant des variables CSS pour une personnalisation facile. Le design inclut des effets de fond animés (mesh gradient, grille, bruit) pour un rendu professionnel.

Variables CSS du thème

/* Variables du thème sombre */

:root {

  --bg-primary: #0a0a0f;

  --bg-card: rgba(20, 20, 30, 0.8);

  --text-primary: #ffffff;

  --text-secondary: #a0a0b0;

  --accent: #00a8ff;

  --accent-dark: #0074cc;

  --border-color: rgba(255, 255, 255, 0.1);

}



/* Effet glassmorphism */

.card {

  background: var(--bg-card);

  backdrop-filter: blur(10px);

  border: 1px solid var(--border-color);

  border-radius: 16px;

}

2

Développement des pages projets

J'ai créé un template réutilisable pour les pages de projets, avec une structure cohérente : hero section, contexte, réalisations détaillées, captures d'écran et compétences mobilisées.

                Structure d'une page projet

<section class="hero-section page-hero">

  <!-- Hero avec titre et tags -->

</section>

<section id="contexte" class="section">

  <!-- Contexte et objectifs -->

</section>

<section id="realisations" class="section">

  <!-- Étapes détaillées avec code -->

</section>

<section id="competences" class="section">

  <!-- Grille des compétences BTS SIO -->

</section>

3

Implémentation du système Lightbox

J'ai développé un système de galerie d'images interactif permettant de visualiser les captures d'écran en plein écran avec navigation au clavier (flèches, Echap) et compteur d'images.

Fonctionnalités
Navigation avec les flèches du clavier, fermeture avec Echap, clic extérieur pour fermer, et compteur d'images.

JavaScript du Lightbox

// Gestion des événements clavier

document.addEventListener('keydown', function(e) {

  const lightbox = document.getElementById('lightbox');

  if (!lightbox.classList.contains('active')) return;



  if (e.key === 'Escape') closeLightbox();

  if (e.key === 'ArrowLeft') navigateLightbox(-1);

  if (e.key === 'ArrowRight') navigateLightbox(1);

});

4

Optimisation responsive et performance

J'ai adapté le site pour tous les types d'écrans avec des breakpoints spécifiques et corrigé les problèmes de débordement sur les blocs de code et tableaux.

                Gestion du overflow et responsive

/* Empêcher le débordement horizontal */

html, body {

  overflow-x: hidden;

}

.code-content {

  overflow-x: auto;

  -webkit-overflow-scrolling: touch;

}

/* Mobile */

@media (max-width: 768px) {

  .task-grid, .competences-grid {

    grid-template-columns: 1fr;

  }

  .code-content pre {

    font-size: 0.75rem;

  }

}

04

Avant / Après

Mon premier portfolio était hébergé sur Google Sites. J'ai décidé de le refaire entièrement en codant moi-même pour avoir un contrôle total sur le design et démontrer mes compétences en développement front-end.

Ancien portfolio
https://sites.google.com/view/franck-raymond/moi

Ancien (Google Sites)

Plateforme Google Sites limitée
Design basique avec templates
Personnalisation restreinte
Navigation sidebar classique
Pas de code personnalisé
Couleurs neutres simples
Dépendant de Google

Nouveau (HTML/CSS/JS)

Code 100% personnalisé
Design moderne glassmorphism
Contrôle total sur le style
Navigation fluide et animations
Pages projets détaillées avec code
Thème sombre/clair dynamique
Hébergement indépendant

Pourquoi ce changement ?
Coder mon propre portfolio me permet de démontrer mes compétences techniques et d'avoir une liberté totale pour créer un design unique et professionnel.

05

Méthodologie de travail

Pour développer et améliorer mon portfolio, j'ai suivi une méthodologie itérative permettant d'ajouter progressivement de nouvelles fonctionnalités.

Phase 1 : Conception

Définition des besoins, recherche d'inspiration sur des portfolios existants et choix des technologies à utiliser.

Phase 2 : Structure HTML

Création de la structure sémantique du site avec les sections principales : hero, about, skills, projets, expériences, contact.

Phase 3 : Design CSS

Développement du style visuel avec variables CSS, thème sombre, effets glassmorphism et animations.

Phase 4 : Interactivité

Ajout des fonctionnalités JavaScript : navigation mobile, lightbox, copie de code, switch de thème.

Phase 5 : Pages projets

Création des pages détaillées pour chaque projet avec captures d'écran, extraits de code et compétences associées.

Phase 6 : Itérations

Corrections de bugs, optimisations responsive et ajout régulier de nouveaux contenus et projets.

06

Compétences mobilisées

B1 Gérer le patrimoine informatique

Versionnement du code avec Git, organisation des fichiers et maintenance de la structure du projet.

B2 Répondre aux incidents

Correction des bugs d'affichage, problèmes de débordement et compatibilité entre navigateurs.

B3 Développer la présence en ligne

Création d'un portfolio professionnel pour présenter mes compétences et projets aux recruteurs et entreprises.

B4 Travailler en mode projet

Planification des fonctionnalités, développement itératif et gestion autonome du projet.

B5 Mettre à disposition un service

Déploiement du portfolio en ligne et mise à jour régulière avec de nouveaux contenus.

B6 Organiser son développement

Apprentissage des techniques CSS avancées, JavaScript moderne et bonnes pratiques du développement front-end.

07

Conclusion et bilan

Ce projet personnel m'a permis de développer mes compétences en développement front-end et de créer un support professionnel pour présenter mes réalisations. Le portfolio évolue continuellement avec de nouveaux projets et améliorations.

Au-delà du développement front-end, cette page m'a fait progresser sur un point plus transversal : faire vivre un site dans la durée, corriger sans regressions majeures et garder un niveau de qualité constant malgré les ajouts successifs.

Ce que j'ai appris
L'importance d'un code propre et maintenable, l'utilisation des variables CSS pour la cohérence du design, et la nécessité de tester sur différents appareils.

Maîtrise de HTML5, CSS3 et JavaScript

Techniques CSS avancées (flexbox, grid, animations)

Développement responsive mobile-first

Création d'interfaces utilisateur modernes

Retour E5 Projets

MK

Mots clés BTS SIO SISR

Résumé rapide de la compétence en mots clés.

HTML/CSS/JS Maintenance Git Responsive UX