Bits of .NET

🎯 Portfolio Page = Semantic HTML

Your portfolio needs structure. Semantic HTML creates accessible, SEO-friendly portfolio pages.

📝 Portfolio Structure

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>My Portfolio</title>
</head>
<body>
    <header role="banner">
        <h1>John Doe - Web Developer</h1>
        <p>Building amazing web experiences</p>
        <nav role="navigation" aria-label="Main Navigation">
            <ul>
                <li><a href="#about">About</a></li>
                <li><a href="#projects">Projects</a></li>
                <li><a href="#skills">Skills</a></li>
                <li><a href="#contact">Contact</a></li>
            </ul>
        </nav>
    </header>

    <main role="main">
        <section id="about" aria-labelledby="about-title">
            <h2 id="about-title">About Me</h2>
            <figure>
                <img src="profile.jpg" alt="John Doe">
                <figcaption>John Doe - Web Developer</figcaption>
            </figure>
            <p>I'm a passionate web developer with 5 years of experience...</p>
        </section>

        <section id="projects" aria-labelledby="projects-title">
            <h2 id="projects-title">Projects</h2>
            <ul>
                <li>
                    <article>
                        <h3>Project 1</h3>
                        <p>Description of project 1...</p>
                        <a href="/project-1">View Project</a>
                    </article>
                </li>
                <li>
                    <article>
                        <h3>Project 2</h3>
                        <p>Description of project 2...</p>
                        <a href="/project-2">View Project</a>
                    </article>
                </li>
            </ul>
        </section>

        <section id="skills" aria-labelledby="skills-title">
            <h2 id="skills-title">Skills</h2>
            <ul>
                <li>HTML5</li>
                <li>CSS3</li>
                <li>JavaScript</li>
                <li>React</li>
                <li>Node.js</li>
            </ul>
        </section>

        <section id="contact" aria-labelledby="contact-title">
            <h2 id="contact-title">Contact Me</h2>
            <form role="form">
                <label for="name">Name</label>
                <input type="text" id="name">
                <label for="email">Email</label>
                <input type="email" id="email">
                <label for="message">Message</label>
                <textarea id="message"></textarea>
                <button type="submit">Send Message</button>
            </form>
        </section>
    </main>

    <footer role="contentinfo">
        <p>&copy; 2024 John Doe</p>
        <nav role="navigation" aria-label="Social Links">
            <ul>
                <li><a href="https://github.com">GitHub</a></li>
                <li><a href="https://linkedin.com">LinkedIn</a></li>
                <li><a href="https://twitter.com">Twitter</a></li>
            </ul>
        </nav>
    </footer>
</body>

💡 Portfolio Tips

• Use semantic structure
• Showcase projects effectively
• Include clear call-to-action
• Make it accessible
• Keep it updated