Section 39: Project — SEO-Ready Personal Portfolio

Project Goal

Create a personal portfolio that introduces you, showcases projects, describes your skills and provides a contact method. Apply semantic HTML, accessible markup and search-friendly metadata.

1. Complete Portfolio HTML

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Your Name | Web Developer Portfolio</title>
  <meta name="description"
    content="Explore my web development projects, technical skills and experience.">

  <link rel="canonical" href="https://example.com/">
  <link rel="stylesheet" href="/css/portfolio.css">
  <meta property="og:title" content="Your Name | Portfolio">
  <meta property="og:description"
    content="Explore my projects and web development skills.">
  <meta property="og:type" content="website">
  <meta property="og:url" content="https://example.com/">
</head>
<body>
  <header>
    <nav aria-label="Main navigation">
      <a href="#about">About</a>
      <a href="#skills">Skills</a>
      <a href="#projects">Projects</a>
      <a href="#contact">Contact</a>
    </nav>
  </header>

  <main>
    <section id="about" aria-labelledby="about-heading">
      <h1 id="about-heading">Hello, I'm Your Name</h1>
      <p>I'm a web developer who builds useful digital experiences.</p>
      <img src="/images/profile.jpg" alt="Portrait of Your Name"
        width="240" height="240">
    </section>

    <section id="skills" aria-labelledby="skills-heading">
      <h2 id="skills-heading">Technical Skills</h2>
      <ul>
        <li>HTML and CSS</li>
        <li>JavaScript</li>
        <li>PHP and Laravel</li>
        <li>Databases and APIs</li>
      </ul>
    </section>

    <section id="projects" aria-labelledby="projects-heading">
      <h2 id="projects-heading">Selected Projects</h2>

      <article>
        <h3>Project One</h3>
        <p>Describe the problem, solution and technologies used.</p>
        <a href="https://example.com/project-one">View Project One</a>
      </article>

      <article>
        <h3>Project Two</h3>
        <p>Explain the features you implemented and your contribution.</p>
        <a href="https://example.com/project-two">View Project Two</a>
      </article>
    </section>

    <section id="contact" aria-labelledby="contact-heading">
      <h2 id="contact-heading">Contact Me</h2>
      <p>
        Email:
        <a href="mailto:you@example.com">you@example.com</a>
      </p>
    </section>
  </main>

  <footer>
    <p>Copyright Your Name</p>
    <a href="#about">Back to top</a>
  </footer>
</body>
</html>

2. Replace Placeholder Information

• Replace Your Name with your actual professional name.
• Replace example.com with your real portfolio domain.
• Add real projects and explain your own contribution accurately.
• Use a real profile image with appropriate alternative text.
• Replace the sample email address with your contact address.

3. Add Structured Data (Optional)

Structured data can describe a person and their professional website. Use only accurate information.

<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "Person",
  "name": "Your Name",
  "url": "https://example.com/",
  "jobTitle": "Web Developer"
}
</script>

4. SEO Checklist

• Use a descriptive page title and meta description.
• Use one clear primary page heading and a logical heading hierarchy.
• Write useful, original project descriptions.
• Use descriptive link text and meaningful image alternatives.
• Ensure the canonical URL points to the intended live page.
• Use a responsive layout and avoid horizontal overflow.
• Check loading performance and broken links.
• Make the site available to crawlers if you want it indexed.

5. Accessibility Checklist

• Navigate the portfolio using only a keyboard.
• Ensure every link has an understandable purpose.
• Check text contrast and focus indicators.
• Verify that meaningful images have suitable alt text.
• Check that headings and landmarks make sense when read out of context.

6. Final Portfolio Tasks

1. Add at least three genuine projects.
2. Write a professional About section.
3. Add a skills section and a contact method.
4. Test the website at mobile and desktop sizes.
5. Validate the HTML and fix errors.
6. Review the title, description, links and images before publishing.

Project Review Quiz

1. What is the purpose of the canonical link?
2. Does a meta description guarantee a search ranking?
3. Why should portfolio project descriptions be accurate?
4. Why is responsive design important?
5. Does structured data guarantee a rich search result?

Answer Key

1. It signals the preferred URL for the page.
2. No. It can help describe the page, but does not guarantee ranking or a specific snippet.
3. It accurately represents your work and helps employers assess your experience.
4. It helps the site adapt to different screen sizes and devices.
5. No. Eligibility and display depend on the applicable search engine requirements.