index.html

<!DOCTYPE HTML>
<html>

   <head>
      <meta charset="utf-8">
      <meta http-equiv="X-UA-Compatible" content="IE=edge">
      <title>GPBHUPINDER</title>
      <meta name="viewport" content="width=device-width, initial-scale=1">
      <meta name="description" content="Portfolio webpage of GPBHUPINDER" />
      <meta name="keywords"
          content="portfolio,website,personal website,github,projects" />
      <meta name="author" content="GPBHUPINDER" />
      <!--Social Media icons-->
      <link rel="stylesheet"
          href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
      <!-- Place favicon.ico and apple-touch-icon.png in the root directory -->
      <link rel="icon" type="image/png" href="/images/logo.png">
      <link
          href="https://fonts.googleapis.com/css?family=Quicksand:300,400,500,700"
          rel="stylesheet">
      <link
          href="https://fonts.googleapis.com/css?family=Playfair+Display:400,400i,700"
          rel="stylesheet">
      <link
          href="https://fonts.googleapis.com/css?family=Montserrat|Open+Sans|Raleway&display=swap"
          rel="stylesheet">
      <!-- Animate.css -->
      <link rel="stylesheet" href="css/animate.css">
      <!-- Bootstrap  -->
      <link rel="stylesheet" href="css/bootstrap.css">
      <!-- Theme style  -->
      <link rel="stylesheet" href="css/style.css">
      <!-- Modernizr JS -->
      <script src="js/modernizr-2.6.2.min.js"></script>
      <script type="module" src="customjs/projects.js"></script>
      <script type="module" src="customjs/skills.js"></script>
      <script type="module" src="customjs/externalLink.js"></script>
   </head>

   <body>
      <div id="colorlib-page">
         <div class="container-wrap">
            <a href="#" class="js-colorlib-nav-toggle colorlib-nav-toggle"
                data-toggle="collapse" data-target="#navbar"
                aria-expanded="false" aria-controls="navbar"><i></i></a>
            <!----Side bar--->
            <aside id="colorlib-aside" role="complementary"
                class="border js-fullheight">
               <div class="text-center">
                  <div class="author-img"
                      style="background-image: url(images/gpbhupinder.jpg);">
                  </div>
                  <h1 id="colorlib-logo"><a href="./index.html">GPBHUPINDER</a>
                  </h1>
               </div>
               <nav id="colorlib-main-menu" role="navigation" class="navbar"
                   style="padding-top: 2em">
                  <div id="navbar" class="collapse">
                     <ul>
                        <li><a href="#" data-nav-section="about">About</a></li>
                        <li><a href="#" data-nav-section="skills">Skills</a>
                        </li>
                        <li><a href="#" data-nav-section="projects">Projects</a>
                        </li>
                        <li><a href="#" data-nav-section="experience">Work
                              Experience</a></li>
                        <li><a href="#"
                               data-nav-section="education">Education</a></li>
                        <li><a href="#" data-nav-section="contact">Contact</a>
                        </li>
                     </ul>
                  </div>
               </nav>
            </aside>
            <!----- main page--------->
            <div id="colorlib-main">


               <!---------------About me---------------------->
               <section class="colorlib-about" data-section="about">
                  <div class="colorlib-narrow-content">
                     <div class="row animate-box"
                         data-animate-effect="fadeInLeft">
                        <div class="about-desc">
                           <h1>About</h1>
                           <p>AI, Generative AI, Web Developer, Electronics Engineer, Space Nerd 🚀
                           </p>
                           <p>I'm a <b>developer</b>, geek and curious human
                              besides being an OpenSource enthusiast. I have
                              experience of delivering solutions for interesting
                              problems from startup and industry space.</p>
                           <p class="finalText">I love to read, listen to music,
                              and travel.</p>
                        </div>
                     </div>
                  </div>
               </section>
               <!---------------Skills---------------->
               <section class="colorlib-skills" data-section="skills">
                  <div class="colorlib-narrow-content">
                     <div class="row row-bottom-padded-sm animate-box"
                         data-animate-effect="fadeInLeft">
                        <div class="about-desc">
                           <h1>Skills</h1>
                        </div>
                     </div>
                     <div id="skills" class="row">
                     </div>
                  </div>
               </section>
               <!--------------Projects---------------->
               <section class="colorlib-skills" data-section="projects">
                  <div class="colorlib-narrow-content">
                     <div class="row animate-box fadeInLeft animated"
                         data-animate-effect="fadeInLeft">
                        <div class="about-desc">
                           <h1>Projects</h1>
                        </div>
                     </div>
                     <ul id="accordion" class="accordion animate-box"
                         data-animate-effect="fadeInRight">
                        <li>
                           <div class="link">
                              <p style="margin-bottom: 0px">Web Projects</p>
                              <i class="fa fa-chevron-down"></i>
                           </div>
                           <ul id="web-projects" class="submenu">
                           </ul>
                        </li>
                        <li>
                           <div class="link">
                              <p style="margin-bottom: 0px">Software Projects
                              </p>
                              <i class="fa fa-chevron-down"></i>
                           </div>
                           <ul id="software-projects" class="submenu">
                           </ul>
                        </li>
                        <li>
                           <div class="link">
                              <p style="margin-bottom: 0px">Android Projects
                              </p>
                              <i class="fa fa-chevron-down"></i>
                           </div>
                           <ul id="android-projects" class="submenu">
                           </ul>
                        </li>
                        <li>
                           <div class="link">
                              <p style="margin-bottom: 0px">Freelance Projects
                              </p>
                              <i class="fa fa-chevron-down"></i>
                           </div>
                           <ul id="freelance-projects" class="submenu">
                           </ul>
                        </li>
                     </ul>
                  </div>
               </section>
               <!---------------Work Experience----------->
               <section class="colorlib-experience" data-section="experience">
                  <div class="colorlib-narrow-content">
                     <div class="row row-bottom-padded-sm animate-box fadeInLeft animated"
                         data-animate-effect="fadeInLeft">
                        <div class="about-desc">
                           <h1>Work <span
                                  style="color: #f9bf3f">Experience</span>
                           </h1>
                        </div>
                     </div>
                     <div class="timeline-centered">
                        <article class="timeline-entry animate-box"
                            data-animate-effect="fadeInLeft">
                           <div class="timeline-entry-inner">
                              <div class="timeline-icon color-1">
                                 <i class="fa fa-code"></i>
                              </div>
                              <div class="timeline-label">
                                 <h2><a href="#">Novopay Solutions Pvt.
                                       Ltd.</a>
                                    <span>June 2020 - Present</span>
                                 </h2>
                                 <p class="finalText"><strong>Software
                                       Engineer, SDE
                                       Intern</strong><br>Supporting
                                    client end team for AEPS, DMT, CMS
                                    transactions & working on the
                                    solutions for eKYC, onboarding
                                    retailers.</p>
                              </div>
                           </div>
                        </article>
                        <article class="timeline-entry animate-box"
                            data-animate-effect="fadeInLeft">
                           <div class="timeline-entry-inner">
                              <div class="timeline-icon color-1">
                                 <i class="fa fa-code"></i>
                              </div>
                              <div class="timeline-label">
                                 <h2><a href="#">ThinkPedia LLP</a>
                                    <span>May 2019 - June 2019</span>
                                 </h2>
                                 <p class="finalText"><strong>SDE
                                       Intern</strong><br>Developed
                                    Customer Web Application for social
                                    media management from scratch.</p>
                              </div>
                           </div>
                        </article>
                        <article class="timeline-entry begin animate-box"
                            data-animate-effect="fadeInBottom">
                           <div class="timeline-entry-inner">
                              <div class="timeline-icon color-2">
                              </div>
                           </div>
                        </article>
                     </div>
                  </div>
               </section>
               <!---------------Education----------->
               <section class="colorlib-education" data-section="education">
                  <div class="colorlib-narrow-content">
                     <div class="row row-bottom-padded-sm animate-box fadeInLeft animated"
                         data-animate-effect="fadeInLeft">
                        <div class="about-desc">
                           <h1>Education</h1>
                        </div>
                     </div>
                     <div class="row">
                        <div class="col-md-12">
                           <div class="timeline-centered">
                              <article class="timeline-entry animate-box"
                                  data-animate-effect="fadeInLeft">
                                 <div class="timeline-entry-inner">
                                    <div class="timeline-icon color-1">
                                       <i class="fa fa-code"></i>
                                    </div>
                                    <div class="timeline-label">
                                       <h2>Bachelors in Electronics and Communication
                                          Engineering</h2>
                                       <p class="finalText"><strong>Punjab Technical University</strong><br>Courses
                                          undertaken Data Structures &
                                          Algorithms,
                                          Operating Systems,
                                          Database Management System,
                                          Networks.<br>Qualified GATE-2020.</p>
                                    </div>
                                 </div>
                              </article>
                              <article class="timeline-entry begin animate-box"
                                  data-animate-effect="fadeInBottom">
                                 <div class="timeline-entry-inner">
                                    <div class="timeline-icon color-2">
                                    </div>
                                 </div>
                              </article>
                           </div>
                        </div>
                     </div>
                  </div>
               </section>
               <!---------------Contact---------->
               <section class="colorlib-contact" data-section="contact">
                  <div class="colorlib-narrow-content">
                     <div class="row row-bottom-padded-sm animate-box"
                         data-animate-effect="fadeInLeft">
                        <div class="about-desc">
                           <h1>Contact</h1>
                        </div>
                        <p>If you would like to get in touch with me, be it for
                           exploring a technology, a business, or to just say
                           hi, feel free to send me an email. My email address
                           is: <strong><a
                                  href="mailto: gpbhupinder@gmail.com">gpbhupinder@gmail.com</a></strong>
                        </p>
                     </div>
                     <div id="externalLinks" class="row-image">
                     </div>
                  </div>
               </section>
               <!---------------Footer------------->
               <section class="colorlib-footer" data-section="footer"
                   style="padding-bottom: 3em">
                  <div class="colorlib-narrow-content">
                     <div class="row animate-box"
                         data-animate-effect="fadeInLeft">
                        <div class="hire text-center">
                           <p><strong>If you
                                 like my work and efforts, please consider
                                 buying me a coffee. Thank you for your
                                 support!</strong></p>
                           <div>
                              <a class="bmc-button" target="_blank"
                                  href="https://www.buymeacoffee.com"><img
                                     src="images/BMC-btn-logo.svg"><span
                                     class="ml-2">Buy me a
                                    coffee</span></a>
                           </div>
                        </div>
                     </div>
                  </div>
               </section>
               
            </div>
         </div>
      </div>
      <!-- jQuery -->
      <script src="js/jquery.min.js"></script>
      <!-- jQuery Easing -->
      <script src="js/jquery.easing.1.3.js"></script>
      <!-- Bootstrap -->
      <script src="js/bootstrap.min.js"></script>
      <!-- Waypoints -->
      <script src="js/jquery.waypoints.min.js"></script>
      <!-- Flexslider -->
      <script src="js/jquery.flexslider-min.js"></script>
      <!-- Counters -->
      <script src="js/jquery.countTo.js"></script>
      <!-- MAIN JS -->
      <script src="js/main.js"></script>
   </body>

</html>