Showcasing Your Skills

A skills section lets you highlight your technical abilities at a glance. The two most common styles are tag pills (simple coloured badges) and skill bars (progress-bar style indicators).

Skill Tag Pills

<div class="skills-list">
  <span class="skill-tag">HTML</span>
  <span class="skill-tag">CSS</span>
  <span class="skill-tag">JavaScript</span>
</div>

Styling the Tags

.skills-list { display: flex; flex-wrap: wrap; gap: 10px; }
.skill-tag {
  background: #00bcd4;
  color: #fff;
  padding: 6px 16px;
  border-radius: 50px;
  font-size: .85rem;
  font-weight: 700;
}

flex-wrap: wrap ensures the tags wrap onto the next line on small screens automatically — no media query needed here.

Experience Timeline

Use a simple vertical list styled with a left border to create a timeline of jobs or projects. Each item can be a <div class="timeline-item"> with a heading and date.