Resume, about section

src/assets/stylesheet.css

@@ -254,6 +254,51 @@ a {
   overflow: hidden;
 }
 
+.popup {
+  position: fixed;
+  top: 0;
+  right: 0;
+  left: 0;
+  bottom: 0;
+  z-index: 10;
+  transform: translateX(-100vw);
+  opacity: 0;
+  transition: opacity .35s;
+}
+.popup.open {
+  transform: translateX(0);
+  opacity: 1;
+}
+#about {
+  background: linear-gradient(-20deg, rgba(251, 181, 217, 0) 50%, rgba(250, 206, 190, 1)), linear-gradient(20deg, #92E8FD, #FCBADB);
+}
+.about-close {
+  position: absolute;
+  top: 0;
+  right: 1rem;
+  color: white;
+}
+.about-image {
+  width: 185px;
+  margin: 1rem auto;
+  display: block;
+  border-radius: 50%;
+  box-shadow: 0 5px 15px rgba(0,0,0,.4);
+}
+.about-links {
+  list-style-type: none;
+  font-size: 2rem;
+  line-height: 4rem;
+}
+.about-links a {
+  text-decoration: none;
+  display: flex;
+  align-items: center;
+}
+.about-links svg {
+  margin-right: 1rem;
+}
+
 .footer {
   font-size: 75%;
   margin-top: 3rem;

src/icons/close.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M24 20.188l-8.315-8.209 8.2-8.282-3.697-3.697-8.212 8.318-8.31-8.203-3.666 3.666 8.321 8.24-8.206 8.313 3.666 3.666 8.237-8.318 8.285 8.203z"/></svg>

src/icons/email.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M24 0l-6 22-8.129-7.239 7.802-8.234-10.458 7.227-7.215-1.754 24-12zm-15 16.668v7.332l3.258-4.431-3.258-2.901z"/></svg>

src/icons/instagram.svg

@@ -0,0 +1,6 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
+	<path style="fill:#000000" d="M256,49.471c67.266,0,75.233.257,101.8,1.469,24.562,1.121,37.9,5.224,46.778,8.674a78.052,78.052,0,0,1,28.966,18.845,78.052,78.052,0,0,1,18.845,28.966c3.45,8.877,7.554,22.216,8.674,46.778,1.212,26.565,1.469,34.532,1.469,101.8s-0.257,75.233-1.469,101.8c-1.121,24.562-5.225,37.9-8.674,46.778a83.427,83.427,0,0,1-47.811,47.811c-8.877,3.45-22.216,7.554-46.778,8.674-26.56,1.212-34.527,1.469-101.8,1.469s-75.237-.257-101.8-1.469c-24.562-1.121-37.9-5.225-46.778-8.674a78.051,78.051,0,0,1-28.966-18.845,78.053,78.053,0,0,1-18.845-28.966c-3.45-8.877-7.554-22.216-8.674-46.778-1.212-26.564-1.469-34.532-1.469-101.8s0.257-75.233,1.469-101.8c1.121-24.562,5.224-37.9,8.674-46.778A78.052,78.052,0,0,1,78.458,78.458a78.053,78.053,0,0,1,28.966-18.845c8.877-3.45,22.216-7.554,46.778-8.674,26.565-1.212,34.532-1.469,101.8-1.469m0-45.391c-68.418,0-77,.29-103.866,1.516-26.815,1.224-45.127,5.482-61.151,11.71a123.488,123.488,0,0,0-44.62,29.057A123.488,123.488,0,0,0,17.3,90.982C11.077,107.007,6.819,125.319,5.6,152.134,4.369,179,4.079,187.582,4.079,256S4.369,333,5.6,359.866c1.224,26.815,5.482,45.127,11.71,61.151a123.489,123.489,0,0,0,29.057,44.62,123.486,123.486,0,0,0,44.62,29.057c16.025,6.228,34.337,10.486,61.151,11.71,26.87,1.226,35.449,1.516,103.866,1.516s77-.29,103.866-1.516c26.815-1.224,45.127-5.482,61.151-11.71a128.817,128.817,0,0,0,73.677-73.677c6.228-16.025,10.486-34.337,11.71-61.151,1.226-26.87,1.516-35.449,1.516-103.866s-0.29-77-1.516-103.866c-1.224-26.815-5.482-45.127-11.71-61.151a123.486,123.486,0,0,0-29.057-44.62A123.487,123.487,0,0,0,421.018,17.3C404.993,11.077,386.681,6.819,359.866,5.6,333,4.369,324.418,4.079,256,4.079h0Z"/>
+	<path style="fill:#000000" d="M256,126.635A129.365,129.365,0,1,0,385.365,256,129.365,129.365,0,0,0,256,126.635Zm0,213.338A83.973,83.973,0,1,1,339.974,256,83.974,83.974,0,0,1,256,339.973Z"/>
+	<circle style="fill:#000000" cx="390.476" cy="121.524" r="30.23"/>
+</svg>

src/icons/unsplash.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" width="390" height="390"><title>Unsplashed logo: symbol of a camera</title><path d="M20.8 18.1c0 2.7-2.2 4.8-4.8 4.8s-4.8-2.1-4.8-4.8c0-2.7 2.2-4.8 4.8-4.8 2.7.1 4.8 2.2 4.8 4.8zM32 10.7v14.9c0 2.3-1.9 4.3-4.3 4.3H4.3C1.9 29.9 0 28 0 25.6v-15c0-2.3 1.9-4.3 4.3-4.3H8L8.8 4c.4-1.1 1.7-2 2.9-2h8.6c1.2 0 2.5.9 2.9 2l.8 2.4h3.7c2.4 0 4.3 1.9 4.3 4.3zm-8.6 7.5c0-4.1-3.3-7.5-7.5-7.5-4.1 0-7.5 3.4-7.5 7.5s3.3 7.5 7.5 7.5c4.2-.1 7.5-3.4 7.5-7.5z"/></svg>

src/icons/writing.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M12.014 6.54s2.147-3.969 3.475-6.54l8.511 8.511c-2.583 1.321-6.556 3.459-6.556 3.459l-5.43-5.43zm-8.517 6.423s-1.339 5.254-3.497 8.604l.827.826 3.967-3.967c.348-.348.569-.801.629-1.288.034-.27.153-.532.361-.74.498-.498 1.306-.498 1.803 0 .498.499.498 1.305 0 1.803-.208.209-.469.328-.74.361-.488.061-.94.281-1.288.63l-3.967 3.968.826.84c3.314-2.133 8.604-3.511 8.604-3.511l4.262-7.837-3.951-3.951-7.836 4.262z"/></svg>

src/templates/index.hbs

@@ -7,32 +7,35 @@
   <link href="https://fonts.googleapis.com/css?family=Slabo+27px|Source+Code+Pro|Source+Sans+Pro:300" rel="stylesheet"> 
 
   <meta charset="UTF-8">
-  <meta name="author" content="Joe Wroten">
+  <meta name="author" content="Jo Wroten">
   <meta name="description" content="Web engineer realizing the best tools to communicate valuable information to the people who need it.">
   <meta name="keywords" content="developer,designer,engineer,web,portfolio">
   <meta name="viewport" content="width=device-width; height=device-height; maximum-scale=1.4; initial-scale=1.0; user-scalable=yes">
 </head>
 <body class="index">
   <header class="index-header -container -pad-h -pad-v">
-    <a href="/" class="index-menulink">
+    <!--<a href="/" class="index-menulink">
       <svg viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
           <use xlink:href="./assets/spritesheet.svg#menu" />
       </svg>
-    </a>
-    <a href="#" class="about-link">
-      <img class="about-link-image" src="./assets/avatar-small.png" alt="About Joe Wroten" />
+    </a>-->
+    <a href="#" class="about-link" onclick="document.getElementById('about').classList.toggle('open')">
+      <img class="about-link-image" src="./assets/avatar-small.png" alt="About Jo Wroten" />
     </a>
   </header>
+  <div class="popup" id="about">
+    {{> about}}
+  </div>
   <main class="index-top -container -pad-h">
     <h1 class="intro">
       Canine pretending to be a <em>web engineer</em>
     </h1>
     <div class="index-top-info">
       <h2 class="name -mar-no">
-        <em>Joe Wroten</em>
+        <em>Jo Wroten</em>
       </h2>
       <div>
-        <a href="#">
+        <a href="./assets/resume.pdf">
           <em>
             <svg class="index-interiorlink-icon" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
               <use xlink:href="./assets/spritesheet.svg#resume" />

src/templates/interior.hbs

@@ -8,7 +8,7 @@
   <link href="https://fonts.googleapis.com/css?family=Slabo+27px|Source+Code+Pro|Source+Sans+Pro:300" rel="stylesheet"> 
 
   <meta charset="UTF-8">
-  <meta name="author" content="Joe Wroten">
+  <meta name="author" content="Jo Wroten">
   <meta name="description" content="Web engineer realizing the best tools to communicate valuable information to the people who need it.">
   <meta name="keywords" content="developer,designer,engineer,web,portfolio">
   <meta name="viewport" content="width=device-width; height=device-height; maximum-scale=1.4; initial-scale=1.0; user-scalable=yes">
@@ -21,8 +21,8 @@
             <use xlink:href="./assets/spritesheet.svg#back" />
         </svg>
       </a>
-      <a href="#" class="about-link">
-        <img class="about-link-image" src="./assets/avatar-small.png" alt="About Joe Wroten" />
+      <a href="#" class="about-link" onclick="document.getElementById('about').classList.toggle('open')">
+        <img class="about-link-image" src="./assets/avatar-small.png" alt="About Jo Wroten" />
       </a>
     </div>
     <div class="interior-headline -{{pageType}} -pad-h -pad-v">
@@ -34,6 +34,9 @@
       </h1>
     </div>
   </header>
+  <div class="popup" id="about">
+    {{> about}}
+  </div>
   <main class="interior-content -container -pad-h -pad-v">
     <article>
       <header class="-clearfix">

src/templates/partials/about.hbs

@@ -0,0 +1,52 @@
+<div class="-container">
+  <a href="#" class="about-close" onclick="document.getElementById('about').classList.remove('open')">
+    <svg viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+        <use xlink:href="./assets/spritesheet.svg#close" />
+    </svg>
+  </a>
+
+  <img class="about-image" src="./assets/avatar-large.png" alt="About Jo Wroten" />
+
+  <ul class="about-links">
+    <li>
+      <a href="mailto:jo@wroten.me">
+        <svg viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+            <use xlink:href="./assets/spritesheet.svg#email" />
+        </svg>
+        Jo@Wroten.me
+      </a>
+    </li>
+    <li>
+      <a href="./assets/resume.pdf">
+        <svg viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+            <use xlink:href="./assets/spritesheet.svg#resume" />
+        </svg>
+        Resume
+      </a>
+    </li>
+    <li>
+      <a href="https://wrotenwrites.com/">
+        <svg viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+            <use xlink:href="./assets/spritesheet.svg#writing" />
+        </svg>
+        Writing
+      </a>
+    </li>
+    <li>
+      <a href="https://www.instagram.com/gaiety.art/">
+        <svg viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+            <use xlink:href="./assets/spritesheet.svg#instagram" />
+        </svg>
+        Instagram
+      </a>
+    </li>
+    <li>
+      <a href="https://unsplash.com/@sharpshark28">
+        <svg viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+            <use xlink:href="./assets/spritesheet.svg#unsplash" />
+        </svg>
+        Unsplash
+      </a>
+    </li>
+  </ul>
+</div>

src/templates/partials/example.hbs

@@ -1 +0,0 @@
-foo

src/templates/partials/footer.hbs

@@ -1,5 +1,5 @@
 <footer class="footer -container -pad-h">
-  Portfolio designed and coded by Joe Wroten | 
-  <a href="mailto:joe@wroten.me">joe@wroten.me</a> |
+  Portfolio designed and coded by Jo Wroten | 
+  <a href="mailto:jo@wroten.me">jo@wroten.me</a> |
   <a href="https://github.com/sharpshark28/portfolio">Project Repo</a>
 </footer>