Portfolio CMS

Un portfolio CMS — WYSIWYG « façon Wix » (2019)

Contexte. Exercice de fin d’année : livrer un portfolio avec back-office CRUD (textes, images, vidéos). J’ai poussé plus loin : un éditeur de pages drag-and-drop capable de réécrire l’HTML en direct, utilisable par n’importe quel profil non-tech.

• Rôle. Développeur unique — conception, UI, back-end, base de données.
• Stack. PHP · MySQL · JavaScript vanilla.
• Résultat. CMS web authentifié : création de page en un clic, palette d’éléments (blocs, médias, formulaires), propriétés CSS en temps réel et prévisualisation instantanée avant publication.

Cette brique « fait-maison » m’a donné un solide bagage en manipulation DOM, sécurité d’authentification et stockage dynamique — compétences réinvesties depuis sur des builders plus ambitieux.

Écran de connexion

L’utilisateur saisit ses identifiants pour accéder au CMS sécurisé et commencer l’édition de son portfolio.

Tableau de bord des pages

Depuis ce hub, l’utilisateur crée, renomme, filtre, modifie ou supprime ses pages en un clic ; chaque carte donne accès à l’éditeur visuel.

Interface de construction

Drag-and-drop d’éléments (rectangles, textes, images, vidéos…) avec grilles et règles pour un placement précis. Toutes les propriétés CSS sont ajustables en temps réel.

Édition d’un bloc texte

L’utilisateur redimensionne la zone, change la police, la taille, la couleur et l’alignement sans écrire une ligne de code.

Ajout d’un formulaire complet

Bloc « Formulaire de contact » généré automatiquement : champs personnalisables et logique d’envoi prête à l’emploi, conformément au cahier des charges pédagogique.

Aperçu en temps réel

Un clic sur « Voir » affiche le rendu final. L’utilisateur valide la mise en page avant publication sur le portfolio.