From f5acff7e9abd05fbb0ea105a65e2cd10f0702393 Mon Sep 17 00:00:00 2001
From: Florian Sylvain <sylvainflorian@proton.me>
Date: Wed, 3 Sep 2025 17:19:14 +0200
Subject: [PATCH] feat: enhance portfolio layout and accessibility improvements

---
 index-min.html |  2 +-
 index.html     | 92 +++++++++++++++++++++++++++++---------------------
 2 files changed, 55 insertions(+), 39 deletions(-)
diff --git a/index-min.html b/index-min.html
index 9eb4d81..bc4ae6f 100644
--- a/index-min.html
+++ b/index-min.html
@@ -1 +1 @@
-<!doctypehtml><html lang=fr><meta charset=UTF-8><meta content="width=device-width,initial-scale=1"name=viewport><meta content="Portfolio de Florian Sylvain, développeur web fullstack."name=description><link href=/favicon.webp rel=icon type=image/x-icon><link href=https://floriansylvain.fr/ rel=canonical><title>Portfolio Florian Sylvain</title><style>:root{--background:#0e120e;--foreground:#e2f1e2;--border:#161f16;--accent:#7fc27f;--accent-hover:#a7e6a7;--accent-visited:#5e8a5e;--muted:#7fa07f}body{background:var(--background);color:var(--foreground);font-family:Inter,'Segoe UI',Arial,sans-serif;max-width:1000px;margin:auto;padding:16px}#header h1{font-size:2rem;font-weight:700;letter-spacing:.5px;color:var(--accent-hover)}#header img{max-width:140px;height:auto;border:2px solid var(--border)}#header div{display:flex;align-items:center;gap:16px}table{border:none;background:var(--border);width:100%;margin-bottom:16px;overflow:hidden;table-layout:fixed}#experiences col:first-child,#projets col:first-child{width:100px}#experiences col:last-child,#projets col:last-child{width:100%}td,th{border:none;padding:8px 10px;text-align:left;vertical-align:top}th{background:var(--border);color:var(--accent);font-weight:600;letter-spacing:.2px}td{background:var(--border)}caption{color:var(--muted);font-size:.95em;margin-bottom:4px}a{color:var(--accent);text-decoration:none;transition:color .2s,border-bottom .2s;border-bottom:1px dotted var(--accent)}a:hover{color:var(--accent-hover);border-bottom:1px solid var(--accent-hover);text-decoration:none}a:visited{color:var(--accent-visited)}ol,ul{margin:0;padding-left:20px}nav li{margin-bottom:6px}footer h2,section h2{color:var(--accent);font-size:1.4rem;margin-top:24px;margin-bottom:8px;font-weight:600;letter-spacing:.2px}footer{border-top:1px solid #1e2a1e;margin-top:32px;padding-top:12px;font-size:.95em;color:var(--muted);background:var(--background)}#experiences thead th,#projets thead th{font-size:large}@media (max-width:576px){body{padding:8px}#header div{flex-direction:column}table,td,th{font-size:.95em}}</style><header id=header><h1>Portfolio de Florian Sylvain</h1><div><img alt="Photo de Florian Sylvain"height=140 src=profile.webp width=150><p>Diplômé d'un Bachelor Développeur Web à l'ESD Paris, autoentrepreneur, je suis passionné par l'informatique. Actuellement en poste à temps plein en CDI chez DOLLEN (Bonnueil-sur-Marne) en tant que développeur web fullstack, je suis à l'écoute pour toute nouvelle opportunité. Disponible sous moins d'un mois, je suis véhiculé, ouvert à une prise de poste dans toute la France et à l'international.</div></header><nav><h2>Navigation</h2><ol><li><a href=#competences>Compétences et qualifications</a><li><a href=#diplomes>Diplômes obtenus</a><li><a href=#experiences>Expériences professionnelles</a><li><a href=#projets>Projets récents</a><li><a href=#contact>Contact et coordonnées</a><li><a href=#autres>Autres informations</a></ol></nav><main><section id=competences><h2>Compétences et qualifications</h2><ul><li>Rédaction de spécifications et cahier de recettes.<li>Maîtrise de PhP, Java, Go, Html5/Css3, Javascript, Typescript, SQL, VueJS, React, Flutter, Docker, Jenkins, Git, GCP, et de Nginx. Apprendre un nouveau language ou framework n'est absolument pas un obstacle pour moi.<li>Maîtrise de l'anglais niveau C1<li>Maîtrise de la méthodologie agile, avec sprints, daily...</ul></section><section id=diplomes><h2>Diplômes obtenus</h2><table><caption>Tableau des diplômes obtenus<thead><tr><th scope=col>Période<th scope=col>Établissement<th scope=col>Niveau<th scope=col>Diplôme<tbody><tr><td>2022 - 2024<td><a href=https://ecole-du-digital.com/ >ESD Paris</a><td>Bac +3 / RNCP 6<td>Bachelor Développeur Web<tr><td>2020 - 2022<td><a href=https://www.univ-gustave-eiffel.fr/ >Université Gustave Eiffel</a><td>Bac +2<td>DUT Informatique<tr><td>2017 - 2020<td>Lycée Polyvalent René Cassin<td>Bac<td>Baccalauréat STI2D <i>(mention bien)</i></table></section><section id=experiences><h2>Expériences professionnelles</h2><table><col><col><thead><tr><th scope=col colspan=2>CDI Développeur Web Fullstack<tbody><tr><th scope=row><strong>Entreprise</strong><td><a href=https://dollen.fr/ >Dollen</a><tr><th scope=row><strong>Période</strong><td>Nov. 2024 - En cours<tr><th scope=row><strong>Missions</strong><td><ul><li>Conception logiciel (diagramme de classes <strong>UML</strong>)<li>Développement d'un back office<ul><li>PHP 8.4, Symfony 7.3, Doctrine, Twig, Stimulus, PHPUnit, Domain Driven Design</ul><li>Déploiement et intégration continue du back-office en production et pré-production<ul><li>Docker, Debian, Nginx, GitHub Action</ul><li>Migration de base de données<ul><li>SQLite, PostgreSQL, MariaDB</ul><li>Peer reviewing<li>Gestion de projet Agile<ul><li>Trello, GitHub Projects, daily sprints</ul></ul></table><table><col><col><thead><tr><th scope=col colspan=2>Apprenti Développeur Fullstack<tbody><tr><th scope=row><strong>Entreprise</strong><td><a href=https://lecadeaupresent.com/ >Présent</a><tr><th scope=row><strong>Période</strong><td>Avr. 2023 - Sep. 2024 (1 an et 5 mois)<tr><th scope=row><strong>Missions</strong><td><ul><li>Développement d'une<ul><li>application mobile interne<ul><li>Kotlin</ul><li>application mobile B2C<ul><li>Flutter</ul><li>API REST monolithique<ul><li>Typescript ,Fastify ,Prisma, Jest, MySql, Docker, GCP, Domain Driven Design</ul><li>SPA pour Desktop et Mobile<ul><li>React, Typescript, Zustand, Chakra UI</ul></ul></ul></table><table><col><col><thead><tr><th scope=col colspan=2>Apprenti Développeur R&D<tbody><tr><th scope=row><strong>Entreprise</strong><td><a href=https://wattearth.com/ >WATT Earth</a><tr><th scope=row><strong>Période</strong><td>Oct. 2021 - Sept. 2022 (1 an)<tr><th scope=row><strong>Missions</strong><td><ul><li>Conception et développement de fonctionnalités innovantes au cœur des produits WATT Earth :<ul><li>VueJS, Typescript, PHP, Python, MySql, Warp10, Grafana</ul><li>Maquettage et conception d'interfaces utilisateurs (<strong>Figma</strong>)<li>Réalisation de spécifications et de cahiers de recettes<li>Intégration de technologies dans la solution de l'entreprise, correspondant aux besoins client :<ul><li>Modbus, LoRaWAN, Zigbee, ...</ul></ul></table></section><section id=projets><h2>Projets récents</h2><table><col><col><thead><tr><th scope=col colspan=2>GoCMS<tbody><tr><th scope=row><strong>Description</strong><td>GoCMS est un projet de système de gestion de contenu développé en Go. Le but à terme de ce projet en cours de developpement est de me faciliter la création de site web qui nécessitent des fonctionnalités comme celles d'un Wordpress, notamment un système de blog et d'articles, mais sans avoir recours à Wordpress ou équivalent. L'architecture du projet est en DDD, Domain Driven Design, et le front de l'interface d'administration est généré en SSR via le moteur de templating html de Go. J'utilise également Bootstrap pour avoir de belles interface sans devoir fournir trop d'effort de développement front. J'héberge une démo du projet en CI/CD via Jenkins sur mon serveur dédié Debian, contenerisé via Docker et exposé via Nginx.<tr><th scope=row><strong>Stack</strong><td>Go, HTML, CSS, JS, Bootstrap, Docker, Nginx, DDD, Jenkins, Debian, SQLite, Git<tr><th scope=row><strong>Dépôt</strong><td><a href=https://github.com/Floriansylvain/GoCMS>GoCMS</a></table><table><col><col><thead><tr><th scope=col colspan=2>SnippetsManager<tbody><tr><th scope=row><strong>Description</strong><td>Projet réalisé dans le cadre d'un cours de Framework Backend à l'ESD, inspiré de l'outil open-source massCode dont le principe est de gérer des snippets (bouts de code). Il s'agit d'une API conçu en Typescript, Express, Prisma, MySql, Docker et Jest.<tr><th scope=row><strong>Stack</strong><td>Typescript, Express, Prisma, MySql, Docker, Jest, NodeJS, Git, TSX<tr><th scope=row><strong>Dépôt</strong><td><a href=https://github.com/Floriansylvain/SnippetsManager>SnippetsManager</a></table><table><col><col><thead><tr><th scope=col colspan=2>spotify-playlist-embed<tbody><tr><th scope=row><strong>Description</strong><td>Petit projet réalisé dans le cadre d'un cours de Framework Frontend à l'ESD, il s'agit d'un lecteur de playlist spotify réalisé en NextJS et Typescript, avec la spotify-web-apinode ainsi que Tailwindcss.<tr><th scope=row><strong>Stack</strong><td>NextJS, Typescript, Tailwindcss, Spotify API, TSX, Git, Vercel<tr><th scope=row><strong>Dépôt</strong><td><a href=https://github.com/Floriansylvain/spotify-playlist-embed>spotify-playlist-embed</a></table></section><section id=contact><h2>Contact</h2><p>Vous pouvez me contacter via les réseaux sociaux suivants :<ul><li><a href=https://www.linkedin.com/in/florian-sylvain-0651021a9/ >LinkedIn</a></ul><p>Autre moyens de contact indisponible sur ce portfolio pour éviter les crawlers malveillants et autre récolte de données, qui résulteront en spam et démarchage incéssants.</section></main><footer id=autres><h2>Pourquoi un site aussi simple ?</h2><p>Ce site pèse moins de 14ko. <a href=https://endtimes.dev/why-your-website-should-be-under-14kb-in-size/ >Why your website should be under 14kB in size</a></p><a href=#header>Remonter ↑</a><p>Dernière mise à jour : 2025/08/23</footer>
\ No newline at end of file
+<!doctypehtml><html lang=fr><meta charset=UTF-8><meta content="width=device-width,initial-scale=1"name=viewport><meta content="Portfolio de Florian Sylvain, développeur web fullstack actuellement en poste."name=description><link href=/favicon.webp rel=icon type=image/x-icon><link href=https://floriansylvain.fr/ rel=canonical><title>Portfolio Florian Sylvain - Développeur web fullstack</title><style>:root{--background:#0e120e;--foreground:#e2f1e2;--surface:#121a12;--surface-2:#162116;--border:#161f16;--accent:#7fc27f;--accent-hover:#a7e6a7;--accent-visited:#5e8a5e;--muted:#8aa78a}body{background:var(--background);color:var(--foreground);font-family:Inter,'Segoe UI',Arial,sans-serif;line-height:1.6;max-width:1000px;margin:auto;padding:16px;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}#header h1{font-size:clamp(1.6rem,3.5vw,2.25rem);font-weight:700;letter-spacing:.2px;color:var(--accent-hover);margin-bottom:8px}#header img{max-width:128px;height:auto;display:block;border:1px solid var(--border)}#header div{display:flex;align-items:flex-start;gap:16px}table{width:100%;margin-bottom:16px;table-layout:fixed;border-collapse:separate;border-spacing:0;background:var(--surface);border:1px solid var(--border);overflow:hidden}#experiences col:first-child,#projets col:first-child{width:120px}#experiences col:last-child,#projets col:last-child{width:100%}td,th{padding:10px 12px;text-align:left;vertical-align:top}thead th{background:var(--surface-2);color:var(--accent);font-weight:600;letter-spacing:.2px}tbody td{background:var(--surface)}tbody tr:nth-child(odd) td{background:color-mix(in srgb,var(--surface) 92%,#fff 8%)}caption{color:var(--muted);font-size:.95em;text-transform:uppercase;letter-spacing:.06em;padding:8px 0 6px}a{color:var(--accent);text-decoration:underline;text-decoration-color:var(--accent);text-decoration-thickness:.08em;text-underline-offset:2px}a:hover{color:var(--accent-hover);text-decoration-color:var(--accent-hover)}a:visited{color:var(--accent-visited)}a:focus-visible{outline:2px solid var(--accent);outline-offset:2px}ol,ul{margin:0;padding-left:20px}nav li{margin-bottom:6px}footer h2,section h2{color:var(--accent);font-size:clamp(1.2rem,2.2vw,1.4rem);margin-top:24px;margin-bottom:8px;font-weight:600;letter-spacing:.2px}footer{border-top:1px solid #1e2a1e;margin-top:32px;padding-top:12px;font-size:.95em;color:var(--muted);background:var(--background)}#experiences thead th,#projets thead th{font-size:large}@media (max-width:576px){body{padding:8px}#header div{flex-direction:column}table,td,th{font-size:.95em}}</style><header id=header><h1>Portfolio de Florian Sylvain</h1><div><img alt="Photo de Florian Sylvain"height=120 src=profile.webp width=128><p>Diplômé d'un Bachelor Développeur Web à l'ESD Paris, autoentrepreneur, je suis passionné par l'informatique. Actuellement en poste à temps plein en CDI chez DOLLEN (Bonnueil-sur-Marne) en tant que développeur web fullstack.</div></header><nav><h2>Navigation</h2><ol><li><a href=#competences>Compétences et qualifications</a><li><a href=#diplomes>Diplômes obtenus</a><li><a href=#experiences>Expériences professionnelles</a><li><a href=#projets>Projets récents</a><li><a href=#contact>Contact et coordonnées</a><li><a href=#autres>Autres informations</a></ol></nav><main><section id=competences><h2>Compétences et qualifications</h2><ul><li>Rédaction de spécifications et cahier de recettes.<li>Maîtrise de PhP, Java, Go, Html5/Css3, Javascript, Typescript, SQL, VueJS, React, Flutter, Docker, Jenkins, Git, GCP, et de Nginx. Apprendre un nouveau language ou framework n'est absolument pas un obstacle pour moi.<li>Maîtrise de l'anglais niveau C1<li>Maîtrise de la méthodologie agile, avec sprints, daily...</ul></section><section id=diplomes><h2>Diplômes obtenus</h2><table><thead><tr><th scope=col>Période<th scope=col>Établissement<th scope=col>Niveau<th scope=col>Diplôme<tbody><tr><td>2022 - 2024<td><a href=https://ecole-du-digital.com>ESD Paris</a><td>Bac +3 / RNCP 6<td>Bachelor Développeur Web<tr><td>2020 - 2022<td><a href=https://univ-gustave-eiffel.fr>Université Gustave Eiffel</a><td>Bac +2<td>DUT Informatique<tr><td>2017 - 2020<td>Lycée Polyvalent René Cassin<td>Bac<td>Baccalauréat STI2D <i>(mention bien)</i></table></section><section id=experiences><h2>Expériences professionnelles</h2><table><col><col><thead><tr><th scope=col colspan=2>CDI Développeur Web Fullstack<tbody><tr><th scope=row><strong>Entreprise</strong><td><a href=https://dollen.fr>Dollen</a><tr><th scope=row><strong>Période</strong><td>Nov. 2024 - En cours<tr><th scope=row><strong>Missions</strong><td><ul><li>Conception logiciel (diagramme de classes <strong>UML</strong>)<li>Développement d'un back office<ul><li>PHP 8.4, Symfony 7.3, Doctrine, Twig, Stimulus, PHPUnit, Domain Driven Design</ul><li>Déploiement et intégration continue du back-office en production et pré-production<ul><li>Docker, Debian, Nginx, GitHub Action</ul><li>Migration de base de données<ul><li>SQLite, PostgreSQL, MariaDB</ul><li>Peer reviewing<li>Gestion de projet Agile<ul><li>Trello, GitHub Projects, daily sprints</ul></ul></table><table><col><col><thead><tr><th scope=col colspan=2>Apprenti Développeur Fullstack<tbody><tr><th scope=row><strong>Entreprise</strong><td><a href=https://lecadeaupresent.com>Présent</a><tr><th scope=row><strong>Période</strong><td>Avr. 2023 - Sep. 2024 (1 an et 5 mois)<tr><th scope=row><strong>Missions</strong><td><ul><li>Développement d'une<ul><li>application mobile interne<ul><li>Kotlin</ul><li>application mobile B2C<ul><li>Flutter</ul><li>API REST monolithique<ul><li>Typescript ,Fastify ,Prisma, Jest, MySql, Docker, GCP, Domain Driven Design</ul><li>SPA pour Desktop et Mobile<ul><li>React, Typescript, Zustand, Chakra UI</ul></ul></ul></table><table><col><col><thead><tr><th scope=col colspan=2>Apprenti Développeur R&D<tbody><tr><th scope=row><strong>Entreprise</strong><td><a href=https://wattearth.com>WATT Earth</a><tr><th scope=row><strong>Période</strong><td>Oct. 2021 - Sept. 2022 (1 an)<tr><th scope=row><strong>Missions</strong><td><ul><li>Conception et développement de fonctionnalités innovantes au cœur des produits WATT Earth :<ul><li>VueJS, Typescript, PHP, Python, MySql, Warp10, Grafana</ul><li>Maquettage et conception d'interfaces utilisateurs (<strong>Figma</strong>)<li>Réalisation de spécifications et de cahiers de recettes<li>Intégration de technologies dans la solution de l'entreprise, correspondant aux besoins client :<ul><li>Modbus, LoRaWAN, Zigbee, ...</ul></ul></table></section><section id=projets><h2>Projets récents</h2><table><col><col><thead><tr><th scope=col colspan=2>GoCMS<tbody><tr><th scope=row><strong>Description</strong><td>GoCMS est un projet de système de gestion de contenu développé en Go. Le but à terme de ce projet en cours de developpement est de me faciliter la création de site web qui nécessitent des fonctionnalités comme celles d'un Wordpress, notamment un système de blog et d'articles, mais sans avoir recours à Wordpress ou équivalent. L'architecture du projet est en DDD, Domain Driven Design, et le front de l'interface d'administration est généré en SSR via le moteur de templating html de Go. J'utilise également Bootstrap pour avoir de belles interface sans devoir fournir trop d'effort de développement front. J'héberge une démo du projet en CI/CD via Jenkins sur mon serveur dédié Debian, contenerisé via Docker et exposé via Nginx.<tr><th scope=row><strong>Stack</strong><td>Go, HTML, CSS, JS, Bootstrap, Docker, Nginx, DDD, Jenkins, Debian, SQLite, Git<tr><th scope=row><strong>Dépôt</strong><td><a href=https://github.com/Floriansylvain/GoCMS>GoCMS</a></table><table><col><col><thead><tr><th scope=col colspan=2>SnippetsManager<tbody><tr><th scope=row><strong>Description</strong><td>Projet réalisé dans le cadre d'un cours de Framework Backend à l'ESD, inspiré de l'outil open-source massCode dont le principe est de gérer des snippets (bouts de code). Il s'agit d'une API conçu en Typescript, Express, Prisma, MySql, Docker et Jest.<tr><th scope=row><strong>Stack</strong><td>Typescript, Express, Prisma, MySql, Docker, Jest, NodeJS, Git, TSX<tr><th scope=row><strong>Dépôt</strong><td><a href=https://github.com/Floriansylvain/SnippetsManager>SnippetsManager</a></table><table><col><col><thead><tr><th scope=col colspan=2>spotify-playlist-embed<tbody><tr><th scope=row><strong>Description</strong><td>Petit projet réalisé dans le cadre d'un cours de Framework Frontend à l'ESD, il s'agit d'un lecteur de playlist spotify réalisé en NextJS et Typescript, avec la spotify-web-apinode ainsi que Tailwindcss.<tr><th scope=row><strong>Stack</strong><td>NextJS, Typescript, Tailwindcss, Spotify API, TSX, Git, Vercel<tr><th scope=row><strong>Dépôt</strong><td><a href=https://github.com/Floriansylvain/spotify-playlist-embed>spotify-playlist-embed</a></table></section><section id=contact><h2>Contact</h2><p>Vous pouvez me contacter via les réseaux sociaux suivants :<ul><li><a href=https://linkedin.com/in/florian-sylvain-0651021a9>LinkedIn</a></ul><p>Autre moyens de contact indisponible sur ce portfolio pour éviter les crawlers malveillants et autre récolte de données, qui résulteront en spam et démarchage incéssants.</section></main><footer id=autres><h2>Pourquoi un site aussi simple ?</h2><p>Ce site pèse moins de 14ko. <a href=https://endtimes.dev/why-your-website-should-be-under-14kb-in-size>Why your website should be under 14kB in size</a></p><a href=#header>Remonter ↑</a><p>Dernière mise à jour : 2025/08/23</footer>
\ No newline at end of file
diff --git a/index.html b/index.html
index 9708d8c..c9d88ee 100644
--- a/index.html
+++ b/index.html
@@ -4,62 +4,72 @@
 <head>
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <meta name="description" content="Portfolio de Florian Sylvain, développeur web fullstack." />
+    <meta name="description" content="Portfolio de Florian Sylvain, développeur web fullstack actuellement en poste." />
     <link rel="icon" type="image/x-icon" href="/favicon.webp" />
     <link rel="canonical" href="https://floriansylvain.fr/" />
