<!-- Create links within the navigation menu that link to different sections of the same page. -->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>simple page</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        html {
            scroll-behavior: smooth;
        }
        .container {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            /* height: 100vh; */
        }
        nav {
            display: flex;
            justify-content: space-around;
            align-items: center;
            width: 100%;
            height: 10vh;
            background-color: white;
            color: #000;
            padding: 20px;
            position: sticky;
            top: 0;
        }
        nav ul {
            display: flex;
            justify-content: space-evenly;
            align-items: center;
            width: 50%;
        }
        nav ul li {
            list-style: none;
        }
        .section {
            height: 70vh;
            display: flex;
            align-items: center;
            justify-content: center;
            width: 100%;
        }
        .home {
            background-color: aquamarine;
        }
        .about {
            background-color: rgb(255, 152, 152);
        }
        .projects {
            background-color: rgb(255, 255, 152);
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
        }
        .projects h2 {
            margin: 2vh 0;
        }
        .projects ul li {
            margin: 5px 0;
            font-size: 17px;
        }
        .projects span {
            font-size: 17px;
            font-weight: 600;
            margin-top: 5vh;
        }
        .contact {
            background-color: rgb(152, 255, 152);
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
        }
        .contact h2 {
            margin: 2vh 0;
        }
        .contact ul li {
            margin: 5px 0;
            font-size: 17px;
        }
        .contact span {
            font-size: 17px;
            font-weight: 600;
            margin-top: 5vh;
        }
    </style>
</head>
<body>
    <nav>
        <h1>Akash Nath</h1>
        <ul>
            <li><a href="#home">Home</a></li>
            <li><a href="#about">About me</a></li>
            <li><a href="#projects">Projects</a></li>
            <li><a href="#contact">Contact me</a></li>
        </ul>
    </nav>
    <div class="container">
        <div class="section home" id="home">
            <h1>Hii, welcome to page</h1>
        </div>
        <div class="section about" id="about">
            <h2>I am supposed to write about, but company didn't pay me well, so I'm not gonna write any :)</h2>
        </div>
        <div class="section projects" id="projects">
            <h2>My projects</h2>
            <ul>
                <li><a href="https://github.com/Akash-nath29/Inscribe">A Notes manager application in flask</a></li>
                <li><a href="https://github.com/Akash-nath29/Trackify">An Phone Number tracker app in flask</a></li>
                <li><a href="https://github.com/Akash-nath29/ai-image-generator">OpenAI api based Image generator application in flask</a></li>
                <li><a href="https://github.com/Akash-nath29/shortifyJS">An URL shortener application made in vanilla JavaScript</a></li>
                <li><a href="https://github.com/Akash-nath29/shareSurge">A secure file sharing platform made in flask</a></li>
            </ul>
            <span><a href="https://github.com/Akash-nath29?tab=repositories">Find out more</a></span>
        </div>
        <div class="section contact" id="contact">
            <h2>Here are some ways to contact me</h2>
            <span><a href="https://akashnath.netlify.app">Portfolio</a></span>
            <span><a href="https://www.instagram.com/akash_nath29">Instagram</a></span>
            <span><a href="https://github.com/Akash-nath29">Github</a></span>
            <span><a href="https://in.linkedin.com/in/akash-nath-986026268">Linkedin</a></span>
        </div>
    </div>
</body>
</html>