index.html

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">

        <link rel="stylesheet" href="styles/style.css" />

        <title>Vanshika Trivedi | Portfolio</title>

        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/7.0.0/normalize.min.css">
        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.11.2/css/all.css" integrity="sha256-46qynGAkLSFpVbEBog43gvNhfrOj+BmwXdxFgVK/Kvc=" crossorigin="anonymous" />  

         <!-- Google font link -->
        <link href="https://fonts.googleapis.com/css?family=Source+Code+Pro:400,900|Source+Sans+Pro:300,900&display=swap" rel="stylesheet">


    </head>
    <body class="default">

        <!-- header -->
        <header>
           <div class="header-container">

            <div class="logo">
                <a href="">
                    <img src="img/logo-without-name.svg" alt="Vanshika"> 
                </a>
            </div>

            <div class="header-right">

                <button class="dark-mode-btn" onclick="toggleTheme()">
                    <img src="img/night.svg" alt="Dark Mode">
                </button>

                <button class="nav-toggle" aria-label="toggle navigation" onclick="toggleNav()">
                    <span class = "hamburger"></span>
                </button>
   
                
            </div>

           </div>
        </header>

        <nav class="nav">
            <ul class="nav__list">
                <li class="nav__item"><a href="/" class="nav__link">Home</a></li>
                <li onclick="toggleNav()" class="nav__item"><a href="#skills" class="nav__link">My Skills</a></li>
                <li onclick="toggleNav()" class="nav__item"><a href="#about" class="nav__link">About me</a></li>
                <li onclick="toggleNav()" class="nav__item"><a href="#work" class="nav__link">My Works</a></li>
                <li onclick="toggleNav()" class="nav__item"><a href="https://drive.google.com/file/d/1Js8dSWFWsika7EEyADbLXXQD0T1qdXwy/view?usp=sharing" class="nav__link">Resume</a></li>
            </ul>
        </nav>
        

        <!-- Introduction -->
        <section class="intro" id="home">

            <h1 class ="section__title section__title--intro">
               <span> Hi, I am </span>
                <strong>Vanshika Trivedi</strong>
            </h1>


            <div class="section__subtitle section__subtitle--intro">
                <p> </p>
            </div>

            <img src="img/smiling.jpg" class="intro__img">

        </section>

        <!-- Skills -->
        
        <section class="my-skills" id="skills">
            
            <h2 class="section__title section__title--skills"><center> What I do</center></h2>
            <div class="skills">

                <div class="skill">
                    <h3>Coding + Front-end Development</h3>
                    <p>
                        I am a Front-End Developer keenly interested in all feilds of Coding and Development, be it Android or Web-Development. I can code in languages like C, C++, Java and Python too and have worked on several IDEs too. I am a curious and quick learner trying my hands on all sorts of technology, and yet to explore plethora in this feild.
                    </p>
                </div> <!-- / skill -->
                
                <div class="skill">
                    <h3>Managerial and Leadership Skills</h3>
                    <p>
                        I stand here with a dynamic history of managing a number of events and leading a plethora of teams, committees or events as you can say. I like standing on the stage and hosting an event or something. I enjoy doing these stuff.
                    </p>
                </div> <!-- / skill -->
                
                <div class="skill">
                    <h3>Content Writing + Graphic Designing + Fashion Enthusiast</h3>
                    <p>
                        I have served as the Graphic Designer and Content Writer for many pretigious and well known organisations. I have quite an interest in Fashion too. I have contributed in the college maganizine and made certificates & posters, for various college events, since the first year. 
                    </p>
                </div> <!-- / skill -->
            </div> <!-- / skills -->
            
            <a href="#work" class="btn"> My Work </a>
        
        </section>

        <!-- About me -->
        <section class="about-me" id="about">
            <h2 class="section__title section__title--about">Who I am</h2>
            <p class="section__subtitle section__subtitle--about">Designer, Developer and Everything Nice</p>
            
            <div class="about-me__body">
                <p>

                   <b> If you’ve found your way to this page, you’re probably trying to get to know more about me. First things first, NO "TECH-BUG" HERE.</b>

                </p>

                <p>

                    <i>Hi, my name is Vanshika. I am a rising junior at the Cummins College of Engineering for Women, Nagpur. I am a tech enthusiast; broadly interested in learning different programming languages and front-end development. I am fairly proficient at languages like C, C++, Java, Python (beginner level you can say) and Data Structures. I am hooked to learning devops. I will characterize myself as an extrovert. I love conversations about technology, philosophy and any random topic you might want to talk on. Judge me all you want, it hardly matters to me as long as I am happy with myself. Side Note, I put the pro in procrastination.</i>

                </p>

                <p>

                    <i>Apart from the academics and my technical skills, I am a great fashion enthusiast too. In terms of sports, Dahi-Handi is my favourite (might have never heard of the term but it's okay, it is an Indian Traditional Sport played enacting the merriment and playful character of our deity Lord Krishna. I myself developed the interest after moving to Maharashtra). You might even find me participating in debates and extempores, as they do attract me. I am a great foodie and love cooking myself, but don't confuse me by a connoisseur. Not to brag about myself, in the 2 years of my college life I have gathered a lot of experience, working and leading almost all the committees, be it hosting an event or managing an event or preparing press notes of the event. I have done all maintaing a 75% above average in my academics too. I can draw a balance between all my responsibilities, no matter how varied they might be.</i>

                </p>
            </div>
            
            <img src="img/dp.jpg" class="about-me__img">
         </section>


         <!-- My Work -->
        <section class="my-work" id="work">
            <h2 class= "section__title section__title--work">My work</h2>
            <p class="section__subtitle section__subtitle--work">A selection of my range of work</p>
            
            <div class="portfolio">
                <!-- Portfolio item 01 -->
                <a href="#" class="portfolio__item">
                    <img src="img/my-works/graduation.svg" alt="" class="portfolio__img">
                </a>
                
                <!-- Portfolio item 02 -->
                <a href="#" class="portfolio__item">
                    <img src="img/my-works/web-development.svg" alt="" class="portfolio__img">
                </a>
                
                <!-- Portfolio item 03 -->
                <a href="#" class="portfolio__item">
                    <img src="img/my-works/android.svg" alt="" class="portfolio__img">
                </a>
                
                <!-- Portfolio item 04 -->
                <a href="#" class="portfolio__item">
                    <img src="img/my-works/extra_curricular_activities-removebg-preview.png" alt="" class="portfolio__img">
                </a>
                
                <!-- Portfolio item 05 -->
                <a href="#" class="portfolio__item">
                    <img src="img/my-works/graphic-design.svg" alt="" class="portfolio__img">
                </a>
                
                <!-- Portfolio item 06 -->
                <a href="#" class="portfolio__item">
                    <img src="img/my-works/meeting.svg" alt="" class="portfolio__img">
                </a>
                
                <!-- Portfolio item 07 -->
                <a href="#" class="portfolio__item">
                    <img src="img/my-works/woman.svg" alt="" class="portfolio__img">
                </a>
                
                <!-- Portfolio item 08 -->
                <a href="#" class="portfolio__item">
                    <img src="img/my-works/internship.svg" alt="" class="portfolio__img">
                </a>
                
                <!-- Portfolio item 09 -->
                <a href="#" class="portfolio__item">
                    <img src="img/my-works/idea.svg" alt="" class="portfolio__img">
                </a>
                
                <!-- Portfolio item 0 0-->
                <a href="#" class="portfolio__item">
                    <img src="img/my-works/girl.png" alt="" class="portfolio__img">
                </a>
            </div>
        </section>
        

        <!-- Footer -->
        <footer class="footer">

            <p id="Contact-me">
                Reach me at:
            </p>
           
            <a href="mailto:mailto.vanshikatrivedi@gmail.com" class="footer__link">mailto.vanshikatrivedi@gmail.com</a>

            <div class="go-top">
            
                <a title="Back to Top" href="#home">
                    <i class="fas fa-2x fa-chevron-circle-up"></i>
                </a>
                
            </div>

            <ul class="social-list">

                <li class="social-list__item">
                    <a class="social-list__link" href="https://github.com/vanshikatrivedi" target="_blank">
                        <i class="fab fa-github"></i>
                    </a>
                </li>

                <li class="social-list__item">
                    <a class="social-list__link" href="https://www.linkedin.com/in/vanshikatrivedi/" target="_blank">
                        <i class="fab fa-linkedin"></i>
                    </a>
                </li>

                <li class="social-list__item">
                    <a class="social-list__link" href="https://twitter.com/ItsMeVanshikaaa"target="_blank">
                        <i class="fab fa-twitter-square"></i>
                    </a>
                </li>

                <li class="social-list__item">
                    <a class="social-list__link" href="https://www.facebook.com/VanshikaTrivediii"target="_blank">
                            <i class="fab fa-facebook-square"></i>
                    </a>
                </li>

                <li class="social-list__item">
                    <a class="social-list__link" href="https://www.instagram.com/vanshikatrivediii/"target="_blank">
                        <i class="fab fa-instagram"></i>
                    </a>
                </li>


            </ul>

            <div class="copyright">
                <p>
                    Made by Vanshika Trivedi ©
                    <!-- -->
                    2020
                </p>
            </div>
        </footer>

        
    <script src="https://cdnjs.cloudflare.com/ajax/libs/typed.js/2.0.11/typed.min.js" integrity="sha512-BdHyGtczsUoFcEma+MfXc71KJLv/cd+sUsUaYYf2mXpfG/PtBjNXsPo78+rxWjscxUYN2Qr2+DbeGGiJx81ifg==" crossorigin="anonymous"></script>

    <script src="scripts/script.js"></script>
    
    </body>


</html>