DEV Community

Cover image for Day 19/180 of Frontend Dev: Creating a Multi-Page Professional Portfolio Site
CodeWithDhanian
CodeWithDhanian

Posted on

Day 19/180 of Frontend Dev: Creating a Multi-Page Professional Portfolio Site

#frontend #frontendchallenge #webdev

Welcome to Day 19 of the 180 Days of Frontend Development Challenge. Today we'll combine your portfolio homepage (Day 17), resume (Day 18), and new project pages into a complete multi-page website. For advanced site architecture techniques, see the Learn Frontend Development in 180 Days ebook.

File Structure Overview 

my-portfolio/
├── index.html          # Homepage (Day 17)
├── resume.html         # Resume (Day 18)
├── projects/
│   ├── ecommerce.html  # Project detail page
│   └── healthapp.html  # Project detail page
├── contact.html        # Contact form page
└── assets/
    ├── images/
    └── styles/
        └── main.css    # Future CSS file
Enter fullscreen mode Exit fullscreen mode

1. Unified Navigation System

Shared Header Component 

<!-- Add this to ALL pages -->
<header>
  <nav aria-label="Main navigation">
    <ul>
      <li><a href="index.html">Home</a></li>
      <li><a href="resume.html">Resume</a></li>
      <li><a href="projects/ecommerce.html">Projects</a></li>
      <li><a href="contact.html">Contact</a></li>
    </ul>
  </nav>
</header>
Enter fullscreen mode Exit fullscreen mode

Key Features:

  • Consistent across all pages
  • Accessible ARIA labeling
  • Relative paths for local hosting

2. Project Detail Page Template

projects/ecommerce.html 

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>E-Commerce Dashboard | Taylor Rivera Portfolio</title>
  <meta name="description" content="Case study of React-based e-commerce analytics dashboard">
</head>
<body>
  <header>
    <!-- Shared Navigation -->
    <nav aria-label="Main navigation">
      <ul>
        <li><a href="../index.html">Home</a></li>
        <li><a href="../resume.html">Resume</a></li>
        <li><a href="ecommerce.html">Projects</a></li>
        <li><a href="../contact.html">Contact</a></li>
      </ul>
    </nav>
  </header>

  <main>
    <article class="project-detail">
      <header>
        <h1>E-Commerce Analytics Dashboard</h1>
        <p class="project-meta">
          <time datetime="2023-03-15">March 2023</time> | 
          <span>React, D3.js, Node.js</span>
        </p>
      </header>

      <section aria-labelledby="overview-heading">
        <h2 id="overview-heading">Project Overview</h2>
        <p>Dashboard application for retail managers to track real-time sales performance across multiple channels.</p>

        <figure>
          <img src="../assets/images/ecommerce-screenshot.jpg" 
               alt="E-commerce dashboard interface showing sales graphs"
               width="1200" height="630">
          <figcaption>Dashboard main interface with monthly sales visualization</figcaption>
        </figure>
      </section>

      <section aria-labelledby="features-heading">
        <h2 id="features-heading">Key Features</h2>
        <ul>
          <li>Real-time data visualization using D3.js</li>
          <li>JWT authentication for multi-user access</li>
          <li>Exportable PDF reports</li>
        </ul>
      </section>

      <section aria-labelledby="tech-heading">
        <h2 id="tech-heading">Technologies Used</h2>
        <dl>
          <dt>Frontend</dt>
          <dd>React, Redux Toolkit, D3.js</dd>

          <dt>Backend</dt>
          <dd>Node.js, Express, MongoDB</dd>
        </dl>
      </section>

      <footer>
        <a href="../index.html#projects" class="back-link">← View All Projects</a>
      </footer>
    </article>
  </main>

  <footer>
    <!-- Shared Footer -->
    <p>&copy; 2023 Taylor Rivera. All rights reserved.</p>
    <nav aria-label="Social media links">
      <ul>
        <li><a href="https://github.com/taylorrivera">GitHub</a></li>
        <li><a href="https://linkedin.com/in/taylorrivera">LinkedIn</a></li>
      </ul>
    </nav>
  </footer>
</body>
</html>
Enter fullscreen mode Exit fullscreen mode

3. Contact Page Template

contact.html 

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Contact | Taylor Rivera Portfolio</title>
  <meta name="description" content="Contact form for professional inquiries">
</head>
<body>
  <header>
    <!-- Shared Navigation -->
    <nav aria-label="Main navigation">
      <ul>
        <li><a href="index.html">Home</a></li>
        <li><a href="resume.html">Resume</a></li>
        <li><a href="projects/ecommerce.html">Projects</a></li>
        <li><a href="contact.html">Contact</a></li>
      </ul>
    </nav>
  </header>

  <main>
    <h1>Get In Touch</h1>

    <section aria-labelledby="contact-info">
      <h2 id="contact-info">Contact Information</h2>
      <address>
        <ul>
          <li>Email: <a href="mailto:taylor@example.com">taylor@example.com</a></li>
          <li>Phone: <a href="tel:+15551234567">(555) 123-4567</a></li>
          <li>Based in San Francisco, CA</li>
        </ul>
      </address>
    </section>

    <section aria-labelledby="form-heading">
      <h2 id="form-heading">Send a Message</h2>
      <form id="contact-form" action="/submit" method="POST">
        <div class="form-group">
          <label for="name">Name*</label>
          <input type="text" id="name" name="name" required>
        </div>

        <div class="form-group">
          <label for="email">Email*</label>
          <input type="email" id="email" name="email" required>
        </div>

        <div class="form-group">
          <label for="message">Message*</label>
          <textarea id="message" name="message" rows="6" required></textarea>
        </div>

        <button type="submit">Send Message</button>
      </form>
    </section>
  </main>

  <footer>
    <!-- Shared Footer -->
    <p>&copy; 2023 Taylor Rivera. All rights reserved.</p>
    <nav aria-label="Social media links">
      <ul>
        <li><a href="https://github.com/taylorrivera">GitHub</a></li>
        <li><a href="https://linkedin.com/in/taylorrivera">LinkedIn</a></li>
      </ul>
    </nav>
  </footer>
</body>
</html>
Enter fullscreen mode Exit fullscreen mode

4. Professional Site Architecture Tips

  1. Consistent Branding

    • Same header/footer on all pages
    • Uniform page titles ("Page | Site Name")
    • Cohesive meta descriptions

  2. Linking Strategy

   <!-- Absolute paths for root -->
   <a href="/projects">Projects</a>

   <!-- Relative paths for subdirectories -->
   <a href="../index.html">Home</a>
Enter fullscreen mode Exit fullscreen mode

  1. Accessibility Features

    • Skip navigation links
    • ARIA landmarks
    • Consistent heading hierarchy

  2. SEO Optimization

    • Unique title/description per page
    • Semantic HTML structure
    • Properly linked navigation

Exercises

  1. Implement This Structure

    • Create the projects/ directory
    • Add at least two project detail pages
    • Build the contact page

  2. Cross-Linking Check

    • Verify all internal links work
    • Test navigation between pages
    • Check relative/absolute paths

  3. Enhance Your Site

    • Add a 404.html page
    • Create blog/ directory
    • Add sitemap.xml

What's Next?

Tomorrow (Day 20) will introduce CSS Fundamentals to style your multi-page portfolio. For advanced site architecture techniques including partial templates and build tools, see Chapter 15 in the Learn Frontend Development in 180 Days ebook.

Pro Tip: Validate your multi-page structure with:

# Run a local server to test links
python3 -m http.server 8000
Enter fullscreen mode Exit fullscreen mode

Top comments (0)