[Feature]: Bio

layouts/index.html

@@ -3,6 +3,30 @@
 <header class="grid" id="home">
   <div class="grid__col grid__col--1-of-2">
     {{{ contents }}}
+
+    <label for="morebio">
+      <a>Bio...</a>
+    </label>
+
+    <input type="checkbox" id="morebio" />
+
+    <aside id="bio">
+      <img src="/assets/photo.jpg" alt="Rainbow haired smiling gentlemen" />
+      <p>
+        <small>
+          Passionate interactive experience crafter breathing the merger of design and development.
+        </small>
+      </p>
+      <p>
+        <small class="secondary">
+          💖 Remote gigs.
+          <br />
+          🎤 Happy to speak at your event.
+          <br />
+          👂 Open to hearing opportunities.
+        </small>
+      </p>
+    </aside>
   </div>
 
   <img id="logo" class="grid__col grid__col--1-of-2" src="../../assets/site/logo.png" alt="" />

partials/header/index.html

@@ -12,7 +12,7 @@
 
   <header class="text-code">
     <div class="wrapper">
-      [ <a href="#">sharpshark28<span class="normal">@</span><span class="secondary">joewroten.com</span></a> ] <span class="text-success">(master)</span> <span class="dim">~/portfolio</span>
+      [ <a href="mailto:joe@wroten.me">joe<span class="normal">@</span><span class="secondary">wroten.me</span></a> ] <span class="text-success">(master)</span> <span class="dim">~/portfolio</span>
       <br />
       <span class="text-success">⟩</span> npm start wow
       <br />

src/app.scss

@@ -38,6 +38,10 @@ body {
   }
 }
 
+a {
+  cursor: pointer;
+}
+
 #logo {
   margin-top: 2rem;
   width: 14rem;
@@ -191,6 +195,30 @@ video {
   padding-top: 0;
 }
 
+#morebio {
+  visibility: hidden;
+}
+
+#bio {
+  overflow: hidden;
+  max-height: 0;
+  transition: max-height 1s;
+
+  .secondary {
+    color: $secondary-dark;
+  }
+
+  img {
+    width: auto;
+    float: left;
+    padding-right: .5em;
+  }
+}
+
+#morebio:checked + #bio {
+  max-height: 10em;
+}
+
 .posts {
   list-style-type: none;
   padding: 0;