Scan to open on your phone
Point a camera at the QR code - it opens this exact paste, no app needed.
https://codepastes.com/zzgtd6eyxafj5vg2LucasHTTP
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">
<title>Lucas Arnoult — Candidat stage cybersécurité</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&family=Work+Sans:wght@400;500;600&family=IBM+Plex+Mono:wght@400;500&display=swap" rel="stylesheet">
<style>
:root{
--ink:#0F1720;
--panel:#161F2C;
--panel-2:#1B2534;
--line:#2A3444;
--text:#EAEEF3;
--muted:#8A94A6;
--blue:#5FA8D3;
--amber:#E3B23C;
--radius:10px;
box-sizing:border-box;
padding-top:env(safe-area-inset-top,0px);
padding-bottom:env(safe-area-inset-bottom,0px);
}
*,*::before,*::after{box-sizing:inherit;}
html{scroll-padding-top:env(safe-area-inset-top,0px); scroll-behavior:smooth;}
html,body{height:100%;}
body{
margin:0;
background:var(--ink);
color:var(--text);
font-family:"Work Sans", ui-sans-serif, system-ui, sans-serif;
line-height:1.6;
-webkit-font-smoothing:antialiased;
}
h1,h2,h3{
font-family:"Space Grotesk", ui-sans-serif, system-ui, sans-serif;
margin:0;
letter-spacing:-0.01em;
}
.mono{
font-family:"IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
}
a{color:inherit;}
img{max-width:100%;}
.wrap{
max-width:760px;
margin:0 auto;
padding:0 24px;
}
section{padding:64px 0;}
section + section{border-top:1px solid var(--line);}
/* ---------- HERO ---------- */
.hero{padding:72px 0 56px;}
.hero .kicker{
font-family:"IBM Plex Mono", monospace;
font-size:13px;
color:var(--blue);
margin-bottom:14px;
}
.hero h1{
font-size:clamp(40px,7vw,64px);
font-weight:700;
color:#fff;
}
.hero .role{
margin-top:10px;
font-size:clamp(17px,2.4vw,20px);
color:var(--muted);
max-width:46ch;
}
.terminal{
margin-top:40px;
background:var(--panel);
border:1px solid var(--line);
border-radius:var(--radius);
overflow:hidden;
}
.terminal-bar{
display:flex;
align-items:center;
gap:8px;
padding:10px 14px;
background:var(--panel-2);
border-bottom:1px solid var(--line);
}
.terminal-bar span{
width:10px;height:10px;border-radius:50%;
background:var(--line);
}
.terminal-bar .name{
margin-left:8px;
font-family:"IBM Plex Mono", monospace;
font-size:12px;
color:var(--muted);
}
.terminal-body{
padding:20px 22px 24px;
font-family:"IBM Plex Mono", monospace;
font-size:14px;
line-height:1.85;
}
.terminal-body .prompt{color:var(--blue);}
.terminal-body .out{color:var(--text);}
.terminal-body .comment{color:var(--muted);}
/* ---------- SECTION HEADINGS ---------- */
.sec-head{
display:flex;
align-items:baseline;
gap:10px;
margin-bottom:28px;
}
.sec-head .prompt-mark{
font-family:"IBM Plex Mono", monospace;
color:var(--blue);
font-size:16px;
}
.sec-head h2{
font-size:22px;
font-weight:600;
color:#fff;
}
.lede{max-width:64ch; color:var(--text);}
.lede + .lede{margin-top:14px;}
/* ---------- SKILLS ---------- */
.skill{margin-bottom:18px;}
.skill:last-child{margin-bottom:0;}
.skill-row{
display:flex;
justify-content:space-between;
font-size:14px;
margin-bottom:8px;
color:var(--muted);
}
.skill-row .lvl{font-family:"IBM Plex Mono", monospace; color:var(--text);}
.meter{
height:6px;
background:var(--panel-2);
border-radius:3px;
overflow:hidden;
border:1px solid var(--line);
}
.meter i{
display:block;
height:100%;
background:var(--blue);
}
/* ---------- PARCOURS ---------- */
.track{
border-left:1px solid var(--line);
margin-left:4px;
padding-left:24px;
}
.track-item{
position:relative;
padding-bottom:26px;
}
.track-item:last-child{padding-bottom:0;}
.track-item::before{
content:"";
position:absolute;
left:-29px;
top:6px;
width:9px;height:9px;
border-radius:50%;
background:var(--ink);
border:2px solid var(--blue);
}
.track-item h3{
font-size:16px;
font-weight:600;
color:#fff;
}
.track-item p{
margin:4px 0 0;
color:var(--muted);
font-size:14.5px;
}
.tags{margin-top:10px; display:flex; flex-wrap:wrap; gap:8px;}
.tag{
font-family:"IBM Plex Mono", monospace;
font-size:12px;
color:var(--amber);
border:1px solid var(--line);
padding:4px 9px;
border-radius:6px;
}
/* ---------- LETTRE ---------- */
.letter{
background:var(--panel);
border:1px solid var(--line);
border-radius:var(--radius);
padding:28px 28px 24px;
position:relative;
}
.letter::before{
content:"lettre_de_motivation.log";
display:block;
font-family:"IBM Plex Mono", monospace;
font-size:12px;
color:var(--muted);
margin-bottom:16px;
padding-bottom:14px;
border-bottom:1px solid var(--line);
}
.letter p{
color:var(--text);
font-size:15.5px;
}
.letter .sign{
margin-top:18px;
color:var(--muted);
font-size:14px;
}
/* ---------- LIENS ---------- */
.links{
display:grid;
grid-template-columns:1fr 1fr;
gap:14px;
}
@media (max-width:560px){
.links{grid-template-columns:1fr;}
}
.link-card{
display:block;
text-decoration:none;
background:var(--panel);
border:1px solid var(--line);
border-radius:var(--radius);
padding:20px;
transition:border-color .15s ease, transform .15s ease;
}
.link-card:hover{
border-color:var(--blue);
transform:translateY(-2px);
}
.link-card .tag-line{
font-family:"IBM Plex Mono", monospace;
font-size:12px;
color:var(--blue);
margin-bottom:10px;
display:block;
}
.link-card h3{
font-size:17px;
color:#fff;
margin-bottom:6px;
}
.link-card p{
margin:0;
font-size:13.5px;
color:var(--muted);
}
/* ---------- FOOTER / CONTACT ---------- */
footer{
padding:48px 0 calc(56px + env(safe-area-inset-bottom,0px));
}
.contact-grid{
display:flex;
flex-wrap:wrap;
gap:28px;
margin-top:22px;
}
.contact-item{font-size:14.5px;}
.contact-item .label{
font-family:"IBM Plex Mono", monospace;
font-size:11.5px;
color:var(--muted);
display:block;
margin-bottom:4px;
}
.contact-item a{
color:var(--text);
text-decoration:none;
border-bottom:1px solid var(--line);
}
.contact-item a:hover{border-color:var(--blue);}
:focus-visible{outline:2px solid var(--blue); outline-offset:2px;}
@media (prefers-reduced-motion: reduce){
.link-card{transition:none;}
html{scroll-behavior:auto;}
}
</style>
</head>
<body>
<div class="wrap hero">
<div class="kicker mono">// profil candidat</div>
<h1>Lucas Arnoult</h1>
<p class="role">Élève passionné de cybersécurité et de programmation, à la recherche d'un stage pour découvrir le métier sur le terrain.</p>
<div class="terminal">
<div class="terminal-bar">
<span></span><span></span><span></span>
<span class="name">profil.sh</span>
</div>
<div class="terminal-body">
<div><span class="prompt">$</span> <span class="out">whoami</span></div>
<div class="comment">Lucas Arnoult — élève de 2nde, filière MTNE</div>
<div style="margin-top:10px"><span class="prompt">$</span> <span class="out">objectif</span></div>
<div class="comment">Stage en cybersécurité</div>
<div style="margin-top:10px"><span class="prompt">$</span> <span class="out">status</span></div>
<div class="comment">Disponible — motivé, curieux, prêt à apprendre</div>
</div>
</div>
</div>
<section>
<div class="wrap">
<div class="sec-head"><span class="prompt-mark">></span><h2>profil</h2></div>
<p class="lede">Passionné d'informatique et plus particulièrement de cybersécurité, je m'intéresse aussi à la programmation et aux nouvelles technologies. J'ai déjà acquis quelques notions de base dans ces deux domaines, que je souhaite aujourd'hui approfondir grâce à une première expérience en entreprise.</p>
<p class="lede">Sérieux et curieux, je suis prêt à apprendre vite et à m'investir pleinement dans les missions qui me seront confiées.</p>
</div>
</section>
<section>
<div class="wrap">
<div class="sec-head"><span class="prompt-mark">></span><h2>compétences</h2></div>
<div class="skill">
<div class="skill-row"><span>Anglais</span><span class="lvl">niv. 1</span></div>
<div class="meter"><i style="width:95%"></i></div>
</div>
<div class="skill">
<div class="skill-row"><span>Espagnol</span><span class="lvl">niv. 2</span></div>
<div class="meter"><i style="width:20%"></i></div>
</div>
<div class="skill">
<div class="skill-row"><span>Cybersécurité</span><span class="lvl">débutant</span></div>
<div class="meter"><i style="width:20%"></i></div>
</div>
<div class="skill">
<div class="skill-row"><span>Programmation</span><span class="lvl">débutant</span></div>
<div class="meter"><i style="width:30%"></i></div>
</div>
</div>
</section>
<section>
<div class="wrap">
<div class="sec-head"><span class="prompt-mark">></span><h2>parcours</h2></div>
<div class="track">
<div class="track-item">
<h3>Stage en cybersécurité</h3>
<p>Première immersion dans le domaine de la sécurité informatique.</p>
</div>
<div class="track-item">
<h3>Stage en menuiserie</h3>
<p>Première expérience en entreprise, hors filière numérique.</p>
</div>
<div class="track-item">
<h3>Classe de seconde — filière MTNE</h3>
<p>Formation actuelle, orientée informatique et technologies numériques.</p>
<div class="tags">
<span class="tag">Pix</span>
<span class="tag">Brevet</span>
<span class="tag">ASSR 1 & 2</span>
</div>
</div>
</div>
</div>
</section>
<section>
<div class="wrap">
<div class="sec-head"><span class="prompt-mark">></span><h2>lettre de motivation</h2></div>
<div class="letter">
<p>Élève de seconde passionné de cybersécurité, je recherche un stage pour découvrir ce domaine sur le terrain. Sérieux et motivé, je suis prêt à m'investir pleinement dans les missions confiées.</p>
<div class="sign">— Lucas Arnoult</div>
</div>
</div>
</section>
<section>
<div class="wrap">
<div class="sec-head"><span class="prompt-mark">></span><h2>liens</h2></div>
<div class="links">
<a class="link-card" href="https://claude.ai/artifact/XLFjyLXaWmtdtKZArHKVLV" target="_blank" rel="noopener">
<span class="tag-line mono">01 · page</span>
<h3>CV complet</h3>
<p>Ouvrir la page dédiée</p>
</a>
<a class="link-card" href="https://claude.ai/artifact/R9KWFPXuewhPigTwThieCn" target="_blank" rel="noopener">
<span class="tag-line mono">02 · page</span>
<h3>Lettre de motivation</h3>
<p>Ouvrir la page dédiée</p>
</a>
</div>
</div>
</section>
<footer>
<div class="wrap">
<div class="sec-head"><span class="prompt-mark">></span><h2>contact</h2></div>
<div class="contact-grid">
<div class="contact-item">
<span class="label mono">TÉLÉPHONE</span>
<a href="tel:0770250503">07 70 25 05 03</a>
</div>
<div class="contact-item">
<span class="label mono">EMAIL</span>
<a href="mailto:lucasarnoult1@gmail.com">lucasarnoult1@gmail.com</a>
</div>
<div class="contact-item">
<span class="label mono">LOCALISATION</span>
<span>6 Hameau Parc Er Mare</span>
</div>
</div>
</div>
</footer>
</body>
</html>12,198 chars · codepastes.com