centered things, added gravatar picture, grayscale collor palette

This commit is contained in:
2018-12-08 17:12:43 -05:00
parent 5e75dcbaeb
commit 1a2bf0809b
2 changed files with 43 additions and 31 deletions

View File

@@ -6,10 +6,12 @@
<link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet"> <link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet">
<style> <style>
body {font-family: "Open Sans", sans-serif} body {font-family: "Open Sans", sans-serif}
.h0 {font-size: 30pt;} .h0 {font-size: 30pt}
nav a[target="_blank"]:after {content: url("./static/_external_link.png"); nav a[target="_blank"]:after {content: url("./static/_external_link.png");
filter: invert(100%);} filter: invert(100%)}
.current-page {opacity: .3;} .current-page {opacity: .3}
@media (min-width: 900px) { #content { width: 50%} }
@media (min-width: 1px) and (max-width: 899px) { #content { width: 80%} }
</style> </style>
<script src="./static/_nav.js"></script> <script src="./static/_nav.js"></script>
@@ -25,9 +27,11 @@
</script> </script>
</head> </head>
<body> <body class="center">
<header class="m2 clearfix"> <header class="m2 clearfix">
<img style="border-radius: 20%" src="https://www.gravatar.com/avatar/fe783e04644862c30823614f31b9a996/?s=360" />
<div class="h0 bold"> <div class="h0 bold">
<a id="title" href="/" style="text-decoration: none; color: inherit;">Zev Averbach</a> <a id="title" href="/" style="text-decoration: none; color: inherit;">Zev Averbach</a>
</div> </div>
@@ -40,7 +44,7 @@
<a href="/" <a href="/"
class="btn btn-primary not-rounded py2" class="btn btn-primary not-rounded py2"
style="color: #80bfff; background: #001f3f;">About</a> style="color: #222; background: #ded5d1;">About</a>
@@ -49,7 +53,7 @@
<a href="projects" <a href="projects"
class="btn btn-primary not-rounded py2" class="btn btn-primary not-rounded py2"
style="color: #b3dbff; background: #0074D9;">Projects</a> style="color: #222; background: #d4c8c4;">Projects</a>
@@ -60,7 +64,7 @@
target="_blank" target="_blank"
style="color: #004966; background: #7FDBFF;">Resume</a> style="color: #222; background: #cabbb7;">Resume</a>
@@ -71,7 +75,7 @@
target="_blank" target="_blank"
style="color: #0e3e14; background: #2ECC40;">LinkedIn</a> style="color: #222; background: #bdb0ac;">LinkedIn</a>
@@ -82,7 +86,7 @@
target="_blank" target="_blank"
style="color: #00662c; background: #01FF70;">Github</a> style="color: #222; background: #8c8080;">Github</a>
@@ -91,7 +95,7 @@
</nav> </nav>
</header> </header>
<div id="content" class="clear h2 m2 sm-col sm-col-12 md-col-10 lg-col-8"> <div id='content' style="margin: 0 auto">
<p class="mx2 ml2 h3">Hi, my name is Zev. I'm a full stack web developer living in Burlington, Vermont.</p> <p class="mx2 ml2 h3">Hi, my name is Zev. I'm a full stack web developer living in Burlington, Vermont.</p>
@@ -101,7 +105,7 @@
and contracts. and contracts.
My preferred stack is</p> My preferred stack is</p>
<ul class="h3 ml2"> <ul class="h3" style="margin: 0 auto; text-align: left; width: 10%">
<li>React.js</li> <li>React.js</li>
<li>Python</li> <li>Python</li>
<li>Flask</li> <li>Flask</li>
@@ -111,7 +115,7 @@
<li>AWS</li> <li>AWS</li>
</ul> </ul>
<p class="mx2 ml2 h3">I love to help forward-looking businesses solve their worst headaches via technology. <p class="mt2 mx2 ml2 h3">I love to help forward-looking businesses solve their worst headaches via technology.
<a href="/projects">Here</a> are a few projects I've completed to that effect. <a href="/projects">Here</a> are a few projects I've completed to that effect.
</p> </p>

View File

@@ -6,10 +6,12 @@
<link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet"> <link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet">
<style> <style>
body {font-family: "Open Sans", sans-serif} body {font-family: "Open Sans", sans-serif}
.h0 {font-size: 30pt;} .h0 {font-size: 30pt}
nav a[target="_blank"]:after {content: url("./static/_external_link.png"); nav a[target="_blank"]:after {content: url("./static/_external_link.png");
filter: invert(100%);} filter: invert(100%)}
.current-page {opacity: .3;} .current-page {opacity: .3}
@media (min-width: 900px) { #content { width: 50%} }
@media (min-width: 1px) and (max-width: 899px) { #content { width: 80%} }
</style> </style>
<script src="./static/_nav.js"></script> <script src="./static/_nav.js"></script>
@@ -25,9 +27,11 @@
</script> </script>
</head> </head>
<body> <body class="center">
<header class="m2 clearfix"> <header class="m2 clearfix">
<img style="border-radius: 20%" src="https://www.gravatar.com/avatar/fe783e04644862c30823614f31b9a996/?s=360" />
<div class="h0 bold"> <div class="h0 bold">
<a id="title" href="/" style="text-decoration: none; color: inherit;">Zev Averbach</a> <a id="title" href="/" style="text-decoration: none; color: inherit;">Zev Averbach</a>
</div> </div>
@@ -40,7 +44,7 @@
<a href="/" <a href="/"
class="btn btn-primary not-rounded py2" class="btn btn-primary not-rounded py2"
style="color: #80bfff; background: #001f3f;">About</a> style="color: #222; background: #ded5d1;">About</a>
@@ -49,7 +53,7 @@
<a href="projects" <a href="projects"
class="btn btn-primary not-rounded py2" class="btn btn-primary not-rounded py2"
style="color: #b3dbff; background: #0074D9;">Projects</a> style="color: #222; background: #d4c8c4;">Projects</a>
@@ -60,7 +64,7 @@
target="_blank" target="_blank"
style="color: #004966; background: #7FDBFF;">Resume</a> style="color: #222; background: #cabbb7;">Resume</a>
@@ -71,7 +75,7 @@
target="_blank" target="_blank"
style="color: #0e3e14; background: #2ECC40;">LinkedIn</a> style="color: #222; background: #bdb0ac;">LinkedIn</a>
@@ -82,7 +86,7 @@
target="_blank" target="_blank"
style="color: #00662c; background: #01FF70;">Github</a> style="color: #222; background: #8c8080;">Github</a>
@@ -91,17 +95,18 @@
</nav> </nav>
</header> </header>
<div id="content" class="clear h2 m2 sm-col sm-col-12 md-col-10 lg-col-8"> <div id='content' style="margin: 0 auto">
<p class="mx2 ml2 h3"> <p class="mx2 h3">
All of these projects are closed source, but the code may be viewed by way of an NDA. All of these projects are closed source, but the code may be viewed by way of an NDA.
To see some of my open-source work, please see To see some of my open-source work, please see
<a target="_blank" href="https://github.com/zevaverbach/">my Github profile (external link)</a>. <a target="_blank" href="https://github.com/zevaverbach/">my Github profile (external link)</a>.
</p> </p>
<div id="tappt" class="ml2"> <hr>
<div id="tappt">
<span class="h1">Transcribely</span> <span class="h1">Transcribely</span>
<p class="ml2 mt1 h3"> <p class="mt1 h3">
In late 2018 at the Recurse Center I made a prototype of In late 2018 at the Recurse Center I made a prototype of
a human-machine transcription interface I like to call a human-machine transcription interface I like to call
<a href="https://transcribely.netlify.com" target="_blank"> <a href="https://transcribely.netlify.com" target="_blank">
@@ -111,10 +116,11 @@
</p> </p>
</div> </div>
<hr>
<div id="tappt" class="ml2"> <div id="tappt">
<span class="h1">Tappt</span> <span class="h1">Tappt</span>
<p class="ml2 mt1 h3"> <p class="mt1 h3">
In 2015 a couple friends and I made In 2015 a couple friends and I made
<a href="https://www.tappt.co" target="_blank"> <a href="https://www.tappt.co" target="_blank">
Tappt (external link)</a> Tappt (external link)</a>
@@ -124,9 +130,10 @@
</p> </p>
</div> </div>
<div id="auto-assigner" class="ml2"> <hr>
<div id="auto-assigner">
<span class="h1">Auto-Assigner</span> <span class="h1">Auto-Assigner</span>
<p class="ml2 mt1 h3"> <p class="mt1 h3">
In the fall of 2017 I designed, implemented, and deployed a In the fall of 2017 I designed, implemented, and deployed a
work assigner for work assigner for
<a href="https://avtranscription.com" target="_blank"> <a href="https://avtranscription.com" target="_blank">
@@ -138,9 +145,10 @@
</p> </p>
</div> </div>
<div id="auto-invoicer" class="ml2"> <hr>
<div id="auto-invoicer">
<span class="h1">Automatic Invoice Generation</span> <span class="h1">Automatic Invoice Generation</span>
<p class="ml2 mt1 h3"> <p class="mt1 h3">
In the summer of 2016 I designed, implemented, and deployed In the summer of 2016 I designed, implemented, and deployed
automatic invoice generation for automatic invoice generation for
<a href="https://avtranscription.com" target="_blank"> <a href="https://avtranscription.com" target="_blank">