Conception et développement full-stack de mon portfolio personnel sur-mesure pour présenter mes réalisations audiovisuelles et interactives.

Conception d'un Portfolio Dynamique sur Mesure

Janvier 2026 Développement Web Full-Stack UI/UX
Ce site personel c'est le reflet direct des compétences de son créateur. C'est pourquoi j'ai fait le choix de ne pas utiliser de CMS préconçu (comme WordPress ou Webflow), mais de développer l'intégralité de ce site « from scratch ». L'objectif était de concevoir une plateforme rapide, entièrement personnalisable, et dotée de son propre système d'administration (Back-Office).

LE DÉFI : L'Architecture Sans Base de Données

La particularité technique de ce portfolio réside dans son architecture. Plutôt que de déployer une lourde base de données SQL pour stocker mes projets, j'ai opté pour une approche **"Flat File"**. Toutes les données (titres, dates, médias, rôles) sont stockées dans des fichiers `JSON` ultra-légers. Ce choix offre deux avantages majeurs : 1. Une vitesse de chargement des pages quasi instantanée. 2. Une sécurité renforcée et une migration de serveur simplifiée (il suffit de copier-coller les dossiers).

Front-End : L'Interface Utilisateur

Le design a d'abord été pensé sur Figma pour garantir une expérience fluide et un responsive design irréprochable. L'intégration a ensuite été réalisée en **HTML5** et **CSS3** purs, en utilisant la puissance des variables CSS (`:root`) pour maintenir une charte graphique cohérente. Le **JavaScript (Vanilla)** intervient par touches pour dynamiser l'expérience (animations au scroll, filtrage des projets en temps réel, menu mobile).

Back-End : Le Cerveau du Site

Le moteur du site est propulsé par **PHP 8**. C'est lui qui lit les fichiers JSON, trie les projets (par exemple, pour afficher les plus récents sur la page d'accueil), et génère le HTML final. J'ai également développé un panneau d'administration sécurisé permettant d'ajouter, éditer ou supprimer des projets sans jamais avoir à toucher une seule ligne de code.

Fonctionnement de l'architecture Flat-File

📄 projets.json Base de données textuelle

➔

⚙️ Moteur PHP Parse & Trie les données

➔

💻 Front-End HTML / CSS / JS Vanilla

L'Éditeur de Contenu Customisé

L'une de mes plus grandes fiertés sur ce projet est la création de mon propre système de balisage pour rédiger ces pages. Plutôt que d'intégrer un lourd éditeur WYSIWYG classique, j'ai codé en PHP et JavaScript un interpréteur de balises personnalisées. Lorsque je tape ` Mon Texte` dans mon back-office, le serveur le transforme automatiquement en un bloc de code CSS stylisé. Cela me permet de créer des mises en page complexes (Grilles d'images, Carrousels, Citations, Badges) simplement en tapant du texte brut, garantissant ainsi que le design ne "casse" jamais.

Le Projet en Chiffres

⚡ Lignes de code : 0

Bilan : Un outil évolutif

C'est un produit fini et un outil de travail quotidien. Il m'a permis de consolider mes compétences en algorithmique PHP (notamment pour le tri et le filtrage de données complexes) et de me confronter aux réalités du développement Full-Stack : de la maquette UI initiale jusqu'au déploiement final sur le serveur (OVH) et à la configuration du fichier `.htaccess` pour la réécriture des URLs.