-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
428 lines (388 loc) · 22.2 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
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
<!DOCTYPE HTML>
<!--
Stellar by HTML5 UP
html5up.net | @ajlkn
Free for personal and commercial use under the CCA 3.0 license (html5up.net/license)
-->
<html>
<head>
<title>Miki Suzuki's Portfolio</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no" />
<link rel="stylesheet" href="assets/css/main.css" />
<noscript>
<link rel="stylesheet" href="assets/css/noscript.css" />
</noscript>
<link rel="apple-touch-icon" sizes="180x180" href="apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="32x32" href="favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="favicon-16x16.png">
<link rel="manifest" href="site.webmanifest">
</head>
<body class="is-preload">
<!-- Wrapper -->
<div id="wrapper">
<!-- Header -->
<header id="header" class="alt">
<span class="logo"><img src="images/logo.svg" alt="" /></span>
<h1>Miki Station</h1>
<p>by Miki Suzuki<br /></p>
</header>
<!-- Nav -->
<nav id="nav">
<ul>
<li><a href="#intro" class="active">Introduction</a></li>
<li><a href="#first">Projects</a></li>
<li><a href="#second">Skills</a></li>
<li><a href="#third">Background</a></li>
<li><a href="#forth">Journey</a></li>
</ul>
</nav>
<!-- Main -->
<div id="main">
<!-- Introduction -->
<section id="intro" class="main">
<div class="spotlight">
<div class="content">
<header class="major">
<h2>About me</h2>
</header>
<p>
I am a London-based Computer Science graduate with an MSc, transitioning from a background
in sales and marketing to pursue my passion for technology.
<br><br>
My journey into tech began through website design collaborations, which sparked my interest
in in the impact of digital platforms and their ability to drive business growth. I also
developed a passion for automation, using VBA and Apps Script to streamline repetitive tasks
and improve efficiency. During the COVID-19 pandemic, when my job was severely affected, I
began learning Python to expand my skill. Later, working in customer support, I encountered
technical challenges that motivated me to learn how to solve problems at their core.
<br><br>
With experience in travel and marketing, I focus on building efficient, user-centred
software solutions. I’m particularly excited about the potential of generative AI and large
language models to solve real-world problems.
<br><br>
Beyond tech, I enjoy hiking, birdwatching, and plant-based cooking, and I’m committed to
sustainability. I’m always open to connecting for collaboration or discussing projects.
</p>
</div>
<span class="image"><img src="images/profile.png" alt="" /></span>
</div>
</section>
<!-- First Section -->
<section id="first" class="main special">
<header class="major">
<h2>Projects</h2>
</header>
<div class="spotlight-container">
<div class="spotlight">
<div class="content">
<p><a href="https://devpost.com/software/ryoko-travel">
<h3>Ryoko History - Consumer AI Hackathon ⭐3rd place</h3>
</a>
Built video generator using AI models, integrating image-to-video, text-to-speech, and
translation features from AI-driven dialogues and images.<br>
<i>Tools: Python, FastAPI, asyncio, ElevenLab/Luma/OpenAI APIs</i>
</div>
<div class="content">
<p><a href="https://github.com/3miki/ai-quiz-app">
<h3>AI Photo Quiz Game</h3>
</a>
Developed quiz app that allows users to submit their own photos and transforms them into
quizzes using generative AI vision capabilities.<br>
<i>Tools: TypeScript, React, Next.js, Supabase, OpenAI API</i>
</p>
</div>
</div>
<div class="spotlight">
<div class="content">
<p>
<h3>Social Media Analysis with Large Language Models</h3>
Adapted open-source large language models for information extraction task on online posts
using Pydantic models to structure outputs. [Proprietary project]<br>
<i>Tools: Python, Ollama, Langchain, Pandas, Numpy</i>
</p>
</div>
<div class="content">
<p><a href="https://github.com/3miki/swarm-fitbit-alarm">
<h3>Swarm Smartwatch App</h3>
</a>
Built a Fitbit app that lets users trigger a silent alarm to notify emergency contacts
via SMS. The message includes the user’s GPS location and a Google Maps link for quick
assistance.<br>
<i>Tools: JavaScript, Fitbit SDK, Twilio API, Node.js</i>
</p>
</div>
</div>
<div class="spotlight">
<div class="content">
<p><a href="https://github.com/3miki/TransPic">
<h3>TransPic - Gemma2 Hackathon</h3>
</a>
Developed a web app that extract object name from images and translate into different
languages using Google multimodal and vision models. This app can be used for language
learning when travelling.<br>
<i>Tools: Python, Streamlit, Google Gemma2, Paligema</i>
</p>
</div>
<div class="content">
<p>
<h3>Hotel Booking Machine Learning Analysis</h3>
Developed machine learning models to predict hotel booking cancellations using SVM,
Decision
Tree, and Causal Bayesian Networks.<br>
<i>Tools: Scikit-learn, Pandas, Numpy, Matplotlib, Agena.ai</i>
</p>
</div>
</div>
<div class="spotlight-container">
<div class="spotlight">
<div class="content">
<p><a href="https://devpost.com/software/good-job-qukzw0">
<h3>GoodJob! - Google Women's Techmakers</h3>
</a>
Developed a skill-matching app using Streamlit for skill analysis to provide job
seekers
with
match percentage and AI-driven encouragement to boost confidence.<br>
<i>Tools: Streamlit, Google Gemini API</i>
</p>
</div>
<div class="content">
<p><a href="https://gitlab.com/leevoid/plantmusic">
<h3>Plant Music - Royal Hackaway 2024</h3>
</a>
Designed a user interface and created several functionalities for an educational
game.
The game teaches children how to care for plants through interactive activities.<br>
<i>Tools: Java, Eclipse IDE</i>
</p>
</div>
</div>
</div>
<div class="spotlight">
<div class="content">
<p><a href="https://github.com/czuhajster/traige">
<h3>Triage - IC Hack 2024</h3>
</a>
Created a dashboard for a real-time machine learning system to analyse biometric
data from wearable devices.<br>
<i>Tools: Flutter</i>
<br>
</p>
</div>
<div class="content">
<p><a href="https://github.com/3miki/diy-covid-19-dashboard">
<h3>Covid-19 Dashboard</h3>
</a>
Utilised a public API to fetch Covid-19 data and visualised the information,
providing insights on the trends.<br>
<i>Tools: Python, NHS API, Pandas, Matplotlib</i>
</p>
</div>
</div>
<div class="spotlight-container">
<div class="spotlight">
<div class="content">
<p><a href="https://rj-n.com/">
<h3>Website Design / Social Media Content Writing</h3>
</a>
Designed a website, maintained content and analysed site traffic. Crafted content
for
social media platforms to enhance online presence.<br>
<i>Tools: Google Analytics, CMSs</i>
</p>
</div>
<div class="content">
<p>
</p>
</div>
</div>
</div>
<div class="spotlight">
<div class="content">
<p>
</p>
</div>
<div class="content">
<p>
</p>
</div>
</div>
</section>
<!-- Second Section -->
<section id="second" class="main special">
<header class="major">
<h2>Skills</h2>
</header>
<ul class="features">
<li>
<span class="icon solid major style5 fa-code"></span>
<h3>Technologies</h3>
Languages: Python, JavaScript, Java, Dart<br>
<br>
Web & Mobile Development: <br>
Node.js, Express, FastAPI, Streamlit, Flutter<br>
<br>
Databases: SQLite, Oracle, MySQL<br>
</li>
<li>
<span class="icon solid major style1 fa-robot"></span>
<h3>AI & Machine Learning</h3>
<p>
LLMs, chatbot development, text summarisation and multimodal models
<br>
<br>
Langchain, Transformers, <br>PyTorch, Hugging Face
<br>
<br>
</p>
</li>
<li>
<span class="icon solid major style3 fa-chart-bar"></span>
<h3>Data Analytics</h3>
<p>
Data exploration & visualisation, statistical modeling, Bayesian Networks and predictive
analysis
<br>
<br>
Scikit-learn, Pandas, Numpy, <br>Matplotlib, pyAgrum
<br>
</p><br>
</li>
</ul>
</section>
<section id="third" class="main special">
<header class="major">
<h2>Background</h2>
</header>
<div class="spotlight-container" style="display: flex; align-items: flex-start;">
<div class="spotlight" style="align-items: start">
<div class="content" style="text-align: center">
<span class="icon solid major style2 fa-briefcase"></span>
<h3>Professional Experience</h3>
<p>
<b>Sales, Marketing & Business Development</b><br>
Customer acquisition and business development strategies.<br>
Automation of data handling and reporting using VBA.<br>
Hands-on experience with CRMs, CMSs, Jira, and analytics platforms including Google
Analytics and Sisense.
<br><br>
<b>Web & Digital Content Creation</b><br>
Created user-friendly web and email content using HTML/CSS.<br>
Video editing tools including Filmora and DaVinci Resolve.<br>
Bilingual communication: Fluent in English <br>and Japanese for cross-cultural
projects.<br><br>
</p>
</div>
<div class="content" style="text-align: center">
<span class="icon solid major style4 fa-graduation-cap"></span>
<h3>Education</h3>
<p><b>MSc in Computer Science</b><br>Queen Mary Univerity of London, UK<br><br>
<b>Tourism and Hospitality Management, English Literature </b><br>Ashland Univeristy,
USA<br><br>
<b>BA in English and English Literature</b><br>Aichi Prefectural University, Japan
<br><br>
</p>
</div>
</div>
</div>
</section>
<section id="forth" class="main special">
<header class="major">
<h2>Journey into Tech</h2>
</header>
<div class="timeline">
<ul>
<li><b>Encounter with Cybersecurity</b>
<ul>
<li>While studying abroad in the USA, my computer was hacked by trojan malware, which
caused panic. Thankfully, the campus tech support team helped me recover and
replaced my security software with a more suitable one, which sparked my interest in
technology and cybersecurity.</li>
<li>Afterward, I bought a MacBook Pro and started experimenting with hardware upgrades,
such as changing the hard drive and memory. This hands-on experience helped me learn
about computer components and repairs.</li>
</ul>
</li>
<li><b>First Professional Experience in Travel Industry</b>
<ul>
<li>After graduation, I was eager to contribute to Japan’s recovery from the Great
Earthquake by working in the inbound travel sector. I joined a travel agency as a
sales and tour conductor, where I gained experience and industry knowledge.</li>
<li>As my company ventured into inbound travel services, I collaborated with a web
designer to create a website for a new business targeting global expansion. This
project ignited my interest in web development and highlighted the power of digital
tools in driving business growth.</li>
<li>During the COVID-19 pandemic when the travel industry was significantly affected, I
took the opportunity to learn Python to develop my coding skills and explore ways to
automate processes such as Apps Script.</li>
</ul>
</li>
<li><b>Multi-tasking at Marketing Company</b>
<ul>
<li>At a marketing company in the UK, I took multiple roles, including customer support
and content writing. As reporting was crucial but time-consuming due to poor
software integrations, I implemented VBA to automate tasks, improving efficiency in
data handling and reporting. This freed up time to improve customer interactions and
design user-friendly web content.
<li>Despite my efforts, technical issues often prevented me from fully resolving
customer problems, which led to frustration. This motivated me to dive deeper into
solving technical challenges at their core.</li>
<li>Outside my job, I started learning JavaScript to develop my web development skills,
as my work involved HTML and CSS to create engaging web content. I also participated
in hackathons and workshops, applying my skills in real-world projects and expanding
my portfolio.</li>
</ul>
</li>
<li><b>Transition to Tech</b>
<ul>
<li>I enrolled in a Computer Science MSc program to deepen my technical knowledge. For
my dissertation, I explored large language models and created AI projects to solve
real-world problems, applying both my academic knowledge and practical work
experience.</li>
</ul>
</li>
</ul>
</div>
</section>
</div>
<!-- Footer -->
<footer id="footer">
<section>
<h2>Navigation</h2>
<!-- Nav -->
<nav>
<ul>
<li><a href="#intro" class="active">Introduction</a></li>
<li><a href="#first">Projects</a></li>
<li><a href="#second">Skills</a></li>
<li><a href="#third">Background</a></li>
<li><a href="#forth">Journey</a></li>
</ul>
</nav>
</section>
<section>
<h2>Links</h2>
<ul class="icons">
<li><a href="https://github.com/3miki" class="icon brands fa-github alt"><span
class="label">GitHub</span></a></li>
<li><a href="https://www.linkedin.com/in/miki-suzuki/" class="icon brands fa-linkedin alt"><span
class="label">LinkedIn</span></a></li>
<li><a href="mailto:temporary disabled" class="icon fa-envelope alt"><span
class="label">email</span></a>
</li>
</ul>
</section>
<p class="copyright">© Miki Suzuki. Design: <a href="https://html5up.net">HTML5 UP</a>.</p>
</footer>
</div>
<!-- Scripts -->
<script src="assets/js/jquery.min.js"></script>
<script src="assets/js/jquery.scrollex.min.js"></script>
<script src="assets/js/jquery.scrolly.min.js"></script>
<script src="assets/js/browser.min.js"></script>
<script src="assets/js/breakpoints.min.js"></script>
<script src="assets/js/util.js"></script>
<script src="assets/js/main.js"></script>
</body>
</html>