-
Notifications
You must be signed in to change notification settings - Fork 5
/
index.html
323 lines (322 loc) · 25 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
---
redirect_from: "/about/"
layout: null
hide_sidebar: true
---
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
{% include head.html %}
<title>{% if page.title %}{{ page.title }} | {% endif %}{{ site.title }}{% unless page.title %} - UI Designer/Developer{% endunless %}</title>
<link rel="stylesheet" href="/stylesheets/normalize.css">
<link href="https://fonts.googleapis.com/css?family=Roboto:100,400" rel="stylesheet" type="text/css">
<link href="https://fonts.googleapis.com/css?family=Roboto+Slab:300" rel="stylesheet" type="text/css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
<link rel="stylesheet" href="/stylesheets/animate.css">
<link rel="stylesheet" href="/stylesheets/about.css">
<link rel="shortcut icon" href="/favicon.ico">
<link rel="canonical" href="{{ page.url | replace:'index.html','' | prepend: site.baseurl | prepend: site.url }}">
</head>
<body>
<header class="header" role="banner">
<div class="container">
<div class="header__inner">
<h1 class="header__title">I'm <strong>Elle Kasai</strong>, a <strong>designer/developer</strong> based in Vancouver, Canada.</h1>
<p class="text--lead">You can check <a href="https://medium.com/@ellekasai/21-css-techniques-i-used-for-my-new-about-me-page-22afdf3f019a" target="_blank">my CSS techniques of this website</a>, say hi at <a href="mailto:elle.kasai@gmail.com" target="_blank">elle.kasai@gmail.com</a> or follow me on:</p>
<ul class="social-links">
<li><a href="https://github.com/ellekasai/" target="_blank"><i class="fa fa-github fa-2x" title="github"></i></a></li>
<li><a href="https://dribbble.com/ellekasai" target="_blank"><i class="fa fa-dribbble fa-2x" title="dribbble"></i></a></li>
<li><a href="https://www.linkedin.com/in/ellekasai" target="_blank"><i class="fa fa-linkedin fa-2x" title="linkedin"></i></a></li>
<li><a href="https://medium.com/@ellekasai" target="_blank"><i class="fa fa-medium fa-2x" title="medium"></i></a></li>
<li><a href="https://www.youtube.com/channel/UCedPJBdXlrsJMAvV1TEwMFQ" target="_blank"><i class="fa fa-youtube fa-2x" title="youtube"></i></a></li>
</ul>
</div>
</div>
</header>
<main role="main">
<section class="section">
<div class="container">
<div class="section__inner">
<h2>My experience and portfolio</h2>
<div class="row gallery-wrapper">
<div class="col col--experience-intro gallery-intro">
<p>I'm currently working for <a href="https://avesdo.com/" target="_blank">Avesdo</a> as a UI/UX Designer and designing sales management software for the real estate industry. In my free time, I teach Web development at <a href="https://redacademy.com/" target="_blank">RED Academy</a> as well.</p>
<p>I've also worked on open source frontend projects, made design/coding tutorial videos, taught online frontend courses and spoken at coding-related events. For my open source projects, I've tried to craft the best possible developer UX. As a result, my projects have received lots of stars on GitHub.</p>
</div>
<div class="col col--experience gallery-item">
<a href="https://medium.com/@ellekasai/how-to-market-yourself-for-job-hunting-56483e1c7eec" target="_blank">
<figure class="gallery-item__figure">
<img src="/images/about/langara.jpg" alt="Langara College" class="gallery-item__image">
</figure>
</a>
<h3>
<a href="https://medium.com/@ellekasai/how-to-market-yourself-for-job-hunting-56483e1c7eec" target="_blank">Langara College</a>
</h3>
<p>I was a guest speaker at <a href="https://langara.ca/" target="_blank">Langara College</a> and gave a talk about job hunting in front of students from Web and Mobile App Design and Development course. The video/slides can be found
<a href="https://medium.com/@ellekasai/how-to-market-yourself-for-job-hunting-56483e1c7eec"
target="_blank">here</a>.
<span class="text--muted">(November 2017)</span>
</p>
</div>
<div class="col col--experience gallery-item">
<a href="https://glasscanvas.io/" target="_blank">
<figure class="gallery-item__figure">
<img src="/images/about/glasscanvas.jpg" alt="Glass Canvas" class="gallery-item__image">
</figure>
</a>
<h3><a href="https://glasscanvas.io/" target="_blank">Glass Canvas</a></h3>
<p><a href="https://glasscanvas.io/" target="_blank">Glass Canvas</a> is a creative studio in Fort Langley. I contributed as a Frontend Developer and made websites/web applications to support great and inspiring organizations for changing our culture for the better. <span class="text--muted">(April 2017 - September 2017)</span></p>
</div>
<div class="col col--experience gallery-item">
<a href="https://medium.com/@ellekasai/how-to-create-css-coding-test-2ba17c4be423" target="_blank">
<figure class="gallery-item__figure">
<img src="/images/about/candc2017.jpg" alt="Code & Coffee" class="gallery-item__image">
</figure>
</a>
<h3><a href="https://medium.com/@ellekasai/how-to-create-css-coding-test-2ba17c4be423" target="_blank">Code & Coffee</a></h3>
<p>Code & Coffee Meetup is Vancouver's local programming meetup. I was a speaker again in April 2017 and talked about how I created my own CSS coding tests. The video/slides can be found <a href="https://medium.com/@ellekasai/how-to-create-css-coding-test-2ba17c4be423" target="_blank">here</a>. <span class="text--muted">(April 2017)</span></p>
</div>
<div class="col col--experience gallery-item">
<a href="https://sideci.com/" target="_blank">
<figure class="gallery-item__figure">
<img src="/images/about/sideci.jpg" alt="SideCI" class="gallery-item__image">
</figure>
</a>
<h3><a href="https://sider.review/" target="_blank">Sider (SideCI)</a></h3>
<p><a href="https://sider.review/" target="_blank">Sider</a> is making an automated code reviewing service. I was a product designer, and worked full-time from my place in Vancouver. <span class="text--muted">(September 2016 - February 2017)</span></p>
</div>
<div class="col col--experience gallery-item">
<a href="https://www.youtube.com/channel/UCedPJBdXlrsJMAvV1TEwMFQ" target="_blank">
<figure class="gallery-item__figure">
<img src="/images/about/elleheight-tv.jpg" alt="elle-height TV" class="gallery-item__image">
</figure>
</a>
<h3><a href="https://www.youtube.com/channel/UCedPJBdXlrsJMAvV1TEwMFQ" target="_blank">elle-height TV</a></h3>
<p><a href="https://www.youtube.com/channel/UCedPJBdXlrsJMAvV1TEwMFQ" target="_blank">elle-height TV</a> is a YouTube channel for designers and developers. I post some design/coding tutorial videos and vlogs in English and Japanese. <span class="text--muted">(January 2017 -)</span></p>
</div>
<div class="col col--experience gallery-item">
<a href="https://www.istuary.com/" target="_blank">
<figure class="gallery-item__figure">
<img src="/images/about/istuary.jpg" alt="Istuary Innovation Group" class="gallery-item__image">
</figure>
</a>
<h3><a href="https://www.istuary.com/" target="_blank">Istuary Innovation Group</a></h3>
<p>At Istuary, I worked on front-end design and HTML/CSS as a UI Developer. I also made my own CSS framework and became an instructor for other engineers in the company. <span class="text--muted">(August 2015 - August 2016)</span></p>
</div>
<div class="col col--experience gallery-item">
<a href="https://ellekasai.github.io/resumecards/" target="_blank">
<figure class="gallery-item__figure">
<img src="/images/about/resumecards.png" alt="ResumeCards" class="gallery-item__image">
</figure>
</a>
<h3><a href="https://ellekasai.github.io/resumecards/" target="_blank">ResumeCards</a></h3>
<p>ResumeCards is a Markdown based resume generator. It looks great on mobile/desktop and can be saved as PDF. <span class="text--muted">(January 2015)</span></p>
<iframe src="https://ghbtns.com/github-btn.html?user=ellekasai&repo=resumecards&type=watch&count=true&" allowtransparency="true" frameborder="0" scrolling="0" width="170" height="20"></iframe>
</div>
<div class="col col--experience gallery-item">
<a href="https://ellekasai.github.io/twemoji-awesome/" target="_blank">
<figure class="gallery-item__figure">
<img src="/images/about/twemojiawesome.png" alt="Twemoji Awesome" class="gallery-item__image">
</figure>
</a>
<h3><a href="https://ellekasai.github.io/twemoji-awesome/" target="_blank">Twemoji Awesome</a></h3>
<p>Like Font Awesome, but for Twitter Emoji. Works with Emoji Cheat Sheet. <span class="text--muted">(November 2014)</span></p>
<iframe src="https://ghbtns.com/github-btn.html?user=ellekasai&repo=twemoji-awesome&type=watch&count=true&" allowtransparency="true" frameborder="0" scrolling="0" width="170" height="20"></iframe>
</div>
<div class="col col--experience gallery-item">
<a href="https://ellekasai.github.io/purplecoat.js/" target="_blank">
<figure class="gallery-item__figure">
<img src="/images/about/purplecoatjs.png" alt="Purplecoat.js" class="gallery-item__image">
</figure>
</a>
<h3><a href="https://ellekasai.github.io/purplecoat.js/" target="_blank">Purplecoat.js</a></h3>
<p>Purplecoat.js lets you create labeled overlays that can be triggered with a click. And you don't need to write a single line of Javascript. <span class="text--muted">(November 2014)</span></p>
<iframe src="https://ghbtns.com/github-btn.html?user=ellekasai&repo=purplecoat.js&type=watch&count=true&" allowtransparency="true" frameborder="0" scrolling="0" width="170" height="20"></iframe>
</div>
<div class="col col--experience gallery-item">
<a href="https://ellekasai.github.io/shiori/" target="_blank">
<figure class="gallery-item__figure">
<img src="/images/about/shiori.png" alt="Shiori" class="gallery-item__image">
</figure>
</a>
<h3><a href="https://ellekasai.github.io/shiori/" target="_blank">Shiori</a></h3>
<p>Shiori is a Bootstrap-based Jekyll theme. It looks great by default, but you can customize it easily. <span class="text--muted">(September 2014)</span></p>
<iframe src="https://ghbtns.com/github-btn.html?user=ellekasai&repo=shiori&type=watch&count=true&" allowtransparency="true" frameborder="0" scrolling="0" width="170" height="20"></iframe>
</div>
<div class="col col--experience gallery-item">
<a href="https://ladieslearningcode.com/" target="_blank">
<figure class="gallery-item__figure">
<img src="/images/about/llc.jpg" alt="Ladies Learning Code" class="gallery-item__image">
</figure>
</a>
<h3><a href="https://ladieslearningcode.com/" target="_blank">Ladies Learning Code</a></h3>
<p>Ladies Learning Code is a non-profit organization which runs beginner-friendly tech education programs for women. I’m a mentor for its HTML/CSS workshops. <span class="text--muted">(February 2015 –)</span></p>
</div>
<div class="col col--experience gallery-item">
<a href="https://medium.com/@ellekasai/how-to-market-micro-open-source-projects-703f03c71061" target="_blank">
<figure class="gallery-item__figure">
<img src="/images/about/candc.jpg" alt="Code & Coffee" class="gallery-item__image">
</figure>
</a>
<h3><a href="https://medium.com/@ellekasai/how-to-market-micro-open-source-projects-703f03c71061" target="_blank">Code & Coffee</a></h3>
<p>Code & Coffee Meetup is Vancouver's local programming meetup. I was a speaker in Febraury 2015 and talked about how I marketed my open source projects. The video/slides can be found <a href="https://medium.com/@ellekasai/how-to-market-micro-open-source-projects-703f03c71061" target="_blank">here</a>. <span class="text--muted">(February 2015)</span></p>
</div>
<div class="col col--experience gallery-item">
<a href="https://elle-height.ellekasai.com/" target="_blank">
<figure class="gallery-item__figure">
<img src="/images/about/elleheight-podcast.png" alt="elle-height" class="gallery-item__image">
</figure>
</a>
<h3><a href="https://elle-height.ellekasai.com/" target="_blank">elle-height Podcast</a></h3>
<p>In January 2015, I started a podcast where I talk about design, coding, and my daily life in Vancouver. <span class="text--muted">(January 2015)</span></p>
</div>
<div class="col col--experience gallery-item">
<a href="https://www.youtube.com/watch?v=J_vGbXDAvmQ" target="_blank">
<figure class="gallery-item__figure">
<img src="/images/about/womenwhocode.jpg" alt="Women Who Code Tokyo" class="gallery-item__image">
</figure>
</a>
<h3><a href="https://www.youtube.com/watch?v=J_vGbXDAvmQ" target="_blank">Women Who Code Tokyo #1</a></h3>
<p>I was an organizer and the keynote speaker at the inaugural Women Who Code event in Tokyo. I spoke about how I learned to code, in front of ~20 female programmers. <span class="text--muted">(July 2014)</span></p>
</div>
<div class="col col--experience gallery-item">
<a href="https://woman.bizreach.jp/" target="_blank">
<figure class="gallery-item__figure">
<img src="/images/about/woman.png" alt="Bizreach Woman" class="gallery-item__image">
</figure>
</a>
<h3><a href="https://www.bizreach.co.jp/" target="_blank">Bizreach</a></h3>
<p>At Bizreach, I wrote the majority of frontend code for <a href="https://woman.bizreach.jp" target="_blank">BizReach Woman</a>, a job site specifically for female business executives in Japan. I also did a little bit of UX/graphic design. <span class="text--muted">(May 2014)</span></p>
</div>
<div class="col col--experience gallery-item">
<a href="https://schoo.jp/teacher/336" target="_blank">
<figure class="gallery-item__figure">
<img src="/images/about/schoo.jpg" alt="Schoo" class="gallery-item__image">
</figure>
</a>
<h3><a href="https://schoo.jp/teacher/336" target="_blank">Introduction to HTML & CSS Sketching</a></h3>
<p>I was a lecturer at <a href="https://schoo.jp/" target="_blank">Schoo</a>, Japan’s leading online education platform. I designed and taught a bi-weekly class on HTML/CSS. On every lecture, I did live coding and there were ~500 live viewers. <span class="text--muted">(March 2014)</span></p>
</div>
<div class="col col--experience gallery-item">
<a href="https://www.youtube.com/channel/UC13fw9W2AudLn5Cp9EjRqAQ" target="_blank">
<figure class="gallery-item__figure">
<img src="/images/about/htmlsketch.jpg" alt="HTML & CSS Sketching" class="gallery-item__image">
</figure>
</a>
<h3><a href="https://www.youtube.com/channel/UC13fw9W2AudLn5Cp9EjRqAQ" target="_blank">HTML & CSS Sketching, on YouTube</a></h3>
<p>I recorded HTML/CSS tutorial screencasts on YouTube in Japanese. For beginning coders, I showed how to "sketch" Wikipedia.org using HTML/CSS. This led to my speaking opportunity at Schoo. <span class="text--muted">(January 2014)</span></p>
</div>
</div>
</div>
</div>
</section>
<section id="js-story-section" class="section wow fadeInDown story-section" data-wow-offset="10">
<div class="container">
<div class="section__inner section__inner--story">
<h2>My Story</h2>
<p>I went from being a saleswoman in Japan to a design/coding lady in Canada. Here's my story.</p>
<p><button id="js-trigger">Read More</button></p>
<div id="js-after" class="hidden">
<p>I was born in Phillippines and raised in Kanagawa, Japan. After graduating from Gakushuin Women's College with a Marketing degree in 2012, I started working at a payment startup in Tokyo as a sales associate.</p>
<p>But I've always loved to express myself and be creative, and I wasn't quite satisfied with my job. So after a year, I decided to pursue a completely different career in UI design.</p>
<p>Shortly afterwards, I left my job. I flew to Silicon Valley where my boyfriend at the time lived and <a href="https://medium.com/@chibicode/teaching-someone-to-code-is-partly-a-hardware-problem-fe6a2067d770" target="_blank">learned</a> coding and design from him for 3 months. I focused on becoming really good at HTML/CSS, because I thought it'd be hard to compete on graphic design skills without a formal design/art background.</p>
<p>I fell in love with frontend coding, and the community around it. During my stay in the U.S., I attended the inaugural CSSConf in Florida. I was shocked by how everybody is really excited about the field, loves to share what they know, and cares about each other in the community. I made it my goal to one day speak at a big international frontend conference.</p>
<p>Eventually I came back to Japan, and in Fall 2013, I became a junior product designer at BizReach, a Tokyo-based startup. I also started teaching HTML/CSS online and speaking at local events.</p>
<p>After working in Tokyo for almost a year, I attended CSSConf again, this time in Berlin. I knew a lot more about CSS, so I was able to chat with attendees and make friends. I then decided it's time for me to move on and pursue my dream of working abroad. I packed my stuff and moved to Vancouver, Canada in Fall 2014.</p>
<p>I came right when Startup Weekend Vancouver was happening. I jumped in as a designer, and our team had received the second place. Since then, I've been enjoying my adventure in Vancouver, learning tons and making lots of friends along the way :)</p>
<p class="story-section__footer"><img src="/images/about/sales-circle.jpg" alt="Elle"></p>
</div>
</div>
</div>
</section>
<section class="section wow fadeInDown" data-wow-offset="10">
<div class="container">
<div class="section__inner section__inner--narrow section__inner--center-title section__inner--center-paragraph">
<h2>My Favorite Tech Events</h2>
<div class="gallery-intro">
<p>If you see me at an event, please say hi. I'd love to chat with you too!</p>
</div>
<div class="row gallery-wrapper">
<div class="col col--event gallery-item">
<figure class="gallery-item__figure">
<img src="/images/about/cssconf-us.jpg" alt="CSSConf US" class="gallery-item__image gallery-item__image--event">
<figcaption><a href="https://2013.cssconf.com/" target="_blank">CSSConf US / Florida, 2013</a></figcaption>
</figure>
</div>
<div class="col col--event gallery-item">
<figure class="gallery-item__figure">
<img src="/images/about/cssconf-eu.jpg" alt="CSSConf EU" class="gallery-item__image gallery-item__image--event">
<figcaption><a href="https://2014.cssconf.eu/" target="_blank">CSSConf EU / Berlin, 2014</a></figcaption>
</figure>
</div>
<div class="col col--event gallery-item">
<figure class="gallery-item__figure">
<img src="/images/about/swv.jpg" alt="Startup Weekend Vancouver" class="gallery-item__image gallery-item__image--event">
<figcaption><a href="https://www.up.co/communities/canada/vancouver/startup-weekend/3845" target="_blank">Startup Weekend Vancouver / Vancouver, 2014</a></figcaption>
</figure>
</div>
<div class="col col--event gallery-item">
<figure class="gallery-item__figure">
<img src="/images/about/smashingconf.jpg" alt="Smashing Conference Whistler" class="gallery-item__image gallery-item__image--event">
<figcaption><a href="https://smashingconf.com/whistler-2014/" target="_blank">Smashing Conf / Whistler, 2014</a></figcaption>
</figure>
</div>
<div class="col col--event gallery-item">
<figure class="gallery-item__figure">
<img src="/images/about/styleandclassconf.jpg" alt="Style & Class Conf" class="gallery-item__image gallery-item__image--event">
<figcaption><a href="https://www.eventbrite.com/e/the-style-class-conference-tickets-13842235499" target="_blank">Style & Class Conf / Vancouver, 2014</a></figcaption>
</figure>
</div>
<div class="col col--event gallery-item">
<figure class="gallery-item__figure">
<img src="/images/about/designcontentconf.jpg" alt="Design & Content Conference" class="gallery-item__image gallery-item__image--event">
<figcaption><a href="https://designcontentconf.com/" target="_blank">Design & Content Conference / Vancouver, 2017</a></figcaption>
</figure>
</div>
</div>
</div>
</div>
</section>
<section class="section wow fadeInDown" data-wow-offset="10">
<div class="container">
<div class="section__inner section__inner--narrow section__inner--center-title">
<h2>Hello, Vancouver!</h2>
<figure class="section__header-figure">
<img src="/images/about/vancouver.jpg" alt="Hello Vancouver">
</figure>
<p>In Fall 2014, I left my job in Tokyo and moved to Vancouver, Canada for new challenges. If you want to chat, say hi at <a href="mailto:elle.kasai@gmail.com" target="_blank">elle.kasai@gmail.com</a>.</p>
<p>I'm currently improving my JavaScripts skills and design skills, working on <a href="https://github.com/ellekasai" target="_blank">open source projects</a>, <a href="https://www.youtube.com/channel/UCedPJBdXlrsJMAvV1TEwMFQ" target="_blank">making videos</a>, and attending (or <a href="https://www.meetup.com/Code-Coffee-Vancouver/events/220412978/" target="_blank">speaking</a>) at local tech/startup events. I'm also a mentor at <a href="https://ladieslearningcode.com/" target="_blank">Ladies Learning Code</a>.</p>
</div>
</div>
</section>
</main>
<footer class="footer" role="complementary">
<div class="container">
<div class="footer__inner">
<h3>Thank you for reading :)</h3>
<p>Say hi at <a href="mailto:elle.kasai@gmail.com" target="_blank">elle.kasai@gmail.com</a> or follow me on:</p>
<ul class="social-links social-links--footer">
<li><a href="https://github.com/ellekasai/" target="_blank"><i class="fa fa-github fa-2x" title="github"></i></a></li>
<li><a href="https://dribbble.com/ellekasai" target="_blank"><i class="fa fa-dribbble fa-2x" title="dribbble"></i></a></li>
<li><a href="https://www.linkedin.com/in/ellekasai" target="_blank"><i class="fa fa-linkedin fa-2x" title="linkedin"></i></a></li>
<li><a href="https://medium.com/@ellekasai" target="_blank"><i class="fa fa-medium fa-2x" title="medium"></i></a></li>
<li><a href="https://www.youtube.com/channel/UCedPJBdXlrsJMAvV1TEwMFQ" target="_blank"><i class="fa fa-youtube fa-2x" title="youtube"></i></a></li>
</ul>
<p class="footer__source">
For designers: <a href="https://medium.com/@ellekasai/21-css-techniques-i-used-for-my-new-about-me-page-22afdf3f019a" target="_blank">21 CSS techniques I used for my new about me page</a>
</p>
</div>
</div>
</footer>
<script src="/javascripts/jquery.min.js"></script>
<script src="/javascripts/wow.min.js"></script>
<script src="/javascripts/about.js"></script>
{% include scripts.html %}
<script>
new WOW().init();
</script>
</body>
</html>