Personal Portfolio Page

index.html

<script src="https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js"></script>
<script src="https://kit.fontawesome.com/b064b7b394.js" crossorigin="anonymous"></script>
<link href="https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,400;0,700;1,400&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Proza+Libre:ital,wght@0,400;0,500;0,700;1,400&display=swap" rel="stylesheet">

<nav id="navbar">
  <ul id="nav-list">
    <li class="nav-item"><a class="nav-link" href="#contact">Contact</a></li>
    <li class="nav-item"><a class="nav-link" href="#projects">Work</a></li>
    <li class="nav-item"><a class="nav-link" href="#welcome-section">About</a></li>
  </ul>
</nav>

<main class="flex-container">
  <section id="welcome-section" class="flex-container">
    <h1 id="welcome-title">Hi, I'm Kris</h1>
    <h2 id="welcome-subtitle">Software developer and public policy researcher</h2>
  </section>
  
  <section id="projects" class="flex-container">
    <h2 id="projects-title">These are some of my projects</h2>
    <div id="grid-container">
      <div class="project-tile"><a class="project-link" target="_blank" href="http://www.wsipp.wa.gov/Publications?AreaSelection=PUB&SearchQueries%5B0%5D.paramType=KEYWORD_ANY&SearchQueries%5B0%5D.paramJoin=AND&SearchQueries%5B0%5D.valueString=&SearchQueries%5B0%5D.mainSearch=true&SearchQueries.Index=0&ResultsPerPage=&ReportsSortBy=recent&PageNum=1&RedirectToAdvanced=false&SearchQueries.Index=1&SearchQueries%5B1%5D.paramJoin=AND&selector1=IN_AUTHOR&SearchQueries%5B1%5D.valueString=Kristofer+Bitney&SearchQueries%5B1%5D.paramTermsIn=TERMS_IN_REPORT_AUTHORS&SearchQueries%5B1%5D.paramType=KEYWORD_ALL"><img class="project-thumbnail" src="https://i.imgur.com/MtVmxi5.png"><h3 class="project-caption"><em>Research Publications</em><br>Causal Inference</h3></a></div>
      <div class="project-tile"><a class="project-link" target="_blank" href="https://github.com/krisbitney/C195_Appointment_Scheduler"><img class="project-thumbnail" src="https://i.imgur.com/YO84h6Z.png"><h3 class="project-caption"><em>Appointment Scheduler</em><br>GUI Desktop App<br><i class="fab fa-java"></i> <i class="fas fa-database"></i></h3></a></div>
      <div class="project-tile"><a class="project-link" target="_blank" href="https://github.com/krisbitney/Image_Classifier"><img class="project-thumbnail" src="https://i.imgur.com/vLftZKM.png"><h3 class="project-caption"><em>Neural Network Image Classifier</em><br>Terminal App<br><i class="fas fa-wave-square"></i> <i class="fab fa-python"></i></h3></a></div>
      <div class="project-tile"><a class="project-link" target="_blank" href="https://github.com/krisbitney/StarbucksCapstone"><img class="project-thumbnail" src="https://i.imgur.com/B4je5pp.png"><h3 class="project-caption"><em>Starbucks Promotions</em><br>Machine Learning<br><i class="fas fa-wave-square"></i> <i class="fab fa-python"></i></h3></a></div>
      <div class="project-tile"><a class="project-link" target="_blank" href="https://github.com/krisbitney/C950_Vehicle_Routing_Problem"><img class="project-thumbnail" src="https://i.imgur.com/9rpAdMm.png"><h3 class="project-caption"><em>Vehicle Routing Problem</em><br>Algorithm Design<br><i class="fab fa-python"></i></h3></a></div>    
      <div class="project-tile"><a class="project-link" target="_blank" href="https://codepen.io/krisbitney/full/OJyoveg"><img class="project-thumbnail" src="https://i.imgur.com/sjQ3AFQ.png"><h3 class="project-caption"><em>Survey Form</em><br>Web Page<br><i class="fab fa-html5"></i> <i class="fab fa-css3"></i></h3></a></div>
      <div class="project-tile"><a class="project-link" target="_blank" href="https://codepen.io/krisbitney/full/wvKYpor"><img class="project-thumbnail" src="https://i.imgur.com/tfpYLJZh.png"><h3 class="project-caption"><em>Producting Landing Page</em><br>Web Page<br><i class="fab fa-html5"></i> <i class="fab fa-css3"></i></h3></a></div>
      <div class="project-tile"><a class="project-link" target="_blank" href="https://codepen.io/krisbitney/full/pojxVMm"><img class="project-thumbnail" src="https://i.imgur.com/evCwN8Q.png"><h3 class="project-caption"><em>Technical Documentation</em><br>Web Page<br><i class="fab fa-html5"></i> <i class="fab fa-css3"></i></h3></a></div>
<!--
      <div class="project-tile"><a class="project-link" target="_blank" href="https://medium.com/show-me-the-data/this-data-will-make-you-rethink-everything-you-know-about-college-students-and-free-speech-de2dd8cab778"><img class="project-thumbnail" src="https://i.imgur.com/7GA2GDz.png"></a></div>
