Full-stack design and development of my custom personal portfolio to showcase my audiovisual and interactive work.

Designing a Custom Dynamic Portfolio

January 2026 Web Development Full-Stack UI/UX
This personal site is the direct reflection of its creator's skills. That's why I chose not to use a pre-built CMS (like WordPress or Webflow), but to develop the entire site "from scratch". The goal was to design a fast, fully customisable platform with its own admin system (back-office).

THE CHALLENGE: Architecture Without a Database

The technical specificity of this portfolio lies in its architecture. Rather than deploying a heavy SQL database to store my projects, I went with a **"Flat File"** approach. All data (titles, dates, media, roles) is stored in ultra-light `JSON` files. This choice offers two major benefits: 1. Near-instant page load speed. 2. Stronger security and simpler server migration (just copy-paste the folders).

Front-End: The User Interface

The design was first thought through in Figma to guarantee a smooth experience and flawless responsive design. Integration was then done in pure **HTML5** and **CSS3**, leveraging CSS variables (`:root`) to keep the visual identity consistent. **Vanilla JavaScript** comes in to add dynamism (scroll animations, real-time project filtering, mobile menu).

Back-End: The Brain of the Site

The engine is powered by **PHP 8**. It reads the JSON files, sorts the projects (e.g. to display the most recent on the home page), and generates the final HTML. I also built a secure admin panel that lets me add, edit or delete projects without touching a single line of code.

How the Flat-File architecture works

📄 projets.json Text-based database

➔

⚙️ PHP Engine Parses & sorts data

➔

💻 Front-End HTML / CSS / Vanilla JS

My Custom Content Editor

One of my proudest pieces of this project is creating my own markup system to write these pages. Rather than embedding a heavy classic WYSIWYG editor, I coded a custom tag interpreter in PHP and JavaScript. When I type ` My Text` in my back-office, the server automatically transforms it into a styled CSS block. This lets me build complex layouts (image grids, carousels, quotes, badges) just by typing plain text, ensuring the design never "breaks".

The Project in Numbers

⚡ Lignes de code : 0

Outcome: An Evolving Tool

This is both a finished product and a daily working tool. It let me consolidate my PHP algorithmics skills (notably for sorting and filtering complex data) and confront the realities of full-stack development: from the initial UI mockup to final deployment on the server (OVH) and configuring the `.htaccess` file for URL rewriting.