01 · Production · Défilement horizontal

Garage Bakatselos

Migration, hébergement, sécurisation et mise en production d'un site de garage automobile avec une attention particulière portée à la stabilité de l'environnement final.

o2switchcPanelHTTPSSécurité
Détails du projet

Migration complète de l'environnement local vers l'hébergeur o2switch, avec préparation des fichiers, transfert de l'arborescence, reprise des dépendances et vérification du comportement du site après mise en ligne.

Configuration du cPanel, rattachement du domaine, gestion des répertoires, paramétrage de l'environnement d'hébergement et vérification des éléments nécessaires au bon fonctionnement en production.

Activation du HTTPS, contrôle du certificat SSL, correction des ressources mixtes, tests de navigation, tests de formulaires, vérification des redirections et série de contrôles de sécurité avant livraison.

Site en ligne

Le projet peut être consulté directement depuis son domaine public.

Visiter le site

02 · Patrimoine · Défilement horizontal

Maison Hermerswiller

Plateforme vitrine consacrée à la valorisation d'une maison alsacienne et à son histoire locale.

GitHub PagesPatrimoineResponsive
Détails du projet

Conception d'une structure éditoriale claire pour présenter l'histoire de la maison, organiser les contenus et permettre une lecture confortable sur ordinateur, tablette et mobile.

Intégration front-end de la page, choix d'une mise en page sobre, gestion des espacements, adaptation responsive et préparation de contenus extensibles pour pouvoir enrichir le site avec de longs textes.

Mise en ligne avec GitHub Pages, vérification des liens, contrôle du rendu navigateur et optimisation de l'expérience de consultation pour une page patrimoniale lisible et durable.

Publication publique

Le site est consultable en ligne via GitHub Pages.

Visiter le site

03 · Association · Défilement horizontal

Association d'Hermerswiller

Espace digital pensé pour centraliser la communication associative, les informations utiles et les événements locaux.

NetlifyCommunicationÉvénementsAccessibilité
Détails du projet

Développement d'un site vitrine pour donner une présence en ligne claire à l'association, avec une hiérarchie de contenus permettant de retrouver rapidement les informations principales.

Construction d'une interface légère, responsive et facile à maintenir, prévue pour accueillir des textes détaillés, des annonces, des informations pratiques et des contenus liés à la vie associative.

Déploiement sur Netlify, vérification des performances de chargement, contrôle des liens publics et adaptation du rendu pour conserver une lecture propre sur tous les formats d'écran.

Site en ligne

L'espace associatif est disponible depuis son URL publique.

Visiter le site

04 · Panel privé · Défilement horizontal

Zina Panel

Interface d'administration privée pensée pour piloter des commandes, organiser les informations et sécuriser l'accès aux données sensibles.

AdministrationPrivéCommandesInterface
Détails du projet

Développement d'un panel d'administration avec une logique d'interface centrée sur la lisibilité, le suivi des informations et la manipulation rapide des données nécessaires à la gestion interne.

Structuration des écrans, préparation des états de consultation, gestion des zones de contenu denses, mise en forme des informations critiques et organisation d'une expérience utilisable sur différents formats.

Projet privé prévu pour recevoir des descriptions techniques détaillées sur l'architecture, la sécurisation, les contrôles d'accès, les écrans d'administration et les évolutions fonctionnelles réalisées.

Accès restreint

Le projet n'est pas exposé publiquement.

05 · Archive · Défilement horizontal

Ancienne version du portfolio

Première version publique de mon identité numérique, utile pour mesurer l'évolution graphique, technique et éditoriale du portfolio.

ArchiveGitHub PagesPortfolio
Détails du projet

Création d'une première base de portfolio avec présentation du parcours, mise en avant des compétences, structuration des informations personnelles et publication accessible en ligne.

Expérimentation d'une direction visuelle initiale, organisation des rubriques, apprentissage des contraintes de responsive design et mise en place d'une base destinée à évoluer avec mes projets.

Cette version sert de point de comparaison pour documenter les améliorations successives, les choix abandonnés, les refontes graphiques et les progrès réalisés dans la construction d'une interface plus professionnelle.

Archive en ligne

La version précédente reste consultable publiquement.

Visiter le site

06 · Projet local · Défilement horizontal

Auto-écoles

Maquette front-end destinée à présenter une activité d'auto-école avec une expérience claire, directe et responsive.

Front-endLocalVitrineResponsive
Détails du projet

Réalisation d'une interface vitrine avec mise en avant des services, structuration de sections commerciales, adaptation des contenus à un public recherchant rapidement des informations pratiques.

Travail sur la lisibilité, les boutons d'action, la hiérarchie visuelle, la composition des blocs, la compatibilité mobile et les transitions afin d'obtenir une page agréable à parcourir.

Projet local prévu pour être enrichi avec des descriptions détaillées sur la conception, les choix d'images, la gestion responsive, les ajustements CSS et les évolutions possibles du prototype.

Projet local

Le projet peut être ouvert depuis les fichiers du portfolio.

Ouvrir localement

07 · Refonte · Défilement horizontal

Agrimat

Refonte et modernisation d'un site industriel existant avec une nouvelle interface plus contemporaine, structurée et responsive.

RefonteUIIndustrieLocal
Détails du projet

Modernisation complète de l'interface en repartant d'une base ancienne, avec refonte de la structure, des sections, de la présentation des gammes, des contenus institutionnels et des pages secondaires.

Travail sur la cohérence graphique, la lisibilité, les animations, la navigation, la mise en page responsive, les contrastes, les espaces de respiration et la perception plus professionnelle du site.

Préparation d'un socle solide pour détailler les étapes de refonte, la comparaison avant après, les choix techniques, les problèmes rencontrés, les corrections effectuées et les améliorations prévues.

Comparaison

Interface interactive permettant de comparer visuellement le site original de 2015 avec ma refonte moderne de 2025.

Voir la version 2025 Comparer les versions