Add some content to about page

Also clean up image alignment
TheBiggerGuy · Sep 21, 2018 · 40f9ea5 · 40f9ea5
1 parent 4023c61
commit 40f9ea5
Show file tree

Hide file tree

Showing 4 changed files with 82 additions and 38 deletions.
diff --git a/site/assets/scss/main.scss b/site/assets/scss/main.scss
@@ -67,4 +67,55 @@ $modal-xl: 1200px !default;
 
 @include media-breakpoint-up(sm) {
   .modal-xl { max-width: $modal-xl; }
+}
+
+
+.section-about {
+  $media-width: 150px;
+  $media-height: 150px;
+
+  #head-shot-container img {
+      transition: opacity 1s ease;
+  }
+
+  #head-shot {
+      opacity: 1;
+      z-index: 0;
+  }
+
+  #head-shot-hover {
+      opacity: 0;
+      z-index: 1;
+      position: relative;
+      top: -$media-height;
+  }
+
+  #head-shot-container:hover {
+    #head-shot {
+      opacity: 0;
+    }
+
+    #head-shot-hover {
+      opacity: 1;
+    }
+  }
+
+  .media-token-img {
+    /* flex: none; */
+    width: $media-width;
+    height: $media-height;
+
+    img {
+      width: $media-width;
+      height: $media-height;
+    }
+
+    span {
+      font-size: ($media-width / 1.25);
+    }
+  }
+
+  .media-body {
+    margin-left: 10px;
+  }
 }
diff --git a/site/content/about/1016695_692193627473392_1354454202_n.jpg b/site/content/about/1016695_692193627473392_1354454202_n.jpg
diff --git a/site/content/about/_index.md b/site/content/about/_index.md
@@ -9,40 +9,33 @@ hideDescription: true
 
 ---
 
-<style type="text/css">
-    #head-shot-container {
-        width: 200px;
-        height: 200px;
-    }
-    #head-shot-container img {
-        transition: opacity 1s ease;
-    }
-    #head-shot {
-        opacity: 1;
-        z-index: 0;
-    }
-    #head-shot-hover {
-        opacity: 0;
-        z-index: 1;
-        position: relative;
-        top: -200px;
-    }
-    #head-shot-container:hover #head-shot {
-        opacity: 0;
-    }
-    #head-shot-container:hover #head-shot-hover {
-        opacity: 1;
-    }
-</style>
-
-<div class="media">
-    <div id="head-shot-container" class="align-self-start mr-3">
-        <img class="rounded-circle" src="head-shot.jpg" alt="Head shot of Guy" id="head-shot">
-        <img class="rounded-circle" src="head-shot-hover.png" alt="Cartoon image of Guy" id="head-shot-hover">
-    </div>
-    <div class="media-body">
-        <h5 class="mt-0">Guy Taylor</h5>
-        <p>I am a Software Engineer working in Edinburgh who enjoys great coffee, walking in the middle of nowhere and hacking on interesting things.</p>
-        <p>In tech I am interested in communications, security and anything that is actually interesting.</p>
-    </div>
-</div>
+<ul class="list-unstyled mt-3">
+    <li class="media">
+        <div id="head-shot-container" class="media-token-img">
+            <img class="rounded-circle" src="head-shot.jpg" alt="Head shot of Guy" id="head-shot">
+            <img class="rounded-circle" src="head-shot-hover.png" alt="Cartoon image of Guy" id="head-shot-hover">
+        </div>
+        <div class="media-body">
+            <h3>About Guy</h3>
+            <p class="lead">I am a Software Engineer working in Edinburgh who enjoys great coffee, walking in the middle of nowhere and hacking on interesting things.</p>
+            <p>In tech I am interested in communications, security and anything that is actually interesting. I have a tendency to laugh at buzzword but work 12 hours straight on projects that excite me.</p>
+        </div>
+    </li>
+    <li class="media">
+        <img class="rounded-circle media-token-img" src="1016695_692193627473392_1354454202_n.jpg" alt="Amazon logo">
+        <div class="media-body">
+            <h3>Software Engineering</h3>
+            <p class="lead">As a full stack Software Developer at Amazon I worked daily on low latency and high transaction global services.</p>
+            <p>Focusing my work in the <i>Dynamic Advertising</i> team I help design and run multi terabyte analytic and machine learning systems along with the low latency hight throughput <i>Real Time Bidding</i> services.</p>
+        </div>
+    </li>
+    <li class="media">
+        <div class="rounded-circle media-token-img">
+            <span class="fas fa-trophy fa-fw"></span>
+        </div>
+        <div class="media-body">
+            <h3>Achievements</h3>
+            <p>Through my work at Amazon I gained a patent for <i>"Video advertisement customization by compositing"</i> <a href="https://patents.google.com/patent/US9894423B1/en" class="text-muted">#9894423B1</a></p>
+        </div>
+    </li>
+</ul>
diff --git a/site/layouts/_default/baseof.html b/site/layouts/_default/baseof.html
@@ -42,7 +42,7 @@
         {{ "<!-- end hero -->" | safeHTML }}
 
 
-        <div class="container">
+        <div class="container section-{{ .Section }}">
             {{ "<!-- Start header -->" | safeHTML }}
             {{- block "header" . }}
             <header>