<!DOCTYPE html>
<html lang="fr">
<head>
<link rel="stylesheet" href="style.css">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Mon CV en HTML et CSS en 1 page et stylisé</title>
<link rel="icon" href="img/avatar2.svg" type="image/png">
</head>
<body>
<div class="resume">
<header class="box">
<div class="frist-nav">
<p class="name-nav">Yohan Guyomard | Faux CV</p>
<div class="size-icon">
<img src="img/minimaze-icon.svg" alt="Image" class="windows-icon windows-header-icon">
<img src="img/restore-icon.svg" alt="Image" class="windows-icon windows-header-icon">
<img src="img/close-icon.svg" alt="Image" class="windows-icon windows-header-icon">
</div>
</div>
<nav class="second-nav">
<div class="icon-second-nav display"><img src="img/home-icon.png" alt="Image" class="windows-nav2-icon">
</div>
<div class="icon-second-nav display"><img src="img/adobe-icon13.png" alt="Image" class="windows-nav2-icon2">
</div>
<form action="#" class="Ability display">
<label for="feild" class="label-style display">Moi:</label>
<input type="text" class="input-style display" list="ability" id="feild" placeholder="Déroule moi">
<datalist id="ability">
<option value="BTS SIO"> BTS SIO </option>
<option value="Alternant"> Alternant </option>
<option value="Département de la Loire"> Département de la Loire </option>
</datalist>
</form>
<form action="#" class="Ability display">
<label for="professional" class="label-style dispaly">mode:</label>
<input type="text" class="input-style display" id="professional" readonly
placeholder="Profesionnel">
</form>
</nav>
</header>
<aside class="toolsbar display">
<div class="tools-item-selected display"> <img src="img/adobe-icon13.png" alt="Image"
class="image-tools-item2 display"> </div>
<div class="tools-item display"> <img src="img/adobe-icon2.png" alt="Image" class="image-tools-item display">
</div>
<div class="tools-item display"> <img src="img/adobe-icon3.png" alt="Image" class="image-tools-item display">
</div>
<div class="tools-item display"> <img src="img/adobe-icon4.png" alt="Image" class="image-tools-item display">
</div>
<div class="tools-item display"> <img src="img/adobe-icon5.png" alt="Image" class="image-tools-item3 display">
</div>
<div class="tools-item display"> <img src="img/adobe-icon10.png" alt="Image" class="image-tools-item4 display">
</div>
<div class="tools-item display"> <img src="img/adobe-icon7.png" alt="Image" class="image-tools-item display">
</div>
<div class="tools-item display"> <img src="img/adobe-icon8.png" alt="Image" class="image-tools-item display">
</div>
<div class="tools-item display"> <img src="img/adobe-icon11.png" alt="Image" class="image-tools-item display">
</div>
<div class="tools-item display"> <img src="img/adobe-icon6.png" alt="Image" class="image-tools-item display">
</div>
<div class="tools-item-style2 display"> <img src="img/adobe-icon14.png" alt="Image"
class="image-tools-item5 display"> </div>
</aside>
<aside class="setting-bar display">
<div class="setting-item display"> <img src="img/adobe-icon15.png" alt="Image" class="image-tools-item4 display">
</div>
<div class="setting-item display"> <img src="img/adobe-icon16.png" alt="Image" class="image-tools-item display">
</div>
<div class="setting-item display"> <img src="img/adobe-icon17.png" alt="Image" class="image-tools-item display">
</div>
<div class="setting-item display"> <img src="img/adobe-icon20.png" alt="Image" class="image-tools-item display">
</div>
<div class="setting-item display"> <img src="img/adobe-icon18.png" alt="Image" class="image-tools-item display">
</div>
<div class="tools-item-selected display"> <img src="img/adobe-icon19.png" alt="Image"
class="image-tools-item display"> </div>
</aside>
<section class="about-me-box">
<div class="about-me-box-content">
<div class="style-box scroll-avatar-box1">
<h1 class="box-title">A_Propos_De_Moi.jpg</h1>
<div class="size-icon">
<img src="img/minimaze-icon.svg" alt="Image" class="windows-icon">
<img src="img/restore-icon.svg" alt="Image" class="windows-icon">
<img src="img/close-icon.svg" alt="Image" class="windows-icon">
</div>
<div class="parent-scroll scroll-avatar-box2">
<div class="scroll3">
<div class="text-align" id="text-align1">
<p class="about-me-bolder">Salut !</p>
<p class="about-me-bold"> Je suis Yohan </p>
<p>Mon mail : yohan@gmail.com <br> Mon numéro : 058528865</p>
<p class="about-me">
<p>J'ai le permis B et une voiture allemande</p>
<p>
Développeur passionné et créatif, je transforme chaque ligne de code en une
expérience visuelle et interactive.
Mon parcours est marqué par une curiosité insatiable et une volonté constante de
repousser les limites du design
et de la technique. Que ce soit en Python, C#, HTML/CSS/JS ou dans des
environnements comme Roblox ou Blender,
je m'efforce de créer des projets qui ne se contentent pas de fonctionner — ils
impressionnent, amusent et captivent.
</p>
<p>
Mon approche est résolument tournée vers l’utilisateur : j’aime concevoir des
interfaces ludiques, des animations
dynamiques, et des systèmes modulaires qui rendent chaque interaction fluide et
mémorable. J’accorde une attention
particulière à la clarté du code, à la robustesse des solutions, et à la
documentation accessible pour que chaque
projet soit aussi agréable à maintenir qu’à utiliser.
</p>
<p>
En parallèle, je développe des assets 3D stylisés et réalistes dans Blender, avec un
goût prononcé pour les textures
personnalisées et les shaders expressifs. Mon univers graphique est nourri par la
pop culture, les jeux vidéo, et
les références cartoon, que j’intègre subtilement dans mes créations pour leur
donner une identité forte.
</p>
<p>
Mon objectif ? Rejoindre une équipe qui valorise l’audace, l’innovation et la
qualité. Je cherche à collaborer sur
des projets où je peux mettre à profit ma polyvalence technique et mon sens du
détail, tout en continuant à apprendre
et à faire évoluer mon style. Chaque défi est pour moi une opportunité de créer
quelque chose de stylé, fonctionnel
et inoubliable.
</p>
</div>
</div>
</div>
</div>
</div>
</section>
<section class="avatar-box">
<div class="my-photo style-box">
<h2 class="box-title">Moi.svg</h2>
<div class="size-icon">
<img src="img/minimaze-icon.svg" alt="Image" class="windows-icon">
<img src="img/restore-icon.svg" alt="Image" class="windows-icon">
<img src="img/close-icon.svg" alt="Image" class="windows-icon">
</div>
<img src="img/avatar2.svg" alt="Image" class="avatar">
</div>
</section>
<section class="experirnce-box">
<div class="style-bio experirnce">
<div class="size-icon">
<div class="bio-header"></div>
<h3 class="box-title"> Experience.jpg </h3>
<img src="img/menu-icon.svg" alt="Image" class="box-icon3">
</div>
<div class="bio-footer"></div>
<div class="bio-content">
<div class="bio-rows bio-rows1">
<div class="eyes">
<img src="img/eye.svg" alt="Image" class="eyes-icon">
</div>
<div class="position">
<img src="img/bio1.png" alt="Image" class="bio-icon">
<p class="bio-text">2006 - Née en France
</p>
</div>
</div>
</div>
<div class="bio-content">
<div class="bio-rows bio-rows2">
<div class="eyes">
<img src="img/eye.svg" alt="Image" class="eyes-icon">
</div>
<div class="position">
<img src="img/bio2.png" alt="Image" class="bio-icon">
<p class="bio-text"> 2019 - Brevet des collèges </p>
</div>
</div>
</div>
<div class="bio-content">
<div class="bio-rows bio-rows3">
<div class="eyes">
<img src="img/eye.svg" alt="Image" class="eyes-icon">
</div>
<div class="position">
<img src="img/bio3.png" alt="Image" class="bio-icon">
<p class="bio-text"> 2020 - Rentré au lycée
</p>
</div>
</div>
</div>
<div class="bio-content">
<div class="bio-rows bio-rows4">
<div class="eyes">
<img src="img/eye.svg" alt="Image" class="eyes-icon">
</div>
<div class="position">
<img src="img/bio4.png" alt="Image" class="bio-icon">
<p class="bio-text"> 2024 - Obtention du Bac </p>
</div>
</div>
</div>
<div class="bio-content">
<div class="bio-rows bio-rows5">
<div class="eyes">
<img src="img/eye.svg" alt="Image" class="eyes-icon">
</div>
<div class="position">
<img src="img/bio5.png" alt="Image" class="bio-icon">
<p class="bio-text"> 2025 - Alternant BTS SIO </p>
</div>
</div>
</div>
</div>
</section>
<section class="skills-box">
<div class="style-box scroll-skills-box1">
<h3 class="box-title">Compétence.jpg</h3>
<div class="size-icon">
<img src="img/minimaze-icon.svg" alt="Image" class="windows-icon">
<img src="img/restore-icon.svg" alt="Image" class="windows-icon">
<img src="img/close-icon.svg" alt="Image" class="windows-icon">
</div>
<div class="parent-scroll scroll-skills-box2">
<div class="scroll scroll-skills-box3">
<div class="text-align">
<h2 class="skilltext"> Frontend <br> experience </h2>
<img src="img/frontend experience.svg" alt="Image" class="frontend">
<h2 class="skilltext"> Graphisme </h2>
<img src="img/graphic tools.svg" alt="Image" class="graphics">
</div>
</div>
</div>
</div>
</section>
<section class="language-box">
<div class="style-box scroll-language-box1">
<h3 class="box-title">Langue.xml</h3>
<div class="size-icon">
<img src="img/minimaze-icon.svg" alt="Image" class="windows-icon">
<img src="img/restore-icon.svg" alt="Image" class="windows-icon">
<img src="img/close-icon.svg" alt="Image" class="windows-icon">
</div>
<div class="parent-scroll scroll-language-box2">
<div class="scroll-language-box3">
<div class="text-align">
<p class="language-bar">Anglais</p>
<div class="language-range1"></div>
<div class="language-range2"></div>
<p class="language-bar">Français</p>
<div class="language-range3"></div>
<div class="language-range4"></div>
</div>
</div>
</div>
</div>
</section>
<section class="social-media-linkedin-box">
<div class="twice-box">
<div class="social-media-icon">
<div class="seperate"></div>
<div class="social-header">
<img src="img/box-icon1.svg" alt="Image" class="social-header-icon-left">
<img src="img/close-icon2.svg" alt="Image" class="social-header-icon-right">
</div>
<a href="https://www.linkedin.com/in/yohan-guyomard-87b17b367/"><img src="img/linkedin.svg" alt="Image"
class="linkedin-icon"></a>
</div>
<div class="social-media-id">
<div class="size-icon">
<h4 class="social-title"> Lenkedin </h4>
<div class="seperate2"> </div>
</div>
<div class="color-set">
<img src="img/box-icon1.svg" alt="Image" class="box-icon1">
<img src="img/menu-icon.svg" alt="Image" class="box-icon2">
</div>
<div class="background-color"> <a href="https://www.linkedin.com/in/yohan-guyomard-87b17b367/"
class="link-to-media">
<p class="id-social"> @yohan </p>
</a> </div>
</div>
</div>
</section>
<section class="social-media-github-box">
<div class="twice-box">
<div class="social-media-icon">
<div class="seperate"></div>
<div class="social-header">
<img src="img/box-icon1.svg" alt="Image" class="social-header-icon-left">
<img src="img/close-icon2.svg" alt="Image" class="social-header-icon-right">
</div>
<a href="https://www.linkedin.com/in/yohan-guyomard-87b17b367/"><img src="img/github.svg" alt="Image"
class="linkedin-icon"></a>
</div>
<div class="social-media-id">
<div class="size-icon">
<h4 class="social-title"> Github </h4>
</div>
<div class="seperate2"></div>
<div class="color-set">
<img src="img/box-icon1.svg" alt="Image" class="box-icon1">
<img src="img/menu-icon.svg" alt="Image" class="box-icon2">
</div>
<div class="background-color"> <a href="https://github.com/yohan0919" class="link-to-media">
<p class="id-social"> @yohan0919 </p>
</a> </div>
</div>
</div>
</section>
<section class="certificate-box">
<div class="scroll-certificate-box1">
<h2 class="box-title">Diplôme.svg</h2>
<div class="size-icon">
<img src="img/minimaze-icon.svg" alt="Image" class="windows-icon">
<img src="img/restore-icon.svg" alt="Image" class="windows-icon">
<img src="img/close-icon.svg" alt="Image" class="windows-icon">
</div>
<div class="parent-scroll scroll-certificate-box2">
<div class="scroll-certificate-box3">
<div class="text-align">
<p><strong>ASSR 1</strong> – Attestation Scolaire de Sécurité Routière niveau 1</p>
<p><strong>ASSR 2</strong> – Attestation Scolaire de Sécurité Routière niveau 2</p>
<p><strong>Brevet des collèges</strong> – Diplôme National du Brevet</p>
<p><strong>Baccalauréat</strong> – Série profesionnel</p>
</div>
</div>
</div>
</div>
</section>
<section class="portfolio-box">
<div class="style-box scroll-portfolio-box1">
<h2 class="box-title">Porfolio.jpg</h2>
<div class="size-icon">
<img src="img/minimaze-icon.svg" alt="Image" class="windows-icon">
<img src="img/restore-icon.svg" alt="Image" class="windows-icon">
<img src="img/close-icon.svg" alt="Image" class="windows-icon">
</div>
<div class="parent-scroll scroll-portfolio-box2">
<div class="scroll-portfolio-box3">
<div class="text-align">
<section class="projets">
<h2>Faux Projet</h2>
<p><strong>RetroMenu FX</strong> – Système de menu interactif inspiré des consoles
16-bit, avec transitions sonores, effets de glitch et navigation au clavier. Chaque
section du site est animée comme un niveau de jeu rétro.</p>
<p><strong>ShaderLab: Plasma Core</strong> – Expérimentation de shaders GLSL dans un
environnement WebGL, créant un effet de noyau énergétique pulsant avec distorsion
dynamique et reflets simulés en temps réel.</p>
<p><strong>Formulairium</strong> – Formulaire de contact ultra-stylisé avec validation
en temps réel, animations de feedback, et transitions liquides. Inspiré des
interfaces de jeux de science-fiction.</p>
<p><strong>Blender: CandyBot</strong> – Modélisation et texturing d’un petit robot en
bonbons, avec matériaux stylisés, rendu Eevee, et rigging simple pour animation dans
Roblox Studio.</p>
<p><strong>JS Terminal Typer</strong> – Simulateur de terminal interactif en JavaScript,
avec effets de frappe, commandes personnalisées, et easter eggs cachés dans les
logs.</p>
<p><strong>NeonLogin</strong> – Écran de connexion futuriste avec effets de lumière
pulsée, transitions GSAP, et retour visuel sur les erreurs façon interface de
science-fiction.</p>
<p><strong>Roblox: SkyForge Arena</strong> – Arène multijoueur dans les nuages avec
plateformes mouvantes, scripts de combat personnalisés, et effets de particules
stylisés.</p>
<p><strong>GTA V: Mirror Drift</strong> – Mod de véhicule avec carrosserie miroir,
effets de lumière dynamique, et reflets réalistes dans les environnements urbains
nocturnes.</p>
<p><strong>CSS Inventory Grid</strong> – Système d’inventaire façon RPG codé uniquement
en HTML/CSS, avec survol animé, sélection multiple, et effets de rareté visuelle.
</p>
<p><strong>Markdown Quest</strong> – Générateur de documentation gamifiée : chaque
section est une “quête” avec progression, badges, et navigation interactive en
JavaScript.</p>
<p><strong>Blender: Stylized Potion Pack</strong> – Pack de fioles magiques avec shaders
toon, effets de transparence, et textures peintes à la main pour intégration dans
Unity ou Roblox.</p>
<p><strong>404 Dungeon</strong> – Page d’erreur immersive en mode donjon, avec
bruitages, animation de torches, et message d’erreur présenté comme un boss de fin
de niveau.</p>
<p><strong>JS: Bubble Clicker</strong> – Mini-jeu de clic avec bulles animées, combo
system, et effets sonores. Codé en vanilla JS avec logique modulaire et responsive
design.</p>
<p><strong>Terminal Hero</strong> – Jeu textuel dans le terminal avec choix multiples,
inventaire, et système de combat au tour par tour. Écrit en bash avec ASCII art
dynamique.</p>
<p><strong>Roblox: Lava Rush</strong> – Parcours d’obstacles dans un volcan en éruption,
avec scripts de montée de lave, checkpoints, et assets texturés sous Blender.</p>
<p><strong>GTA V: Stylized Helmet Pack</strong> – Collection de casques 3D cartoon avec
shaders personnalisés, intégrés dans GTA V via Sollumz et FiveM.</p>
<p><strong>CSS: GameBoy UI</strong> – Interface complète inspirée de la Game Boy, avec
boutons pixelisés, transitions en damier, et effets sonores au clic.</p>
<p><strong>JS: Typing Trainer FX</strong> – Entraîneur de frappe avec effets de
particules, sons rétro, et système de progression avec niveaux et statistiques.</p>
<p><strong>Blender: ReflectaCrate</strong> – Caisse 3D stylisée avec texture miroir,
coins usés, et rendu réaliste pour intégration dans des jeux d’exploration ou de
loot.</p>
<p><strong>Markdown Portfolio Builder</strong> – Générateur de portfolio à partir de
fichiers Markdown, avec thèmes personnalisables, navigation fluide, et export
HTML/CSS.</p>
<p><strong>Roblox: CyberSprint</strong> – Jeu de course urbaine dans un décor cyberpunk,
avec scripts de glissade, wall-run, et effets de vitesse stylisés.</p>
<p><strong>GTA V: Neon Garage</strong> – Mod de garage interactif avec éclairage
dynamique, interface de customisation, et textures stylisées pour chaque pièce de
véhicule.</p>
<p><strong>JS: Memory Match FX</strong> – Jeu de mémoire avec cartes animées, effets de
retournement 3D, et système de score avec feedback visuel et sonore.</p>
<p><strong>Blender: Stylized Tree Pack</strong> – Pack d’arbres cartoon avec textures
peintes à la main, variations saisonnières, et shaders stylisés pour jeux mobiles.
</p>
<p><strong>404 Arcade</strong> – Page d’erreur transformée en mini-jeu jouable, avec
score, musique 8-bit, et message d’erreur intégré dans le gameplay.</p>
<p><strong>Shell: Installer Wizard</strong> – Script bash interactif pour installer des
outils avec menus, vérifications, et feedback visuel façon assistant graphique.</p>
<p><strong>JS: Weather Widget FX</strong> – Widget météo animé avec transitions douces,
icônes SVG dynamiques, et intégration d’une API météo en temps réel.</p>
<p><strong>Roblox: Mecha Arena</strong> – Arène de combat de robots avec scripts de
modules interchangeables, effets de dégâts, et interface de customisation.</p>
<p><strong>GTA V: Stylized City Signs</strong> – Pack de panneaux de ville cartoon avec
textures HD, intégration dans la map, et effets de lumière nocturne.</p>
<p><strong>Blender: Stylized Food Pack</strong> – Pack de nourriture cartoon
(hamburgers, donuts, ramen) avec shaders brillants et textures stylisées pour jeux
casual.</p>
<p><strong>JS: Code Rain FX</strong> – Animation Matrix-style avec lignes de code qui
tombent, effets de profondeur, et personnalisation des couleurs et vitesses.</p>
<p><strong>Blender: Stylized Skate Pack</strong> – Création de planches de skate cartoon
avec textures graffiti, reflets stylisés et modélisation low-poly optimisée pour
jeux mobiles.</p>
<p><strong>JS: Emoji Battle</strong> – Jeu de combat entre emojis avec animations SVG,
effets de particules, et logique de tour par tour en JavaScript pur.</p>
<p><strong>Roblox: Ice Labyrinth</strong> – Labyrinthe gelé avec pièges dynamiques,
scripts de glissade, et effets de brouillard stylisés pour une ambiance polaire
immersive.</p>
<p><strong>GTA V: Stylized Taxi Pack</strong> – Collection de taxis cartoon avec
textures personnalisées, effets de lumière nocturne, et intégration dans les rues de
Los Santos.</p>
<p><strong>CSS: Retro TV UI</strong> – Interface façon télé cathodique avec transitions
en balayage, bruit visuel, et boutons pixelisés.</p>
<p><strong>JS: Soundboard FX</strong> – Soundboard interactif avec effets sonores rétro,
pads animés, et système de favoris pour les sons les plus utilisés.</p>
<p><strong>Blender: Stylized Shield Pack</strong> – Pack de boucliers fantasy avec
textures métal usé, shaders toon, et variations de couleur pour chaque faction.</p>
<p><strong>Markdown: Dev Diary Generator</strong> – Générateur de journal de
développement avec structure modulaire, navigation par date, et export HTML stylisé.
</p>
<p><strong>Roblox: Mecha Builder</strong> – Système de construction de robots avec
modules interchangeables, scripts de fusion, et effets de transformation.</p>
<p><strong>GTA V: Stylized Billboard Pack</strong> – Pack de panneaux publicitaires
cartoon avec animations, textures HD, et intégration dans les maps personnalisées.
</p>
<p><strong>JS: QuizMaster FX</strong> – Générateur de quiz interactif avec transitions
animées, feedback visuel, et système de score local.</p>
<p><strong>Blender: Stylized Weapon Rack</strong> – Présentoir d’armes cartoon avec
shaders brillants, textures bois stylisé, et rendu optimisé pour Unity.</p>
<p><strong>CSS: Liquid Button FX</strong> – Boutons interactifs avec effet de liquide au
survol, transitions douces, et personnalisation des couleurs.</p>
<p><strong>JS: Countdown FX</strong> – Compte à rebours animé avec effets de vibration,
changement de couleur, et déclenchement d’événements à zéro.</p>
<p><strong>Roblox: Haunted Mansion</strong> – Manoir interactif avec scripts de portes
automatiques, effets de lumière, et assets texturés sous Blender.</p>
<p><strong>GTA V: Stylized Food Truck Pack</strong> – Collection de camions de street
food cartoon avec textures personnalisées et effets de lumière nocturne.</p>
<p><strong>Blender: Stylized Helmet FX</strong> – Casque futuriste avec shaders
métalliques, textures usées, et rendu dynamique pour cinématiques.</p>
<p><strong>JS: Typing FX</strong> – Effet de frappe réaliste avec sons de clavier,
animation de curseur, et personnalisation du style de texte.</p>
<p><strong>Markdown: Portfolio Timeline</strong> – Timeline interactive en Markdown avec
navigation fluide, badges de projet, et export HTML/CSS.</p>
<p><strong>Roblox: Jungle Escape</strong> – Jeu d’évasion dans une jungle avec scripts
de pièges, assets végétaux stylisés, et ambiance sonore immersive.</p>
<p><strong>GTA V: Stylized Police Pack</strong> – Pack de véhicules de police cartoon
avec sirènes animées, textures HD, et effets de lumière dynamiques.</p>
<p><strong>CSS: Glitch Text FX</strong> – Texte animé avec effet de glitch, distorsion
visuelle, et personnalisation des couleurs et vitesses.</p>
<p><strong>JS: Inventory FX</strong> – Système d’inventaire interactif avec drag & drop,
effets de rareté, et animation de sélection.</p>
<p><strong>Blender: Stylized Potion FX</strong> – Fioles magiques animées avec shaders
liquides, textures brillantes, et rendu optimisé pour Roblox.</p>
<p><strong>Markdown: CV Generator</strong> – Générateur de CV en Markdown avec thèmes
visuels, export HTML, et structure modulaire.</p>
<p><strong>Roblox: Cyber Arena</strong> – Arène futuriste avec scripts de combat, effets
de particules, et interface de sélection de personnage.</p>
<p><strong>GTA V: Stylized Bike Pack</strong> – Pack de motos cartoon avec textures
personnalisées, effets de vitesse, et intégration dans les maps custom.</p>
<p><strong>JS: Notification FX</strong> – Système de notifications animées avec
transitions douces, icônes SVG, et personnalisation des couleurs.</p>
<p><strong>Blender: Stylized Chest Pack</strong> – Coffres cartoon avec textures bois et
métal, animation d’ouverture, et rendu optimisé pour jeux d’aventure.</p>
<p><strong>CSS: Card Flip FX</strong> – Cartes interactives avec effet de retournement
3D, transitions fluides, et personnalisation du contenu.</p>
</div>
</div>
</div>
</div>
</section>
</div>
</body>
</html>
