mirror of
https://github.com/Floriansylvain/compact-portfolio.git
synced 2026-10-19 01:24:11 +02:00
feat: enhance portfolio layout and accessibility improvements
This commit is contained in:
Florian Sylvain committed
1 parent
62bc22bbee
commit
f5acff7e9a
2 files changed
+55
-39
No files matched your search
+1
-1
@@ -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><strongLine 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 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, NgLine truncated
|
||||
+54
-38
@@ -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>
|
||||
|
||||
Reference in new issue
Block a user