CodePen Embed - Personal Portfolio v2

<link href="https://fonts.googleapis.com/css?family=Kavivanar|Roboto:300,400,500" rel="stylesheet">

<header id="top-header">
  <div class="navbar-toggle">
    <span class="icon-bar"></span>
    <span class="icon-bar"></span>
    <span class="icon-bar"></span>
  </div>
  <nav id="navbar" class="slide-right">
    <ul>
      <li class="nav-item current">
        <a href="#welcome-section" class="nav-link">Home</a>
      </li>
      <li class="nav-item">
        <a href="#projects" class="nav-link">My Work</a>
      </li>
      <li class="nav-item">
        <a href="#contact" class="nav-link">Contact Me</a>
      </li>
    </ul>
  </nav>
</header>
<main>
  <section id="welcome-section">
    <div class="main-spotlight mt-lg">
      <h1 class="heading-lg">Welcome To My Portfolio</h1>
      <h2 class="heading-sm">
        Web Developer, Programmer, UI-UX Designer &amp; Enterprenuer
      </h2>
      <!-- social-buttons -->
      <div class="social-buttons">
        <a href="https://www.facebook.com/hipnos.az" class="social-link btn-facebook" target="_blank">
          <i class="fa fa-facebook fa-2x"></i>
        </a>

        <a href="https://www.linkedin.com/in/andriy-zhukevych/" class="social-link btn-linkedin" target="_blank">
          <i class="fa fa-linkedin fa-2x"></i>
        </a>

        <a href="https://github.com/Hollister009" class="social-link btn-github" target="_blank">
          <i class="fa fa-github fa-2x"></i>
        </a>

        <a href="https://www.freecodecamp.org/hollister009" class="social-link btn-freecodecamp" target="_blank">
          <i class="fa fa-free-code-camp fa-2x"></i>
        </a>
      </div>

    </div>
  </section>

  <section id="projects" class="projects">
    <h2 class="heading-2">My<span class="secondary"> Work</span>
    </h2>
    <h3 class="heading-sm">Check some of my cool projects...</h3>
    <!-- list of projects -->
    <ul class="projects-row">

      <li class="project-tile">
        <figure class="project-tile__screen">
          <a href="https://hollister009.github.io/personal_portfolio/img/projects/project-1-prynext.jpg" class="project-tile__view"></a>
          <img src="https://hollister009.github.io/personal_portfolio/img/projects/project-1-prynext.jpg" alt="Project prynext">
          <span class="project-tile__hot">
              <i class="fa fa-fire" aria-hidden="true"></i> Theme
            </span>
        </figure>
        <div class="project-tile__links">
          <a href="http://prynext.com" target="_blank" class="btn btn-light">
              <i class="fa fa-eye"></i> Project</a>
          <a href="https://github.com/Hollister009/Prynext" target="_blank" class="btn btn-dark">
              <i class="fa fa-github"></i> Github</a>
        </div>
      </li>

      <li class="project-tile">
        <figure class="project-tile__screen">
          <a href="https://hollister009.github.io/personal_portfolio/img/projects/project-2-nexter.jpg" class="project-tile__view"></a>
          <img src="https://hollister009.github.io/personal_portfolio/img/projects/project-2-nexter.jpg" alt="Project nexter">
        </figure>
        <div class="project-tile__links">
          <a href="https://hollister009.github.io/Nexter/" target="_blank" class="btn btn-light">
              <i class="fa fa-eye"></i> Project</a>
          <a href="https://github.com/Hollister009/Nexter" target="_blank" class="btn btn-dark">
              <i class="fa fa-github"></i> Github</a>
        </div>
      </li>

      <li class="project-tile">
        <figure class="project-tile__screen">
          <a href="https://hollister009.github.io/personal_portfolio/img/projects/project-3-trillo.jpg" class="project-tile__view"></a>
          <img src="https://hollister009.github.io/personal_portfolio/img/projects/project-3-trillo.jpg" alt="Project trillo">
        </figure>
        <div class="project-tile__links">
          <a href="https://hollister009.github.io/Trillo/" target="_blank" class="btn btn-light">
              <i class="fa fa-eye"></i> Project</a>
          <a href="https://github.com/Hollister009/Trillo/" target="_blank" class="btn btn-dark">
              <i class="fa fa-github"></i> Github</a>
        </div>
      </li>

      <li class="project-tile">
        <iframe class="project-tile__screen" title='Personal Portfolio v2' src='//codepen.io/FreeCodeA/embed/preview/RBMqNv/?&default-tab=result&embed-version=2' allowfullscreen='false' style='width: 100%;'>See the Pen
            <a href='https://codepen.io/FreeCodeA/pen/RBMqNv/'>Personal Portfolio v2</a>
          </iframe>
        <div class="project-tile__links">
          <a href="https://codepen.io/FreeCodeA/full/RBMqNv/" target="_blank" class="btn btn-light">
              <i class="fa fa-eye"></i> Project</a>
          <a href="https://github.com/Hollister009/personal_portfolio" target="_blank" class="btn btn-dark">
              <i class="fa fa-github"></i> Github</a>
        </div>
      </li>
    </ul>
    <!-- list of projects -->
  </section>

  <section id="contact">
    <h2 class="heading-2">Get in
      <span class="secondary"> Touch</span>
    </h2>
    <h3 class="heading-sm">This is how you can reach me... </h3>

    <blockquote class="quote">
      <p>
        Those who cannot feel the littleness of great things in themselves
        <br>are apt to overlook the greatness of little things in others.
      </p>
      <cite class="quote__author"> - Kakuzo Okakura</cite>
    </blockquote>

    <article id="about" class="mt-md">
      <h3 class="heading-3"><span class="secondary">About</span> Me</h3>

      <div class="about__block">
        <a id="profile-link" target="_blank" class="portrait" href="https://www.freecodecamp.org/hollister009">
          <figure class="portrait__shape">
            <img class="portrait__img" src="https://www.dropbox.com/s/y08q9iieyx53wqb/portrait.png?raw=1" alt="My profile picture">
          </figure>
        </a>
        <p class="story__text">
          Hello!<br> My name is Andrew.<br> I am Front-End Developer from Lviv, Ukraine.<br> I like coding and technology, and very passionate about it.<br> So if you are interested, or you have any questions, please contact me below. And you can follow
          me on social-media!
        </p>
      </div>
    </article>

    <div class="contact__links">
        <a href="mailto:reactive.andrew@yahoo.com.ua">
          <span>Send email</span>
          <i class="fa fa-envelope" aria-hidden="true"></i>
        </a>
        <a href="tel:+38(096)137-07-63">
          <span>Call Me</span>
          <i class="fa fa-phone" aria-hidden="true"></i>
        </a>
    </div>

  </section>

