Skip to content
Permalink
Browse files

Add some content to about page

Also clean up image alignment
  • Loading branch information...
TheBiggerGuy committed Sep 2, 2018
1 parent 4023c61 commit 40f9ea583e63000a0408e99d1fe1ebfe3e38d889
@@ -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;
}
}
Binary file not shown.
@@ -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>
@@ -42,7 +42,7 @@
{{ "<!-- end hero -->" | safeHTML }}


<div class="container">
<div class="container section-{{ .Section }}">
{{ "<!-- Start header -->" | safeHTML }}
{{- block "header" . }}
<header>

0 comments on commit 40f9ea5

Please sign in to comment.
You can’t perform that action at this time.