jsonresume-theme-lucide
Version:
Lucide theme for JSON Resume
665 lines (619 loc) • 24.6 kB
HTML
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no" />
<title>Clément Cauet</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/all.min.css" integrity="sha512-z3gLpd7yknf1YoNbCzqRKc4qyor8gaKU1qmn+CShxbuBusANI9QpRohGBreCFkKxLhei6S9CQXFEbbKuqLg0DA==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<style>.section {
display: flex;
flex-direction: column;
margin: 0.25em;
}
.section:last-child {
margin-bottom: 0;
}
.section span,
.section p,
.section a,
.section ul,
.section blockquote {
margin: 0;
font-size: 0.7rem;
text-decoration: none;
}
.section code {
font-size: 0.5rem;
}
.section-item {
display: flex;
flex-direction: column;
margin-bottom: 1em;
gap: 0.5em;
}
.section-item:last-child {
margin-bottom: 0;
}
.section-title {
font-size: 1.25rem;
font-weight: bold;
margin: 0 0 0.5em;
}
.section-header {
display: grid;
grid-template-columns: minmax(10rem, auto) 1fr;
margin-bottom: 0;
gap: 0.5em;
}
.section-date {
display: flex;
flex-direction: column;
}
.section-subtitle,
.section-subtitle a {
color: #333333;
font-size: 1rem;
font-weight: bold;
margin: 0 0 0.2em;
}
.section-information {
display: grid;
grid-template-columns: minmax(10rem, auto) 1fr;
}
.section-information span,
.section-information p,
.section-information a {
color: #0077CC;
}
.section-container {
display: flex;
flex-direction: column;
gap: 0.5em;
}
.section-picture {
width: 10em;
height: 10em;
margin-left: auto;
margin-right: auto;
}
.section-picture > img {
width: 90%;
height: 90%;
border-radius: 50%;
border: solid 2px white;
margin: auto;
box-shadow: 0 0.5em 1em -0.125em hsla(221, 14%, 4%, 0.1), 0 0 0 1px hsla(221, 14%, 4%, 0.02);
}
.card-container {
flex: none;
width: 100%;
padding: 0.5em;
}
.card {
position: relative;
max-width: 100%;
background-color: #FFFFFF;
border-radius: 0.75em;
box-shadow: 0 0.5em 1em -0.125em hsla(221, 14%, 4%, 0.1), 0 0 0 1px hsla(221, 14%, 4%, 0.02);
}
.card-header {
display: flex;
flex-direction: column;
align-items: stretch;
border-top-left-radius: 0.75em;
border-top-right-radius: 0.75em;
padding: 0.25rem;
box-shadow: 0 0.5em 1em -0.125em hsla(221, 14%, 4%, 0.1), 0 0 0 1px hsla(221, 14%, 4%, 0.02);
}
.card-title {
font-size: 0.6rem;
font-weight: bold;
margin: 0;
}
.sidebar {
grid-column: 1/4;
display: flex;
flex-direction: column;
background-color: #0077CC;
margin: 1em 0 1em 1em;
border-radius: 0.75em;
padding: 0.5rem;
gap: 0.5em;
box-shadow: 0 0.5em 1em -0.125em hsla(221, 14%, 4%, 0.1), 0 0 0 1px hsla(221, 14%, 4%, 0.02);
}
.sidebar-title {
color: #F7F7F7;
margin-bottom: 0.5rem;
}
.sidebar span,
.sidebar p,
.sidebar a,
.sidebar i,
.sidebar ul,
.sidebar blockquote {
font-size: 0.7rem;
color: #F7F7F7;
}
.header {
grid-column: 4/11;
margin-bottom: 1em;
}
.header h1 {
color: #0077CC;
}
.header h2 {
font-size: 1rem;
padding: 0 0.5em;
margin: 0;
}
.content {
grid-column: 4/11;
padding: 1em;
}
.content-title {
color: #0077CC;
}
.section-informations p,
.section-informations span,
.section-informations a {
color: #333333;
}
.section-awards,
.section-certificates,
.section-publications,
.section-skills,
.section-languages,
.section-interests,
.section-references {
padding-top: 0.5em;
border-top: 2px solid white;
}
.section-basics {
gap: 0.5em;
}
.section-basics,
.section-contact,
.section-profiles {
display: flex;
flex-direction: row;
flex-wrap: wrap;
gap: 0.5em;
margin: 0;
}
.section-basics > div,
.section-contact > div,
.section-profiles > div {
width: fit-content;
gap: 0.5em;
}
.section-informations,
.section-work,
.section-education,
.section-volunteer,
.section-projects {
margin-bottom: 0.5em;
padding-top: 0.5em;
border-top: 2px solid #0077CC;
}
.skills-container {
display: flex;
flex-wrap: wrap;
justify-content: center;
}
body {
font-family: Indivisa Text Sans-Regular, sans-serif;
margin: 0;
padding: 0;
background-color: #FFFFFF;
}
h1 {
font-size: 3rem;
margin: 0 0 0.25em;
line-height: 1;
}
#resume {
width: 210mm;
height: 275mm;
margin: auto;
background-color: #FFFFFF;
display: grid;
grid-template-columns: repeat(9, 1fr);
grid-template-rows: auto;
box-sizing: border-box;
box-shadow: 0, 0.0625rem, 0.625rem, rgba(0, 0, 0, 0.5);
}
.date > span {
font-size: 0.7rem;
}
.list-tags {
display: flex;
flex-wrap: wrap;
justify-content: center;
padding: 0.5em;
gap: 0.5em;
}
.list-tags:last-child {
margin-bottom: -0.5rem;
}
.tag {
align-items: center;
display: inline-flex;
height: 1.5em;
font-size: 0.6rem;
color: #333333;
justify-content: center;
padding-left: 0.7em;
padding-right: 0.7em;
white-space: nowrap;
background-color: rgba(0, 0, 0, 0.1);
border-radius: 0.375rem;
}
.keyword {
font-size: 0.7rem;
color: #F7F7F7;
}
/*# sourceMappingURL=style.css.map */
</style>
</head>
<body>
<div id="resume">
<aside class="sidebar">
<section class="section section-picture">
<img src="https://avatars.githubusercontent.com/u/70692830?s=400&u=cac932fa74c596fc7d2f7bed91e8a25f97ebc78e&v=4" alt="Clément Cauet" />
</section>
<section id="skills" class="section section-skills">
<h2 class="section-title sidebar-title">COMPETENCES</h2>
<div class="skills-container">
<div class="card-container">
<div class="card skills-item">
<div class="card-header">
<h3 class="card-title">Programmation</h3>
</div>
<div class="card-content">
<ul class="list-tags">
<li class="tag"><code>Java</code></li>
<li class="tag"><code>Kotlin</code></li>
<li class="tag"><code>C++</code></li>
<li class="tag"><code>HTML</code></li>
<li class="tag"><code>CSS</code></li>
<li class="tag"><code>JavaScript</code></li>
<li class="tag"><code>Python</code></li>
<li class="tag"><code>SQL</code></li>
</ul>
</div>
</div>
</div>
<div class="card-container">
<div class="card skills-item">
<div class="card-header">
<h3 class="card-title">Framework</h3>
</div>
<div class="card-content">
<ul class="list-tags">
<li class="tag"><code>React</code></li>
<li class="tag"><code>React Native</code></li>
<li class="tag"><code>Angular</code></li>
<li class="tag"><code>Jetpack Compose</code></li>
</ul>
</div>
</div>
</div>
<div class="card-container">
<div class="card skills-item">
<div class="card-header">
<h3 class="card-title">Base de données</h3>
</div>
<div class="card-content">
<ul class="list-tags">
<li class="tag"><code>MySQL</code></li>
<li class="tag"><code>PostgreSQL</code></li>
<li class="tag"><code>SQLite</code></li>
<li class="tag"><code>Firebase</code></li>
<li class="tag"><code>MongoDB</code></li>
</ul>
</div>
</div>
</div>
<div class="card-container">
<div class="card skills-item">
<div class="card-header">
<h3 class="card-title">Virtualisation</h3>
</div>
<div class="card-content">
<ul class="list-tags">
<li class="tag"><code>Docker</code></li>
<li class="tag"><code>VirtualBox</code></li>
<li class="tag"><code>VMware</code></li>
<li class="tag"><code>Proxmox</code></li>
</ul>
</div>
</div>
</div>
<div class="card-container">
<div class="card skills-item">
<div class="card-header">
<h3 class="card-title">Système d'exploitation</h3>
</div>
<div class="card-content">
<ul class="list-tags">
<li class="tag"><code>Windows</code></li>
<li class="tag"><code>Fedora</code></li>
<li class="tag"><code>Debian</code></li>
<li class="tag"><code>Ubuntu</code></li>
</ul>
</div>
</div>
</div>
<div class="card-container">
<div class="card skills-item">
<div class="card-header">
<h3 class="card-title">Système de gestion</h3>
</div>
<div class="card-content">
<ul class="list-tags">
<li class="tag"><code>Git</code></li>
<li class="tag"><code>Ansible</code></li>
<li class="tag"><code>Terraform</code></li>
</ul>
</div>
</div>
</div>
</div>
</section>
<section id="interests" class="section section-interests">
<h2 class="section-title sidebar-title">SOFT SKILLS</h2>
<div>
<ul class="list-tags">
<li class="tag keyword">Résolution de problèmes</li>
<li class="tag keyword">Adaptabilité</li>
<li class="tag keyword">Autonomie</li>
<li class="tag keyword">Esprit d'équipe</li>
<li class="tag keyword">Gestion du temps et des priorités</li>
</ul>
</div>
</section>
<section id="languages" class="section section-languages">
<h2 class="section-title sidebar-title">LANGUES</h2>
<div>
<span>
Français
</span>
<span> : </span>
<span>
Natif
</span>
<div class="bar"></div>
</div>
<div>
<span>
Anglais
</span>
<span> : </span>
<span>
Courant / B2
</span>
<div class="bar"></div>
</div>
</section>
<section id="interests" class="section section-interests">
<h2 class="section-title sidebar-title">INTERETS</h2>
<div>
<ul class="list-tags">
<li class="tag keyword">Open Source</li>
<li class="tag keyword">Natation</li>
<li class="tag keyword">Randonnée</li>
<li class="tag keyword">Secourisme</li>
</ul>
</div>
</section>
</aside>
<div class="content">
<header class="header">
<h1 class="name">Clément CAUET</h1>
<section class="section section-informations">
<section id="basics" class="section section-basics">
<i class="fa-solid fa-location-dot"></i>
<span class="city">Amiens,</span>
<span class="countryCode">(FR)</span>
</section>
<section id="contact" class="section section-contact">
<div class="phone">
<i class="fa-solid fa-mobile-screen-button"></i>
<a class="hide-href-print" href="tel:+33 6 01 05 54 09">+33 6 01 05 54 09</a>
</div>
<div class="email">
<i class="fa-regular fa-envelope"></i>
<a class="hide-href-print" href="mailto:cauet.clement@gmail.com">cauet.clement@gmail.com</a>
</div>
<div class="website">
<i class="fa-solid fa-up-right-from-square"></i>
<a class="hide-href-print" target="_blank" href="https://clement-cauet.github.io/">https://clement-cauet.github.io/</a>
</div>
</section>
<section id="profiles" class="section section-profiles">
<div class="item">
<div class="username">
<i class="fa-brands fa-linkedin linkedin social"></i>
<a target="_blank" href="https://www.linkedin.com/in/cauet-clement/"><span class="show-only-url-print">cauet-clement</span></a>
</div>
</div>
<div class="item">
<div class="username">
<i class="fa-brands fa-github github social"></i>
<a target="_blank" href="https://github.com/Clement-Cauet"><span class="show-only-url-print">Clement-Cauet</span></a>
</div>
</div>
</section>
</section> <h2 class="label">Développeur d'application</h2>
<section class="summary section">
<p><p><p>Motivé par la création de solutions techniques qui facilitent la vie des utilisateurs, je combine autonomie, adaptabilité et esprit d’analyse pour relever des défis complexes. Mon objectif : concevoir des outils performants et intuitifs, toujours centrés sur les besoins réels.</p></p></p>
</section>
</header>
<section id="work" class="section section-work">
<h2 class="section-title content-title">EXPERIENCES PROFESSIONNELLES</h2>
<section class="section-item">
<div id="work-header" class="section-header">
<div class="section-date">
<code class="date">
<span>Août 2022 - Août 2025</span>
</code>
<code class="date">
<span>3 ans</span>
</code>
</div>
<div>
<h3 class="section-subtitle">Alternant - Développeur Mobile</h3>
<div class="section-information">
<a target="_blank" href="https://generation-ia.com/">Génération-IA</a>
<span>
<i class="fa-solid fa-location-dot"></i>
Boves
</span>
</div>
</div>
</div>
<div id="work-container" class="section-container">
<ul class="highlights">
<li><p><p>Dévolopper une application mobile axée sur l'amélioration de la performance professionnelle.</p></p></li>
<li><p><p>Concevoir des architectures de serveurs API robustes, facilitant des échanges fluides entre diverses applications.</p></p></li>
<li><p><p>Optimiser des processus de développement, améliorant l'efficacité d'initialisation et la maintenabilité du projet.</p></p></li>
<li><p><p>Faciliter la documentation technique de l'application, assurant une compréhension claire et un accès facile pour les membres de l'équipe.</p></p></li>
</ul>
</div>
</section>
<section class="section-item">
<div id="work-header" class="section-header">
<div class="section-date">
<code class="date">
<span>Mai 2021 - Juin 2021</span>
</code>
<code class="date">
<span>1 mois</span>
</code>
</div>
<div>
<h3 class="section-subtitle">Stagiaire - Développeur Web</h3>
<div class="section-information">
<a target="_blank" href="https://www.croix-rouge.fr/unite-locale-du-grand-amienois">Croix Rouge Française</a>
<span>
<i class="fa-solid fa-location-dot"></i>
Amiens
</span>
</div>
</div>
</div>
<div id="work-container" class="section-container">
<ul class="highlights">
<li><p><p>Concevoir et déployer des outils de suivi des stocks, améliorant la logistique au sein de l'unité locale.</p></p></li>
<li><p><p>Coordonner l'approvisionnement de besoins d'urgence.</p></p></li>
</ul>
</div>
</section>
</section>
<section id="education" class="section section-education">
<h2 class="section-title content-title">FORMATION</h2>
<section class="section-item">
<div id="education-header" class="section-header">
<div class="section-date">
<code class="date">
<span>Sept. 2022 - Avr. 2025</span>
</code>
<code class="date">
<span>2 ans 6 mois</span>
</code>
</div>
<div>
<h3 class="section-subtitle">
Ingénieur
en
Numérique et Objets connectés
</h3>
<div class="section-information">
<a target="_blank" href="https://www.unilasalle-amiens.fr/">UniLaSalle</a>
<span>
<i class="fa-solid fa-location-dot"></i>
Amiens
</span>
</div>
</div>
</div>
<div id="education-container" class="section-container">
</div>
</section>
<section class="section-item">
<div id="education-header" class="section-header">
<div class="section-date">
<code class="date">
<span>Sept. 2020 - Juin 2022</span>
</code>
<code class="date">
<span>1 an 9 mois</span>
</code>
</div>
<div>
<h3 class="section-subtitle">
Brevet de Technicien Supérieur
en
Systèmes Numériques
</h3>
<div class="section-information">
<a target="_blank" href="https://www.la-providence.net/fr">La Providence</a>
<span>
<i class="fa-solid fa-location-dot"></i>
Amiens
</span>
</div>
</div>
</div>
<div id="education-container" class="section-container">
</div>
</section>
</section>
<section id="projects" class="section section-projects">
<h2 class="section-title content-title">PROJETS</h2>
<section class="section-item">
<div id="projects-header" class="section-header">
<div class="section-date">
<code class="date">
<span>Janv. 2025 - Févr. 2025</span>
</code>
<code class="date">
<span></span>
</code>
</div>
<div>
<h3 class="section-subtitle"><a target="_blank" href="https://github.com/Clement-Cauet/jsonresume-theme-lucide">Thème Lucide - JsonResume</a></h3>
</div>
</div>
<div id="projects-container" class="section-container">
<ul class="highlights">
<li><p><p>Concevoir un thème de CV en HTML/CSS/JS.</p></p></li>
<li><p><p>Intégrer le thème Lucide au projet JsonResume.</p></p></li>
</ul>
</div>
</section>
<section class="section-item">
<div id="projects-header" class="section-header">
<div class="section-date">
<code class="date">
<span>Sept. 2024 - Nov. 2024</span>
</code>
<code class="date">
<span>1 mois</span>
</code>
</div>
<div>
<h3 class="section-subtitle"><a target="_blank" href="https://github.com/Gregory-febvin/Navigateur-Web">Navigateur-Web</a></h3>
</div>
</div>
<div id="projects-container" class="section-container">
<ul class="highlights">
<li><p><p>Développer un navigateur web basé sur Chromium en Angular.</p></p></li>
<li><p><p>Intégrer un bloqueur de publicités reposant sur une base de données open source.</p></p></li>
</ul>
</div>
</section>
</section>
</div> </div>
</body>
</html>