index.php

<?php
include("header.php")
?>

<main class="w-full h-[90vh]  bg-transparent relative" id="particles-js">
  <div class="xl:w-1/2 w-full absolute xl:mx-48 sm:mx-8 mx-4 top-1/3 z-[-1]">
    <div class="code mb-2">
      <h4 id="intro" class="text-gray-900 publicsans font-extrabold md:text-2xl text-xl tracking-widest">Hello! I am Vikrant Kumar..</h4>
    </div>
    <h1 class="texture font-[Poppins] capitalize xl:text-6xl text-4xl font-extrabold tracking-wider ">Discover
      my
      coding
      space</h1>
    <p class="text-base text-gray-900 font-[Nunito] font-medium md:py-6 py-4">
      Take a tour of all my coding works and explore some of the handful of projects, I have made in my web development and programming journey. On this website you will find information about my projects, their purpose and design principles as well as source code.</p>
    <!--<a id="clickme" class="text-white cursor-pointer bg-gray-900 text-lg tracking-wider font-semibold mt-3 bg- py-2 px-6 shadow-lg rounded">Explore</a>-->
  </div>
</main>


<section class="bg-[#eaeef4] lg:py-28 py-20">
  <div class="polygon flex justify-between items-center md:flex-row flex-col-reverse xl:mx-48 md:px-10 sm:px-8 px-4 py-14 shadow-lg rounded
   gap-20 md:gap-8">
    <div class="w-full">
      <div class="w-max border-[#0038FF] border-l-8 pl-4">
        <h3 class=" md:text-4xl text-3xl font-black publicsans text-gray-800">About <span class="text-[#0038FF] font-extrabold">Me..</span></h3>
      </div>

      <p class="text-gray-900 font-[Nunito] text-base font-medium mt-4">Hi, my name is Vikrant Kumar and I am a web developer, programmer and a student of computer science with a passion for creating beautiful and functional web apps mainly focused on front end technologies.</p>

      <p class="text-gray-900 font-[Nunito] text-base font-medium mt-4">My interest in programming started back in the august of 2021 just after completing my graduation in arts. Yes, I don't had the computer science nor any tech background back then. Currently I spend most of the time learning core computer science subjects like datastructure & algorithms while developing web projects using JavaScript, Reactjs, Tailwind css, PHP and MySQL.</p>

      <button class="bg-gray-900 text-white shadow hover:shadow-xl tracking-wider font-[Nunito] font-semibold px-3 py-2 mt-6 rounded">Download
        Resume</button>
    </div>


    <div class="flex justify-between items-center  shadow-xl shadow-gray-400 relative">
      <div class="w-[18rem] h-[18rem] aboutme bg-[#0038FF] rounded absolute bottom-4 right-4">
      </div>
      <div class=" relative rounded bg-[url('images/background1.jpg')] bg-cover bg-center w-max">
        <div class="w-[18rem] h-[18rem] rounded shadow-2xl bg-[url('images/profile_pic.png')] bg-cover bg-top">
        </div>
      </div>

      <!--<div class="w-full -translate-x-6">
        <img src="images/developerClass.png" class="w-[30rem] rounded" />
      </div>-->
    </div>

  </div>
</section>

<section class=" xl:px-48 sm:px-8 px-4 lg:mt-32 mt-16">
  <div class="w-full border-[#0038FF] border-l-8 pl-4">
    <h3 class="publicsans md:text-4xl text-3xl font-extrabold text-gray-900  capitalize">Educational And <span class="text-[#0038FF] font-black">Work
        Experiences</span></h3>
  </div>
  <p class="text-gray-900 font-[Nunito] text-base font-normal mt-4">I am self taught programmerand a developerwho had spent the graduation in theater plays, acting and drama which completely different from what I am doing today. Since then things got changed and I changed my mind to programming and development as a career.</p>

  <div class="grid sm:grid-cols-2 grid-cols-1 gap-4 mt-6">
    <div class="polygon rounded p-6 shadow-lg">
      <span class="flex justify-start items-center gap-3">
        <img src="images/masterbazar.png" class="w-10">
        <h4 class="capitalize text-lg publicsans font-extrabold text-gray-900">Master Bazar Pvt Ltd.</h4>
      </span>

      <p class="text-sm font-[Nunito] text-gray-900 font-medium mt-2">Master Bazaar is an early stage startup who provides digital marketing and web development services to their clients. I joined it as a web developer intern and completed my internship after 6 month. while doing my internship there I was developing their clients wordpress website, E-commerce website, web designin and hosting them as well. I was more of in the role of front end Developer where I was working with technologies like HTML, CSS, JavaScript, Tailwind CSS, PHP, MySQL, wordpress, woocommerce and Figma.</p>
    </div>

    <div class="grid grid-cols-1 gap-y-4">
      <div class="polygon rounded p-6 shadow-lg">

        <span class="flex justify-start items-center gap-3">
          <img src="images/cu.png" class="w-6">
          <h4 class="capitalize text-lg publicsans font-extrabold text-gray-900">masters of computer application</h4>
        </span>

        <p class="text-sm font-[Nunito] text-gray-900 font-medium mt-2">Currently in the 1st year of my post
          graduation,
          pursuing it in
          distance mode
          from
          chandigarh
          university.</p>
      </div>

      <div class="polygon rounded p-6 shadow-lg">


        <h4 class="capitalize text-lg publicsans font-extrabold text-gray-900">Bachelor of arts in journalism &
          mass
          communication</h4>
        <p class="text-sm font-[Nunito] text-gray-900 font-medium mt-2">Completed my under graduation from D.A.V
          centenary
          college in the regular mode.</p>
      </div>
    </div>
  </div>
