-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
273 lines (268 loc) · 13.5 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
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
<html lang="en">
<!DOCTYPE html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Christian Bouwense</title>
<!-- Font stuff -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Libre+Baskerville:ital,wght@0,200;0,400;0,700;1,400&display=swap" rel="stylesheet">
<link href="taillight.css" rel="stylesheet">
<link href="custom.css" rel="stylesheet">
</head>
<body class="m-0">
<nav class="w-95% sticky p-0.5rem pl-8rem bg-default fs-1.5rem z-2 computer">
<ul class="flex gap-4rem">
<li><a href="#about" class="hoverable-text">About</a></li>
<li><a href="#work" class="hoverable-text">Work</a></li>
<li><a href="#skills" class="hoverable-text">Skills</a></li>
<li><a href="#experience" class="hoverable-text">Experience</a></li>
<li><a href="#contact" class="hoverable-text">Contact</a></li>
</ul>
</nav>
<main class="w-100% mb-8rem z-1 flex column justifyCenter alignCenter gap-4rem">
<section id="about" class="w-70% m:w-75% mt-4rem m:mt-0 grid gridCol-2 m:gridCol-1 gap-2rem">
<div>
<h1 class="fs-5rem m:fs-4rem">Hi, I'm Christian.</h1>
<img src="./public/headshot.jpg" class="w-100% mobile" />
<h2 class="light-text">I develop world class web applications.</h2>
<h2 class="light-text">I also tinker with systems programming languages.</h2>
<h2 class="light-text">My wife and I make <a href="https://soapy.bar" target=":blank"
class="hoverable-text underlineDots">homemade soap</a> from scratch with love.</h2>
</div>
<img src="./public/headshot.jpg" class="h-75vh computer" />
</section>
<section id="work" class="w-70% m:w-75%">
<h1 class="fs-5rem m:fs-3rem">Some stuff I've made</h1>
<div class="grid gridCol-2 m:gridCol-1 gap-1rem">
<div class="w-100%">
<video autoplay muted loop preload="metadata" class="w-100%">
<source src="./public/rbitty-art.webm" type="video/webm">
Your browser does not support the video tag.
</video>
<!-- <img src="./public/rbitty-art.png" class="w-100% mobile" /> -->
<h2 class="fs-2rem "><a href="https://rbitty.art/" target=":blank"
class="hoverable-text underlineDots">rbitty.art</a></h2>
<p class="fs-1.5rem">Web marketplace for my wife's art. Built using <a href="https://alpinejs.dev/"
class="hoverable-text underlineDots" target=":blank">alpine.js.</a></p>
</div>
<div class="w-100%">
<video autoplay muted loop preload="metadata" class="w-100%">
<source src="./public/go-up.webm" type="video/webm">
Your browser does not support the video tag.
</video>
<!-- <img src="./public/go-up.png" class="w-100% mobile" /> -->
<h2 class="fs-2rem "><a href="https://ckuras.itch.io/go-up" target=":blank"
class="hoverable-text underlineDots">Go Up</a></h2>
<p class="fs-1.5rem">A 2D platformer video game, won first prize in the <a
href="https://stevens.gamedevelopment.club/" class="hoverable-text underlineDots">SGDC Game Jam</a>.
Co-developed with my friend Chris, and built in <a href="https://unity.com/"
class="hoverable-text underlineDots" target=":blank">Unity.</a></p>
</div>
<div class="w-100%">
<iframe src="https://domskis.com" class="w-100% h-50vh m:h-25vh"></iframe>
<h2 class="fs-2rem "><a href="https://domskis.com" target=":blank"
class="hoverable-text underlineDots">domskis.com</a></h2>
<p class="fs-1.5rem">Pizza floating in space, try clicking and dragging! Rendered by the GPU via the WebGPU
pipeline. Built with <a href="https://threejs.org/" class="hoverable-text underlineDots"
target=":blank">three.js</a>.</p>
</div>
<div class="w-100%">
<video autoplay muted loop preload="metadata" class="w-100%">
<source src="./public/soapy-bar.webm" type="video/webm">
Your browser does not support the video tag.
</video>
<!-- <img src="./public/soapy-bar.png" class="w-100% mobile" /> -->
<h2 class="fs-2rem "><a href="https://thriving-axolotl-06bcf8.netlify.app/" target=":blank"
class="hoverable-text underlineDots">soapy.bar</a></h2>
<p class="fs-1.5rem">Web marketplace for the soap business my wife and I run. This site has been deprecated
since we moved to Etsy. Built with <a href="https://nextjs.org/" class="hoverable-text underlineDots"
target=":blank">Next.js</a> and <a href="https://tailwindcss.com/" class="hoverable-text underlineDots"
target=":blank">Tailwind CSS</a>.</p>
</div>
</div>
</section>
<section id="skills" class="w-70% m:w-75%">
<h1 class="fs-5rem m:fs-3rem">Programming Languages</h1>
<div class="grid gridCol-2 m:gridCol-1 gap-2rem m:gap-1rem">
<div>
<h2 class="fs-2rem m:fs-1.5rem">Professional outlier</h2>
<ul class="flex column gap-2rem m:gap-1rem">
<li class="p-1rem rounded lightShadow relative fs-1.5rem">
<div class="flex justifyBetween alignCenter">
<span>HTML / CSS / Javascript</span>
<span>100%</span>
</div>
<span class="skill-bar bg-blue w-100%"></span>
</li>
<li class="p-1rem rounded lightShadow relative fs-1.5rem">
<div class="flex justifyBetween alignCenter">
<span>Typescript</span>
<span>95%</span>
</div>
<span class="skill-bar bg-blue w-95%"></span>
</li>
<li class="p-1rem rounded lightShadow relative fs-1.5rem">
<div class="flex justifyBetween alignCenter">
<span>React / Next.js</span>
<span>95%</span>
</div>
<span class="skill-bar bg-blue w-95%"></span>
</li>
</ul>
</div>
<div>
<h2 class="fs-2rem m:fs-1.5rem">Used in production</h2>
<ul class="flex column gap-2rem m:gap-1rem">
<li class="p-1rem rounded lightShadow relative fs-1.5rem">
<div class="flex justifyBetween alignCenter">
<span>Python</span>
<span>85%</span>
</div>
<span class="skill-bar bg-green w-85%"></span>
</li>
<li class="p-1rem rounded lightShadow relative fs-1.5rem">
<div class="flex justifyBetween alignCenter">
<span>Java</span>
<span>80%</span>
</div>
<span class="skill-bar bg-green w-80%"></span>
</li>
<li class="p-1rem rounded lightShadow relative fs-1.5rem">
<div class="flex justifyBetween alignCenter">
<span>Golang</span>
<span>80%</span>
</div>
<span class="skill-bar bg-green w-80%"></span>
</li>
</ul>
</div>
<div>
<h2 class="fs-2rem m:fs-1.5rem">Familiar</h2>
<ul class="flex column gap-2rem m:gap-1rem">
<li class="p-1rem rounded lightShadow relative fs-1.5rem">
<div class="flex justifyBetween alignCenter">
<span>C</span>
<span>75%</span>
</div>
<span class="skill-bar bg-yellow w-75%"></span>
</li>
<li class="p-1rem rounded lightShadow relative fs-1.5rem">
<div class="flex justifyBetween alignCenter">
<span>C++</span>
<span>70%</span>
</div>
<span class="skill-bar bg-yellow w-70%"></span>
</li>
<li class="p-1rem rounded lightShadow relative fs-1.5rem">
<div class="flex justifyBetween alignCenter">
<span>SQL</span>
<span>70%</span>
</div>
<span class="skill-bar bg-yellow w-70%"></span>
</li>
</ul>
</div>
<div>
<h2 class="fs-2rem m:fs-1.5rem">Learning</h2>
<ul class="flex column gap-2rem m:gap-1rem">
<li class="p-1rem rounded lightShadow relative fs-1.5rem">
<div class="flex justifyBetween alignCenter">
<span>Rust</span>
<span>50%</span>
</div>
<span class="skill-bar bg-orange w-50%"></span>
</li>
<li class="p-1rem rounded lightShadow relative fs-1.5rem">
<div class="flex justifyBetween alignCenter">
<span>WebAssembly</span>
<span>25%</span>
</div>
<span class="skill-bar bg-orange w-25%"></span>
</li>
<li class="p-1rem rounded lightShadow relative fs-1.5rem">
<div class="flex justifyBetween alignCenter">
<span>Odin</span>
<span>25%</span>
</div>
<span class="skill-bar bg-orange w-25%"></span>
</li>
</ul>
</div>
</div>
</section>
<section id="experience" class="w-70% m:w-75%">
<h1 class="fs-5rem m:fs-3rem">Places I've Worked</h1>
<div class="flex justifyCenter gap-4rem m:column m:gap-2rem w-100%">
<div class="flex basis-1 grow-1 shrink-1 column gap-2rem m:gap-1rem">
<div>
<h2 class="fs-3rem m:fs-2rem "><a href="https://www.bigeye.com/" class="hoverable-text underlineDots"
target=":blank">Bigeye</a></h2>
<p class="fs-1.5rem m:fs-1rem">Bigeye is a startup that offers a <a
href="https://www.bigeye.com/blog/data-observability" class="underlineDots hoverable-text">data
observability</a> platform. I joined the company as a frontend engineer in December of 2021, and it's my
current gig.</p>
<p class="fs-1.5rem m:fs-1rem">My favorite accomplishment has been leading the adoption of unit, integration
and
end-to-end testing. By advocacy and example, my team has increased code coverage from 13% to 84%.</p>
</div>
<div>
<h2 class="fs-3rem m:fs-2rem "><a href="https://www.ikea.com/" class="hoverable-text underlineDots"
target=":blank">IKEA</a>
</h2>
<p class="fs-1.5rem m:fs-1rem">I joined the IKEA US Digital Hub as a frontend engineer in August 2020. I
mainly worked on the checkout experience at <a href="https://ikea.com"
class="underlineDots hoverable-text" target=":blank">ikea.com</a>.</p>
<p class="fs-1.5rem m:fs-1rem">My favorite aspect of this role was designing and running A/B tests. I also
enjoyed learning a bit of conversational Swedish through <a
href="https://en.wikipedia.org/wiki/Language:immersion"
class="hoverable-text underlineDots">immersion</a>.</p>
</div>
</div>
<div class="flex basis-1 grow-1 shrink-1 gap-2rem m:gap-1rem">
<div>
<h2 class="fs-3rem m:fs-2rem "><a href="https://www.vistarmedia.com/" class="hoverable-text underlineDots"
target=":blank">Vistar Media</a>
</h2>
<p class="fs-1.5rem m:fs-1rem">Vistar Media creates software for digital-out-of-home advertising (think
Times Square billboards). I joined Vistar as a full stack engineer in February 2019.</p>
<p class="fs-1.5rem m:fs-1rem"><a
href="https://technical.ly/software-development/vistar-medias-tech-stack-not-faint-heart/"
class="hoverable-text underlineDots">Vistar's tech stack is not for the faint-of-heart</a>, and I
learned so much as a new grad.</p>
</div>
<div>
<h2 class="fs-3rem m:fs-2rem "><a href="https://www.jpmorganchase.com/"
class="hoverable-text underlineDots" target=":blank">JP Morgan Chase & Co.</a>
</h2>
<p class="fs-1.5rem m:fs-1rem">I was a software engineer intern at JPMC during the summer of 2018. I was
assigned a solo project to create a web application for some internal tooling.</p>
<p class="fs-1.5rem m:fs-1rem">My time at JPMC was wonderful, but it taught me I prefer the freedom of
startups versus the red tape of large firms.</p>
</div>
</div>
</div>
</section>
<section id="contact" class="w-70% m:w-75%">
<h1 class="fs-5rem m:fs-3rem">Get in touch</h1>
<div class="flex gap-4rem m:column m:gap-1rem w-100%">
<div class="maxw-100%">
<h2 class="fs-3rem m:fs-2rem">Email</h2>
<p class="fs-1.5rem">cbouwense@proton.me</p>
</div>
<div class="maxw-100%">
<h2 class="fs-3rem m:fs-2rem">LinkedIn</h2>
<p class="fs-1.5rem"><a target=":blank" href="https://www.linkedin.com/in/christian-bouwense/"
class="hoverable-text underlineDots wrap">linkedin.com/in/christianbouwense</a></p>
</div>
<div class="maxw-100%">
<h2 class="fs-3rem m:fs-2rem">GitHub</h2>
<p class="fs-1.5rem"><a target=":blank" href="https://github.com/cbouwense"
class="hoverable-text underlineDots">github.com/cbouwense</a></p>
</div>
</div>
</section>
</main>
</body>
</html>