<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title> Simran -Developer portfolio </title>
    <link rel="stylesheet" href="navbar.css">
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        body {
            background-color: rgb(0, 0, 33);
            color: white;
        }

        /* nav {
            display: flex;
            justify-content: space-around;
            align-items: center;
            height: 60px;
            background-color: rgb(40, 40, 59);
        }

        nav ul {
            display: flex;
            justify-content: center;
        }

        nav ul li {
            list-style: none;
            margin: 0 23px;
        }

        nav ul li a {
            text-decoration: none;
            color: white
        }

        nav ul li a:hover {
            text-decoration: none;
            color: rgb(202, 67, 67);
            font-size: 1.04rem;
        }

        main hr {
            border: 0;
            background-color: rgb(205, 198, 198);
            height: 1.2px;

        } */
            

            /* ==================================================== */


        .left {
            font-size: 2rem;
            color: aqua;
        }

        .firstsection {
            display: flex;
            justify-content: space-around;
            margin: 80px 0;
        }

        .firstsection>div {
            width: 30%;
        }

        .leftsection {

            /* width: 50%; */
            font-size: 3rem;
            margin: 70px 0;

        }

        .leftsection .buttons {
            padding: 50px 0;
        }

        .leftsection .btn {
            padding: 12px;
            color: white;
            border: 2px groove white;
            border-radius: 6px;
            background-color: rgb(84, 9, 84);
            cursor: pointer;
            font-size: 20px;

        }

        .rightsection img {
            border-radius: 50px;
            width: 100%;
            height: auto;

        }

        .purple {
            color: red;

        }

        #element {
            color: red;

        }

        .secondsection {
            margin: auto;
            max-width: 80vw;
            height: 80vh;


        }

        .secondsection h1 {
            font-size: 1.9rem;
        }

        .text-gray {
            color: gray;
        }

        .secondsection .box {
            background-color: antiquewhite;
            width: 77vw;
            height: 2px;
            margin: 56px 0;
            display: flex;
        }

        .secondsection .vertical {
            height: 93px;
            width: 1px;
            background-color: white;
            margin: 0 120px;
        }

        .image-top {
            width: 30px;
            position: relative;
            top: -32px;
            left: -9px;


        }

        .vertical-title {
            position: relative;
            top: 75px;
            width: 150px;
            font-size: 14px;
        }

        .vertical-desc {
            position: relative;
            top: 86px;
            color: gray;
            width: 150px;
            font-size: 9px;
        }

        footer {
            background-color: rgb(0, 0, 23);
        }

        .footer {
            display: flex;
            padding: 23px 122px;
            justify-content: space-evenly;
            text-decoration: none;
        }

        .footer ul {
            list-style: none;
        }

        .footer>div {
            width: 223px;
        }

        footer .footer-rights {
            text-align: center;
            color: gray;
            padding: 12px 0;
        }
    </style>
</head>

<body>
    <header>

        <?php include 'navbar.php'; ?>

    </header>
    <main>
        <section class="firstsection">
            <div class="leftsection">
                Hi, my name is <span class="purple">Janak Bhusal</span>.
                <div>I'm a passionate and aspiring </div>
                <span id="element"></span>
                <div class="buttons">
                    <a href="janakresume.pdf" download class="btn">📄 Download Resume</a>
                    <button class="btn">Visit GitHub</button>
                </div>
            </div>
            <div class="rightsection">
                <img src="janak.jpg" alt="">
            </div>
        </section>
        <hr>
        <section class="secondsection">
            <span class="text-gray">What I have done so far</span>

            <h1>Work Experience</h1>
            <div class="box">
                <div class="vertical">
                    <img class="image-top" src="developer.png" alt="">
                    <div class="vertical-title">
                        HTML developer(2010-2012)
                    </div>
                    <div class="vertical-desc">
                        An HTML Developer specializes in creating and structuring the content of web pages using HTML
                        (Hypertext Markup Language). They are skilled in laying out web pages and integrating them with
                        other technologies to build functional
                    </div>
                </div>

                <div class="vertical">
                    <img class="image-top" src="instagram.png" alt="failed">
                    <div class="vertical-title">
                        HTML developer-instagram(2012 -2014)
                    </div>
                    <div class="vertical-desc">
                        An HTML Developer specializes in creating and structuring the content of web pages using HTML
                        (Hypertext Markup Language). They are skilled in laying out web pages and integrating them with
                        other technologies to build functional
                    </div>
                </div>

                <div class="vertical">
                    <img class="image-top" src="facebook.png" alt="failed">
                    <div class="vertical-title">
                        Software developer- facebook(2015 -2016)
                    </div>
                    <div class="vertical-desc">
                        An HTML Developer specializes in creating and structuring the content of web pages using HTML
                        (Hypertext Markup Language). They are skilled in laying out web pages and integrating them with
                        other technologies to build functional
                    </div>
                </div>
                <div class="vertical">
                    <img class="image-top" src="youtube.png" alt="">
                    <div class="vertical-title">
                        HTML developer-youtube(2010-2012)
                    </div>
                    <div class="vertical-desc">
                        An HTML Developer specializes in creating and structuring the content of web pages using HTML
                        (Hypertext Markup Language). They are skilled in laying out web pages and integrating them with
                        other technologies to build functionals
                    </div>
                </div>
                <div class="vertical">
                    <img class="image-top" src="twitter.png" alt="">
                    <div class="vertical-title">
                        HTML developer-twitter(2010-2012)
                    </div>
                    <div class="vertical-desc">
                        An HTML Developer specializes in creating and structuring the content of web pages using HTML
                        (Hypertext Markup Language). They are skilled in laying out web pages and integrating them with
                        other technologies to build functional
                    </div>
                </div>

                <div class="vertical">

                </div>
                <div class="vertical"></div>
                <div class="vertical"></div>
            </div>
        </section>
    </main>
    <footer>
        <div class="footer">

            <div class="footer-first">
                Janak's portfolio
            </div>
            <div class="footer-second">
                <ul>
                    <li><a href="#" style="text-decoration: none; color: rgb(93, 200, 200);">Resume</a></li>
                </ul>
            </div>
            <div class="footer-third">
                <ul>
                    <li><a href="#" style="text-decoration: none; color: rgb(93, 200, 200);">About</a></li>
                </ul>
            </div>
            <div class="footer-fourth">
                <ul>
                     <li><a href="#" style="text-decoration: none; color: rgb(93, 200, 200); ">Contact</a></li>
                </ul>
            </div>
        </div>
        <div class="footer-rights">
            © 2025 Janak's Portfolio. All rights reserved.
        </div>
    </footer>

    <script src="https://unpkg.com/typed.js@2.1.0/dist/typed.umd.js"></script>
    <!-- Setup and start animation! -->
    <script>
        var typed = new Typed('#element', {
            strings: ['Student', 'web developer', 'web designer'],
            typeSpeed: 50,
            loop: true,
        });
    </script>

</body>

</html>