<div class="skills-wrapper">
<h3>Technical Skills</h3>
<div class="skill-box">
<div class="skill-info">
<span>HTML & CSS</span>
<span>90%</span>
</div>
<div class="skill-bar"><div class="fill html"></div></div>
</div>
<div class="skill-box">
<div class="skill-info">
<span>JavaScript</span>
<span>85%</span>
</div>
<div class="skill-bar"><div class="fill js"></div></div>
</div>
<div class="skill-box">
<div class="skill-info">
<span>Python</span>
<span>75%</span>
</div>
<div class="skill-bar"><div class="fill python"></div></div>
</div>
</div>
.skills-wrapper {
font-family: system-ui, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
max-width: 500px;
margin: 0 auto;
padding: 20px;
}
.skills-wrapper h3 {
color: #1f2937;
margin-bottom: 25px;
}
.skill-box {
margin-bottom: 20px;
}
.skill-info {
display: flex;
justify-content: space-between;
margin-bottom: 8px;
font-size: 0.95rem;
font-weight: 600;
color: #4b5563;
}
.skill-bar {
width: 100%;
height: 10px;
background: #e5e7eb;
border-radius: 10px;
overflow: hidden;
}
.fill {
height: 100%;
border-radius: 10px;
width: 0;
animation: progress 1.5s ease-in-out forwards;
}
.html {
background: #f97316;
--w: 90%;
}
.js {
background: #facc15;
--w: 85%;
}
.python {
background: #3b82f6;
--w: 75%;
}
@keyframes progress {
from { width: 0; }
to { width: var(--w); }
}
