portfolio website

<!-- Main Header Section of the page -->
    <header class="header">

        <!-- Navigation bar containing logo and navigation links -->
        <nav class="navbar">

            <!-- Logo container to hold the portfolio logo image -->
            <div class="logo-container">
                <!-- Logo image with an alt attribute for accessibility; replace "logo.png" with your logo file -->
                <img src="logo.png" alt="Portfolio Logo" class="logo" width="50" height="50">
            </div>

            <!-- Container for the navigation links (About, Projects, Skills, Contact) -->
            <div class="nav-links-container">
                <!-- Unordered list to structure the navigation links -->
                <ul class="nav-links">
                    <!-- Each list item represents a link to a section on the same page -->

                    <!-- "About" link that scrolls to the #about section -->
                    <li class="nav-item">
                        <!-- Anchor tag with href="#about" to jump to the About section -->
                        <a href="#about" class="nav-link">About</a>
                    </li>

                    <!-- "Projects" link that scrolls to the #projects section -->
                    <li class="nav-item">
                        <a href="#projects" class="nav-link">Projects</a>
                    </li>

                    <!-- "Skills" link that scrolls to the #skills section -->
                    <li class="nav-item">
                        <a href="#skills" class="nav-link">Skills</a>
                    </li>
                </ul>
            </div>
        </nav>

        <!-- Contact Us Button -->
        <div class="contact-button-container">
            <!-- button that links to the Contact section -->
            <button onclick="document.getElementById('contact').scrollIntoView();" class="contact-button">
                Contact Us
            </button>
        </div>
    </header>