/* ── Reset & Base ─────────────────────────────────── */ .ns-root *, .ns-root *::before, .ns-root *::after { box-sizing: border-box; margin: 0; padding: 0; } .ns-root { --ns-primary: #1e6091; --ns-primary-light: #5aade4; --ns-bg: #f5f8fa; --ns-card: #ffffff; --ns-sidebar: #eef3f7; --ns-sidebar-end: #e2eaf0; --ns-text: #1a2b3c; --ns-muted: #5a7184; --ns-border: rgba(30, 96, 145, 0.15); --ns-radius: 12px; font-family: 'Plus Jakarta Sans', 'Segoe UI', system-ui, sans-serif; background: var(--ns-bg); color: var(--ns-text); min-height: 100vh; padding: 2rem 1rem; line-height: 1.6; -webkit-font-smoothing: antialiased; } /* ── Keyframes ───────────────────────────────────── */ @keyframes ns-fade-up { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: translateY(0); } } @keyframes ns-fade-in { from { opacity: 0; } to { opacity: 1; } } @keyframes ns-slide-right { from { opacity: 0; transform: translateX(-14px); } to { opacity: 1; transform: translateX(0); } } @keyframes ns-scale-in { from { opacity: 0; transform: scale(0.96); } to { opacity: 1; transform: scale(1); } } @keyframes ns-shimmer { 0% { background-position: -200% center; } 100% { background-position: 200% center; } } /* ── Card ────────────────────────────────────────── */ .ns-card { max-width: 900px; margin: 0 auto; background: var(--ns-card); border-radius: var(--ns-radius); box-shadow: 0 20px 60px rgba(30,96,145,.12), 0 4px 16px rgba(30,96,145,.06); overflow: hidden; display: flex; flex-direction: column; animation: ns-scale-in 0.5s cubic-bezier(.22,1,.36,1) both; } @media (min-width: 700px) { .ns-card { flex-direction: row; } } /* ── Sidebar ─────────────────────────────────────── */ .ns-sidebar { width: 100%; background: linear-gradient(160deg, var(--ns-sidebar), var(--ns-sidebar-end)); padding: 2rem 1.5rem; animation: ns-fade-in 0.6s ease both; } @media (min-width: 700px) { .ns-sidebar { width: 38%; min-width: 220px; } } /* ── Main ────────────────────────────────────────── */ .ns-main { flex: 1; padding: 2rem 1.75rem; animation: ns-fade-in 0.6s ease 0.15s both; } /* ── Photo ───────────────────────────────────────── */ .ns-photo-wrap { display: flex; justify-content: center; margin-bottom: 1.5rem; animation: ns-fade-up 0.6s cubic-bezier(.22,1,.36,1) 0.05s both; } .ns-photo { width: 110px; height: 110px; border-radius: 50%; object-fit: cover; border: 4px solid rgba(30,96,145,.2); box-shadow: 0 8px 24px rgba(30,96,145,.15); transition: transform 0.4s ease, box-shadow 0.4s ease; } .ns-photo:hover { transform: scale(1.04) rotate(2deg); box-shadow: 0 12px 32px rgba(30,96,145,.25); } .ns-photo-placeholder { width: 110px; height: 110px; border-radius: 50%; background: linear-gradient(135deg, var(--ns-primary), var(--ns-primary-light)); display: flex; align-items: center; justify-content: center; font-size: 2.5rem; margin: 0 auto 1.5rem; border: 4px solid rgba(30,96,145,.2); box-shadow: 0 8px 24px rgba(30,96,145,.15); } /* ── Name / Title ────────────────────────────────── */ .ns-name { font-size: 1.9rem; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; text-align: center; color: var(--ns-text); margin-bottom: 0.25rem; background: linear-gradient(135deg, var(--ns-text) 0%, var(--ns-primary) 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; animation: ns-fade-up 0.5s cubic-bezier(.22,1,.36,1) 0.1s both; } .ns-title { text-align: center; font-size: 0.9rem; letter-spacing: 0.12em; color: var(--ns-muted); margin-bottom: 0.2rem; animation: ns-fade-up 0.5s cubic-bezier(.22,1,.36,1) 0.18s both; } .ns-subtitle { text-align: center; font-size: 0.8rem; color: var(--ns-primary); font-weight: 600; margin-bottom: 0.75rem; animation: ns-fade-up 0.5s cubic-bezier(.22,1,.36,1) 0.24s both; } .ns-summary { font-size: 0.8rem; color: var(--ns-muted); line-height: 1.65; margin-bottom: 1.25rem; padding: 0.75rem; background: rgba(30,96,145,.05); border-radius: 8px; border-left: 3px solid var(--ns-primary); animation: ns-fade-up 0.5s cubic-bezier(.22,1,.36,1) 0.3s both; } /* ── Section Titles ──────────────────────────────── */ .ns-section-title { font-size: 0.65rem; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; color: var(--ns-text); border-bottom: 1px solid var(--ns-border); padding-bottom: 0.4rem; margin-bottom: 0.85rem; margin-top: 1.5rem; animation: ns-slide-right 0.4s cubic-bezier(.22,1,.36,1) both; } .ns-section-title:first-child { margin-top: 0; } /* Sidebar section titles have a slightly different look */ .ns-sidebar .ns-section-title { font-size: 0.6rem; color: var(--ns-text); } /* ── Contact ─────────────────────────────────────── */ .ns-contact-item { display: flex; align-items: center; gap: 0.6rem; font-size: 0.78rem; color: var(--ns-muted); margin-bottom: 0.55rem; animation: ns-slide-right 0.35s cubic-bezier(.22,1,.36,1) both; } .ns-contact-icon { color: var(--ns-primary); display: flex; align-items: center; flex-shrink: 0; } .ns-contact-link { color: var(--ns-muted); text-decoration: none; transition: color 0.2s; position: relative; } .ns-contact-link::after { content: ''; position: absolute; bottom: 0; left: 0; height: 1px; width: 100%; background: var(--ns-primary); transform: scaleX(0); transform-origin: left; transition: transform 0.25s; } .ns-contact-link:hover { color: var(--ns-primary); } .ns-contact-link:hover::after { transform: scaleX(1); } /* ── Skills ──────────────────────────────────────── */ .ns-skill-cat { margin-bottom: 1rem; } .ns-skill-cat-title { font-size: 0.72rem; font-weight: 600; color: var(--ns-text); margin-bottom: 0.4rem; } .ns-skill-items { font-size: 0.73rem; color: var(--ns-muted); } /* ── Badges ──────────────────────────────────────── */ .ns-badges { display: flex; flex-wrap: wrap; gap: 0.3rem; margin-top: 0.35rem; } .ns-badges-sm .ns-badge { font-size: 0.63rem; padding: 0.15rem 0.5rem; } .ns-badge { display: inline-block; font-size: 0.68rem; font-weight: 500; padding: 0.2rem 0.55rem; border-radius: 4px; background: rgba(30,96,145,.1); color: var(--ns-primary); letter-spacing: 0.01em; transition: background 0.2s, transform 0.15s; } .ns-badge:hover { background: rgba(30,96,145,.18); transform: translateY(-1px); } /* ── Hobbies ─────────────────────────────────────── */ .ns-hobbies { display: flex; flex-direction: column; gap: 0.3rem; } .ns-hobby { font-size: 0.75rem; color: var(--ns-primary); font-weight: 500; } /* ── Education ───────────────────────────────────── */ .ns-edu-item { margin-bottom: 1.1rem; padding-bottom: 1rem; border-bottom: 1px solid var(--ns-border); animation: ns-fade-up 0.4s cubic-bezier(.22,1,.36,1) both; } .ns-edu-item:last-child { border-bottom: none; } .ns-edu-header { display: flex; align-items: baseline; justify-content: space-between; gap: 0.5rem; flex-wrap: wrap; } .ns-edu-school { font-size: 0.9rem; font-weight: 700; color: var(--ns-text); text-decoration: none; } a.ns-edu-school:hover { color: var(--ns-primary); text-decoration: underline; } .ns-edu-degree { font-size: 0.78rem; color: var(--ns-muted); margin-top: 0.1rem; } .ns-edu-specialty { font-size: 0.75rem; color: var(--ns-primary); font-weight: 500; margin-top: 0.1rem; } .ns-period { font-size: 0.7rem; color: var(--ns-muted); white-space: nowrap; flex-shrink: 0; } /* ── Experiences ─────────────────────────────────── */ .ns-exp-item { display: flex; gap: 1rem; margin-bottom: 0.5rem; padding: 0.75rem; border-radius: 8px; transition: background 0.2s; animation: ns-fade-up 0.45s cubic-bezier(.22,1,.36,1) both; } .ns-exp-item:hover { background: rgba(30,96,145,.04); } .ns-exp-year { width: 72px; flex-shrink: 0; font-size: 0.72rem; font-weight: 700; color: var(--ns-primary); padding-top: 0.15rem; line-height: 1.3; } .ns-exp-body { flex: 1; min-width: 0; } .ns-exp-header { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; margin-bottom: 0.1rem; } .ns-exp-company { font-size: 0.85rem; font-weight: 700; color: var(--ns-text); text-decoration: none; } a.ns-exp-company:hover { color: var(--ns-primary); text-decoration: underline; } .ns-exp-role { font-size: 0.73rem; color: var(--ns-muted); margin-bottom: 0.2rem; } .ns-exp-desc { font-size: 0.72rem; color: var(--ns-muted); opacity: 0.85; margin-bottom: 0.35rem; } .ns-exp-context { font-size: 0.71rem; color: var(--ns-muted); font-style: italic; border-left: 2px solid rgba(30,96,145,.3); padding-left: 0.6rem; margin-top: 0.4rem; margin-bottom: 0.35rem; } .ns-exp-env { font-size: 0.68rem; color: var(--ns-primary); margin-top: 0.35rem; } .ns-task-list { padding-left: 1rem; margin-top: 0.35rem; } .ns-task-list li { font-size: 0.7rem; color: var(--ns-muted); margin-bottom: 0.15rem; } .ns-task-list li::marker { color: var(--ns-primary); } /* ── Type badges (experience / work) ─────────────── */ .ns-type-badge { font-size: 0.62rem; padding: 0.1rem 0.45rem; border-radius: 4px; font-weight: 500; } .ns-type-work { background: rgba(59,130,246,.12); color: #2563eb; } .ns-type-xp { background: rgba(139,92,246,.12); color: #7c3aed; } /* ── Sub item ────────────────────────────────────── */ .ns-subitem { margin-top: 0.5rem; padding-left: 0.75rem; border-left: 2px solid rgba(30,96,145,.2); } .ns-subitem-title { font-size: 0.73rem; font-weight: 600; color: var(--ns-text); } .ns-subitem-desc { font-size: 0.7rem; color: var(--ns-muted); } /* ── Projects ────────────────────────────────────── */ .ns-proj-item { padding: 0.65rem 0.75rem; border-radius: 8px; margin-bottom: 0.3rem; transition: background 0.2s; animation: ns-fade-up 0.4s cubic-bezier(.22,1,.36,1) both; } .ns-proj-item:hover { background: rgba(30,96,145,.04); } .ns-proj-header { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; margin-bottom: 0.2rem; } .ns-proj-title { font-size: 0.82rem; font-weight: 700; color: var(--ns-text); } .ns-proj-desc { font-size: 0.71rem; color: var(--ns-muted); margin-bottom: 0.25rem; } .ns-proj-links { display: flex; gap: 0.5rem; flex-shrink: 0; } .ns-proj-link { font-size: 0.68rem; color: var(--ns-primary); text-decoration: none; font-weight: 500; } .ns-proj-link:hover { text-decoration: underline; } /* ── PDF strip ───────────────────────────────────── */ .ns-pdf-strip { text-align: center; padding: 1.25rem; border-top: 1px solid var(--ns-border); margin-top: 0.5rem; background: rgba(30,96,145,.03); animation: ns-fade-in 0.5s ease 0.8s both; } .ns-pdf-link { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.55rem 1.25rem; border-radius: 8px; background: var(--ns-primary); color: #fff; text-decoration: none; font-size: 0.82rem; font-weight: 600; letter-spacing: 0.02em; transition: opacity 0.2s, transform 0.2s; box-shadow: 0 4px 12px rgba(30,96,145,.3); } .ns-pdf-link:hover { opacity: 0.88; transform: translateY(-1px); } /* ── Divider ─────────────────────────────────────── */ .ns-divider { width: 32px; height: 3px; background: linear-gradient(90deg, var(--ns-primary), var(--ns-primary-light)); border-radius: 2px; margin: 0 auto 1.5rem; animation: ns-fade-in 0.4s ease 0.4s both; } /* ── Top bar ─────────────────────────────────────── */ .ns-topbar { max-width: 900px; margin: 0 auto 1rem; display: flex; align-items: center; justify-content: flex-end; gap: 0.75rem; animation: ns-fade-in 0.4s ease both; } .ns-noscript-notice { font-size: 0.72rem; background: rgba(30,96,145,.08); color: var(--ns-primary); border: 1px solid rgba(30,96,145,.18); padding: 0.35rem 0.75rem; border-radius: 20px; font-weight: 500; }

Futur développeur fullstack. J'aime analyser un problème, concevoir une architecture adaptée et construire des solutions robustes, de l'API jusqu'à l'interface utilisateur, en passant par le déploiement et l'automatisation.

CONTACT

Portfolio

Clément Bobin

Beaune, France

COMPÉTENCES

Langues

Français (Natif) · Anglais (B2 (Cambridge))

Frontend

ReactTypeScriptASP.NET

Backend

Node.jsPythonPHP.NET

Base de données

MongoDBSQLNeonPrisma

Mobile

Kotlin

Outils

DockerLinuxNixJetBrains IDEsAzure

DevOps

Agile/Scrum, TDD, Code Review, CI/CD

CENTRES D'INTÉRÊT

Open Source Jeux vidéo Jeux de société Échecs

COMPÉTENCES GÉNÉRALES

Résolution de problèmes Capacité d'analyse Pensée créative Adaptation & Ouverture d'esprit

CLÉMENT BOBIN

Mastère Expert en Architecture et Développement Logiciel (Alternance)

En recherche d'alternance

FORMATION

DIIAGE 2025 - 2026

Bachelor Coordinateur de Projets Informatiques

Coordonner le cycle de vie des applications

Lycée Saint-Bénigne 2023 - 2025

BTS Services Informatiques aux Organisations

Option SLAM

Lycée Clos Maire 2020-2023

Bac STI2D

Mention Bien

Collège Monge 2015-2020

Diplôme National du Brevet

Mention Très Bien

EXPÉRIENCE

Sep 2025 - Présent

ACTEMIUM Dijon Alternant

Alternant Informatique

Modernisation et maintenance des systèmes centraux d'application et de l'infrastructure

.NETNode.jsReactWordPressTypeScriptSQLPowerShell

Équipe de 14 personnes au sein d'une entreprise de 300 salariés.

Modernisation d'une interface web pour la gestion de données de capteurs IoT [Next.js, TypeScript]
Accompagnement des clients sur leur projet de modernisation IoT
Conception, développement et maintenance d'une API backend et d'un site web de visualisation des données des capteurs [Express.Js, TypeScript, Prisma, Sqlite]
Structuration et sécurisation de plusieurs bases de données
Migration de SVN vers Git via des scripts PowerShell et Python
Développement et maintenance d'une application de pointage [C#, .NET (WinForms), MSSQL]
Modernisation et entretien des sites web ACTEMIUM Dijon [WordPress]

Fév 2025 - Mar 2025

ACTEMIUM Dijon Stage

Stagiaire Informatique

Modernisation d'un projet de gestion de base de données IoT avec API et interface web.

Node.jsNext.jsExpress.jsTypeScriptSQL

Équipe de 8 personnes au sein d'une société de 200 personnes.

Conception et mise en place d'une API REST [Express.Js, TypeScript, Prisma, Sqlite]
Développement d'un site web de visualisation des données [Next.js, TypeScript]
Structuration et sécurisation de la base de données

2024 - 2025

FORUM INCYBER EUROPE Forum

Participant

Participation aux éditions 2024 et 2025 du Forum InCyber Europe.

2023 - 2025

Club Informatique Bénévolat

Bénévole

Aide aux adhérents sur les sujets informatiques, logiciels et matériels.

Mai 2024 - Juin 2024

ACTEMIUM Dijon Stage

Stagiaire Informatique

Modernisation de site web et outils Windows de gestion de base de données.

C#PowerShellSQL

Équipe de 3 informaticiens au sein d'une société de 200 personnes.

Modernisation du site ACTEMIUM Dijon
Création d'une application Windows de gestion de base de données
Développement d'outils d'administration (.exe, PowerShell)

PROJETS

flakeHypr — Configuration personnelle Nix Flake

⌥ github

Une configuration personnelle qui gère mon système Linux et mes fichiers de configuration au même endroit. Elle permet de recréer facilement le même environnement sur n'importe quel ordinateur.

NixBashLinux

Obsidian

↗ site ⌥ github

Une collection de notes structurées pour organiser mes connaissances, mes workflows et mes projets personnels. Tout est écrit en Markdown et publié sous forme de site web consultable.

ReactNode.jsTypeScriptMarkdown

Tock UI — Suivi du temps multiplateforme

⌥ github

Une application desktop simple pour suivre le temps passé sur des tâches et des projets. Elle fournit une interface visuelle pour l'outil de suivi du temps Tock et fonctionne sur plusieurs systèmes.

RustTauriReact

📄 Télécharger le CV en PDF