Adrien/website
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

rajout des compétences

Browse source
This commit is contained in:
Didictateur 2025-11-19 08:28:56 +01:00
parent f6a4ff7411
commit 76517f1eb3
2 changed files with 98 additions and 0 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

79
index.html
View file

@ -35,6 +35,85 @@
<li><strong>E-mail:</strong> <a href="mailto:adrien.decosse@ens-rennes.fr">adrien.decosse@ens-rennes.fr</a></li>
<li><strong>GitHub:</strong> <a href="https://github.com/Didictateur">Didictateur</a></li>
</ul>
<div class="skills">
<h3>Compétences</h3>
<ul class="skill-list">
<li class="skill">
<span class="skill-name">Python</span>
<div class="skill-bar" role="img" aria-label="Niveau Python">
<span class="segment filled"></span>
<span class="segment filled"></span>
<span class="segment filled"></span>
<span class="segment filled"></span>
<span class="segment filled"></span>
<span class="segment filled"></span>
</div>
</li>
<li class="skill">
<span class="skill-name">C</span>
<div class="skill-bar" role="img" aria-label="Niveau C">
<span class="segment filled"></span>
<span class="segment filled"></span>
<span class="segment filled"></span>
<span class="segment filled"></span>
<span class="segment"></span>
<span class="segment"></span>
</div>
</li>
<li class="skill">
<span class="skill-name">C++</span>
<div class="skill-bar" role="img" aria-label="Niveau C++">
<span class="segment filled"></span>
<span class="segment filled"></span>
<span class="segment filled"></span>
<span class="segment filled"></span>
<span class="segment filled"></span>
<span class="segment"></span>
</div>
</li>
<li class="skill">
<span class="skill-name">OCaml</span>
<div class="skill-bar" role="img" aria-label="Niveau OCaml">
<span class="segment filled"></span>
<span class="segment filled"></span>
<span class="segment filled"></span>
<span class="segment filled"></span>
<span class="segment"></span>
<span class="segment"></span>
</div>
</li>
<li class="skill">
<span class="skill-name">Lua</span>
<div class="skill-bar" role="img" aria-label="Niveau Lua">
<span class="segment filled"></span>
<span class="segment filled"></span>
<span class="segment filled"></span>
<span class="segment filled"></span>
<span class="segment filled"></span>
<span class="segment filled"></span>
</div>
</li>
<li class="skill">
<span class="skill-name">HTML/CSS</span>
<div class="skill-bar" role="img" aria-label="Niveau HTML/CSS">
<span class="segment filled"></span>
<span class="segment filled"></span>
<span class="segment filled"></span>
<span class="segment"></span>
<span class="segment"></span>
<span class="segment"></span>
</div>
</li>
</ul>
</div>
</aside>
<section class="main-card">

19
style.css
View file

@ -90,6 +90,25 @@ body{
.contact-list li{margin:10px 0}
.contact-list a{color:var(--accent); text-decoration:none}
/* Skills bar: each bar composed of 6 segments; add/remove 'filled' on .segment to change level */
.skills{margin-top:14px; text-align:center}
.skills h3{margin:6px 0 10px; font-size:16px; color:var(--text); font-weight:700}
.skill-list{list-style:none; padding:0; margin:0; display:grid; gap:10px; text-align:left}
.skill-list{list-style:none; padding:0; margin:0; display:grid; gap:10px}
.skill{display:flex; align-items:center; gap:12px}
.skill-name{width:100px; font-weight:600; color:var(--muted); font-size:14px}
.skill-bar{flex:1; display:flex; gap:6px; align-items:center}
.skill-bar .segment{flex:1; height:10px; background:rgba(15,23,42,0.06); border-radius:6px}
.skill-bar .segment.filled{background: linear-gradient(90deg, var(--accent), var(--accent-2)); box-shadow: 0 1px 0 rgba(255,255,255,0.08) inset}
.skill-bar .segment:first-child{border-radius:6px 4px 4px 6px}
.skill-bar .segment:last-child{border-radius:4px 6px 6px 4px}
@media (max-width:600px){
.skill{gap:8px}
.skill-name{width:90px; font-size:13px}
.skill-bar .segment{height:9px}
}
.profile-card > a{
display:inline-block;
line-height:0;