</section>


<!--Skills secctions starts from here-->
<section class="bg-[#003140] xl:px-48 sm:px-8 px-4 gap-6 flex justify-between items-start lg:mt-32 mt-20 rounded relative z-[-1]">
  <div class="sm:w-1/2 py-20">

    <div class="w-max border-[#0038FF] border-l-8 pl-4 ">
      <h3 class="md:text-4xl text-3xl font-extrabold text-white publicsans">Skills</h3>
    </div>
    <!--<p class="font-[Nunito] text-base text-gray-300 font-medium mt-4">Lorem ipsum dolor sit amet consectetur. Modi
      esse laborum unde architecto atque, ducimus sunt, animi temporibus tempore quis
      fuga.</p>-->
    <p class="text-gray-300 font-normal font-[Nunito] text-sm mt-4"><strong class="text-base font-extrabold">Web Development :
      </strong>HTML, CSS, Tailwind CSS, JavaScript, Reactjs, PHP & MySQL</p>
    <p class="text-gray-300 font-normal font-[Nunito] text-sm mt-2"><strong class="text-base font-extrabold">Tools & Technologies :
      </strong>Wordpress, Woocommerce, Figma, Git & Github</p>
    <p class="text-gray-300 font-normal font-[Nunito] text-sm mt-2"><strong class="text-base font-extrabold">Core
        Computer Science Subjects :
      </strong>C++, Datastructure & Algorithms, DBMS, Operating Sytem, Computer Networks </p>

    <div class="flex justify-center items-center gap-6 pt-8">
      <div class=" bg-transparent shadow-2xl rounded p-4 w-20">
        <img src="images/nodejs.png" class="">
      </div>

      <div class="bg-transparent shadow-2xl rounded p-4 w-20">
        <img src="images/javascript.png" class="">
      </div>

      <div class="bg-transparent shadow-2xl rounded p-4 w-20">
        <img src="images/reactjs.png" class="">
      </div>

      <div class="bg-transparent shadow-2xl rounded p-4 w-20">
        <img src="images/mysql.png" class="">
      </div>
    </div>

    <div class="flex justify-center items-center gap-2 mt-6">
      <div class="w-3 h-3 rounded-full bg-white opacity-10"></div>
      <div class="w-3 h-3 rounded-full bg-white opacity-25"></div>
      <div class="w-3 h-3 rounded-full bg-white opacity-10"></div>
      <div class="w-3 h-3 rounded-full bg-white opacity-10"></div>
    </div>
  </div>

  <div class="w-1/2 relative sm:block hidden">
    <div class="absolute top-0" style="width:100%;height:0;padding-bottom:75%;position:relative;"><iframe src="https://giphy.com/embed/qgQUggAC3Pfv687qPC" width="100%" height="100%" style="position:absolute" frameBorder="0" class="giphy-embed" allowFullScreen></iframe></div>

    <!--<div style="width:50%;padding-bottom: 50%;position:relative;"><iframe
          src="https://giphy.com/embed/ejfEZhz0nh2kR0SZzn" width="100%" height="100%" style="position:absolute"
          frameBorder="0" class="giphy-embed" allowFullScreen></iframe></div>-->
  </div>
</section>
<!--skills section ends here-->


<?php
include("projects.php");
include("blogs.php");
include("hireme.php");
include("footer.php");
?>