<div id="welcome-section">
  <nav id="navbar">
    <a href="#projects">Projects</a>
    <a href="#contact">Contact</a>
  </nav>
  <header id="header">
    <h1>Colin Fie&shy;dor&shy;owi&shy;cz</h1>
    <p>Aspiring full-stack developer</p>
  </header>
</div>
<main>
  <section id="projects">
    <h2>Projects</h2>
    <article class="project-tile">
      <div>
        <h3>Ada Lovelace Tribute Page</h3>
        <p>This webpage is a tribute to Ada Lovelace, considered by many to be
          the world's first computer programmer. It's also my first of five
          final projects for freeCodeCamp's Responsive Web Design course.</p>
      </div>
      <a class="project-link" href="https://codepen.io/colin-intj/full/MWQKbBO"
          target="_blank">Click here to visit this project!</a>
    </article>
    <article class="project-tile">
      <div>
        <h3>Survey Form</h3>
        <p>This survey is my second of five final projects for freeCodeCamp's
          Responsive Web Design Course.</p>
      </div>
      <a class="project-link" href="https://codepen.io/colin-intj/full/WNMwBzv"
          target="_blank">Click here to visit this project!</a>
    </article>
    <article class="project-tile">
      <div>
        <h3>Original Trombones Product Landing Page</h3>
        <p>This webpage is my third of five final projects for freeCodeCamp's
          Responsive Web Design course. It's a product landing page for the
          fictitious company, Original Trombones.</p>
      </div>
      <a class="project-link" href="https://codepen.io/colin-intj/full/yLvJNrM"
          target="_blank">Click here to visit this project!</a>
    </article>
    <article class="project-tile">
      <div>
        <h3>Unofficial TI-BASIC 83 Documentation</h3>
        <p>This webpage provides documentation for TI-BASIC 83, a built-in
          programming language for the TI-83 series calculators. This webpage is
          also my fourth of five final projects for freeCodeCamp's Responsive
          Web Design course.</p>
      </div>
      <a class="project-link" href="https://codepen.io/colin-intj/full/ZEryapw"
          target="_blank">Click here to visit this project!</a>
    </article>
  </section>
</main>
<footer>
  <footer id="contact">
    <h2>Contact</h2>
    <p>Follow me on <a id="profile-link"
          href="https://www.linkedin.com/in/colin-fiedorowicz"
          target="_blank">LinkedIn</a></p>
  </footer>
</footer>

* {
  box-sizing: border-box;
}

body {
  font-family: 'Roboto', Arial, Helvetica, sans-serif;
  margin: 0;
}

#welcome-section {
  background-color: #282c34;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  text-align: center;
}

nav {
  background-color: #354545;
  display: flex;
  flex-grow: 0;
  flex-wrap: wrap;
  position: fixed;
  width: 100%;
}

nav a:first-child {
  margin-left: 50px;
}

nav a {
  color: #b1c3c3;
  padding: max(1vw, 8px);
  text-decoration: none;
}

nav a:focus,
nav a:hover {
  background-color: #425656;
  outline: none;
}

header {
  align-items: center;
  color: #abb1be;
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  font-size: 2em;
  justify-content: center;
  padding: max(1vw, 8px);
}

h1 {
  font-family: 'OCR A', 'Roboto Mono', Consolas, monaco, monospace;
  hyphens: auto;
  margin-bottom: 0;
  word-break: break-word;
}

h1 + p {
  font-family: 'Roboto Mono', Consolas, monaco, monospace;
  margin-top: 0;
}

main {
  background-color: #8992a4;
  color: #252930;
}

#projects {
  display: grid;
  grid-gap: max(2vw, 16px);
  padding: max(2vw, 16px);
}

@media only screen and (min-width: 800px) {
  #projects {
    grid-template-columns: repeat(3, 1fr);
  }

  #projects > h2 {
    grid-area: 1/1/1/4;
  }
}

h2,
h3 {
  font-family: 'Roboto Mono', Consolas, monaco, monospace;
}

h2 {
  font-size: 2em;
  text-align: center;
}

article {
  background-color: #282c34;
  box-shadow: 4px 4px 4px #4f5766;
  color: #abb1be;
  display: flex;
  flex-direction: column;
  padding: max(1vw, 8px);
}

article h3 {
  background-color: #abb1be;
  color: #282c34;
  padding: max(.5vw, 4px) max(1vw, 8px);
}

article > div {
  flex-grow: 1;
}

.project-link {
  align-self: flex-end;
  background-color: #354545;
  color: #b1c3c3;
  flex-grow: 0;
  margin-top: 2em;
  max-width: 33%;
  padding: max(1vw, 8px);
  text-align: center;
  text-decoration: none;
}

.project-link:hover {
  background-color: #425656;
}

footer {
  background-color: #3a3545;
  color: #b6b1c3;
  display: inline-block;
  text-align: center;
  width: 100%;
}

footer a {
  color: inherit;
  font-weight: bold;
}

footer a:hover {
  color: #9992ab;
}

'use strict';

/**
 * This function adjusts the top margin of a non-fixed element in a container
 * with a fixed one above it so that the fixed element doesn't possibly overlap
 * with it.
 * @param {htmlElement} fixedElement
 * @param {htmlElement} notFixedElement
 */
const adjustNotFixedElement = (fixedElement, notFixedElement) => {
  notFixedElement.style.marginTop = fixedElement.offsetHeight + 'px';
};

const projectName = 'portfolio';

const navbar = document.getElementById('navbar');
const header = document.getElementById('header');

adjustNotFixedElement(navbar, header);

window.addEventListener('resize', () => adjustNotFixedElement(navbar, header));