-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
executable file
·66 lines (62 loc) · 4.98 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Global site tag (gtag.js) - Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=UA-51741214-1"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'UA-51741214-1');
</script>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Oh, hi Marps.</title>
<link rel="shortcut icon" href="./favicon.ico">
<meta name="description" content="Alex Marple is a real cool guy.">
<meta name="keywords" content="Alex Marple, web developer, web engineer, front-end engineer, frontend engineer, Marple, front-end developer, frontend developer, fullstack engineer, full-stack engineer, javascript engineer">
<link href="https://fonts.googleapis.com/css?family=Bungee+Shade" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Lato" rel="stylesheet">
<style>html{box-sizing:border-box}body,html{width:100%;height:100%;margin:0;padding:0}body{background:#f5ede3;font-family:Lato,sans-serif}.stripe{height:20px;border-bottom:5px solid #f4d03f;background:#f60}.info{display:flex;flex-direction:column;align-items:center}h1{font-size:6em;margin-top:60px;margin-bottom:60px;font-family:'Bungee Shade',sans-serif}.intro,.work,.life,.email,.links{width:55vw;text-align:center}.links a{font-size:2.5em;margin:5px;color:#f60}.emoji{font-size:1.7em}p{font-size:1.7em;margin-bottom:10px;margin-top:10px}a{color:#69f;text-decoration:none;transition:1s}a:hover{background:#f4d03f;color:#000}hr{width:20%;border:1px solid #154890;margin:30px 0}@media (max-width:1276px){h1{font-size:4em;text-align:center}.email,.intro,.life,.links,.work{width:90vw}.links{margin-bottom:60px}}.dark-blue{color:#154890}.light-blue{color:#69f}.orange{color:#f60}.yellow{color:#f4d03f}.green{color:#229954}</style>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.3.1/css/all.css" integrity="sha384-mzrmE5qonljUremFsqc01SB46JvROS7bZs3IO2EmfFsd15uHvIt+Y8vEf7N7fWAU" crossorigin="anonymous">
</head>
<body>
<div class="stripe"></div>
<main class="info">
<section class="name">
<h1><span>H</span><span>i</span><span>,</span> <span>I</span><span>'</span><span>m</span> <span>A</span><span>l</span><span>e</span><span>x</span> <span>M</span><span>a</span><span>r</span><span>p</span><span>l</span><span>e</span></h1>
</section>
<section class="intro">
<p>I'm a software engineer living in the Bay Area.</p>
</section>
<section class="work">
<p>I'm the founder and chief engineer of <a href="https://www.silcrowai.com" target='_blank'>SilcrowAI</a>. I've also worked at <a href="https://www.authzed.com" target="_blank" aria-label="AuthZed">AuthZed</a>, <a href="https://www.documentcrunch.com" target="_blank" aria-label="Document Crunch">Document Crunch</a>, <a href="https://www.meltano.com">Meltano</a>, <a href="https://www.postlight.com">Postlight</a>, <a href="https://www.elizabethwarren.com" target="_blank" aria-label="Elizabeth Warren for president">Warren for President</a>, <a href="https://www.redhat.com" target="_blank" aria-label="Red Hat website">Red Hat</a>, <a href="https://www.coreos.com" target="_blank" aria-label="CoreOS website">CoreOS</a>, and <a href="https://www.digitas.com" target="_blank" aria-label="Digitas website">Digitas</a>. In another life I worked at <a href="https://www.perkinscoie.com" target="_blank" aria-label="Perkins Coie website">Perkins Coie</a> and at the <a href="http://www.leg.wa.gov" target="_blank" aria-label="Washington State Senate website">Washington State Senate</a>.</p>
</section>
<section class="life">
<p>In my free time I like to <span class="emoji">🏃</span>, pet my <span class="emoji">🐕</span>, and <span class="emoji">🍳</span>.</p>
</section>
<section class="email">
<p>Need something? <a href="mailto:[email protected]" aria-label="Send an email to Alex Marple">Feel free to get at me.</a></p>
</section>
<hr>
<section class="links">
<a href="https://www.linkedin.com/in/alexmarple" aria-label="Alex Marple's LinkedIn page"><i class="fab fa-linkedin-in"></i></a>
<a href="https://www.github.com/alexmarple" aria-label="Alex Marple's GitHub page"><i class="fab fa-github"></i></a>
</section>
</main>
<script type="text/javascript">
const letters = document.querySelectorAll('.name h1 span');
const colorClasses = ["dark-blue", "light-blue", "orange", "yellow", "green"];
let offset = 0;
const timer = window.setInterval(() => {
letters.forEach((letter, index) =>{
const classnameIndex = (offset + index) % colorClasses.length;
letter.className = colorClasses[classnameIndex];
});
++offset;
}, 1000);
console.log("%cIs there life on Mars?", "background: tomato; color: #fff; font-size: 5em;");
</script>
</body>
</html>