feat: enhance layout & styling for improved readability, responsive, accessibility, best practice

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>body{background-color:#111;color:#fff;max-width:1000px;margin:auto}#header{display:grid;grid-template-columns:1fr 150px;gap:16px}#header img{max-width:100%;height:auto}table{border:3px outset #aaa;width:100%}table td,table th{border:1px inset #bbb}a{color:#0af}a:visited{color:#598cac}#experiences table,#projets table{margin-bottom:16px;table-layout:fixed}#experiences col:first-child,#projets col:first-child{width:100px}#experiences col:last-child,#projets col:last-child{width:100%}ul{margin:0}</style><header id=header><article><h1>Portfolio de Florian Sylvain</h1><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.</article><aside><img alt="Photo de Florian Sylvain"src=profile.webp></aside></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<th scope=col>Mention<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<td><tr><td>2020 - 2022<td><a href=https://www.univ-gustave-eiffel.fr/ >Université Gustave Eiffel</a><td>Bac +2<td>DUT Informatique<td><tr><td>2017 - 2020<td>Lycée Polyvalent René Cassin<td>Bac<td>Baccalauréat STI2D<td>Bien</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 deLine truncated
+<!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>body{background-color:#111;color:#fff;max-width:1000px;margin:auto;padding:16px}#header{display:flex;flex-direction:column}#header div{display:flex;align-items:center;gap:32px}#header img{max-width:150px;height:auto}table{border:3px outset #aaa;width:100%}table td,table th{border:1px inset #bbb}a{color:#0af}a:visited{color:#598cac}#experiences table,#projets table{margin-bottom:16px;table-layout:fixed}#experiences col:first-child,#projets col:first-child{width:100px}#experiences col:last-child,#projets col:last-child{width:100%}ul{margin:0}nav li{margin-bottom:8px}@media screen and (max-width:576px){body{padding:0}#header img{max-width:100px}}</style><header id=header><div><h1>Portfolio de Florian Sylvain</h1><img alt="Photo de Florian Sylvain"height=140 src=profile.webp width=150></div><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.</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 (Line truncated

index.html

@@ -15,16 +15,22 @@
             color: #fff;
             max-width: 1000px;
             margin: auto;
+            padding: 16px;
         }
 
         #header {
-            display: grid;
+            display: flex;
-            grid-template-columns: 1fr 150px;
+            flex-direction: column;
-            gap: 16px;
+        }
+
+        #header div {
+            display: flex;
+            align-items: center;
+            gap: 32px;
         }
 
         #header img {
-            max-width: 100%;
+            max-width: 150px;
             height: auto;
         }
 
@@ -65,26 +71,38 @@
         ul {
             margin: 0;
         }
+
+        nav li {
+            margin-bottom: 8px;
+        }
+
+        @media screen and (max-width: 576px) {
+            body {
+                padding: 0;
+            }
+
+            #header img {
+                max-width: 100px;
+            }
+        }
     </style>
 </head>
 
 <body>
     <header id="header">
-        <article>
+        <div>
             <h1>Portfolio de Florian Sylvain</h1>
-            <p>
+            <img width="150" height="140" src="profile.webp" alt="Photo de Florian Sylvain" />
-                Diplômé d'un Bachelor Développeur Web à l'ESD Paris,
+        </div>
-                autoentrepreneur, je suis passionné par l'informatique.
+        <p>
-                Actuellement en poste à temps plein en CDI chez DOLLEN
+            Diplômé d'un Bachelor Développeur Web à l'ESD Paris,
-                (Bonnueil-sur-Marne) en tant que développeur web fullstack, je
+            autoentrepreneur, je suis passionné par l'informatique.
-                suis à l'écoute pour toute nouvelle opportunité. Disponible sous
+            Actuellement en poste à temps plein en CDI chez DOLLEN
-                moins d'un mois, je suis véhiculé, ouvert à une prise de poste
+            (Bonnueil-sur-Marne) en tant que développeur web fullstack, je
-                dans toute la France et à l'international.
+            suis à l'écoute pour toute nouvelle opportunité. Disponible sous
-            </p>
+            moins d'un mois, je suis véhiculé, ouvert à une prise de poste
-        </article>
+            dans toute la France et à l'international.
-        <aside>
+        </p>
-            <img src="profile.webp" alt="Photo de Florian Sylvain" />
-        </aside>
     </header>
 
     <nav>
@@ -122,7 +140,6 @@
                         <th scope="col">Établissement</th>
                         <th scope="col">Niveau</th>
                         <th scope="col">Diplôme</th>
-                        <th scope="col">Mention</th>
                     </tr>
                 </thead>
                 <tbody>
@@ -131,21 +148,18 @@
                         <td><a href="https://ecole-du-digital.com/">ESD Paris</a></td>
                         <td>Bac +3 / RNCP 6</td>
                         <td>Bachelor Développeur Web</td>
-                        <td></td>
                     </tr>
                     <tr>
                         <td>2020 - 2022</td>
                         <td><a href="https://www.univ-gustave-eiffel.fr/">Université Gustave Eiffel</a></td>
                         <td>Bac +2</td>
                         <td>DUT Informatique</td>
-                        <td></td>
                     </tr>
                     <tr>
                         <td>2017 - 2020</td>
                         <td>Lycée Polyvalent René Cassin</td>
                         <td>Bac</td>
-                        <td>Baccalauréat STI2D</td>
+                        <td>Baccalauréat STI2D <i>(mention bien)</i></td>
-                        <td>Bien</td>
                     </tr>
                 </tbody>
             </table>

sitemap.xml

@@ -1,16 +1,10 @@
 <?xml version="1.0" encoding="UTF-8"?>
 <urlset
-      xmlns="http://www.sitemaps.org/schemas/sitemap/0.9"
+  xmlns="http://www.sitemaps.org/schemas/sitemap/0.9"
-      xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
+  xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
-      xsi:schemaLocation="http://www.sitemaps.org/schemas/sitemap/0.9
+  xsi:schemaLocation="http://www.sitemaps.org/schemas/sitemap/0.9 http://www.sitemaps.org/schemas/sitemap/0.9/sitemap.xsd">
-            http://www.sitemaps.org/schemas/sitemap/0.9/sitemap.xsd">
+  <url>
-<!-- created with Free Online Sitemap Generator www.xml-sitemaps.com -->
+    <loc>https://floriansylvain.fr/</loc>
-
+    <lastmod>2025-08-23T16:28:03+00:00</lastmod>
-
+  </url>
-<url>
-  <loc>https://floriansylvain.fr/</loc>
-  <lastmod>2025-08-23T16:28:03+00:00</lastmod>
-</url>
-
-
 </urlset>