Building a Simple Portfolio Website

A portfolio website is one of the most valuable things you can build as a developer or designer. It's your personal corner of the web: a place where you show employers and clients who you are, what you do, and what you've made. Best of all, you can build a great one using just HTML and CSS.

The Anatomy of a Portfolio

A typical portfolio site is made up of the following sections, ideally all living on a single scrollable page:

Sticky Navigation: A nav bar fixed to the top of the screen with links that jump to each section. Keeps the user oriented at all times.
Hero Section: A large, attention-grabbing introduction with your name, a one-line summary of what you do, and a call-to-action (CTA) button pointing to your work.
Skills Grid: A simple grid of "chip" elements highlighting your core competencies. Use repeat(auto-fit, minmax(...)) from CSS Grid so it automatically adjusts to any screen size.
Projects Grid: Cards that each represent a completed project. Each card should include a visual, a title, and a brief description.
Contact Section: A bold, high-contrast call-to-action at the bottom with your email address or a link to your contact form.

The HTML Skeleton

Because all sections share a single scrollable page, the HTML structure is a sequence of semantic landmark tags inside the body:

Sticky Navigation

By giving the nav a position: sticky and top: 0, it automatically stays glued to the top of the browser window as the user scrolls. You can then use anchor links (<a href="#skills">) to jump to other sections on the page by matching the href to the id of the target section.

Full Working Example

Below is a complete, fully styled portfolio page for a fictional developer. Note how the navigation, hero gradient, skills chips, project cards, and contact section all combine to form a professional, job-ready presentation. Resize the window to see it adapt to mobile screens:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Alex Zera | Frontend Developer</title>
<style>
  *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
  body { font-family: 'Segoe UI', sans-serif; color: #333; background: #fafafa; }
  a { color: inherit; text-decoration: none; }

/* ---- NAV ---- */
  nav {
    position: sticky; top: 0; z-index: 100;
    background: white;
    display: flex; justify-content: space-between; align-items: center;
    padding: 16px 40px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.06);
  }
  .nav-logo { font-size: 1.3em; font-weight: 700; color: #4f46e5; }
  .nav-links a { margin-left: 24px; color: #555; font-weight: 500; transition: color 0.2s; }
  .nav-links a:hover { color: #4f46e5; }

/* ---- HERO ---- */
  .hero {
    min-height: 90vh;
    display: flex; align-items: center; justify-content: center;
    text-align: center;
    background: linear-gradient(135deg, #ede9fe 0%, #e0f2fe 100%);
    padding: 60px 20px;
  }
  .hero h1 { font-size: clamp(2em, 5vw, 3.5em); color: #1e1b4b; margin-bottom: 16px; }
  .hero p { font-size: 1.2em; color: #555; max-width: 540px; margin: 0 auto 32px; }
  .btn-primary {
    display: inline-block; padding: 14px 32px;
    background: #4f46e5; color: white; border-radius: 50px;
    font-weight: 600; font-size: 1em;
    transition: background 0.2s, transform 0.2s;
  }
  .btn-primary:hover { background: #3730a3; transform: translateY(-2px); }

/* ---- SECTIONS ---- */
  section { padding: 80px 40px; max-width: 1100px; margin: 0 auto; }
  h2.section-title { font-size: 2em; color: #1e1b4b; margin-bottom: 12px; }
  .section-subtitle { color: #666; margin-bottom: 48px; }

/* ---- SKILLS ---- */
  .skills-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
    gap: 16px;
  }
  .skill-chip {
    background: white; border: 2px solid #e0e7ff;
    border-radius: 12px; padding: 16px;
    text-align: center; font-weight: 600; color: #4f46e5;
    transition: border-color 0.2s, transform 0.2s;
  }
  .skill-chip:hover { border-color: #4f46e5; transform: translateY(-3px); }

/* ---- PROJECTS ---- */
  .projects-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 24px;
  }
  .project-card {
    background: white; border-radius: 12px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.07);
    overflow: hidden;
    transition: transform 0.2s;
  }
  .project-card:hover { transform: translateY(-4px); }
  .project-thumb {
    height: 160px;
    display: flex; align-items: center; justify-content: center;
    font-size: 3em;
  }
  .project-body { padding: 20px; }
  .project-body h3 { margin-bottom: 8px; }
  .project-body p { color: #666; font-size: 0.9em; }
  
  /* ---- CONTACT ---- */
  .contact-section { background: #1e1b4b; color: white; text-align: center; padding: 80px 40px; }
  .contact-section h2 { font-size: 2em; margin-bottom: 12px; }
  .contact-section p { margin-bottom: 28px; opacity: 0.85; }
  .btn-outline {
    display: inline-block; padding: 14px 32px;
    border: 2px solid white; color: white; border-radius: 50px;
    font-weight: 600; transition: background 0.2s;
  }
  .btn-outline:hover { background: white; color: #1e1b4b; }

/* ---- FOOTER ---- */
  footer { text-align: center; padding: 24px; color: #999; font-size: 0.9em; }
</style>
</head>
<body>

<nav>
  <div class="nav-logo">Alex Zera</div>
  <div class="nav-links">
    <a href="#skills">Skills</a>
    <a href="#projects">Projects</a>
    <a href="#contact">Contact</a>
  </div>
</nav>

<div class="hero">
  <div>
    <h1>Hi, I'm Alex Zera &#128075;</h1>
    <p>A frontend developer who builds fast, accessible, and beautifully designed web experiences.</p>
    <a href="#projects" class="btn-primary">See My Work</a>
  </div>
</div>

<section id="skills">
  <h2 class="section-title">My Skills</h2>
  <p class="section-subtitle">Technologies I use every day</p>
  <div class="skills-grid">
    <div class="skill-chip">HTML5</div>
    <div class="skill-chip">CSS3</div>
    <div class="skill-chip">JavaScript</div>
    <div class="skill-chip">React</div>
    <div class="skill-chip">Git</div>
    <div class="skill-chip">Figma</div>
  </div>
</section>

<section id="projects">
  <h2 class="section-title">My Projects</h2>
  <p class="section-subtitle">A selection of things I've built</p>
  <div class="projects-grid">
    <div class="project-card">
      <div class="project-thumb" style="background:#ede9fe;">&#9749;</div>
      <div class="project-body">
        <h3>CafeOrder App</h3>
        <p>A responsive ordering system for a local cafeteria, built with React and CSS Grid.</p>
      </div>
    </div>
    <div class="project-card">
      <div class="project-thumb" style="background:#e0f2fe;">&#128248;</div>
      <div class="project-body">
        <h3>Snap Gallery</h3>
        <p>A Masonry-style photo gallery with lightbox functionality using Vanilla JavaScript.</p>
      </div>
    </div>
    <div class="project-card">
      <div class="project-thumb" style="background:#dcfce7;">&#128200;</div>
      <div class="project-body">
        <h3>Budget Planner</h3>
        <p>A client-side budget tracking tool with localStorage persistence and chart visualizations.</p>
      </div>
    </div>
  </div>
</section>

<div class="contact-section" id="contact">
  <h2>Let's Work Together</h2>
  <p>I'm currently available for freelance projects. Drop me an email!</p>
  <a href="mailto:alex@example.com" class="btn-outline">alex@example.com</a>
</div>

</body>
</html>

View Output Full Screen Preview