Personal Portfolio

index.html

<nav id="navbar">
  
  <a id="welcome-button" href="#welcome-section">Welcome</a>
  <a id="projects-button" href="#projects">Projects</a>
  <a id="contact-button" href="#social">Contact</a>
  
</nav>

<section id="welcome-section">

  <h1 id="name" class="animated bounceIn"><strong>Chris Wingler</strong></h1>
  <h2 id="job-description" class="animated bounceIn"><em>Software Engineer</em></h2>

  <div id="technologies" class="animated bounceIn">
    <h3><i class="fab fa-js"></i></h3>
    <h3><i class="fab fa-node"></i></h3>
    <h3><i class="fab fa-vuejs"></i></h3>
    <h3><i class="fab fa-react"></i></h3>
    <h3><i class="fab fa-html5"></i></h3>
    <h3><i class="fab fa-sass"></i></h3>
  </div>

</section>

<section id="projects">

  <a><div class="project-tile"><iframe src="https://s.codepen.io/chriswingler/debug/zawxjE/dXMqBZdPwNor"></iframe></div></a>
  <a><div class="project-tile"><iframe src="https://s.codepen.io/chriswingler/debug/vrbXLo/XxkVwaLeNzqM"></iframe></div></a>
  <a><div class="project-tile"><iframe src="https://s.codepen.io/chriswingler/debug/mKVPjN/mVAbGpdoXYVk"></iframe></div></a>

</section>

<!--<div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel" style="background-color: green;">
  <ol class="carousel-indicators">
    <li data-target="#carouselExampleIndicators" data-slide-to="0" ></li>
    <li data-target="#carouselExampleIndicators" data-slide-to="1" class="active"></li>
    <li data-target="#carouselExampleIndicators" data-slide-to="2"></li>
  </ol>
  <div class="carousel-inner">
    <div class="carousel-item">
      <a alt="First slide"><div class="project-tile"><iframe src="https://s.codepen.io/chriswingler/debug/zawxjE/dXMqBZdPwNor"></iframe></div></a>
    </div>
    <div class="carousel-item active">
      <a alt="Second slide"><div class="project-tile"><iframe src="https://s.codepen.io/chriswingler/debug/vrbXLo/XxkVwaLeNzqM"></iframe></div></a>
    </div>
    <div class="carousel-item">
      <a alt="Third slide"><div class="project-tile"><iframe src="https://s.codepen.io/chriswingler/debug/mKVPjN/mVAbGpdoXYVk"></iframe></div></a>
    </div>
  </div>
  <a class="carousel-control-prev" href="#carouselExampleIndicators" role="button" data-slide="prev">
    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
    <span class="sr-only">Previous</span>
  </a>
  <a class="carousel-control-next" href="#carouselExampleIndicators" role="button" data-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="sr-only">Next</span>
  </a>
</div>-->

<section id="social">

  <a id="profile-link" href="https://www.linkedin.com/in/chris-wingler/" target="_blank"><i class="fab fa-linkedin"></i></a>

  <a id="profile-link" href="https://github.com/chriswingler" target="_blank"><i class="fab fa-github"></i></a>

  <a id="profile-link" href="https://angel.co/chris-wingler-1" target="_blank"><i class="fab fa-angellist"></i></a>
  
  <a id="profile-link" href="https://www.freecodecamp.org/cwingler" target="_blank"><i class="fab fa-free-code-camp"></i></a>
  
  <a id="profile-link" href="mailto:[email protected]"><i class="far fa-envelope"></i></a>
  
  <a id="profile-link" href="https://stackoverflow.com/users/8617465/chris-wingler" target="_blank"><i class="fab fa-stack-overflow"></i></a>

</section>



<script async src="https://static.codepen.io/assets/embed/ei.js"></script> 

personal-portfolio.markdown

Personal Portfolio

A Pen by Chris Wingler on CodePen.

License.

script.js

let nav = document.getElementById('navbar');

const welcome = document.getElementById('welcome-button');

const projects = document.getElementById('projects-button');

const contact = document.getElementById('contact-button');

setInterval(() => {
  if (document.documentElement.scrollTop < window.innerHeight) {
    welcome.classList.add('b-active');
    projects.classList.remove('b-active');
    contact.classList.remove('b-active');
  }
  
  if (document.documentElement.scrollTop >= window.innerHeight && document.documentElement.scrollTop <= window.innerHeight * 2) {
    welcome.classList.remove('b-active');
    projects.classList.add('b-active');
    contact.classList.remove('b-active');
  }
  
  if (document.documentElement.scrollTop > (window.innerHeight * 2) - 100) {
    welcome.classList.remove('b-active');
    projects.classList.remove('b-active');
    contact.classList.add('b-active');
  }
}, 10)

scripts

<script src="https://gitcdn.link/repo/freeCodeCamp/testable-projects-fcc/master/build/bundle.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.1/js/bootstrap.min.js"></script>

style.css

.b-active {
  color: #008060 !important;
}

#navbar {
  position: fixed;
  padding: 2rem;
  top: 0;
  font-size: 3vw;
  width: 100vw;
  text-align: center;
  font-family: 'Offside', cursive;
  background-color: rgba(0, 0, 0, 0.8);
}

#navbar > a {
  color: #a0e8a0;
  border: 3px solid #a0e8a0;
  padding: 1rem;
  text-decoration: none;
}

#navbar > a:hover {
  color: #008060;
}

#welcome-section {
  height: 100vh;
  background-color: #000033;
  display: flex;
  justify-content: space-evenly;
  align-items: center;
  flex-direction: column;
  color: #a0e8a0;
  font-family: 'Bungee Shade', cursive;
  padding-top: 15vh;
}

h1 {
  font-size: 8vw;
}

h2 {
  font-size: 4vw;
}

#technologies {
  display: flex;
  justify-content: space-evenly;
  align-items: center;
  width: 100%;
  color: #0099cd
}

#technologies > h3 {
  font-size: 5vw;
}

#projects {
  height: 100vh;
  padding-top: 13vh;
  display: flex;
  justify-content: space-evenly;
  align-items: center;
  background-color: gray;
}

iframe {
  height: 65vh;
  width: 25vw;
  border-width: 1vw 1vw 3vw 1vw;
  border-style: solid;
  border-radius: 5px;
}

#social {
  height: 100vh;
  background-color: #e8b2a0;
  font-size: 15vw;
  display: flex;
  justify-content: space-evenly;
  align-items: center;
  padding-top: 10vh;
}

#social > a {
  color: #006080;
}

@media only screen and (max-width: 600px) {
    body {
        background-color: lightblue;
    }
}

styles

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.1/css/bootstrap.css" rel="stylesheet" />
<link href="https://fonts.googleapis.com/css?family=Bungee+Shade" rel="stylesheet" />
<link href="https://fonts.googleapis.com/css?family=Offside" rel="stylesheet" />
<link href="https://use.fontawesome.com/releases/v5.1.0/css/all.css" rel="stylesheet" />
<link href="https://cdn.jsdelivr.net/npm/[email protected]/animate.min.css" rel="stylesheet" />