-    <title>Portfolio Florian Sylvain</title>
+    <title>Portfolio Florian Sylvain - Développeur web fullstack</title>
 
     <style>
         :root {
             --background: #0e120e;
             --foreground: #e2f1e2;
+            --surface: #121a12;
+            --surface-2: #162116;
             --border: #161f16;
             --accent: #7fc27f;
             --accent-hover: #a7e6a7;
             --accent-visited: #5e8a5e;
-            --muted: #7fa07f;
+            --muted: #8aa78a;
         }
 
         body {
             background: var(--background);
             color: var(--foreground);
             font-family: 'Inter', 'Segoe UI', Arial, sans-serif;
+            line-height: 1.6;
             max-width: 1000px;
             margin: auto;
             padding: 16px;
+            text-rendering: optimizeLegibility;
+            -webkit-font-smoothing: antialiased;
+            -moz-osx-font-smoothing: grayscale;
         }
 
         #header h1 {
-            font-size: 2rem;
+            font-size: clamp(1.6rem, 3.5vw, 2.25rem);
             font-weight: 700;
-            letter-spacing: .5px;
+            letter-spacing: .2px;
             color: var(--accent-hover);
+            margin-bottom: 8px;
         }
 
         #header img {
-            max-width: 140px;
+            max-width: 128px;
             height: auto;
