index.html

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

<head>
    <link rel="stylesheet" href="src/style.css" />
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,200;0,400;1,600&display=swap"
        rel="stylesheet">
    <title>Portfolio</title>
    <meta charset="UTF-8">
</head>

<body>
    <script src="index.js"></script>
    <section class="main">
        <nav id="navbar">
            <img class="logo" src="src/img/ash.png" alt="LOGO" height="150" />
            <svg class="hambur" onclick="showMenu()" xmlns="http://www.w3.org/2000/svg" width="50" height="50"
                fill="white" viewBox="0 0 24 24">
                <path d="M24 6h-24v-4h24v4zm0 4h-24v4h24v-4zm0 8h-24v4h24v-4z" />
            </svg>
            <ul class="bignav">
                <li><a href="#about-me">About me</a></li>
                <li><a href="#interests">Interests</a></li>
                <li><a href="#contact">Contact</a></li>
            </ul>
            <div class="menu" id="menu">
                <ul>
                    <li><a href="#about-me">About me</a></li>
                    <li><a href="#interests">Interests</a></li>
                    <li><a href="#contact">Contact</a></li>
                </ul>
            </div>
        </nav>
        <div class="container">
            <div class="main-text">
                <h1>Ashish Kumar Gopalika</h1>
                <p class="bio">Final Year Undergrad</p>
                <div class="buttons"><a href="#about-me">About Me</a></div>
            </div>
            <div class="socials">
                <div><a href="https://www.twitter.com/AshishGopalika" target="_blank" class="social"><svg
                            xmlns="http://www.w3.org/2000/svg" fill="#ffffff" width="40" height="40"
                            viewBox="0 0 24 24">
                            <path
                                d="M24 4.557c-.883.392-1.832.656-2.828.775 1.017-.609 1.798-1.574 2.165-2.724-.951.564-2.005.974-3.127 1.195-.897-.957-2.178-1.555-3.594-1.555-3.179 0-5.515 2.966-4.797 6.045-4.091-.205-7.719-2.165-10.148-5.144-1.29 2.213-.669 5.108 1.523 6.574-.806-.026-1.566-.247-2.229-.616-.054 2.281 1.581 4.415 3.949 4.89-.693.188-1.452.232-2.224.084.626 1.956 2.444 3.379 4.6 3.419-2.07 1.623-4.678 2.348-7.29 2.04 2.179 1.397 4.768 2.212 7.548 2.212 9.142 0 14.307-7.721 13.995-14.646.962-.695 1.797-1.562 2.457-2.549z" />
                        </svg></a></div>
                <div><a href="https://www.instagram.com/ashish_gopalika" target="_blank" class="social"><svg
                            xmlns="http://www.w3.org/2000/svg" fill="#ffffff" width="40" height="40"
                            viewBox="0 0 24 24">
                            <path
                                d="M12 2c5.514 0 10 4.486 10 10s-4.486 10-10 10-10-4.486-10-10 4.486-10 10-10zm0-2c-6.627 0-12 5.373-12 12s5.373 12 12 12 12-5.373 12-12-5.373-12-12-12zm0 7.082c1.602 0 1.792.006 2.425.035 1.627.074 2.385.845 2.46 2.459.028.633.034.822.034 2.424s-.006 1.792-.034 2.424c-.075 1.613-.832 2.386-2.46 2.46-.633.028-.822.035-2.425.035-1.602 0-1.792-.006-2.424-.035-1.63-.075-2.385-.849-2.46-2.46-.028-.632-.035-.822-.035-2.424s.007-1.792.035-2.424c.074-1.615.832-2.386 2.46-2.46.632-.029.822-.034 2.424-.034zm0-1.082c-1.63 0-1.833.007-2.474.037-2.18.1-3.39 1.309-3.49 3.489-.029.641-.036.845-.036 2.474 0 1.63.007 1.834.036 2.474.1 2.179 1.31 3.39 3.49 3.49.641.029.844.036 2.474.036 1.63 0 1.834-.007 2.475-.036 2.176-.1 3.391-1.309 3.489-3.49.029-.64.036-.844.036-2.474 0-1.629-.007-1.833-.036-2.474-.098-2.177-1.309-3.39-3.489-3.489-.641-.03-.845-.037-2.475-.037zm0 2.919c-1.701 0-3.081 1.379-3.081 3.081s1.38 3.081 3.081 3.081 3.081-1.379 3.081-3.081c0-1.701-1.38-3.081-3.081-3.081zm0 5.081c-1.105 0-2-.895-2-2 0-1.104.895-2 2-2 1.104 0 2.001.895 2.001 2s-.897 2-2.001 2zm3.202-5.922c-.397 0-.72.322-.72.72 0 .397.322.72.72.72.398 0 .721-.322.721-.72 0-.398-.322-.72-.721-.72z" />
                        </svg></a></div>
                <div><a href="https://www.github.com/ashish-gopalika" target="_blank" class="social"><svg
                            xmlns="http://www.w3.org/2000/svg" fill="#ffffff" width="40" height="40"
                            viewBox="0 0 24 24">
                            <path
                                d="M19 0h-14c-2.761 0-5 2.239-5 5v14c0 2.761 2.239 5 5 5h14c2.762 0 5-2.239 5-5v-14c0-2.761-2.238-5-5-5zm-4.466 19.59c-.405.078-.534-.171-.534-.384v-2.195c0-.747-.262-1.233-.55-1.481 1.782-.198 3.654-.875 3.654-3.947 0-.874-.312-1.588-.823-2.147.082-.202.356-1.016-.079-2.117 0 0-.671-.215-2.198.82-.64-.18-1.324-.267-2.004-.271-.68.003-1.364.091-2.003.269-1.528-1.035-2.2-.82-2.2-.82-.434 1.102-.16 1.915-.077 2.118-.512.56-.824 1.273-.824 2.147 0 3.064 1.867 3.751 3.645 3.954-.229.2-.436.552-.508 1.07-.457.204-1.614.557-2.328-.666 0 0-.423-.768-1.227-.825 0 0-.78-.01-.055.487 0 0 .525.246.889 1.17 0 0 .463 1.428 2.688.944v1.489c0 .211-.129.459-.528.385-3.18-1.057-5.472-4.056-5.472-7.59 0-4.419 3.582-8 8-8s8 3.581 8 8c0 3.533-2.289 6.531-5.466 7.59z" />
                        </svg></a></div>
                <div><a href="https://www.linkedin.com/in/ashish-gopalika/" target="_blank" class="social"><svg
                            xmlns="http://www.w3.org/2000/svg" fill="#ffffff" width="40" height="40"
                            viewBox="0 0 24 24">
                            <path
                                d="M19 0h-14c-2.761 0-5 2.239-5 5v14c0 2.761 2.239 5 5 5h14c2.762 0 5-2.239 5-5v-14c0-2.761-2.238-5-5-5zm-11 19h-3v-11h3v11zm-1.5-12.268c-.966 0-1.75-.79-1.75-1.764s.784-1.764 1.75-1.764 1.75.79 1.75 1.764-.783 1.764-1.75 1.764zm13.5 12.268h-3v-5.604c0-3.368-4-3.113-4 0v5.604h-3v-11h3v1.765c1.396-2.586 7-2.777 7 2.476v6.759z" />
                        </svg></a></div>
            </div>
        </div>
    </section>
    <section class="sub" id="about-me">
        <div class="info">
            <h2>About Me</h2>
            <p>Hello, I am Ashish Kumar Gopalika, a final year undergrad in information science at Sir M Visvesvaraya Institute of Technology.
                I have experience in frontend web development using HTML, CSS, Javascript, and Next.js framework, backend web development using the Django framework, and cross-platform app development using Flutter.
                I also have industry-level experience, as I worked as an Engineering intern at Tally Solutions.
                I am a team player, who likes to participate in hackathons and loves problem-solving.
            </p>
        </div>
        <div class="extra-info">
            <img class="image" src="src/img/WhatsApp Image 2021-09-01 at 4.07.01 PM.jpeg" alt="me">
        </div>
    </section>
    <section class="sub-section" id="interests">
        <div class="project-main">
            <h2>Interests</h2>
            <div class="project-container">
                <div class="project">
                    <img class="project-image" src="src/img/james-harrison-vpOeXr5wmR4-unsplash.jpg" alt="image1" />
                    <h3>Competetive Coding</h3>
                    <p class="sub-text">Have a look at my profiles
                    </p>
                    <hr>
                    <p class="sub-text"><a class="project-link" href="https://www.codechef.com/users/ashish1016"
                            target="_blank">codechef</a></p>
                    <p class="sub-text"><a class="project-link" href="https://www.hackerrank.com/meashishgopalika"
                            target="_blank">HackerRank</a></p>
                    <p class="sub-text"><a class="project-link" href="https://auth.geeksforgeeks.org/user/ashish_gopalika"
                                target="_blank">GFG</a></p>
                    <p class="sub-text"><a class="project-link" href="https://leetcode.com/ashish_gopalika/"
                                target="_blank">Leetcode</a></p>
                </div>
                <div class="project">
                    <img class="project-image" src="src/img/photo-1498050108023-c5249f4df085.jpg" alt="image2" />
                    <h3>Development</h3>
                    <p class="sub-text">Some of my attempts and projects</p>
                    <hr>
                    <p class="sub-text"><a class="project-link"
                            href="https://github.com/ashish-gopalika/portfolio" target="_blank">Portfolio</a></p>
                    <p class="sub-text"><a class="project-link"
                            href="https://github.com/ashish-gopalika/flipkart-grid" target="_blank">Recommendation System</a></p>
                    <p class="sub-text"><a class="project-link"
                            href="https://github.com/ashish-gopalika/FC62_TheAvengers" target="_blank">Medefind</a></p>
                </div>
                <div class="project">
                    <img class="project-image" src="src/img/photo-1488229297570-58520851e868.jpg" alt="image3" />
                    <h3>Tech-Stack</h3>
                    <p class="sub-text">Languages: c || c++ || html || ~css</p>
                    <hr>
                    <p class="sub-text"><a class="project-link" href="src\pdf\Ashish Kumar Gopalika.pdf"
                            target="_blank">My Resume</a></p>
                </div>
            </div>
        </div>
    </section>
    <footer id="contact">
        <h2>Contact Me</h2>
        <p>meashishgopalika@gmail.com</p>
    </footer>


</body>

</html>