</main>

<footer id="footer">
  <div class="made-by">
    <span>Designed by Andrew Zhukevych</span>
  </div>
  <span class="copy">Copyright &copy; 2018</span>
</footer>

// Basic variables
$color-primary: #e0ebe8;
$color-alt: #3ecb62;

$color-secondary: darken(mix($color-primary, $color-alt, 20%), 25%);
$color-alt-2: #92ad5c;

$color-grey-light-1: #f9f7f6;
$color-grey-light-2: #aaa;
$color-dark-grey: #444;

$color-hot-red: #800000;
$text-secondary: #337ab7;

$bg-image-1: url(https://static.pexels.com/photos/169573/pexels-photo-169573.jpeg);
$bg-overlay: linear-gradient(
  45deg,
  rgba($color-secondary, 0.4) 15%,
  rgba($color-dark-grey, 0.5) 65%,
  rgba($color-secondary, 0.4) 100%
);

$font-primary: "Roboto", sans-serif;
$font-heading: "Kavivanar", sans-serif;

// Media Breakpoints
$bp-large: 68.75em; // 1100px
$bp-medium: 56.25em; // 900px
$bp-small: 37.5em; // 600px

// Mixins
@mixin easeOut {
  transition: all 0.5s ease;
}

@mixin absoluteCenter {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

@mixin linear-bg($bg-color: $color-primary) {
  background-image: linear-gradient(
    to right,
    lighten($bg-color, 10%) 20%,
    darken($bg-color, 10%) 100%
  );
}

// Basic styling
* {
  margin: 0;
  padding: 0;
  box-sizing: inherit;
}

html {
  font-size: 62.5%; // 1rem -> 10px
  box-sizing: border-box;

  @media only screen and (max-width: $bp-medium) {
    font-size: 50%; // 1rem -> 8px
  }
}

body {
  font-family: $font-primary;
  line-height: 1.6;
  font-size: 1.6rem;
  text-align: center;
}

section {
  padding: 4rem;
  min-height: 100vh;
  background: $color-primary;
}

img {
  display: block;
  height: auto;
  max-width: 100%;
}

// Utility classes
.mt-lg {
  margin-top: 35vh;
}
.mt-md {
  margin-top: 10rem;
}
.mt-sm {
  margin-top: 5rem;
}

.secondary {
  color: $text-secondary;
}

// Typography
%heading {
  margin: 0;
  font-weight: 400;
}

h1,
h2,
h3 {
  @extend %heading;
}

.heading-2 {
  font-size: 7rem;
  text-align: left;
}

.heading-3 {
  font-size: 5rem;
  text-align: center;
  margin-bottom: 1.5rem;
}

.heading-lg {
  font-size: 6.5rem;
  color: $color-alt;
  text-shadow: 2px 2px 2px #000;
}

.heading-sm {
  font-size: 2.5rem;
  color: $color-grey-light-1;
  background: rgba($color-dark-grey, 0.5);
  padding-left: 0.5rem;
}

// Header
#top-header {
  .close {
    .icon-bar {
      background: $color-grey-light-1;
      //Line 1 - Rotate
      &:first-child {
        transform: rotate(45deg) translate(6px, 5px);
      }

      //Line 2 - Rotate
      &:nth-child(2) {
        opacity: 0;
      }

      //Line 3 - Rotate
      &:last-child {
        transform: rotate(-45deg) translate(8px, -7px);
      }
    }
  }

  .show {
    visibility: visible;

    &.slide-right {
      transform: translate3d(0, 0, 0);
    }
  }
}

// Navbar toggle
.navbar-toggle {
  position: fixed;
  top: 2rem;
  right: 2.5rem;
  cursor: pointer;
  z-index: 10;

  .icon-bar {
    display: block;
    width: 2.5rem;
    height: 4px;
    border-radius: 4px;
    margin-bottom: 0.5rem;
    background: $color-grey-light-2;
    @include easeOut;
  }
}

// Navbar Menu
#navbar {
  background: rgba($color-grey-light-2, 0.8);
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0;
  z-index: 2;
  visibility: hidden;
  transform: translate3d(100%, 0, 0);
  @include easeOut;

  ul {
    list-style: none;
    text-align: center;
    @include absoluteCenter;
  }

  .nav-item {
    display: block;
    margin: 2.5rem 0;
    transform: translate3d(60rem, 0, 0);
    @include easeOut;

    &.show {
      // Slide in from right
      transform: translate3d(0, 0, 0);
    }

    &.current > a {
      color: $text-secondary;

      &:hover {
        color: $color-dark-grey;
      }
    }

    .nav-link {
      color: #fff;
      text-decoration: none;
      font-size: 2.5rem;
      font-weight: 500;
      text-shadow: 1px 1px $color-dark-grey;
      text-transform: uppercase;

      &:hover {
        color: $text-secondary;
        @include easeOut;
      }
    }
  }
}

