mirror of
https://github.com/Floriansylvain/compact-portfolio.git
synced 2026-08-19 11:43:19 +02:00
feat: enhance portfolio layout and accessibility improvements
This commit is contained in:
Florian Sylvain
+1
-1
File diff suppressed because one or more lines are too long
+54
-38
@@ -4,62 +4,72 @@
|
|||||||
<head>
|
<head>
|
||||||
<meta charset="UTF-8" />
|
<meta charset="UTF-8" />
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
<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="icon" type="image/x-icon" href="/favicon.webp" />
|
||||||
<link rel="canonical" href="https://floriansylvain.fr/" />
|
<link rel="canonical" href="https://floriansylvain.fr/" />
|
||||||
<title>Portfolio Florian Sylvain</title>
|
<title>Portfolio Florian Sylvain - Développeur web fullstack</title>
|
||||||
|
|
||||||
<style>
|
<style>
|
||||||
:root {
|
:root {
|
||||||
--background: #0e120e;
|
--background: #0e120e;
|
||||||
--foreground: #e2f1e2;
|
--foreground: #e2f1e2;
|
||||||
|
--surface: #121a12;
|
||||||
|
--surface-2: #162116;
|
||||||
--border: #161f16;
|
--border: #161f16;
|
||||||
--accent: #7fc27f;
|
--accent: #7fc27f;
|
||||||
--accent-hover: #a7e6a7;
|
--accent-hover: #a7e6a7;
|
||||||
--accent-visited: #5e8a5e;
|
--accent-visited: #5e8a5e;
|
||||||
--muted: #7fa07f;
|
--muted: #8aa78a;
|
||||||
}
|
}
|
||||||
|
|
||||||
body {
|
body {
|
||||||
background: var(--background);
|
background: var(--background);
|
||||||
color: var(--foreground);
|
color: var(--foreground);
|
||||||
font-family: 'Inter', 'Segoe UI', Arial, sans-serif;
|
font-family: 'Inter', 'Segoe UI', Arial, sans-serif;
|
||||||
|
line-height: 1.6;
|
||||||
max-width: 1000px;
|
max-width: 1000px;
|
||||||
margin: auto;
|
margin: auto;
|
||||||
padding: 16px;
|
padding: 16px;
|
||||||
|
text-rendering: optimizeLegibility;
|
||||||
|
-webkit-font-smoothing: antialiased;
|
||||||
|
-moz-osx-font-smoothing: grayscale;
|
||||||
}
|
}
|
||||||
|
|
||||||
#header h1 {
|
#header h1 {
|
||||||
font-size: 2rem;
|
font-size: clamp(1.6rem, 3.5vw, 2.25rem);
|
||||||
font-weight: 700;
|
font-weight: 700;
|
||||||
letter-spacing: .5px;
|
letter-spacing: .2px;
|
||||||
color: var(--accent-hover);
|
color: var(--accent-hover);
|
||||||
|
margin-bottom: 8px;
|
||||||
}
|
}
|
||||||
|
|
||||||
#header img {
|
#header img {
|
||||||
max-width: 140px;
|
max-width: 128px;
|
||||||
height: auto;
|
height: auto;
|
||||||
border: 2px solid var(--border);
|
display: block;
|
||||||
|
border: 1px solid var(--border);
|
||||||
}
|
}
|
||||||
|
|
||||||
#header div {
|
#header div {
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: flex-start;
|
||||||
gap: 16px;
|
gap: 16px;
|
||||||
}
|
}
|
||||||
|
|
||||||
table {
|
table {
|
||||||
border: none;
|
|
||||||
background: var(--border);
|
|
||||||
width: 100%;
|
width: 100%;
|
||||||
margin-bottom: 16px;
|
margin-bottom: 16px;
|
||||||
overflow: hidden;
|
|
||||||
table-layout: fixed;
|
table-layout: fixed;
|
||||||
|
border-collapse: separate;
|
||||||
|
border-spacing: 0;
|
||||||
|
background: var(--surface);
|
||||||
|
border: 1px solid var(--border);
|
||||||
|
overflow: hidden;
|
||||||
}
|
}
|
||||||
|
|
||||||
#experiences col:first-child,
|
#experiences col:first-child,
|
||||||
#projets col:first-child {
|
#projets col:first-child {
|
||||||
width: 100px;
|
width: 120px;
|
||||||
}
|
}
|
||||||
|
|
||||||
#experiences col:last-child,
|
#experiences col:last-child,
|
||||||
@@ -69,46 +79,56 @@
|
|||||||
|
|
||||||
th,
|
th,
|
||||||
td {
|
td {
|
||||||
border: none;
|
padding: 10px 12px;
|
||||||
padding: 8px 10px;
|
|
||||||
text-align: left;
|
text-align: left;
|
||||||
vertical-align: top;
|
vertical-align: top;
|
||||||
}
|
}
|
||||||
|
|
||||||
th {
|
thead th {
|
||||||
background: var(--border);
|
background: var(--surface-2);
|
||||||
color: var(--accent);
|
color: var(--accent);
|
||||||
font-weight: 600;
|
font-weight: 600;
|
||||||
letter-spacing: .2px;
|
letter-spacing: .2px;
|
||||||
}
|
}
|
||||||
|
|
||||||
td {
|
tbody td {
|
||||||
background: var(--border);
|
background: var(--surface);
|
||||||
|
}
|
||||||
|
|
||||||
|
tbody tr:nth-child(odd) td {
|
||||||
|
background: color-mix(in srgb, var(--surface) 92%, white 8%);
|
||||||
}
|
}
|
||||||
|
|
||||||
caption {
|
caption {
|
||||||
color: var(--muted);
|
color: var(--muted);
|
||||||
font-size: .95em;
|
font-size: .95em;
|
||||||
margin-bottom: 4px;
|
text-transform: uppercase;
|
||||||
|
letter-spacing: .06em;
|
||||||
|
padding: 8px 0 6px;
|
||||||
}
|
}
|
||||||
|
|
||||||
a {
|
a {
|
||||||
color: var(--accent);
|
color: var(--accent);
|
||||||
text-decoration: none;
|
text-decoration: underline;
|
||||||
transition: color .2s, border-bottom .2s;
|
text-decoration-color: var(--accent);
|
||||||
border-bottom: 1px dotted var(--accent);
|
text-decoration-thickness: 0.08em;
|
||||||
|
text-underline-offset: 2px;
|
||||||
}
|
}
|
||||||
|
|
||||||
a:hover {
|
a:hover {
|
||||||
color: var(--accent-hover);
|
color: var(--accent-hover);
|
||||||
border-bottom: 1px solid var(--accent-hover);
|
text-decoration-color: var(--accent-hover);
|
||||||
text-decoration: none;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
a:visited {
|
a:visited {
|
||||||
color: var(--accent-visited);
|
color: var(--accent-visited);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
a:focus-visible {
|
||||||
|
outline: 2px solid var(--accent);
|
||||||
|
outline-offset: 2px;
|
||||||
|
}
|
||||||
|
|
||||||
ul,
|
ul,
|
||||||
ol {
|
ol {
|
||||||
margin: 0;
|
margin: 0;
|
||||||
@@ -122,7 +142,7 @@
|
|||||||
section h2,
|
section h2,
|
||||||
footer h2 {
|
footer h2 {
|
||||||
color: var(--accent);
|
color: var(--accent);
|
||||||
font-size: 1.4rem;
|
font-size: clamp(1.2rem, 2.2vw, 1.4rem);
|
||||||
margin-top: 24px;
|
margin-top: 24px;
|
||||||
margin-bottom: 8px;
|
margin-bottom: 8px;
|
||||||
font-weight: 600;
|
font-weight: 600;
|
||||||
@@ -165,15 +185,12 @@
|
|||||||
<header id="header">
|
<header id="header">
|
||||||
<h1>Portfolio de Florian Sylvain</h1>
|
<h1>Portfolio de Florian Sylvain</h1>
|
||||||
<div>
|
<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>
|
<p>
|
||||||
Diplômé d'un Bachelor Développeur Web à l'ESD Paris,
|
Diplômé d'un Bachelor Développeur Web à l'ESD Paris,
|
||||||
autoentrepreneur, je suis passionné par l'informatique.
|
autoentrepreneur, je suis passionné par l'informatique.
|
||||||
Actuellement en poste à temps plein en CDI chez DOLLEN
|
Actuellement en poste à temps plein en CDI chez DOLLEN
|
||||||
(Bonnueil-sur-Marne) en tant que développeur web fullstack, je
|
(Bonnueil-sur-Marne) en tant que développeur web fullstack.
|
||||||
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.
|
|
||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
</header>
|
</header>
|
||||||
@@ -206,7 +223,6 @@
|
|||||||
<section id="diplomes">
|
<section id="diplomes">
|
||||||
<h2>Diplômes obtenus</h2>
|
<h2>Diplômes obtenus</h2>
|
||||||
<table>
|
<table>
|
||||||
<caption>Tableau des diplômes obtenus</caption>
|
|
||||||
<thead>
|
<thead>
|
||||||
<tr>
|
<tr>
|
||||||
<th scope="col">Période</th>
|
<th scope="col">Période</th>
|
||||||
@@ -218,13 +234,13 @@
|
|||||||
<tbody>
|
<tbody>
|
||||||
<tr>
|
<tr>
|
||||||
<td>2022 - 2024</td>
|
<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>Bac +3 / RNCP 6</td>
|
||||||
<td>Bachelor Développeur Web</td>
|
<td>Bachelor Développeur Web</td>
|
||||||
</tr>
|
</tr>
|
||||||
<tr>
|
<tr>
|
||||||
<td>2020 - 2022</td>
|
<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>Bac +2</td>
|
||||||
<td>DUT Informatique</td>
|
<td>DUT Informatique</td>
|
||||||
</tr>
|
</tr>
|
||||||
@@ -254,7 +270,7 @@
|
|||||||
<tbody>
|
<tbody>
|
||||||
<tr>
|
<tr>
|
||||||
<th scope="row"><strong>Entreprise</strong></th>
|
<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>
|
||||||
<tr>
|
<tr>
|
||||||
<th scope="row"><strong>Période</strong></th>
|
<th scope="row"><strong>Période</strong></th>
|
||||||
@@ -310,7 +326,7 @@
|
|||||||
<tbody>
|
<tbody>
|
||||||
<tr>
|
<tr>
|
||||||
<th scope="row"><strong>Entreprise</strong></th>
|
<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>
|
||||||
<tr>
|
<tr>
|
||||||
<th scope="row"><strong>Période</strong></th>
|
<th scope="row"><strong>Période</strong></th>
|
||||||
@@ -365,7 +381,7 @@
|
|||||||
<tbody>
|
<tbody>
|
||||||
<tr>
|
<tr>
|
||||||
<th scope="row"><strong>Entreprise</strong></th>
|
<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>
|
||||||
<tr>
|
<tr>
|
||||||
<th scope="row"><strong>Période</strong></th>
|
<th scope="row"><strong>Période</strong></th>
|
||||||
@@ -497,7 +513,7 @@
|
|||||||
<h2>Contact</h2>
|
<h2>Contact</h2>
|
||||||
<p>Vous pouvez me contacter via les réseaux sociaux suivants :</p>
|
<p>Vous pouvez me contacter via les réseaux sociaux suivants :</p>
|
||||||
<ul>
|
<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>
|
</ul>
|
||||||
<p>Autre moyens de contact indisponible sur ce portfolio pour éviter les crawlers malveillants et autre
|
<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>
|
récolte de données, qui résulteront en spam et démarchage incéssants.</p>
|
||||||
@@ -507,7 +523,7 @@
|
|||||||
<footer id="autres">
|
<footer id="autres">
|
||||||
<h2>Pourquoi un site aussi simple ?</h2>
|
<h2>Pourquoi un site aussi simple ?</h2>
|
||||||
<p>Ce site pèse moins de 14ko.
|
<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
|
under 14kB in size
|
||||||
</a>
|
</a>
|
||||||
</p>
|
</p>
|
||||||
|
|||||||
Reference in New Issue
Block a user