-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
370 lines (367 loc) · 25.6 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
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
<!DOCTYPE html>
<html>
<head>
<!-- Google Fonts -->
<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=Merriweather&family=Sarabun:wght@100;400&display=swap" rel="stylesheet">
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,[email protected],100..700,0..1,-50..200" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Christopher Lam | Front End Engineer with Product Design experience</title>
<script type="text/javascript" src="script.js"></script>
<link rel="stylesheet" href="styles.css" />
</head>
<body>
<div id="loading"><i class="fa fa-circle-o-notch fa-spin" style="font-size:24px"></i></div>
<header>
<div id="header-content">
<p>Christopher Lam</p>
<div id="nav-links">
<a href="#introduction">About</a>
<a href="#featured-work">Work</a>
<a href="https://www.dropbox.com/s/0mwyg5wy4qyln6j/chris_lam_resume.pdf?dl=0" target="_blank">Resume</a>
<a href="mailto:[email protected]"><span class="material-symbols-outlined">
mail
</span></a>
<a href="https://github.com/whoischrislam" target="_blank"><i class="fa fa-github" style="font-size:24px"></i></a>
<a href="https://www.linkedin.com/in/whoischrislam/" target="_blank"><i class="fa fa-linkedin" style="font-size:24px"></i></a>
</div>
</div>
</header>
<section id="introduction">
<div class="section-content">
<h1 id="animation-intro">👋 Hi, I'm Chris Lam. Nice to meet you!</h1>
<div>
<p id="animation-intro-p1" class="animation-appear">I'm a front end engineer with a background in design based in <del>sunny</del> foggy 🌁 San Francisco, CA. I love to code and design websites, apps, and games!</p>
<p id="animation-intro-p2" class="animation-appear">When I'm not coding or designing, you'll find me working on 🎮 game development, <a href="https://www.instagram.com/p/CuxQjRwvGKw/?utm_source=ig_web_copy_link&igsh=MzRlODBiNWFlZA==" target="_blank">🎲 playing board games</a>, <a href="https://www.instagram.com/reel/CuoaWzXgtSR/?utm_source=ig_web_copy_link&igsh=MzRlODBiNWFlZA==" target="_blank">🕺 dancing</a>, or <a href="https://www.instagram.com/reel/C1DISysSMxZ/?utm_source=ig_web_copy_link&igsh=MzRlODBiNWFlZA==" target="_blank">🛼 roller skating</a>.</p>
</div>
</div>
</section>
<section id="skills" class="animation-appear">
<div class="section-content">
<h1>Experience & skills</h1>
<p class="animation-appear">Since 2012, from startups to large companies, I've shipped digital products from 0-to-1, established design systems, and helped companies build out their product teams and processes.</p>
<!-- <img class="animation-appear mobile-hidden" src="./images/companies.png" alt="Companies Chris has worked at.">
<img class="animation-appear mobile-visible" src="./images/companies-mobile.png" alt="Companies Chris has worked at."> -->
<div class="focus-box reveal">
<div class="focus-column">
<h2>🤖 Engineering</h2>
<ul>
<li>React</li>
<li>TypeScript</li>
<li>JavaScript</li>
<li>HTML/CSS</li>
<li>PostgreSQL</li>
<li>Docker</li>
<li>Unity</li>
<li>C#</li>
</ul>
</div>
<div class="focus-column">
<h2>🎨 Design</h2>
<ul>
<li>Prototyping</li>
<li>Product Design</li>
<li>UX/UI Design</li>
<li>UX Research</li>
<li>Figma</li>
<li>Adobe Creative Suite</li>
</ul>
</div>
</div>
</div>
</section>
<section id="featured-work" class="animation-appear">
<div class="section-content">
<h1>Selected work</h1>
<p>The following is a selection of my engineering work in previous roles.
</p>
<div class="project-container">
<div class="project">
<h2>Modus Create</h2>
<div class="project-content">
<p>As a software engineer in the product studio team, I improved apps for Atlassian JIRA and Confluence Cloud. Due to my background in design, my focus was on front end engineering.</p>
<img src="./images/modus.png" class="mobile-hidden" alt="modus splash">
<img src="./images/modus-mobile.png" class="mobile-visible" alt="modus mobile splash">
<div class="focus-column">
<h2>Highlights:</h2>
<ul>
<li>Published documentation for dev environment setup and configuration for each GitHub repo.</li>
<li>Implemented dark mode on JIRA and Confluence Cloud apps.</li>
<li>Contributed and assisted the team's CI/CD pipeline with Docker compose.</li>
<li>Collaborated and participated in code reviews and submitting PRs.</li>
</ul>
</div>
<div class="keyword-container">
<p class="keyword">Agency</p>
<p class="keyword">Consulting</p>
<p class="keyword">Enterprise</p>
<p class="keyword">Figma</p>
<p class="keyword">Engineering</p>
<p class="keyword">Handlebars</p>
<p class="keyword">CSS</p>
<p class="keyword">TypeScript</p>
<p class="keyword">JavaScript</p>
<p class="keyword">Postgres</p>
<p class="keyword">Docker</p>
<p class="keyword">Web</p>
</div>
<button class="button" onclick="window.open('https://marketplace.atlassian.com/vendors/1212980/modus-create', '_blank')"><i class="fa fa-eye"></i> View the apps marketplace</button>
</div>
</div>
<div class="project">
<h2>GoodRx</h2>
<div class="project-content">
<p>As a designer in the GoodRx Health team, I built various data visualization projects using d3.js, JavaScript, and Vega.</p>
<img src="./images/goodrx.png" class="mobile-hidden" alt="goodrx splash">
<img src="./images/goodrx-mobile.png" class="mobile-visible" alt="goodrx mobile splash">
<div class="focus-column">
<h2>Highlights:</h2>
<ul>
<li>Designed a new user flow for finding and redeeming prescription drug discount coupons, which improved conversion by 2.5x.</li>
<li>Built data visualizations featured in <a href="https://abcnews.go.com/GMA/Wellness/video/flu-numbers-show-growing-outbreak-us-53014507" target="_blank">Good Morning America</a>, ABC News, and The Motley Fool.</li>
<li>Published health fact sheets to advocate for policy change for prescription drug prices (<a href="https://www.congress.gov/bill/115th-congress/senate-bill/2554" target="_blank">S.2554 - Patient Right to Know Drug Prices Act</a> & <a href="https://www.congress.gov/bill/115th-congress/senate-bill/2553" target="_blank">S.2553 - Know the Lowest Price Act of 2018</a>).</li>
</ul>
</div>
<div class="keyword-container">
<p class="keyword">Startup</p>
<p class="keyword">Seed</p>
<p class="keyword">Series A</p>
<p class="keyword">Healthcare</p>
<p class="keyword">IPO</p>
<p class="keyword">Engineering</p>
<p class="keyword">Prototyping</p>
<p class="keyword">Data Visualization</p>
<p class="keyword">JavaScript</p>
<p class="keyword">Vega</p>
<p class="keyword">d3.js</p>
<p class="keyword">Web</p>
<p class="keyword">Mobile</p>
</div>
</div>
</div>
<div class="project">
<h2>TaskRabbit</h2>
<div class="project-content">
<p>Many of my tasks as a designer at TaskRabbit heavily involved prototyping in code using JavaScript.</p>
<img src="./images/taskrabbit.png" class="mobile-hidden" alt="taskrabbit splash">
<img src="./images/taskrabbit-mobile.png" class="mobile-visible" alt="taskrabbit mobile splash">
<div class="focus-column">
<h2>Highlights:</h2>
<ul>
<li>Optimized the CSS for the TaskRabbit support <a href="https://web.archive.org/web/20150321031347/https://taskrabbit.zendesk.com/home" target="_blank">pages</a>.</li>
<li>Organized the process for standardizing the <a href="https://dribbble.com/shots/1940029-TaskRabbit-Tasker-Mobile-UI-Kit" target="_blank">design system</a>.</li>
<li>Supported the company <a href="https://web.archive.org/web/20140729221745/https://www.taskrabbit.com/" target="_blank">rebrand/reboot</a>, leading to brand improvement and higher bookings.</li>
<li>Prototyped new <a href="https://www.taskrabbit.com/become-a-tasker" target="_blank">Tasker</a> web and mobile features, leading to increased revenue.</li>
</ul>
</div>
<div class="keyword-container">
<p class="keyword">Startup</p>
<p class="keyword">Series C</p>
<p class="keyword">Marketplace</p>
<p class="keyword">Acquisition</p>
<p class="keyword">Engineering</p>
<p class="keyword">CSS</p>
<p class="keyword">JavaScript</p>
<p class="keyword">Prototyping</p>
<p class="keyword">Framer</p>
<p class="keyword">Design System</p>
<p class="keyword">Web</p>
<p class="keyword">Mobile</p>
</div>
</div>
</div>
<div class="project">
<h2>Iodine (acquired by GoodRx)</h2>
<div class="project-content">
<p>Built many prototypes and data visualizations in JavaScript and d3.js.</p>
<img src="./images/iodine.png" class="mobile-hidden" alt="iodine splash">
<img src="./images/iodine-mobile.png" class="mobile-visible" alt="iodine mobile splash">
<div class="focus-column">
<h2>Highlights:</h2>
<ul>
<li>Overhauled the drug alternative pages for consumers to be better informed about making decisions, which increased overall session time and traffic for iodine.com.</li>
<li>Designed a new live feature called "Ask a Pharmacist", which resulted in higher engagement on iodine.com.</li>
<li>Won the 2018 Webby Award for <a href="https://winners.webbyawards.com/2018/websites-and-mobile-sites/general-websites-and-mobile-sites/health-wellness/47451/iodine" target="_blank">Best Health Website</a>.</li>
</ul>
</div>
<div class="keyword-container">
<p class="keyword">Startup</p>
<p class="keyword">Healthcare</p>
<p class="keyword">Acquisition</p>
<p class="keyword">Engineering</p>
<p class="keyword">JavaScript</p>
<p class="keyword">Prototyping</p>
<p class="keyword">Data Visualization</p>
<p class="keyword">Vega</p>
<p class="keyword">d3.js</p>
<p class="keyword">Web</p>
<p class="keyword">Mobile</p>
</div>
</div>
</div>
<div class="project">
<h2>Pathstream</h2>
<div class="project-content">
<p>Besides my design responsibilities at Pathstream, I supported the creation of the design system and wrote the CSS for the website.</p>
<img src="./images/pathstream.png" class="mobile-hidden" alt="pathstream splash">
<img src="./images/pathstream-mobile.png" class="mobile-visible" alt="pathstream mobile splash">
<div class="focus-column">
<h2>Highlights:</h2>
<ul>
<li>Optimized the CSS for the new website.</li>
<li>Co-created a new design system using Storybook with an engineer.</li>
<li>Enhanced the entire student user experience by designing features within the proprietary Learning Management System to improve accessibility and engagement.</li>
<li>Created essential features for college instructors by utilizing feedback to implement solutions to facilitate better communication, organization, and support for courses and students.</li>
</ul>
</div>
<div class="keyword-container">
<p class="keyword">Startup</p>
<p class="keyword">Series A</p>
<p class="keyword">Education</p>
<p class="keyword">Engineering</p>
<p class="keyword">CSS</p>
<p class="keyword">Design System</p>
<p class="keyword">Storybook</p>
<p class="keyword">Prototyping</p>
<p class="keyword">InVision</p>
<p class="keyword">Web</p>
<p class="keyword">Mobile</p>
</div>
</div>
</div>
<div class="project">
<h2>Clover Health</h2>
<div class="project-content">
<p>Collaborated and supported the entire company to create and improve internal processes for product development, especially between engineering, design, and product. Learning how to build a startup + team from the ground up was a fun opportunity!</p>
<img src="./images/clover.png" class="mobile-hidden" alt="clover splash">
<img src="./images/clover-mobile.png" class="mobile-visible" alt="clover mobile splash">
<div class="focus-column">
<h2>Highlights:</h2>
<ul>
<li>Contributed to the styling and writing CSS for various projects including the provider directory search and formulary search.</li>
<li>Redesigned the home visit experience for Nurse Practitioners (NPs), which saved two daily hours and increased revenue by 8x.</li>
<li>Collaborated with an external agency and internal teams to deploy the first branded version of the Clover Health <a href="https://web.archive.org/web/20160220081453/https://www.cloverhealth.com/en/" target="_blank">website</a>, leading to higher brand visibility.</li>
<li>Contributed to the product development process by organizing all the teams, leading to better collaboration, communication, and transparency across departments.</li>
</ul>
</div>
<div class="keyword-container">
<p class="keyword">Startup</p>
<p class="keyword">Seed</p>
<p class="keyword">Series A</p>
<p class="keyword">Healthcare</p>
<p class="keyword">IPO</p>
<p class="keyword">Prototyping</p>
<p class="keyword">CSS</p>
<p class="keyword">Design System</p>
<p class="keyword">Web</p>
<p class="keyword">Mobile</p>
</div>
</div>
</div>
</div>
</div>
</section>
<section id="side-projects" class="animation-appear">
<div class="section-content">
<h1>Side projects</h1>
<p>An assortment of projects I work on for fun! It usually includes AI engineering, game development, and pixel art.</p>
<div class="project-container">
<div class="project">
<h2>Rat with wings</h2>
<div class="project-content">
<p>I made a Flappy Bird clone to familiarize myself with a game engine. Built in Unity with C#.</p>
<img src="/images/unity.png" class="mobile-hidden" alt="unity splash">
<img src="./images/unity-mobile.png" class="mobile-visible" alt="unity mobile splash">
<div class="keyword-container">
<p class="keyword">Unity</p>
<p class="keyword">Game Development</p>
<p class="keyword">Figma</p>
<p class="keyword">Engineering</p>
<p class="keyword">Scripting</p>
<p class="keyword">C#</p>
<p class="keyword">Game Engine</p>
<p class="keyword">Web</p>
</div>
<div class="button-group">
<button class="button" onclick="window.open('https://github.com/whoischrislam/unity-game-rat-with-wings', '_blank')"><i class="fa fa-github"></i> View GitHub repo</button>
<button class="button" onclick="window.open('https://rat-with-wings.netlify.app/', '_blank')"><i class="fa fa-play"></i> Play</button>
</div>
</div>
</div>
<div class="project">
<h2>Translator: AI Polyglot</h2>
<div class="project-content">
<p>I built an AI-powered language translation app. Built in JavaScript and the OpenAI API.</p>
<img src="/images/openai.png" class="mobile-hidden" alt="ai polyglot splash">
<img src="./images/openai-mobile.png" class="mobile-visible" alt="ai polyglot mobile splash">
<div class="keyword-container">
<p class="keyword">AI</p>
<p class="keyword">OpenAI</p>
<p class="keyword">Engineering</p>
<p class="keyword">HTML</p>
<p class="keyword">CSS</p>
<p class="keyword">JavaScript</p>
<p class="keyword">API</p>
<p class="keyword">Web</p>
<p class="keyword">Figma</p>
</div>
<div class="button-group">
<button class="button" onclick="window.open('https://github.com/whoischrislam/ai-polyglot', '_blank')"><i class="fa fa-github"></i> View GitHub repo</button>
<button class="button" onclick="window.open('https://ai-polyglot.netlify.app/', '_blank')"><i class="fa fa-eye"></i> View app</button>
</div>
</div>
</div>
<div class="project">
<h2>Zodiacus board game</h2>
<div class="project-content">
<p>I'm an avid board gamer who always wanted to make my own game. Zodiacus is currently in the alpha stage with playtesting.</p>
<img src="/images/zodiacus.png" class="mobile-hidden" alt="zodiacus splash">
<img src="./images/zodiacus-mobile.png" class="mobile-visible" alt="zodiacus mobile splash">
<div class="keyword-container">
<p class="keyword">Game Design</p>
<p class="keyword">3D Printing</p>
<p class="keyword">Tabletop</p>
<p class="keyword">Board Game</p>
<p class="keyword">Figma</p>
<p class="keyword">Playtesting</p>
</div>
</div>
</div>
<div class="project">
<h2>Project EDR</h2>
<div class="project-content">
<p>I'm developing a Roguelike Action Adventure Platformer with RPG elements set in a world similar to Earth's natural history.</p>
<img src="./images/edr.png" alt="edr splash">
<div class="keyword-container">
<p class="keyword">Unity</p>
<p class="keyword">Game Development</p>
<p class="keyword">Engineering</p>
<p class="keyword">Scripting</p>
<p class="keyword">C#</p>
<p class="keyword">Game Engine</p>
<p class="keyword">Figma</p>
</div>
</div>
</div>
</div>
</div>
</section>
<footer>
<div id="footer-content">
<p>© 2024 Christopher Lam</p>
<div id="nav-links">
<a href="#introduction">About</a>
<a href="#featured-work">Work</a>
<a href="https://www.dropbox.com/s/0mwyg5wy4qyln6j/chris_lam_resume.pdf?dl=0" target="_blank">Resume</a>
<a href="mailto:[email protected]"><span class="material-symbols-outlined">
mail
</span></a>
<a href="https://github.com/whoischrislam" target="_blank"><i class="fa fa-github" style="font-size:24px"></i></a>
<a href="https://www.linkedin.com/in/whoischrislam/" target="_blank"><i class="fa fa-linkedin" style="font-size:24px"></i></a>
</div>
</div>
</footer>
</body>
</html>