The Skills Section

Show what you know, but be honest. A clear, accurate skills section is better than an inflated one that falls apart in interviews.

Common patterns

• Skill bars. Visual percentage bars (subjective, but looks impressive)
• Skill tags, pill badges grouped by category (clean, professional)
• Skill cards, icon + name + level (great for a lot of skills)

What to include

Languages:   HTML, CSS, JavaScript, PHP, Python
Frameworks:  React, Bootstrap, Tailwind
Tools:       Git, VS Code, Figma, XAMPP
Databases:   MySQL, SQLite

Skill bar CSS animation

.bar-fill {
    width: 0%; /* start at 0 */
    transition: width 1.2s ease;
}
/* Animate on page load or scroll */
window.addEventListener("load", () => {
    document.querySelectorAll(".bar-fill").forEach(el => {
        el.style.width = el.dataset.width;
    });
});