-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
179 lines (173 loc) · 10.7 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
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link
href="https://fonts.googleapis.com/css?family=Roboto"
rel="stylesheet"
/>
<link href="style.css" rel="stylesheet" />
</head>
<body>
<div class="card">
<h1>Check out my <a class="nav" href="posts">posts</a>!</h1>
<p>
I work at <a href="https://qualia.com" class="qualia-text">Qualia</a>.
</p>
<p>
Writing software in spaces that are itching for innovation is incredibly
satisfying.
</p>
<p>
There is so much waste and inefficiency built into critical parts of our
economy, and fixing it is a lot of fun.
</p>
<p>
<a href="https://www.linkedin.com/in/kyleshankwiler">LinkedIn</a>,
<a href="mailto:kyleshankwiler@gmail.com">kyleshankwiler@gmail.com</a>
</p>
</div>
<div class="city">
<svg
viewBox="0 0 210 210"
height="210mm"
width="210mm"
preserveAspectRatio="xMidYMin meet"
>
<g opacity="0.3" class="container">
<g id="city">
<path
id="path26"
d="m 31.543177,210.1464 -1.336349,-14.9671 -4.009044,-16.03617 -2.672694,-8.8199 -0.534539,-11.49259 -1.069078,-15.7689 -2.405426,-12.56167 -1.069078,-11.49259 0.534539,-5.34539 5.87993,-4.81085 4.009043,-0.53454 4.009043,0.53454 4.276312,-1.33635 4.009044,-6.68174 3.207234,-11.492593 3.207234,-0.26726 4.81085,2.67269 4.276312,1.06908 10.156243,-1.06908 7.750818,-0.53454 3.207234,0.26727 1.336347,-1.33635 8.819893,0.26727 h 6.147199 l 2.672697,1.33635 4.276309,3.74177 1.87089,2.40543 4.27631,4.543583 0.80181,2.93997 1.33635,2.67269 0.53453,4.00904 v 4.81085 l 1.33635,3.74178 0.26727,3.74177 -0.53454,2.93997 -0.80181,3.20723 4.00905,4.00904 v 3.74178 l -1.06908,0.53454 1.33634,2.40542 3.74178,-0.26727 v 4.00905 l 1.87089,2.67269 2.13815,2.13816 1.60362,2.67269 h -3.47451 l -0.53453,2.6727 -1.06908,1.33635 0.26727,1.33634 4.81085,1.87089 4.00904,2.13816 3.4745,1.60361 -2.13815,2.40543 -2.93996,0.80181 0.26726,3.74177 -0.53454,2.6727 -2.93996,-0.26728 -4.00904,-2.40542 -2.6727,-1.87089 -5.34539,-1.06908 1.60362,3.20724 1.60362,1.87089 2.67269,1.60361 v 1.06908 l -1.87089,2.6727 0.80181,1.87088 0.26727,1.60362 -5.34539,-1.60362 -2.13815,1.33635 -2.6727,-0.80181 -0.80181,2.40543 1.06908,3.20723 0.53454,8.28536 v 4.27631 l 0.26727,1.87089 h -4.54358 l 1.06907,3.20723 2.40543,2.93996 4.27631,2.13817 3.74178,1.33634 v 1.06907"
style="
opacity: 0.98;
fill: none;
stroke: #000000;
stroke-width: 0.264583px;
stroke-linecap: butt;
stroke-linejoin: miter;
stroke-opacity: 1;
"
/>
<path
id="path28"
d="m 157.15985,2.4779647 -2.93997,3.474506 -0.26727,3.474503 1.33635,2.6726943 1.06908,-0.801807 1.87089,-1.8708873 2.13815,-0.53454 2.13816,1.3363493 1.60362,5.612659 -3.20724,-2.138156 -2.93996,2.405425 -3.20724,-0.534538 -0.26726,-0.801809 -1.33635,1.336347 0.26727,3.474506 1.60361,-1.870887 h 4.54358 l 1.60362,4.543581 4.54358,8.285355 v 1.603619 1.336346 l -2.67269,0.80181 -3.47451,-5.078122 -5.34539,1.336347 4.54359,5.34539 h 2.13815 l 1.60362,2.939966 -2.13816,1.069078 -1.06908,-0.801809 0.80181,3.741776 1.60362,-1.33635 2.6727,-0.80181 v -1.603616 h 2.67269 l 5.61266,5.879926 1.33635,5.87993 -2.40543,2.40543 -1.06907,1.06908 1.87088,2.67269 0.53454,2.93997 -0.26727,2.67269 -5.61266,-1.60362 -1.06908,2.40543 4.81085,1.33635 h 2.6727 l 1.60362,4.27631 -2.6727,4.00904 h -4.81085 l -5.87993,0.26727 -2.93996,1.06908 -2.40543,2.13816 -6.1472,0.80181 v 2.13815 l 7.48355,-0.53454 1.06908,2.40543 2.93996,-2.93996 3.47451,0.53453 0.26726,1.33635 -1.06907,0.80181 h -1.87089 l -6.41447,7.21628 -7.75081,-0.53454 -6.94901,4.81085 -0.26727,1.60362 1.87089,1.06908 5.87992,-1.87089 3.47451,-1.60362 1.33635,0.53454 1.33634,1.60362 -1.06908,2.13815 -0.53453,1.87089 -1.87089,0.80181 15.50163,4.543583 4.54358,0.53454 2.6727,0.53454 3.20723,-0.80181 2.13816,-0.80181 6.68174,0.26727 2.93996,1.06908 2.40543,1.87089 2.67269,1.60361 h 2.40543 1.60362 l 1.06907,1.33635 1.33635,-0.26727 -0.80181,0.80181 3.74178,1.87089 2.40542,-1.87089 6.1472,3.20723 0.26727,5.34539 4.27631,5.07812 5.07812,3.20724 3.47451,2.67269 1.33634,3.74178 1.87089,3.20723 h 0.80181"
style="
opacity: 0.98;
fill: none;
stroke: #000000;
stroke-width: 0.264583px;
stroke-linecap: butt;
stroke-linejoin: miter;
stroke-opacity: 1;
"
/>
<path
id="path30"
d="m 149.40903,101.10042 v 9.2208 2.00452 l -0.53454,2.40543 4.54359,0.66817 1.46998,0.93545 3.74177,0.4009 2.40543,2.93996 h 4.14268 l 1.20271,-3.34086 6.68174,-0.26727 0.4009,2.80633 -2.53906,2.80633 0.53454,1.73725 6.81537,2.13816 2.27179,0.4009 -0.13363,2.00452 -0.26727,1.33635 2.80633,1.20271 -1.60362,-2.80633 0.53454,-0.4009 0.93544,0.66817 -0.4009,-1.33635 -0.4009,-0.53453 1.60361,-0.26728 1.46998,-1.33634 0.13364,2.53906 1.87089,1.06908 1.60361,-0.80181 0.93545,1.20271 1.06908,1.20271 0.93544,1.60362 0.4009,0.66817 6.54811,3.74178 9.88897,4.94448 8.55262,2.80633 h 2.40543 l 1.60362,-0.93544 4.67721,-4.67722 0.13364,-2.53906 -1.25269,-3.7102 -1.62544,-2.64136 -4.57158,-3.86044 -7.82247,-5.48588 -0.71113,1.42227 -3.86044,-3.86044 -1.72704,0.40636 -0.10159,1.52386 -2.1334,-1.01591 1.42226,-2.64136 -2.43817,-1.32067 -0.20318,3.75885 -1.21909,-1.01591 v -2.53976 l -2.74294,-1.82863 -1.62545,0.71113 -2.53976,-3.65726 -1.01591,-0.40636 -1.32067,0.10159 -2.13341,-3.25089 h -1.52385 l -0.50795,-0.91432 -4.16522,0.20318 -0.81272,2.1334 -2.23499,-1.21908 -2.84454,-0.20318 -0.40636,0.71113 -5.99384,0.20318 -19.81015,-5.99384 z"
style="
opacity: 0.98;
fill: none;
stroke: #000000;
stroke-width: 0.264583px;
stroke-linecap: butt;
stroke-linejoin: miter;
stroke-opacity: 1;
"
/>
<path
id="path32"
d="M 49.713 65.346 L 45.706 58.257 L 44.781 55.483 L 43.548 53.325 L 44.473 44.695 L 41.082 44.078 L 38.308 42.845 L 36.767 40.071 L 35.226 40.688 L 33.993 40.688 L 32.452 38.222 L 30.91 36.989 L 30.91 32.366 L 24.746 32.057 L 22.588 29.9 L 19.198 25.276 L 16.732 24.043 L 13.65 22.502 L 13.033 18.803 L 11.184 10.173 L 14.574 16.646 L 16.732 17.57 L 17.657 19.42 L 20.122 17.57 L 21.972 18.803 L 20.739 21.269 L 22.896 22.81 L 25.054 22.81 L 27.52 25.584 L 30.91 27.742 L 31.219 27.742 L 29.986 20.036 L 27.52 16.646 L 25.671 13.872 L 27.52 10.789 L 29.061 10.173 L 28.445 12.33 L 31.527 13.255 L 33.685 13.255 L 36.15 12.33 L 39.541 13.255 L 41.699 17.262 L 46.322 20.653 L 48.48 23.119 L 48.171 25.276 L 47.555 26.509 L 46.939 28.05 L 46.939 29.9 L 50.329 34.831 L 54.336 38.838 L 58.343 42.537 L 58.343 39.147 L 55.261 34.523 L 56.186 32.366 L 57.727 31.749 L 58.96 32.674 L 62.967 32.674 L 66.357 31.441 L 69.131 28.975 L 69.131 25.584 L 70.981 25.584 L 72.214 25.584 L 73.138 24.66 L 73.138 22.502 L 67.282 16.646 L 65.124 12.639 L 62.967 13.563 L 60.809 12.022 L 59.268 12.33 L 54.953 8.94 L 51.562 6.782 L 50.329 4.933 L 46.322 3.392 L 45.397 2.467"
style="
opacity: 0.98;
fill: none;
stroke: #000000;
stroke-width: 0.26458300000000001px;
stroke-linecap: butt;
stroke-linejoin: miter;
stroke-opacity: 1;
"
/>
<path
id="path34"
d="m 120.91422,83.532027 5.54817,-2.77409 0.61647,-3.69879 -4.31525,-8.63049 h -2.77409 l -4.62348,1.84939 v 3.39055 l 1.84939,5.85641 3.08232,9.55519 4.31525,1.84939 h 2.77409 l 1.54116,-3.69878 0.30823,-3.08232 -6.16464,2.15762 z"
style="
opacity: 0.98;
fill: none;
stroke: #000000;
stroke-width: 0.264583px;
stroke-linecap: butt;
stroke-linejoin: miter;
stroke-opacity: 1;
"
/>
<path
id="path36"
d="m 68.206558,43.153637 2.774087,4.00702 2.774088,2.15762 5.239943,-1.23293 4.931712,0.9247 2.465855,1.23292 v -3.39055 l -0.616466,-2.46585 1.541161,-3.08232 -1.849392,-1.23293 -1.232927,-5.856407 -6.472872,-1.541158 -2.774088,4.315246 -2.157624,-1.232927 -1.541158,5.239946 z"
style="
opacity: 0.98;
fill: none;
stroke: #000000;
stroke-width: 0.264583px;
stroke-linecap: butt;
stroke-linejoin: miter;
stroke-opacity: 1;
"
/>
</g>
<g>
<image
href="https://upload.wikimedia.org/wikipedia/commons/2/26/Bart-logo.svg"
height="10"
width="10"
/>
<animateMotion
dur="20s"
repeatCount="indefinite"
keyPoints="1;0;0;1;1"
keyTimes="0;0.333;0.5;0.833;1"
calcMode="linear"
rotate="auto"
path="M 94.456248,106.09792 C 126.21636,92.684537 153.60865,92.65642 170.36813,88.276504 187.33856,83.841458 190.52326,66.971796 181.76875,42.201041"
/>
</g>
</g>
</svg>
</div>
<script>
// TODO: Find a more elegant solution for chopping off the bottom portion of used
// space when using "xMidYMin meet."
// https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/preserveAspectRatio
var throttle = function (fn) {
var ready = true;
return function () {
if (ready) {
ready = false;
setTimeout(function () {
fn();
ready = true;
}, 250);
}
};
};
var handleScreenResize = function () {
var mediaQuery = window.matchMedia("(max-width: 1200px)");
var body = document.querySelector("body");
if (mediaQuery.matches) {
var cardHeight = document.querySelector(".card").clientHeight;
var svgHeight = document
.querySelector("svg .container")
.getBoundingClientRect().height;
body.style.overflowY = "hidden";
body.style.height = "" + (cardHeight + svgHeight) + "px";
} else {
body.style.overflowY = "scroll";
body.style.height = "auto";
}
};
handleScreenResize();
window.onresize = throttle(handleScreenResize);
</script>
</body>
</html>