-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
144 lines (139 loc) · 7.63 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
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>Lauren Ko</title>
<meta name="description" content="Lauren Ko's website">
<meta name="viewport" content="width=device-width">
<link rel="icon" type="image/ico" href="favicon.ico"/>
<link rel="stylesheet" href="css/style.css" type="text/css" media="screen" />
</head>
<body>
<div class="main">
<h1>Hello</h1>
<section>
<p>My name is Lauren Ko and I am a software engineer specializing in front-end development. I am based in Boston, MA and currently work for KAYAK.</p>
<p>Most of my experience has been with building scalable single page applications using modern web frameworks. Some technologies I have used include: Typescript, Angular, React and more.</p>
</section>
<h1 class="second">Contact</h1>
<section>
<p>Feel free to contact me for my resume.</p>
<ul>
<li class="link">✨<a href="https://www.linkedin.com/profile/view?id=177779742" target="_blank" title="resume">linkedin</a>✨</li>
<li class="link">✨<a href="mailto:kolauren@gmail.com" title="email">email</a>✨</li>
</ul>
</section>
</div>
<div class="shapes">
<svg
id="shape1"
class="shape shape1"
fill="#15616D"
viewBox="0 0 487 303" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve">
<g transform="matrix(1,0,0,1,-45.9765,-115.125)">
<path d="M230,211C230,211 257.144,102.255 303,117C348.856,131.745 388.338,224.42 420,202C451.662,179.58 509.361,150.072 519,175C528.639,199.928 551.342,267.188 500,284C448.658,300.812 358.433,323.706 370,357C381.567,390.294 334.059,423.453 285,416C235.941,408.547 177.994,401.038 147,361C116.006,320.962 18.952,288.181 54,240C89.048,191.819 124.322,147.92 153,161C181.678,174.08 159.821,278.319 195,264C230.179,249.681 230,211 230,211Z"/>
</g>
</svg>
<svg
id="shape2"
class="shape shape2"
fill="#F7A278"
viewBox="0 0 156 149" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve">
<g transform="matrix(1,0,0,1,-239.202,-224.388)">
<path d="M245,336C245,336 219.054,262.645 282,235C344.946,207.355 366.927,243.024 384,263C401.073,282.976 400.96,343.302 357,362C313.04,380.698 265.234,375.283 245,336Z" />
</g>
</svg>
<svg
id="shape3"
class="shape shape3"
fill="#5B2333"
viewBox="0 0 330 288" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve">
<g transform="matrix(1,0,0,1,-133.34,-140.781)">
<path d="M171,345C171,345 406.839,152.813 407,153C407.161,153.187 449.105,97.014 461,229C472.895,360.986 417.504,397.51 385,417C352.496,436.49 25.381,437.896 171,345Z" />
</g>
</svg>
<svg
id="shape4"
class="shape shape4"
fill="#F24333"
viewBox="0 0 313 439" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/">
<g transform="matrix(1,0,0,1,-275.426,-83.4983)">
<path d="M503,489C503,489 719.656,37.076 458,88C196.344,138.924 277.745,170.563 332,239C386.255,307.437 401.626,514.86 448,521C494.374,527.14 499.242,498.425 503,489Z"/>
</g>
</svg>
<svg
id="shape5"
class="shape shape5"
fill="#E4959E"
viewBox="0 0 474 508" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/">
<g transform="matrix(1,0,0,1,-217.194,-36.4519)">
<path d="M226,495C226,495 608.991,-69.97 680,55C751.009,179.97 431.154,522.403 366,536C300.846,549.597 185.85,550.21 226,495Z" />
</g>
</svg>
<svg
id="shape6"
class="shape shape6"
fill="#004E89"
viewBox="0 0 432 421" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/">
<g transform="matrix(1,0,0,1,-164.5,-70.5)">
<path d="M380.5,71C499.438,71 596,165.098 596,281C596,396.902 499.438,491 380.5,491C261.562,491 165,396.902 165,281C165,165.098 261.562,71 380.5,71ZM380.5,176C439.969,176 488.25,223.049 488.25,281C488.25,338.951 439.969,386 380.5,386C321.031,386 272.75,338.951 272.75,281C272.75,223.049 321.031,176 380.5,176Z"/>
</g>
</svg>
<svg
id="shape0"
class="shape shape0"
fill="#5DFDCB"
viewBox="0 0 438 445" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/">
<g transform="matrix(1,0,0,1,-213.207,-93.2302)">
<path d="M214,499C214,499 354.416,407.542 304,309C253.584,210.458 339.128,101.237 385,94C430.872,86.763 634.686,131.245 649,198C663.314,264.755 557.461,290.041 617,356C676.539,421.959 647.044,505.793 567,524C486.956,542.207 196.085,549.823 214,499Z"/>
</g>
</svg>
</div>
</body>
<script>
var _gaq=[['_setAccount','UA-32524752-1'],['_trackPageview']];
(function(d,t){var g=d.createElement(t),s=d.getElementsByTagName(t)[0];
g.src=('https:'==location.protocol?'//ssl':'//www')+'.google-analytics.com/ga.js';
s.parentNode.insertBefore(g,s)}(document,'script'));
</script>
<script>
document.addEventListener("DOMContentLoaded", () => {
function shuffle(array) {
let currentIdx = array.length;
let temp;
let randomIdx;
while (currentIdx !== 0) {
randomIdx = Math.floor(Math.random() * currentIdx);
currentIdx -= 1;
temp = array[currentIdx];
array[currentIdx] = array[randomIdx];
array[randomIdx] = temp;
}
return array;
}
function changeColors() {
const shuffled = shuffle(colors);
for (let i = 0; i < shapeIndices.length; i++) {
document.getElementById(`shape${shapeIndices[i]}`).style.fill = shuffled[i];
}
}
const colors = [
"#15616D",
"#F7A278",
"#5B2333",
"#F24333",
"#E4959E",
"#004E89",
"#5DFDCB",
"#606C38",
"#363946"
];
const shapeIndices = Array.from(Array(7).keys());
const elements = document.getElementsByClassName("link");
Array.from(elements).forEach(element => {
element.addEventListener("mouseenter", changeColors);
});
});
</script>
</html>