Portfolio w/ css grid

index.html

<div class="container">
  <nav>
    <a href="#about">About</a>
    <a href="#portfolio">Portfolio</a>
    <a href="#contact">Contact</a>
  </nav>
  <div class="about" id="about">
      <p>I am a web devloper with experience working on frontend solutions. Currently learning about design principles and human centered design. I have experience working on software and with object oriented design. Programming everyday, working towards being a fullstack developer. Goal: making things that last, that are worth using and reusing.</p>
      <p>Frontend - Human Centered Design - Software</p>
  </div>
  <div class="portfolio" id="portfolio">
    <div class="project">
      <img src="https://picsum.photos/500/500" alt="filler image from picsum.photos"> 
      <span><strong>Tunecomposer</strong></span>
      <p>a simple Java/JavaFXML MIDI player application, with play, pause,undo, and editing functionality.</p>
      </div>
    <div class="project">
      <img src="https://picsum.photos/500/500" alt="filler image from picsum.photos" >
      <span><strong>Flowriter</strong></span>
      <p>a python application that markov models to train and generate sentences based on Bob Ross quotes, artist lyrics from Spotify, writing prompts, writing plot points, and Emmanuel Kant quotes.
      </p>
    </div>
  </div>
  <div class="notice">
    <p>No spam please.</p>
    <p>Open to collabloration. Always looking for oppurtunities to learn and make cool things.</p>
</div>
  <div class="contact" id="contact">
    <fieldset>
      <legend> Contact me</legend>
    <form action="#" id="contact-form" method="post">
      <p>
        <label for="name">Name: </label><br />
        <input type="text" id="name" name="name" />
      </p>
      <p>
        <label for="email">Email: </label><br />
        <input type="text" id="email" name="email" />
      </p>
      <p>
        <label for="message">Message: </label><br />
        <textarea type="text" id="message" name="message" /></textarea>
      </p>
      <p>
        <button type="button">submit</button>
      </p>
      </fieldset>
   </form>
  </div>
  <div class="social">
    <p>Follow me on social media<p>
    <a href="https://github.com/Eventhisone" target="_blank">
        <i class="fab fa-github fa-3x"></i>
      </a>
    </div>
  <div class="footer">
    <p>&copy;Zach Turner 2017. All rights revered.<p>
  </div>
</div>

portfolio-w-css-grid.markdown

Portfolio w/ css grid

A Pen by Zachariah Turner on CodePen.

License.

script.js

// Salmon #FA7C92
// Rain #6EC4DB
// Buttermilk #FFF7CO
// Leaf #66AB8C

style.css

:root{
  --bg-color: #CFD8DC;
  --lightblue: #81C784;
}
.container{
  margin: 0;
  padding: 0;
  font-family: sans-serif;
  font-size: 20px;
  max-width: 100%;
  Background-color: var(--bg-color);
  display: grid;
  grid-template-rows: repeat(6, auto);
  grid-template-columns: repeat(5, 1fr);
  grid-template-areas: "h h h h h"
                       ". a a a ."
                       ". p p p ."
                       ". c c n ."
                       ". s s s ."
                       "f f f f f";
  
}

nav{
  grid-area: h;
  text-align: right;
  background: #006644;
  padding: 10px;
}

nav > a{
  padding: 10px;
}

a:link {
    color: white;
    background-color: transparent; 
    text-decoration: none;
}

a:visited {
    color: white;
    background-color: transparent;
    text-decoration: none;
}

a:hover {
    color: rgb(0, 177, 106); /* Jade */
    background-color: transparent;
    text-decoration: underline;
}

a:active {
    color: black;
    background-color: transparent;
    text-decoration: underline;
}

.about{
  grid-area: a;
  text-align: center;
  background: var(--lightblue);
  margin-top: 20px;
  margin-bottom: 20px;
}

.portfolio{
  grid-area: p;
  margin-bottom: 20px;
}

.project{
  max-width: 45%;
  max-height: 60%;
  padding-top: 20px;
  min-height: 25%;
  float: left;
  background: var(--lightblue);
  align-content: center;
  text-align: center;
}

.project img{
  width: 90%;
}

.contact{
  grid-area: c;
  background: #66ffcc;
}

.notice{
  grid-area: n;
  background: var(--lightblue);
  padding-left: 20px;
  padding-right: 10px;

}

.social{
  grid-area: s;
  text-align: center;
  background: var(--lightblue);
}

.footer{
  grid-area: f;
  text-align: center;
}
i:hover{
  color: orange;
}

styles

<link href="https://use.fontawesome.com/releases/v5.0.2/css/all.css" rel="stylesheet" />