The following code is a portfolio website that has not been optimized for mobile:

HTML:
HTML Code:
<ul class="navigation">
  <li><h1>David Day</h1></li>
  <li>
    <ul>
      <li><a href="#bg-1">About</a></li>
      <li><a href="#bg-2">Projects</a></li>
      <li><a href="#bg-3">References</a></li>
      <li><a href="#bg-4">Contact</a></li>
    </ul>
  </li>
</ul>
<div class="section" id="bg-1">
  <h2>About</h2>
  <img alt="Your Face" src="https://a.cdnmktg.com/p/gdeBRNYTd_MeFbYcgbR67gCTjULJJBEn5oxWpx7mTSI/359x450.jpg" />
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus purus mi, posuere in leo eget, elementum elementum dui.</p>
</div>
<div class="section" id="bg-2">
  <h2>Projects</h2>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras ultricies scelerisque lectus, nec accumsan massa cursus nec.</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi hendrerit ac leo sit amet mollis. In rhoncus.</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus dapibus ut risus ac.</p>
</div>
<div class="section" id="bg-3">
  <h2>References</h2>
  <blockquote>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras ultricies.</p>
    <cite>Reference 1</cite>
  </blockquote>
  <blockquote>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
    <cite>Reference 2</cite>
  </blockquote>
</div>
<div class="section" id="bg-4">
  <h2>Contact</h2>
  <p>If you have a project that you want to get started and think I can help you, then get in touch.</p>
  <p>
    <span itemprop="telephone">
      <a href="tel:+15551234567">(555)123-4567</a>
    </span>
    <span> | </span>
    <span itemprop="email">
      <a href="mailto:email@domain.com">email@domain.com</a>
    </span>
  </p>
</div>
CSS:
Code:
body {
  margin: 0;
  letter-spacing: 0.1em;
}

/* navigation */
ul.navigation {
  color: #777;
  list-style-type: none;
  margin: 0;
  padding: 0.75em 0em;
  width: 100%;
}

ul.navigation li {
  display: inline;
  line-height: 2em;
  margin: 0;
  padding: 0;
}

ul.navigation h1 {display: inline;}

ul.navigation ul {
  display: inline;
  float: right;
}

ul.navigation a {
  color: inherit;
  font-size: 1.25em;
  padding: 0.25em;
  text-decoration: none;
}

ul.navigation a:hover {color: #0074D9;}

/* sections */
.section {
  color: #ffffff;
  padding: 0.25em 5%;
  text-align: center;
}

.section h2 {
  margin: 0;
  padding: 1.5em 0;
}

.section img{
  border: 1px solid #000;
  border-radius: 50%;
  max-height: 150px;
  max-width: 150px;
  min-height: 150px;
  min-width: 150px;
  overflow: hidden;
}

.section p {
  margin: 0;
  padding: 1em 0;
}

.section blockquote {
  display: block;
  padding: 0.5em 1em;
}

.section blockquote::before {
  content: '\201C';
  font-size: 5em;
  font-weight: bold;
  line-height: 1.2em;
  position: absolute;
  left: 0.5em;
}

.section blockquote::after {content: '';}
.section blockquote p {text-align: right;}

.section a {
  color: #3D9900;
  font-weight: bold;
  text-decoration: none;
}

.section a:hover {text-decoration: underline;}

#bg-1 {background-color: #0074D9;}
#bg-2 {background-color: #FF4136;}
#bg-3 {background-color: #3D9900;}
#bg-4 {background-color: #001F3F;}
Fiddle: http://codepen.io/anon/pen/aBeKze