// Delay each nav item slide by 0.1s
@for $x from 1 through 4 {
  .nav-item:nth-child(#{$x}) {
    transition-delay: $x * 0.125s !important;
  }
}

// Welcome section
#welcome-section {
  background-image: $bg-overlay, $bg-image-1;
  background-attachment: fixed;
  background-size: cover;
  background-position: center;
  height: 100vh;
}

.main-spotlight {
  display: inline-block;
  font-family: $font-heading;
}

.social-buttons {
  text-align: left;
  margin: 2rem;
  margin-left: 0;

  & > a {
    display: inline-block;
    color: #fff;
    font-size: 1.6rem;
    line-height: 1.3;
    text-decoration: none;

    &:not(:last-child) {
      margin-right: 0.75rem;
    }
  }

  .social-link {
    position: relative;
    height: 5rem;
    width: 5rem;
    padding: 0;
    border-radius: 8px;
    border: 1px solid rgba(0, 0, 0, 0.5);

    & > :first-child {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      line-height: 5rem;
      border: none;
      text-align: center;
    }
  }

  .btn-facebook {
    background-color: #3b5998;

    &:hover {
      background-color: darken(#3b5998, 10%);
    }
  }

  .btn-linkedin {
    background-color: #0077b5;

    &:hover {
      background-color: darken(#0077b5, 10%);
    }
  }

  .btn-github {
    background-color: $color-dark-grey;

    &:hover {
      background-color: darken($color-dark-grey, 10%);
    }
  }

  .btn-freecodecamp {
    background-color: #006400;

    &:hover {
      background-color: darken(#006400, 10%);
    }
  }
}

// Projects Section
.projects {
  text-align: left;
  background-image: linear-gradient(
    to bottom,
    rgba(6, 53, 19, 0.4),
    rgba(0, 0, 0, 0.4)
  );

  &-row {
    display: flex;
    list-style: none;
    flex-wrap: wrap;
    justify-content: center;
  }
}

// Project-tile component
.project-tile {
  width: 42.5rem;
  display: flex;
  flex-flow: column wrap;
  margin-top: 3rem;

  &:not(:last-child) {
    margin-right: 1.5rem;
  }

  img {
    @include easeOut;
    transform: scale(1);
  }

  &__screen {
    height: 28.5rem;
    border: 3px solid $color-grey-light-1;
    overflow: hidden;
    position: relative;

    &:hover {
      opacity: 0.75;
      border-color: $color-alt;
      @include easeOut;
    }
  }

  &__view {
    display: block;
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    z-index: 2;

    .project-tile &:hover + img {
      transform: scale(1.1);
    }
  }

  &__hot {
    display: inline-block;
    vertical-align: middle;
    position: absolute;
    padding: 0.5rem 1rem;
    border-radius: 2rem;
    opacity: 0.7;
    font-size: 2.5rem;
    background: $color-hot-red;
    color: $color-grey-light-2;
    text-transform: uppercase;
    letter-spacing: 1px;
    font-family: $font-heading;
    z-index: 2;
    @include absoluteCenter;
  }

  &__links {
    .btn {
      display: inline-block;
      width: 100%;
      line-height: 2;
      margin-top: 0.75rem;
      text-decoration: none;
      padding: 0.5rem;
      @include easeOut;

      &-light {
        background: $color-alt-2;
        color: $color-dark-grey;
      }

      &-dark {
        background: $color-dark-grey;
        color: $color-grey-light-1;
      }

      &:hover {
        background: $color-alt;
        color: #fff;
      }
    }
  }
}

// Contact Section
#contact {
  text-align: left;

  .quote {
    // rgba(lighten($color-dark-grey, 50), 0.5);
    position: relative;
    background-color: rgba($color-grey-light-2, 0.5);
    display: block;
    max-width: 64rem;
    margin-left: auto;
    margin-top: 2.5rem;
    padding: 2.5rem;
    padding-left: 5rem;
    font-family: $font-heading;
    font-style: italic;
    font-size: 2rem;
    border-left: 5px solid $color-alt;
    color: rgba($color-dark-grey, 0.8);
    border-radius: 0.5rem;

    &::before {
      position: absolute;
      display: block;
      content: "\201C";
      font-family: Arial, Helvetica, sans-serif;
      font-size: 10rem;
      top: -0.5rem;
      left: 1rem;
      line-height: 1;
      color: rgba($color-alt, 0.5);
    }

    &__author {
      font-weight: bold;
      display: block;
      margin-top: 1.5rem;
      color: #000;
      text-align: right;
    }
  }
}

// About Me Article
#about {
  position: relative;

  .about__block {
    display: flex;
    margin: 0 auto;
    padding: 5rem;
    padding-left: 7.5rem;
    justify-content: center;
    width: 85%;
    max-width: 115rem;
    font-size: 1.5rem;
    background-color: rgba(#fff, 0.7);
    box-shadow: 0.5rem 0.5rem 2rem rgba(#000, 0.5);
    transform: skew(-6deg);
    border-radius: 0.3rem;
    @include easeOut;

    &:hover {
      background-color: rgba($color-alt, 0.8);

      .portrait__shape::before {
        opacity: 0;
      }

      .story__text {
        color: $color-grey-light-1;
      }
    }
  }

  .portrait__shape {
    display: block;
    width: 20rem;
    height: 20rem;
    clip-path: circle();

    &::before {
      display: block;
      position: absolute;
      content: "";
      width: 20rem;
      height: 20rem;
      opacity: 1;
      border-radius: 50%;
      box-shadow: inset 0 0 0 5px $color-alt;
      @include easeOut;
    }
  }

  .story__text {
    transform: skewX(6deg);
    flex: 0 0 60rem;
    color: rgba($color-dark-grey, 0.8);
    font-style: italic;
    font-size: 2rem;
    align-self: center;
    @include easeOut;
  }
}

// Profile link
#profile-link {
  display: block;
  position: relative;
  width: 20rem;
  height: 20rem;
  transform: translateX(-3rem) skew(6deg);
  flex: 0 0 auto;

  .portrait__img {
    @include easeOut;
  }

  &:hover .portrait__img {
    filter: blur(2px) brightness(70%);
  }
}

// Contact links
.contact__links {
  text-align: center;
  margin: 7.5rem 0;
  
  span {
    margin-right: 1rem;
  }

  a {
    display: inline-block;
    vertical-align: middle;
    width: 17.5rem;
    text-decoration: none;
    text-transform: uppercase;
    padding: 0.6rem 1.2rem;
    border-radius: 10rem;
    font-weight: 300;
    color: $color-grey-light-1;
    @include linear-bg($text-secondary);
    @include easeOut;

    &:hover {
      transform: translateY(-2px);
      box-shadow: 0.5rem 0 2rem rgba($color-dark-grey, 0.5);
      @include linear-bg($color-alt-2);
    }

    &:last-child {
      margin-left: 7.5rem;
    }
  }
}

// Footer
#footer {
  min-height: 5rem;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: darken($color-secondary, 10%);
  color: $color-primary;
  position: relative;
  opacity: 0.5;
  @include easeOut;

  &:hover {
    opacity: 0.9;
  }

  .made-by {
    background-color: rgba(0, 0, 0, 0.2);
    position: absolute;
    top: 0;
    left: 2.5rem;
    padding: 0 2rem;

    span {
      line-height: 5rem;
    }
  }
}

// Responsive media rules
@media only screen and (max-width: $bp-large) {
  #about {
    .about__block {
      width: 75%;
      flex-direction: column;
      padding: 3rem;
      text-align: center;
      align-items: center;
      transform: skew(0);
    }

    .story__text {
      flex: 1;
      max-width: 40rem;
      padding-top: 3rem;
      transform: skew(0);
    }
  }

  #profile-link {
    margin: 0 auto;
    transform: translateX(0) skew(0);
  }
}

