index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Rudra</title>
    <link rel="stylesheet" href="./index.css"/>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.5.0/font/bootstrap-icons.css">
</head>
<body>
    <nav class ="navbar" id="navbar" >
        <div onclick="openmenu()" class="menuicon">
            <i class="bi-list"></i>
        </div>
        <div class="navlist" >
            <a href="#aboutme">about me </a>
            <a href="#education">education</a>
            <a href="#skills">skills </a>
            <a href="#projects">projects</a>
            <a href="#contact">contact</a>

        </div>
        <img class="navprofile" src="./images/profile.JPG" alt="image">


    </nav>
    <main>
        <div class="profilebody">
            <div class="profileinfo">
                <p class="text1">Hello</p>
                <p class="text2">This is Rudra</p>
                <div class="skillslist">
                    <p>Html</p>
                    <p>CSS</p>

                </div>
            </div>
            <div>
                <img class="profileimage" src="./images/profile.JPG" alt="image">
            </div>
        </div >
        <div id="aboutme" class="aboutmebody">
            <p class="title">About Me</p>
            <div class="aboutmeinfo">
                <p>
                    This is info part.....
                </p>
                <ul>
                   <li>strong</li>
                </ul>

            </div>

        </div>
    </main>
</body>
<script>
    function openmenu(){   
        document.getElementById('navbar')?.classList.toggle('active')
    }
</script>
</html>