Portfolio Site

HTML

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Tim Wörner | Web Developer</title>
  <link href="https://fonts.googleapis.com/css?family=Open+Sans:400,700,800" rel="stylesheet">
  <link href="https://fonts.googleapis.com/css?family=Share+Tech+Mono" rel="stylesheet">
  <link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css'>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-mfizz/2.4.1/font-mfizz.min.css" />
  <link rel='stylesheet' href='app.css'>
</head>
<body>
<header>
  <div class='caption'>
    <i class='fa fa-code fa-3x'></i>
    <div>
      <h2>Tim Wörner</h2>
      <h4>Web Developer</h4>
    </div>
  </div>
  <ul>
    <li><a href="#about">About Me</a></li>
    <li><a href="#projects">Projects</a></li>
    <li><a href="#">Contact</a></li>
  </ul>
</header>

<section class='home'>
  <div class='background-image' style='background-image: url(https://images.unsplash.com/photo-1508830524289-0adcbe822b40?auto=format&fit=crop&w=1422&q=80)'></div>
  <div class='home-content'>
    <h1>Hi. I'm Tim Wörner, aspiring Web Developer.</h1>
    <p>Based in Frankfurt am Main, Germany. I'm currently pursuing my B.Sc. in Computer Science at the Johannes Gutenberg-University in Mainz.</p>
  </div>
</section>

<section id='about'>
  <div class='about-header'>
    <img src='https://i.imgur.com/Dib0b21.jpg' class='portrait' alt='Picture of me'>
    <div class='about-caption'>
      <h3 class='title'>About Me: </h3>
      <hr>
      <p>I have been studying Web Development for about one and a half years. During that time, I gained experiences with the following technologies: </p>
    </div>
  </div>
  <ul class='grid'>
    <li>
      <i class='fa fa-html5 fa-4x'></i>
      <h4>HTML5</h4>
    </li>
    <li>
      <i class='fa fa-css3 fa-4x'></i>
      <h4>CSS3</h4>
      <p>Bootstrap, Semantic UI</p>
    </li>
   ...

CSS

/* red = rgb(176, 26, 31) */

/* General Styles */

* {
  margin: 0;
  padding: 0;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  font-family: 'Open Sans', sans-serif;
}
 
ul {
  list-style: none;
  z-index: 1;
}

a {
  text-decoration: none;
  color: #fff;
}

section {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
    -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  padding: 60px 50px;
  min-height: 100vh;
}

section h3.title {
  text-transform: uppercase;
  font: bold 32px 'Open Sans', sans-serif;
  padding: 20px;
  text-align: center;
}

section h4 {
  color: rgb(176, 26, 31);
}

section p {
  line-height: 2;
  padding: 0 20px;
  margin: 0 auto 30px;
  text-align: center;
}

section:not(.home):nth-child(odd) {
  background-color: #f5f5f5;
}

hr {
  width: 450px;
  height: 3px;
  margin: 0 20px;
  background-color: rgb(176, 26, 31);
  border: 0;
  margin-bottom: 40px;
}

.grid {
  width: 100%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}


/* Header Styles */

header {
  position: absolute;
  width: 100%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  padding: 25px;
  color: #fff;
}

header ul {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}

header ul li {
  margin: 0 25px;
}

header ul li a {
  padding-bottom: 3px;
  border-bottom: 2px solid rgb(176, 26, 31);
  border-bottom: 2px solid rgba(176, 26, 31, 0);
  -webkit-transition: all .5s;
  -o-transition: all .5s;
...