-            border: 2px solid var(--border);
+            display: block;
+            border: 1px solid var(--border);
         }
 
         #header div {
             display: flex;
-            align-items: center;
+            align-items: flex-start;
             gap: 16px;
         }
 
         table {
-            border: none;
-            background: var(--border);
             width: 100%;
             margin-bottom: 16px;
-            overflow: hidden;
             table-layout: fixed;
+            border-collapse: separate;
+            border-spacing: 0;
+            background: var(--surface);
+            border: 1px solid var(--border);
+            overflow: hidden;
         }
 
         #experiences col:first-child,
         #projets col:first-child {
-            width: 100px;
+            width: 120px;
         }
 
         #experiences col:last-child,
@@ -69,46 +79,56 @@
 
         th,
         td {
-            border: none;
-            padding: 8px 10px;
+            padding: 10px 12px;
             text-align: left;
             vertical-align: top;
         }
 
-        th {
-            background: var(--border);
+        thead th {
+            background: var(--surface-2);
             color: var(--accent);
             font-weight: 600;
             letter-spacing: .2px;
         }
 
-        td {
-            background: var(--border);
+        tbody td {
+            background: var(--surface);
+        }
+
+        tbody tr:nth-child(odd) td {
+            background: color-mix(in srgb, var(--surface) 92%, white 8%);
         }
 
         caption {
             color: var(--muted);
             font-size: .95em;
-            margin-bottom: 4px;
+            text-transform: uppercase;
+            letter-spacing: .06em;
+            padding: 8px 0 6px;
         }
 
         a {
             color: var(--accent);
-            text-decoration: none;
-            transition: color .2s, border-bottom .2s;
-            border-bottom: 1px dotted var(--accent);
+            text-decoration: underline;
+            text-decoration-color: var(--accent);
+            text-decoration-thickness: 0.08em;
+            text-underline-offset: 2px;
         }
 
         a:hover {
             color: var(--accent-hover);
-            border-bottom: 1px solid var(--accent-hover);
-            text-decoration: none;
+            text-decoration-color: var(--accent-hover);
         }
 
         a:visited {
             color: var(--accent-visited);
         }
 
+        a:focus-visible {
+            outline: 2px solid var(--accent);
+            outline-offset: 2px;
+        }
+
         ul,
         ol {
             margin: 0;
@@ -122,7 +142,7 @@
         section h2,
         footer h2 {
             color: var(--accent);
-            font-size: 1.4rem;
+            font-size: clamp(1.2rem, 2.2vw, 1.4rem);
             margin-top: 24px;
             margin-bottom: 8px;
             font-weight: 600;
@@ -165,15 +185,12 @@
     <header id="header">
         <h1>Portfolio de Florian Sylvain</h1>
         <div>
-            <img width="150" height="140" src="profile.webp" alt="Photo de Florian Sylvain" />
+            <img width="128" height="120" src="profile.webp" alt="Photo de Florian Sylvain" />
             <p>
                 Diplômé d'un Bachelor Développeur Web à l'ESD Paris,
                 autoentrepreneur, je suis passionné par l'informatique.
                 Actuellement en poste à temps plein en CDI chez DOLLEN
-                (Bonnueil-sur-Marne) en tant que développeur web fullstack, je
-                suis à l'écoute pour toute nouvelle opportunité. Disponible sous
-                moins d'un mois, je suis véhiculé, ouvert à une prise de poste
-                dans toute la France et à l'international.
+                (Bonnueil-sur-Marne) en tant que développeur web fullstack.
             </p>
         </div>
     </header>
@@ -206,7 +223,6 @@
         <section id="diplomes">
             <h2>Diplômes obtenus</h2>
             <table>
-                <caption>Tableau des diplômes obtenus</caption>
                 <thead>
                     <tr>
                         <th scope="col">Période</th>
@@ -218,13 +234,13 @@
                 <tbody>
                     <tr>
                         <td>2022 - 2024</td>
-                        <td><a href="https://ecole-du-digital.com/">ESD Paris</a></td>
+                        <td><a href="https://ecole-du-digital.com">ESD Paris</a></td>
                         <td>Bac +3 / RNCP 6</td>
                         <td>Bachelor Développeur Web</td>
                     </tr>
                     <tr>
                         <td>2020 - 2022</td>
-                        <td><a href="https://www.univ-gustave-eiffel.fr/">Université Gustave Eiffel</a></td>
+                        <td><a href="https://univ-gustave-eiffel.fr">Université Gustave Eiffel</a></td>
                         <td>Bac +2</td>
                         <td>DUT Informatique</td>
                     </tr>
@@ -254,7 +270,7 @@
                 <tbody>
                     <tr>
                         <th scope="row"><strong>Entreprise</strong></th>
-                        <td><a href="https://dollen.fr/">Dollen</a></td>
+                        <td><a href="https://dollen.fr">Dollen</a></td>
                     </tr>
                     <tr>
                         <th scope="row"><strong>Période</strong></th>
@@ -310,7 +326,7 @@
                 <tbody>
                     <tr>
                         <th scope="row"><strong>Entreprise</strong></th>
-                        <td><a href="https://lecadeaupresent.com/">Présent</a></td>
+                        <td><a href="https://lecadeaupresent.com">Présent</a></td>
                     </tr>
                     <tr>
                         <th scope="row"><strong>Période</strong></th>
@@ -365,7 +381,7 @@
                 <tbody>
                     <tr>
                         <th scope="row"><strong>Entreprise</strong></th>
-                        <td><a href="https://wattearth.com/">WATT Earth</a></td>
+                        <td><a href="https://wattearth.com">WATT Earth</a></td>
                     </tr>
                     <tr>
                         <th scope="row"><strong>Période</strong></th>
@@ -497,7 +513,7 @@
             <h2>Contact</h2>
             <p>Vous pouvez me contacter via les réseaux sociaux suivants :</p>
             <ul>
-                <li><a href="https://www.linkedin.com/in/florian-sylvain-0651021a9/">LinkedIn</a></li>
+                <li><a href="https://linkedin.com/in/florian-sylvain-0651021a9">LinkedIn</a></li>
             </ul>
             <p>Autre moyens de contact indisponible sur ce portfolio pour éviter les crawlers malveillants et autre
                 récolte de données, qui résulteront en spam et démarchage incéssants.</p>
@@ -507,7 +523,7 @@
     <footer id="autres">
         <h2>Pourquoi un site aussi simple ?</h2>
         <p>Ce site pèse moins de 14ko.
-            <a href="https://endtimes.dev/why-your-website-should-be-under-14kb-in-size/">Why your website should be
+            <a href="https://endtimes.dev/why-your-website-should-be-under-14kb-in-size">Why your website should be
                 under 14kB in size
             </a>
         </p>

Période	Établissement	Niveau	Diplôme
2022 - 2024	ESD Paris	Bac +3 / RNCP 6	Bachelor Développeur Web
2020 - 2022	Université Gustave Eiffel	Bac +2	DUT Informatique
2017 - 2020	Lycée Polyvalent René Cassin	Bac	Baccalauréat STI2D (mention bien)
CDI Développeur Web Fullstack
Entreprise	Dollen
Période	Nov. 2024 - En cours
Missions	Conception logiciel (diagramme de classes UML) Développement d'un back office PHP 8.4, Symfony 7.3, Doctrine, Twig, Stimulus, PHPUnit, Domain Driven Design Déploiement et intégration continue du back-office en production et pré-production Docker, Debian, Nginx, GitHub Action Migration de base de données SQLite, PostgreSQL, MariaDB Peer reviewing Gestion de projet Agile Trello, GitHub Projects, daily sprints
Apprenti Développeur Fullstack
Entreprise	Présent
Période	Avr. 2023 - Sep. 2024 (1 an et 5 mois)
Missions	Développement d'une application mobile interne Kotlin application mobile B2C Flutter API REST monolithique Typescript ,Fastify ,Prisma, Jest, MySql, Docker, GCP, Domain Driven Design SPA pour Desktop et Mobile React, Typescript, Zustand, Chakra UI
Apprenti Développeur R&D
Entreprise	WATT Earth
Période	Oct. 2021 - Sept. 2022 (1 an)
Missions	Conception et développement de fonctionnalités innovantes au cœur des produits WATT Earth : VueJS, Typescript, PHP, Python, MySql, Warp10, Grafana Maquettage et conception d'interfaces utilisateurs (Figma) Réalisation de spécifications et de cahiers de recettes Intégration de technologies dans la solution de l'entreprise, correspondant aux besoins client : Modbus, LoRaWAN, Zigbee, ...
GoCMS
Description	GoCMS est un projet de système de gestion de contenu développé en Go. Le but à terme de ce projet en cours de developpement est de me faciliter la création de site web qui nécessitent des fonctionnalités comme celles d'un Wordpress, notamment un système de blog et d'articles, mais sans avoir recours à Wordpress ou équivalent. L'architecture du projet est en DDD, Domain Driven Design, et le front de l'interface d'administration est généré en SSR via le moteur de templating html de Go. J'utilise également Bootstrap pour avoir de belles interface sans devoir fournir trop d'effort de développement front. J'héberge une démo du projet en CI/CD via Jenkins sur mon serveur dédié Debian, contenerisé via Docker et exposé via Nginx.
Stack	Go, HTML, CSS, JS, Bootstrap, Docker, Nginx, DDD, Jenkins, Debian, SQLite, Git
Dépôt	GoCMS
SnippetsManager
Description	Projet réalisé dans le cadre d'un cours de Framework Backend à l'ESD, inspiré de l'outil open-source massCode dont le principe est de gérer des snippets (bouts de code). Il s'agit d'une API conçu en Typescript, Express, Prisma, MySql, Docker et Jest.
Stack	Typescript, Express, Prisma, MySql, Docker, Jest, NodeJS, Git, TSX
Dépôt	SnippetsManager
spotify-playlist-embed
Description	Petit projet réalisé dans le cadre d'un cours de Framework Frontend à l'ESD, il s'agit d'un lecteur de playlist spotify réalisé en NextJS et Typescript, avec la spotify-web-apinode ainsi que Tailwindcss.
Stack	NextJS, Typescript, Tailwindcss, Spotify API, TSX, Git, Vercel
Dépôt	spotify-playlist-embed