mirror of
https://github.com/Floriansylvain/compact-portfolio.git
synced 2026-08-19 11:43:19 +02:00
319 lines
14 KiB
HTML
319 lines
14 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="fr">
|
||
|
||
<head>
|
||
<meta charset="UTF-8" />
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||
<meta name="description" content="Diplômé d'un Bachelor Développeur Web à l'ESD Paris et récemment en poste chez Tool4Staffing, je porte une attention
|
||
particulière à la maintenabilité et aux bonnes pratiques. Passionné d'informatique, je m'investis
|
||
également dans des projets personnels et des missions en freelance pour continuer à progresser et résoudre des
|
||
problèmes." />
|
||
<link rel="icon" type="image/webp" href="/favicon.webp" />
|
||
<link rel="canonical" href="https://floriansylvain.fr/" />
|
||
<meta name="theme-color" content="#0e120e" />
|
||
<title>Portfolio Florian Sylvain - Développeur web fullstack</title>
|
||
|
||
<link rel="stylesheet" href="style.css">
|
||
|
||
<noscript>
|
||
<style>
|
||
.reveal {
|
||
opacity: 1 !important;
|
||
transform: none !important;
|
||
}
|
||
|
||
@media (max-width: 760px) {
|
||
.site-nav {
|
||
position: static !important;
|
||
display: flex !important;
|
||
flex-direction: column !important;
|
||
background: transparent !important;
|
||
border: none !important;
|
||
padding: 0 !important;
|
||
box-shadow: none !important;
|
||
gap: 0 !important;
|
||
}
|
||
|
||
.menu-toggle {
|
||
display: none !important;
|
||
}
|
||
|
||
.site-header {
|
||
height: auto !important;
|
||
padding: 16px 0 !important;
|
||
}
|
||
|
||
.site-header .inner {
|
||
flex-direction: column !important;
|
||
gap: 16px !important;
|
||
}
|
||
}
|
||
</style>
|
||
</noscript>
|
||
</head>
|
||
|
||
<body id="top">
|
||
<header class="site-header">
|
||
<div class="container inner">
|
||
<a class="brand" href="#top" aria-label="Accueil">
|
||
<span class="logo">FS</span>
|
||
<span>Florian Sylvain</span>
|
||
</a>
|
||
<nav class="site-nav" id="primaryNav" aria-label="Navigation principale">
|
||
<a href="#about">À propos</a>
|
||
<a href="#skills">Compétences</a>
|
||
<a href="#experience">Expérience</a>
|
||
<a href="#projects">Projets</a>
|
||
<a href="#contact">Contact</a>
|
||
</nav>
|
||
<button class="menu-toggle" id="menuToggle" aria-controls="primaryNav" aria-expanded="false" type="button">
|
||
<span class="bars"><span></span></span>
|
||
Menu
|
||
</button>
|
||
</div>
|
||
</header>
|
||
|
||
<main class="container">
|
||
<section id="about" class="hero hero-fullscreen" aria-labelledby="hero-title">
|
||
<div class="hero-card">
|
||
<p class="eyebrow animate-fade-in">Développeur web fullstack</p>
|
||
<h1 id="hero-title" class="animate-slide-up">
|
||
<span class="word">Je</span>
|
||
<span class="word">conçois,</span>
|
||
<span class="word">développe</span>
|
||
<span class="word">et</span>
|
||
<span class="word">déploie</span>
|
||
<span class="word">des</span>
|
||
<span class="word">applications</span>
|
||
<span class="word">web</span>
|
||
<span class="word">performantes</span>
|
||
<span class="word">et</span>
|
||
<span class="word">maintenables.</span>
|
||
</h1>
|
||
<p class="animate-fade-in-delayed">
|
||
Diplômé d'un Bachelor Développeur Web à l'ESD Paris et récemment en poste chez Tool4Staffing, je porte une
|
||
attention
|
||
particulière à la maintenabilité et aux bonnes pratiques. Passionné d'informatique, je m'investis
|
||
également dans des projets personnels et des missions en freelance pour continuer à progresser et résoudre des
|
||
problèmes.
|
||
</p>
|
||
<div class="cta animate-fade-in-delayed">
|
||
<a class="btn primary" href="#projects">Voir mes projets</a>
|
||
<a class="btn" href="#contact">Me contacter</a>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<section id="skills" class="card reveal">
|
||
<h2>Compétences et qualifications</h2>
|
||
<p class="lead">J'aime les outils simples et le code clair.</p>
|
||
<div class="skill-groups">
|
||
<div class="group">
|
||
<h3>Backend</h3>
|
||
<div class="tags">
|
||
<span class="tag">PHP</span><span class="tag">Symfony</span><span class="tag">Doctrine</span>
|
||
<span class="tag">Node</span><span class="tag">Fastify</span><span class="tag">Prisma</span>
|
||
<span class="tag">Jest</span><span class="tag">Go</span>
|
||
<span class="tag">Java</span><span class="tag">C#</span><span class="tag">C++</span>
|
||
</div>
|
||
</div>
|
||
<div class="group">
|
||
<h3>Frontend</h3>
|
||
<div class="tags">
|
||
<span class="tag">Vue</span>
|
||
<span class="tag">Nuxt</span>
|
||
<span class="tag">React</span>
|
||
<span class="tag">Next</span>
|
||
<span class="tag">TypeScript</span>
|
||
<span class="tag">HTML</span>
|
||
<span class="tag">CSS</span>
|
||
<span class="tag">Tailwind</span>
|
||
</div>
|
||
</div>
|
||
<div class="group">
|
||
<h3>Mobile</h3>
|
||
<div class="tags">
|
||
<span class="tag">Flutter</span>
|
||
<span class="tag">Kotlin</span>
|
||
<span class="tag">React Native</span>
|
||
</div>
|
||
</div>
|
||
<div class="group">
|
||
<h3>Base de données</h3>
|
||
<div class="tags">
|
||
<span class="tag">MySQL</span>
|
||
<span class="tag">PostgreSQL</span>
|
||
<span class="tag">SQLite</span>
|
||
<span class="tag">Supabase</span>
|
||
<span class="tag">Firebase</span>
|
||
</div>
|
||
</div>
|
||
<div class="group">
|
||
<h3>DevOps</h3>
|
||
<div class="tags">
|
||
<span class="tag">Docker</span>
|
||
<span class="tag">Nginx</span>
|
||
<span class="tag">Debian</span>
|
||
<span class="tag">CI/CD</span>
|
||
<span class="tag">GitHub Actions</span>
|
||
<span class="tag">Jenkins</span>
|
||
<span class="tag">Dockploy</span>
|
||
<span class="tag">Coolify</span>
|
||
<span class="tag">GCP</span>
|
||
<span class="tag">AWS</span>
|
||
</div>
|
||
</div>
|
||
<div class="group">
|
||
<h3>Pratiques</h3>
|
||
<div class="tags"><span class="tag">DDD</span><span class="tag">Tests</span><span class="tag">Agile</span>
|
||
<span class="tag">Anglais C1</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<section id="experience" class="card reveal">
|
||
<h2>Expériences professionnelles</h2>
|
||
<div class="timeline">
|
||
<div class="t-item">
|
||
<div class="t-role">CDD — Développeur Fullstack</div>
|
||
<div class="t-org"><a href="https://www.tool4staffing.com/">Tool4Staffing</a> • Fev. 2026 - Mar. 2026 (2 mois)
|
||
</div>
|
||
<ul class="t-bullets">
|
||
<li>Dev. d'un SaaS custom et amorçage pour une migration vers Symfony avec reprise de code procédural vers
|
||
POO.</li>
|
||
<li>Maintenance de modules d'IA / LLM et de robots d'automatisation pour le sourcing de candidats.</li>
|
||
<li>Collaboration sur l'UI/UX de la plateforme avec PHP natif, jQuery et CSS3.</li>
|
||
<li>Résolution proactive de bugs critiques et communication technique continue avec l'équipe Customer
|
||
Success.</li>
|
||
</ul>
|
||
</div>
|
||
|
||
<div class="t-item">
|
||
<div class="t-role">CDI — Développeur Web Fullstack</div>
|
||
<div class="t-org">Dollen • Nov. 2024 - Oct. 2025</div>
|
||
<ul class="t-bullets">
|
||
<li>Conception logiciel (diagrammes de classes <strong>UML</strong>).</li>
|
||
<li>Back-office: PHP 8.4, Symfony 7.3, Doctrine, Twig, Stimulus, PHPUnit, DDD.</li>
|
||
<li>CI/CD et déploiement: Docker, Debian, Nginx, GitHub Actions.</li>
|
||
<li>Migrations: SQLite, PostgreSQL, MariaDB.</li>
|
||
<li>Peer review et gestion agile (Trello, GitHub Projects).</li>
|
||
</ul>
|
||
</div>
|
||
|
||
<div class="t-item">
|
||
<div class="t-role">Apprenti — Développeur Fullstack</div>
|
||
<div class="t-org"><a href="https://lecadeaupresent.com">Présent </a> • Avr. 2023 - Sep. 2024
|
||
</div>
|
||
<ul class="t-bullets">
|
||
<li>Apps mobiles: Kotlin (interne), Flutter (B2C).</li>
|
||
<li>API REST monolithique: TypeScript, Fastify, Prisma, Jest, MySQL, Docker, GCP, DDD.</li>
|
||
<li>SPA desktop/mobile: React, TypeScript, Zustand, Chakra UI.</li>
|
||
</ul>
|
||
</div>
|
||
|
||
<div class="t-item">
|
||
<div class="t-role">Apprenti — Développeur R&D</div>
|
||
<div class="t-org"><a href="https://wattearth.com">WATT Earth</a> • Oct. 2021 - Sept. 2022</div>
|
||
<ul class="t-bullets">
|
||
<li>Fonctionnalités cœur produit: VueJS, TS, PHP, Python, MySQL, Warp10, Grafana.</li>
|
||
<li>Maquettage et conception UI (Figma).</li>
|
||
<li>Spécifications et cahiers de recettes.</li>
|
||
<li>Intégration technologies: Modbus, LoRaWAN, Zigbee…</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<section id="education" class="card reveal">
|
||
<h2>Diplômes obtenus</h2>
|
||
<div class="timeline">
|
||
<div class="t-item revealed">
|
||
<div class="t-role">Bachelor Développeur Web — <em>ESD Paris</em></div>
|
||
<div class="t-meta">2022 - 2024 • Bac +3 / RNCP 6</div>
|
||
<p>
|
||
Cette certification de niveau 6 vise la conception et le développement de solutions logicielles sécurisées.
|
||
Elle couvre l'architecture logicielle multicouche, la création de bases de données et le développement
|
||
d'interfaces. Le programme intègre les normes de sécurité ANSSI, l’accessibilité RGAA, le RGPD et le
|
||
déploiement DevOps.
|
||
</p>
|
||
</div>
|
||
<div class="t-item revealed">
|
||
<div class="t-role">DUT Informatique — <em>Université Gustave Eiffel</em></div>
|
||
<div class="t-meta">2020 - 2022 • Bac +2</div>
|
||
<p>
|
||
Ce cursus intensif de niveau 5 forme des spécialistes du cycle de vie logiciel. Il valide des compétences
|
||
en conception orientée objet, en algorithmique avancée et en administration de bases de données. La
|
||
formation inclut la gestion de réseaux, le développement Web et mobile, ainsi que l'analyse des systèmes,
|
||
avec une forte dimension de gestion de projet et de travail en équipe.
|
||
</p>
|
||
</div>
|
||
<div class="t-item revealed">
|
||
<div class="t-role">Baccalauréat STI2D <i>(mention bien) </i> — <em> Lycée René Cassin</em></div>
|
||
<div class="t-meta">2017 - 2020</div>
|
||
<p>
|
||
Cette formation technologique porte sur l’analyse et la création de solutions numériques intégrées. Elle
|
||
traite du traitement des flux d’information, de la programmation de systèmes embarqués, du développement de
|
||
réseaux et de la conception d’interfaces. Le cursus combine l'étude de l'électronique, des protocoles de
|
||
communication et de l'impact environnemental des systèmes.
|
||
</p>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<section id="projects" class="card reveal">
|
||
<h2>Projets récents</h2>
|
||
<div class="proj-grid">
|
||
<a class="proj" href="https://github.com/Floriansylvain/RenewCMS" aria-label="Voir le dépôt RenewCMS">
|
||
<h3>RenewCMS</h3>
|
||
<p>CMS en Go pour accélérer la création de sites avec blog/SSR, architecture <abbr
|
||
title="Domain Driven Design">DDD</abbr>, CI/CD sur serveur Debian (Docker, Nginx, Jenkins).</p>
|
||
<div class="stack">
|
||
<span class="badge">Go</span><span class="badge">SSR</span><span class="badge">Docker</span><span
|
||
class="badge">Nginx</span><span class="badge">SQLite</span>
|
||
</div>
|
||
<p>Voir le dépôt →</p>
|
||
</a>
|
||
|
||
<a class="proj" href="https://github.com/Floriansylvain/SnippetsManager"
|
||
aria-label="Voir le dépôt SnippetsManager">
|
||
<h3>SnippetsManager</h3>
|
||
<p>API inspirée de massCode pour gérer des snippets. TypeScript, Express, Prisma, MySQL, Docker, Jest.</p>
|
||
<div class="stack">
|
||
<span class="badge">TypeScript</span><span class="badge">Express</span><span
|
||
class="badge">Prisma</span><span class="badge">MySQL</span>
|
||
</div>
|
||
<p>Voir le dépôt →</p>
|
||
</a>
|
||
|
||
<a class="proj" href="https://github.com/Floriansylvain/spotify-playlist-embed"
|
||
aria-label="Voir le dépôt spotify-playlist-embed">
|
||
<h3>spotify-playlist-embed</h3>
|
||
<p>Lecteur de playlist Spotify en Next.js + TS, avec spotify-web-api-node et TailwindCSS.</p>
|
||
<div class="stack">
|
||
<span class="badge">Next.js</span><span class="badge">TypeScript</span><span
|
||
class="badge">TailwindCSS</span><span class="badge">Spotify API</span>
|
||
</div>
|
||
<p>Voir le dépôt →</p>
|
||
</a>
|
||
</div>
|
||
</section>
|
||
|
||
<section id="contact" class="card reveal">
|
||
<h2>Contact</h2>
|
||
<p>Échangeons sur vos besoins, missions ou opportunités.</p>
|
||
<p><a href="https://linkedin.com/in/florian-sylvain-0651021a9">LinkedIn</a></p>
|
||
<p class="lead">Autres moyens de contact non listés pour éviter la collecte automatisée.</p>
|
||
</section>
|
||
</main>
|
||
|
||
<footer class="container" id="autres">
|
||
<p>Pourquoi si simple ? Ce site reste léger et sobre. <a
|
||
href="https://endtimes.dev/why-your-website-should-be-under-14kb-in-size">Pourquoi viser < 14 kB</a></p>
|
||
<a class="to-top" href="#top" aria-label="Revenir en haut">↑</a>
|
||
<p>Dernière mise à jour : 2025/04/19</p>
|
||
</footer>
|
||
<script src="script.js" defer></script>
|
||
</body>
|
||
|
||
</html> |