@media only screen and (max-width: $bp-small) {
  section {
    padding: 2rem;
  }

  #about {
    .about__block {
      width: 100%;
    }
  }
  .contact__links {
    
    a {
      width: 100%;

      &:last-child {
        margin-left: 0;
        margin-top: 1rem;
      }
    }
  }

  #footer {
    justify-content: flex-start;
    flex-wrap: wrap;

    .made-by {
      position: relative;
      left: 0;
      margin-right: 4%;
    }
  }
}

View Compiled

// Select DOM items
const menuBtn  = document.querySelector('.navbar-toggle');
const menu     = document.querySelector('#navbar');
const navItems = document.querySelectorAll('.nav-item');

// Set initial State Of Menu
let showMenu = false;

function toggleMenu() {
  if(!showMenu) {
    menuBtn.classList.add('close');
    menu.classList.add('show');
    navItems.forEach(item => item.classList.add('show'));
    
    //Set Menu State
    showMenu = true;
  } else {
    menuBtn.classList.remove('close');
    menu.classList.remove('show');
    navItems.forEach(item => item.classList.remove('show'));
    
    //Set Menu State
    showMenu = false;
  }
}

menuBtn.addEventListener('click', toggleMenu);

View Compiled

Run Pen

This Pen is owned by Andrew on CodePen.

See more by @FreeCodeA on CodePen

External CSS

https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css

External JavaScript

This Pen doesn't use any external JavaScript resources.