Build a Portfolio Website About Me Section
7 / 16
Next
About Me Section ~18min

Writing Your About Me Section

Every portfolio needs an About Me section that tells visitors who you are, what you do, and what makes you unique. It is usually split into two columns: your photo on one side and your bio text on the other.

Semantic Tags

Use <section id="about"> to wrap this area. Screen readers and search engines benefit from meaningful IDs and semantic HTML5 section tags.

Two-Column Layout with Flexbox

.about-inner {
  display: flex;
  gap: 40px;
  align-items: center;
}
.about-img { width: 200px; border-radius: 50%; }
.about-text { flex: 1; }

The image takes a fixed width; the text column gets flex: 1 so it fills the rest of the space.

Profile Photo Tip

Use a real, professional headshot. If you do not have one yet, use a placeholder image service URL. Always add a descriptive alt attribute.

Tasks
Preview