-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
164 lines (149 loc) · 4.55 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
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width" />
<title>Avritt Rohwer</title>
<meta name="description" content="A professional webpage for Avritt Rohwer." />
<meta name="theme-color" content="#17A589" />
<link rel="icon" href="/images/icon-192.png" sizes="192x192" />
<link rel="icon" href="/images/icon-512.png" sizes="512x512" />
<link rel="manifest" href="/manifest.webmanifest" />
<link
rel="stylesheet"
href="https://fonts.googleapis.com/css?family=Fira+Mono:400,500"
/>
<style>
html,
body {
margin: 0 auto;
padding: 0 1em;
max-width: 46em;
border: 0px;
font: 400 1em/1.25 "Fira Mono", monospace;
background-color: black;
color: white;
}
body > * {
margin: 1rem 0;
}
h1 {
font-weight: 500;
}
nav {
display: flex;
justify-content: space-between;
flex-wrap: wrap;
gap: 1em;
}
a {
color: #17a589;
}
ul {
margin-left: 0;
padding-left: 1em;
}
</style>
</head>
<body>
<h1>> <noscript>whoami<br>Avritt Rohwer<br>> ▏</noscript></h1>
<nav>
<a href="mailto:[email protected]">Email</a>
<a href="./resume_avritt_rohwer.pdf" target="_blank">Resume</a>
<a href="https://github.com/avrittrohwer" target="_blank">GitHub</a>
<a href="https://www.linkedin.com/in/avrittrohwer" target="_blank">LinkedIn</a>
</nav>
<p>
I am a software engineer seeking to work on impactful public services.
</p>
<p>
I value:
</p>
<ul>
<li>Sustainability.</li>
<li>Simplicity.</li>
<li>Pragmatism.</li>
</ul>
<p>
In my work, I strive to:
</p>
<ul>
<li>Implement simple solutions that are easy to understand and maintain.</li>
<li>Achieve impact via concise, iterative deliverables.</li>
<li>Treat documentation as a first-class engineering artifact.</li>
</ul>
<script>
// This script animates the header of this page.
const block = "\u258F"; // unicode full block character
const typeRate = 100; // how fast letters are typed
const blinkRate = 500; // how fast the cursor blinks
const h1 = document.querySelector("h1");
let currentState = h1.innerHTML;
// Start animation when the page loads.
window.addEventListener("load", function startAnimation() {
// Animations are [ fn, ...arguments ] where fn must take the next fn to call as its last argument.
const animations = [
[blink, 1],
[type, "whoami"],
[pause, 100],
[print, "Avritt Rohwer"],
[blink, Infinity]
];
// Create and call a function that plays each animation.
function makeAnimationFn(fn, i) {
if (i < 0) {
return fn;
}
const a = animations[i];
const nextFn = a[0];
const nextFnArgs = a.slice(1);
return makeAnimationFn(
nextFn.bind.apply(nextFn, [null].concat(nextFnArgs).concat(fn)),
i - 1
);
}
makeAnimationFn(function() {}, animations.length - 1)();
});
function pause(time, next) {
window.setTimeout(next, time);
}
function type(command, next) {
let i = 1;
const timeoutId = window.setInterval(function typeLetter() {
if (i > command.length) {
// Continue to next fn.
window.clearInterval(timeoutId);
currentState += command;
next();
} else {
// Type next letter.
h1.innerHTML = currentState + command.slice(0, i) + block;
i += 1;
}
}, typeRate);
}
function print(output, next) {
h1.innerHTML = currentState += "<br>" + output + "<br>> ";
next();
}
function blink(times, next) {
let blinks = 0;
const timeoutId = window.setInterval(function toggleBlock() {
if (blinks > times) {
// Continue to next fn.
window.clearInterval(timeoutId);
next();
} else {
// Toggle a block.
if (h1.innerHTML.slice(-1) == block) {
h1.innerHTML = currentState;
} else {
h1.innerHTML = currentState + block;
blinks += 1;
}
}
}, blinkRate);
}
</script>
</body>
</html>