-->
    </div>
  </section>
  
  <section id="contact" class="flex-container">
    <h2 id="contact-title">Work with me</h2>
    <div id="contact-link-list" class="flex-container">
      <a id="profile-link" class="contact-link" target="_blank" href="https://github.com/krisbitney"><i class="fab fa-github"></i> GitHub</a>
      <a class="contact-link" target="_blank" href="mailto:kristoferbitney@outlook.com"><i class="fas fa-at"></i> Email</a>
      <a class="contact-link" target="_blank" href="https://www.linkedin.com/in/bitney/"><i class="fab fa-linkedin"></i> LinkedIn</a>
    </div>
  </section>
</main>

personal-portfolio-page.markdown

Personal Portfolio Page

A Pen by Kris Bitney on CodePen.

License.

style.css

:root {
  --main-color-lightGray: #ECECEC;  
  --main-color-yellow: #F3D250;  
  --main-color-red: #F78888;
  --main-color-darkBlue: #5DA2D5;  
  --main-color-lightBlue: #90CCF4;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
}

/* Fixes in-page navigation links with fixed position nav bar */
/* See: http://nicolasgallagher.com/jump-links-and-viewport-positioning/demo/ */
section:before { 
  display: block; 
  content: ""; 
  margin-top: -1.6rem; 
  height: 1.6rem; 
  visibility: hidden; 
}

/* ----------------- Navigation Bar ----------------- */

#navbar {
  position: fixed;
  top: 0;
  margin: 0;
  padding: 0;
}

#nav-list {
  position: fixed;
  top: 0;
  list-style-type: none;
  margin: 0;
  padding: 0;
  width: 100%;
  overflow: hidden;
  background-color: var(--main-color-lightGray);
}

.nav-item {
  float: right;
  display: block;
}

.nav-link {
  display: block;
  padding: 1rem 2rem;
  text-decoration: none;
  text-align: center;
  color: black;
  font-family: 'Proza Libre', sans-serif;
}

.nav-item:hover, .nav-link:hover {
  background-color: var(--main-color-lightBlue);
}


/* ----------------- Main ----------------- */

main {
  padding-top: 1.6rem;
}

.flex-container {
  display: flex;
  flex-flow: column nowrap;
  justify-content: center;
  align-items: center;
  width: 100%;
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

h1 {
  font-size: 5rem;
}

h2 {
  font-size: 4rem;
}

h3 {
  font-size: 1rem;
}

/* ----------------- Welcome Section ----------------- */

#welcome-section {
  height: 100vh;
  background-color: var(--main-color-yellow);
  text-align: center;
}

#welcome-title {
  color: black;
  font-family: 'Cormorant Garamond', serif;
}

#welcome-subtitle {
  color: var(--main-color-darkBlue);
  font-family: 'Proza Libre', sans-serif;
}

/* ----------------- Projects Section ----------------- */

#projects {
  background: var(--main-color-red);
  padding-top: 1.5rem; 
  padding-bottom: 3rem;
  text-align: center;
}

#projects-title {
  color: var(--main-color-lightGray);
  font-family: 'Cormorant Garamond', serif;
  font-weight: 700;
}

#grid-container {
  width: 70%;
  height: auto;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  grid-template-rows: 18vmax 18vmax;
  grid-gap: 1rem 1rem; /* row column*/
 
}

.project-tile {
  background-color: var(--main-color-darkBlue);
  border: 2px solid var(--main-color-lightGray);
  border-radius: 3%;
}

.project-link {
  text-decoration: none;
}

.project-thumbnail {
  border-radius: 3% 3% 0% 0%;
  width: 100%;
  height: 70%;
  object-fit: cover;
  border-bottom: 2px solid var(--main-color-lightGray);
}

.project-caption {
  display: block;
  text-decoration: none;
  text-align: center;
  color: var(--main-color-lightGray);
  font-family: 'Proza Libre', sans-serif;
  font-weight: 400;
  margin: 0.5rem 0rem 0.5rem 0rem;
}

/* ----------------- Contact Section ----------------- */

#contact {
  height: 100vh;
  background-color: var(--main-color-darkBlue);
  text-align: center;
}

#contact-title {
  color: var(--main-color-yellow);
  font-family: 'Cormorant Garamond', serif;
}

#contact-link-list {
  flex-direction: row;
}

.contact-link {
  padding: 3rem;
  text-decoration: none;
  font-size: 3rem;
  color: var(--main-color-lightGray);
}

/* ----------------- Media Queries ----------------- */

/* If screen is 600 pixels wide or less */
@media screen and (max-width: 600px) {
  h1 {
    font-size: 4rem;
  }

  h2 {
    font-size: 3rem;
  }

  h3 {
    font-size: 0.6rem;
  }
  #grid-container {
  width: 70%;
  height: auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 30vmax 30vmax 30vmax 30vmax;
  grid-gap: 1rem 1rem; /* row column*/
  }

  .project-tile {
    background-color: var(--main-color-darkBlue);
    border: 2px solid var(--main-color-lightGray);
    border-radius: 3%;
  }

  .project-link {
    text-decoration: none;
  }

  .project-thumbnail {
    border-radius: 3% 3% 0% 0%;
    width: 100%;
    height: 70%;
    object-fit: cover;
    border-bottom: 2px solid var(--main-color-lightGray);
  }

  .project-caption {
    margin: 0.2rem 0rem 0.2rem 0rem;
  }
  
  .contact-link {
    padding: 1rem;
    text-decoration: none;
    font-size: 2rem;
    color: var(--main-color-lightGray);
  }
}