index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <link rel="stylesheet" href="css/styles.css" />
    <title>CV</title>
  </head>
  <body>
    <div class="wrapper">
      <nav>
        <a href="#anchor-about-me">
          <span class="caption">About Me</span>
        </a>
        <a href="#anchor-experiences">
          <span class="caption">Experiences</span>
        </a>
        <a href="#anchor-technical-skills">
          <span class="caption">Technical Skills</span>
        </a>
        <a href="#anchor-projects">
          <span class="caption">Projects</span>
        </a>
        <a href="#anchor-testimonials">
          <span class="caption">Testimonials</span>
        </a>
      </nav>
      <section class="layer" id="sec-1">
        <div class="nskew">
          <div class="pskew">
            <h1>Basith P<br />HTML/CSS coder<br />Game Developer</h1>
            <span>NYC, US</span>
          </div>
        </div>
      </section>
      <a href="" id="anchor-about-me"></a>
      <section class="content" id="about-me">
        <div class="row">
          <div class="title">
            <div class="nskew">
              <h3 class="pskew">
                About Me
              </h3>
            </div>
          </div>
          <div class="excerpt">
            Chicharrones street art selfies stumptown artisan, flannel vegan. Craft beer salvia 3 wolf moon, mixtape
            mustache unicorn scenester put a bird on it. Migas taxidermy messenger bag raw denim bushwick. Swag pop-up
            skateboard asymmetrical.
          </div>
        </div>
        <div class="row">
          <div class="img">
            <img src="img/me.jpg" alt="" />
          </div>
          <div class="col">
            <p>
              Iceland godard lyft YOLO offal, echo park chicharrones. Seitan palo santo polaroid fashion axe pitchfork
              la croix yuccie meh. Fam tilde heirloom, fanny pack viral church-key air plant banjo. Master cleanse photo
              booth austin schlitz, tilde iceland fam four loko mixtape.
            </p>
            <p>
              Crucifix freegan occupy irony succulents DIY tumblr shaman seitan sriracha scenester gastropub tote bag.
              Skateboard williamsburg helvetica irony paleo literally gentrify meggings organic. Selfies tacos
              sustainable hot chicken. Raw denim sustainable slow-carb, art party drinking vinegar normcore authentic
              VHS pok pok la croix celiac edison bulb locavore cliche asymmetrical. Twee godard VHS keffiyeh art party
              lyft.
            </p>
          </div>
        </div>
        <div class="row row-boxes">
          <div class="box-wrapper">
            <div class="box">
              <div class="box-top">Date of Birth</div>
              <div class="box-bottom">02.11.1994</div>
            </div>
            <div class="box">
              <div class="box-top">Place of Birth</div>
              <div class="box-bottom">LA, US</div>
            </div>
            <div class="box">
              <div class="box-top">Education</div>
              <div class="box-bottom">Uni. of Cambridge</div>
            </div>
            <div class="box">
              <div class="box-top">Current city</div>
              <div class="box-bottom">NYC, US</div>
            </div>
            <div class="box">
              <div class="box-top">Hobbies</div>
              <div class="box-bottom">sleep,code</div>
            </div>
            <div class="box">
              <div class="box-top">Email</div>
              <div class="box-bottom">info@mail.com</div>
            </div>
          </div>
        </div>
      </section>
      <section id="sec-2" class="layer"></section>
      <a href="" id="anchor-experiences"></a>
      <section id="experiences" class="content">
        <div class="row">
          <div class="title">
            <div class="nskew">
              <div class="pskew">Experiences</div>
            </div>
          </div>
          <div class="excerpt">
            Deep v live-edge cornhole iPhone poutine synth, affogato wolf woke hexagon. Kale chips gentrify taiyaki man
            braid thundercats kitsch woke ennui palo santo plaid. Cronut man bun church-key iceland literally.
          </div>
        </div>

        <div class="row">
          <ul class="timeline">
            <li class="start-bullet">
              <div class="nskew">Experiences</div>
            </li>
            <li class="xp">
              <div class="bullet"></div>
              <div class="timeline-head">Senior Dev</div>
              <div class="timeline-body">
                Programing in PHP / MySQL / HTML / CSS / Javascript Web Development in Magneto and Wordpress
                Communication with clients
              </div>
            </li>
            <li class="xp">
              <div class="bullet"></div>
              <div class="timeline-head">Senior Dev</div>
              <div class="timeline-body">
                Programing in PHP / MySQL / HTML / CSS / Javascript Web Development in Magneto and Wordpress
                Communication with clients
              </div>
            </li>
            <li class="xp">
              <div class="bullet"></div>
              <div class="timeline-head">Senior Dev</div>
              <div class="timeline-body">
                Programing in PHP / MySQL / HTML / CSS / Javascript Web Development in Magneto and Wordpress
                Communication with clients
              </div>
            </li>
            <li class="xp">
              <div class="bullet"></div>
              <div class="timeline-head">Senior Dev</div>
              <div class="timeline-body">
                Programing in PHP / MySQL / HTML / CSS / Javascript Web Development in Magneto and Wordpress
                Communication with clients
              </div>
            </li>
            <li class="xp">
              <div class="bullet"></div>
              <div class="timeline-head">Senior Dev</div>
              <div class="timeline-body">
                Programing in PHP / MySQL / HTML / CSS / Javascript Web Development in Magneto and Wordpress
                Communication with clients
              </div>
            </li>
            <li class="xp">
              <div class="bullet"></div>
              <div class="timeline-head">Senior Dev</div>
              <div class="timeline-body">
                Programing in PHP / MySQL / HTML / CSS / Javascript Web Development in Magneto and Wordpress
                Communication with clients
              </div>
            </li>
          </ul>
        </div>
      </section>

      <section id="sec-3" class="layer"></section>
      <a href="" id="anchor-technical-skills"></a>
      <section id="skills" class="content">
        <div class="row">
          <div class="title">
            <div class="nskew">
              <div class="pskew">Technical Skills</div>
            </div>
          </div>
          <div class="excerpt">
            Lorem ipsum dolor amet venmo blue bottle schlitz beard butcher blog DIY tofu copper mug austin succulents
            twee raw denim kombucha.
          </div>
        </div>
        <div class="row">
          <div class="single-skill">
            <div class="pie pie80"></div>
            <div class="pie-text">HTML 80%</div>
          </div>

          <div class="single-skill">
            <div class="pie pie75"></div>
            <div class="pie-text">CSS 75%</div>
          </div>
          <div class="single-skill">
            <div class="pie pie35"></div>
            <div class="pie-text">Javascript 35%</div>
          </div>

          <div class="single-skill">
            <div class="pie pie95"></div>
            <div class="pie-text">PHP 95%</div>
          </div>
          <div class="single-skill">
            <div class="pie pie80"></div>
            <div class="pie-text">Magento 80%</div>
          </div>

          <div class="single-skill">
            <div class="pie pie90"></div>
            <div class="pie-text">Wordpress 90%</div>
          </div>
        </div>
      </section>
      <section id="sec-4" class="layer"></section>
      <a href="" id="anchor-projects"></a>
      <section id="projects" class="content">
        <div class="row">
          <div class="title">
            <div class="nskew">
              <div class="pskew">Projects</div>
            </div>
          </div>
        </div>
        <div class="row">
          <div class="single-proj">
            <a href="#">
              <img src="img/logo-dp.png" alt="" />
              <div class="name">B9 Games</div>
              <div class="lang">PHP</div>
            </a>
          </div>
          <div class="single-proj">
            <a href="#">
              <img src="img/logo-dp.png" alt="" />
              <div class="name">B9 Games</div>
              <div class="lang">PHP</div>
            </a>
          </div>
          <div class="single-proj">
            <a href="#">
              <img src="img/logo-dp.png" alt="" />
              <div class="name">B9 Games</div>
              <div class="lang">PHP</div>
            </a>
          </div>
          <div class="single-proj">
            <a href="#">
              <img src="img/logo-dp.png" alt="" />
              <div class="name">B9 Games</div>
              <div class="lang">PHP</div>
            </a>
          </div>
          <div class="single-proj">
            <a href="#">
              <img src="img/logo-dp.png" alt="" />
              <div class="name">B9 Games</div>
              <div class="lang">PHP</div>
            </a>
          </div>
          <div class="single-proj">
            <a href="#">
              <img src="img/logo-dp.png" alt="" />
              <div class="name">B9 Games</div>
              <div class="lang">PHP</div>
            </a>
          </div>
          <div class="single-proj">
            <a href="#">
              <img src="img/logo-dp.png" alt="" />
              <div class="name">B9 Games</div>
              <div class="lang">PHP</div>
            </a>
          </div>
          <div class="single-proj">
            <a href="#">
              <img src="img/logo-dp.png" alt="" />
              <div class="name">B9 Games</div>
              <div class="lang">PHP</div>
            </a>
          </div>
          <div class="single-proj">
            <a href="#">
              <img src="img/logo-dp.png" alt="" />
              <div class="name">B9 Games</div>
              <div class="lang">PHP</div>
            </a>
          </div>
          <div class="single-proj">
            <a href="#">
              <img src="img/logo-dp.png" alt="" />
              <div class="name">B9 Games</div>
              <div class="lang">PHP</div>
            </a>
          </div>
        </div>
      </section>
      <section id="sec-5" class="layer"></section>
      <a href="" id="anchor-testimonials"></a>
      <section id="testimonials" class="content">
        <div class="row">
          <div class="title">
            <div class="nskew">
              <div class="pskew">Testimonials</div>
            </div>
          </div>
        </div>
        <div class="row">
          <div class="single-test">
            <div class="author">Stark, Tony</div>
            <div class="text">
              Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean maximus erat eget urna interdum, at luctus
              tellus auctor. Etiam rutrum quam eget volutpat facilisis. Nam ultrices sem vitae turpis laoreet fermentum.
              Aliquam at pharetra tellus. Quisque ut dignissim quam. Cras efficitur efficitur nunc, quis aliquam magna
              maximus eget. Sed vitae urna libero. Donec faucibus ipsum eu magna aliquet elementum.
            </div>
          </div>
          <div class="single-test">
            <div class="author">Stark, Tony</div>
            <div class="text">
              Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean maximus erat eget urna interdum, at luctus
              tellus auctor. Etiam rutrum quam eget volutpat facilisis. Nam ultrices sem vitae turpis laoreet fermentum.
              Aliquam at pharetra tellus. Quisque ut dignissim quam. Cras efficitur efficitur nunc, quis aliquam magna
              maximus eget. Sed vitae urna libero. Donec faucibus ipsum eu magna aliquet elementum.
            </div>
          </div>
          <div class="single-test">
            <div class="author">Stark, Tony</div>
            <div class="text">
              Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean maximus erat eget urna interdum, at luctus
              tellus auctor. Etiam rutrum quam eget volutpat facilisis. Nam ultrices sem vitae turpis laoreet fermentum.
              Aliquam at pharetra tellus. Quisque ut dignissim quam. Cras efficitur efficitur nunc, quis aliquam magna
              maximus eget. Sed vitae urna libero. Donec faucibus ipsum eu magna aliquet elementum.
            </div>
          </div>
        </div>
      </section>
    </div>
  </body>
</html>