Accessible Developer Portfolio

Build a high-speed, SEO-optimized, accessible portfolio website with dark mode and contact forms.

Every software engineer needs a clean, professional online presence showcasing their skills, projects, and contact channels. In this project, you will build a fully responsive, semantic, and dark-mode ready portfolio from scratch.

HTML5CSS3JavaScriptResponsive DesignWCAG

Functional Requirements

Semantic HTML5 landmarks (<header>, <nav>, <main>, <section>, <footer>)
Fully responsive grid/flexbox layout that adapts to mobile, tablet, and desktop
Interactive dark mode theme toggle with localStorage persistence
Project showcase grid with live demo and source code links
Accessible contact form with client-side validation

System Architecture

Frontend: HTML5, Modern CSS Variables, Vanilla JS DOM

Backend: Static hosting on Vercel / GitHub Pages

Auth: None (Public showcase)

Step-by-Step Implementation

Semantic HTML Scaffold

Set up the document structure with viewport meta tags, navigation links, hero section, skills list, project showcase, and footer.

html

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Alex Developer — Full Stack Engineer</title>
  <link rel="stylesheet" href="styles.css">
</head>
<body>
  <header>
    <nav aria-label="Main Navigation">
      <a href="#about" class="logo">AD.</a>
      <div class="links">
        <a href="#projects">Projects</a>
        <a href="#skills">Skills</a>
        <a href="#contact">Contact</a>
        <button id="theme-toggle" aria-label="Toggle Theme">🌙</button>
      </div>
    </nav>
  </header>
  <!-- Main content sections -->
</body>
</html>

Rationale: Establishing clean HTML landmarks first guarantees screen reader accessibility and solid SEO structure.

Design System & CSS Variables

Configure CSS custom properties for light and dark color schemes, typography, and responsive container constraints.

css

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
:root {
  --bg: #ffffff;
  --text: #0f172a;
  --accent: #2563eb;
  --card-bg: #f8fafc;
  --border: #e2e8f0;
}
 
[data-theme="dark"] {
  --bg: #0f172a;
  --text: #f8fafc;
  --accent: #3b82f6;
  --card-bg: #1e293b;
  --border: #334155;
}
 
body {
  background-color: var(--bg);
  color: var(--text);
  font-family: -apple-system, sans-serif;
  transition: background-color 0.2s, color 0.2s;
}

Rationale: CSS variables make switching themes seamless without needing complex stylesheet swapping.

Testing & Quality Guidelines

Test responsive breakpoints at 375px (mobile), 768px (tablet), and 1200px (desktop).
Run Google Lighthouse in Chrome DevTools to ensure 95+ scores in Performance, Accessibility, and SEO.
Verify keyboard tab navigation cycles logically through all interactive links and buttons.

Deployment Instructions

Push your repository to GitHub.
Import repository into Vercel or GitHub Pages.
Verify custom domain and SSL certificate installation.