-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
279 lines (262 loc) · 11.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
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<meta name="description" content="UX/UI designer Sophie Kim's Portfolio">
<meta name="keywords" content="HTML,CSS,SCSS,JavaScript,UI,UX,designer,developer">
<meta name="author" content="Sophie Kim">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Sophie Kim's Portfolio</title>
<link href="https://fonts.googleapis.com/css?family=Montserrat:400,600,800|Share:400,700&display=swap" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.7.2/animate.min.css">
<link rel="stylesheet" href="plugIns/themify-icons/themify-icons.css">
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<header>
<a style="text-decoration:none;" href="#home">
<img class="logo" src="img/logoDark.png" alt="">
<img class="mLogo" src="img/logoLight.png" alt=""> </a>
<nav class="nav">
<div class="toggle">
<i class="ti-menu"></i>
<i class="ti-close"></i>
</div>
<ul>
<li><a href="#home">HOME</a> </li>
<li><a class="about" href="#about">ABOUT</a></li>
<li><a href="#works">WORKS</a></li>
<li><a class="skills" href="#skills">SKILLS</a></li>
<li><a href="#contact">CONTACT</a></li>
</ul>
</nav>
</header>
<main>
<section id="home" class="section">
<h4 class="intro"><span>{ Sophie Kim }</span><br/><br/> <p>Creative UX/UI designer<br/>Thrive Web Developer</p>
</h4>
<nav class="sns">
<ul>
<li><a href="https://dribbble.com/alexsophiekim" target="_blank"><i class="ti-dribbble"></i></a></li>
<li><a href="https://www.pinterest.nz/alexsophiekim/" target="_blank"><i class="ti-pinterest"></i></a></li>
<li><a href="https://www.instagram.com/basednz/" target="_blank"><i class="ti-instagram"></i></a></li>
<li><a href="https://github.com/alexsophiekim" target="_blank"><i class="ti-github"></i></a></li>
<li><a href="https://www.linkedin.com/in/sophie-k-902622177/" target="_blank"><i class="ti-linkedin"></i></a></li>
<li><a href="mailto:[email protected]"><i class="ti-email"></i></a></li>
</ul>
</nav>
</section>
<section id="about" class="section">
<div class="aboutTitle col12 "> HELLO, THERE!</div>
<div class="aboutBox ">
<h1 class="aboutText">
I am a UX/UI and digital designer based in Wellington, NZ. Recently, I worked with MOBIHQ, a food online ordering SaaS company, as a Digital Designer/Front-End Designer. Essentially, my role involved improving and styling the UX/UI for the food ordering storefront across various platforms.
Prior to that, I worked at the TAB sports betting agency and Tech Expozed International Limited as a UX designer. I am passionate about creating user-centric web applications. I enjoy brainstorming from a UX perspective and collaborating with teams to solve problems. Proficient in CSS, I confidently handle code-based styling.
Additionally, I have acquired skills in full-stack web development. I am quick to learn, adaptable, and driven to succeed.
<br/>Outside of work, I enjoy fashion, coffee, travel, and yoga. A fun fact about me is that I have completed a 200-hour yoga teacher training in Bali.
<br/><span style="background-color:#fcf4a3;">I am actively looking for a new opportunity.</span>
</h1>
</div>
</section>
<section id="works" class="section">
<div class="cardContainer">
<div class="flexWrap">
<div class="box">
<a href="subproductpage.html" target="_self">
<div class="icon">
<i class="ti-search" aria-hidden="true"></i>
</div>
<div class="content">
<h3>UX/UI</h3>
<p>MOBIHQ - Sub product <br/> menu build feature improvement<br/>Using Figma and React Native/CSS</p>
</a>
</div>
</div>
<div class="box">
<a href="storefront.html" target="self">
<div class="icon">
<i class="ti-search" aria-hidden="true"></i>
</div>
<div class="content">
<h3>Storefronts UI</h3>
<p>Client storefront user interface design<br/>Seamless streamline Ordering</p>
</a>
</div>
</div>
<div class="box">
<a href="ruapehu.html" target="_self">
<div class="icon">
<i class="ti-search" aria-hidden="true"></i>
</div>
<div class="content">
<h3>UX/UI</h3>
<p>Mt.Ruapehu - Accomodation Booking System <br/> Single Web application design to build application</p>
</a>
</div>
</div>
<div class="box">
<a href="himate.html" target="_self">
<div class="icon">
<i class="ti-search" aria-hidden="true"></i>
</div>
<div class="content">
<h3>Branding</h3>
<p>Hi!mate Cafe & Resturant<br/>Branding work</p>
</a>
</div>
</div>
<!-- <div class="box">
<a href="https://www.behance.net/gallery/85432687/take-away-order-web" target="_blank">
<div class="icon">
<i class="ti-search" aria-hidden="true"></i>
</div>
<div class="content">
<h3>UX Research</h3>
<p>Tandoori Nights - Take away food ordering system<br/> UX research and Mockup</p>
</a>
</div>
</div> -->
<div class="box">
<a href="https://www.behance.net/gallery/87112011/Caucus" target="_blank">
<div class="icon">
<i class="ti-search" aria-hidden="true"></i>
</div>
<div class="content">
<h3>UX Research</h3>
<p>Caucus - Resturant Table Ordering System <br/> Full responsive application<br/>Using HTML and CSS / SASS</p>
</a>
</div>
</div>
<div class="box">
<a href="https://alexsophiekim.github.io/beat-music" target="_blank">
<div class="icon">
<i class="ti-search" aria-hidden="true"></i>
</div>
<div class="content">
<h3>Live</h3>
<p>Make your own Beat! <br/>This fun project using JavaScript</p>
</a>
</div>
</div>
<!-- <div class="box">
<a href="https://alexsophiekim.github.io/supermarket/" target="_blank">
<div class="icon">
<i class="ti-search" aria-hidden="true"></i>
</div>
<div class="content">
<h3>Live</h3>
<p>Supermarket Products Filtering System <br/>Single web application<br/> Using pure JavaScript</p>
</a>
</div>
</div> -->
<div class="box">
<a href="https://www.behance.net/gallery/89596271/Thread-P2P-shopping-mall" target="_blank">
<div class="icon">
<i class="ti-search" aria-hidden="true"></i>
</div>
<div class="content">
<h3>UX Research</h3>
<p>C2C pre-loved clothes market<br/>Full-stack collaboration work.<br/>using RESTful APIs, MongoDB and Node.js</p>
</a>
</div>
</div>
<div class="box">
<a href="https://www.behance.net/gallery/97543313/Receipt-collect-App" target="_blank">
<div class="icon">
<i class="ti-search" aria-hidden="true"></i>
</div>
<div class="content">
<h3>UI/UX design</h3>
<p>Receipt Collect App<br/>Create and build Receipt collecting App using Figma mockup</p>
</a>
</div>
</div>
</div>
</div>
</section>
<section id="skills" class="section">
<h1 class="skillsTitle">Skills</h1>
<article class="skillSet">
<p>UX/UI-Figma</p>
<div class="graph line90" >
<span style="width:90%">90%</span>
</div>
<p>HTML / CSS / SASS</p>
<div class="graph line90">
<span style="width:90%">90%</span>
</div>
<p>React.js</p>
<div class="graph line85">
<span style="width:85%">85%</span>
</div>
<p>JavaScript / jQuery</p>
<div class="graph line75">
<span style="width:75%">75%</span>
</div>
<p>PHP / SQL</p>
<div class="graph line70">
<span style="width:70%">70%</span>
</div>
<p>Node.js</p>
<div class="graph line75">
<span style="width:75%">75%</span>
</div>
<p>MongoDB</p>
<div class="graph line75">
<span style="width:75%">75%</span>
</div>
<p>RESTful APIs</p>
<div class="graph line80">
<span style="width:80%">80%</span>
</div>
<p>CMS</p>
<div class="graph line80">
<span style="width:80%">80%</span>
</div>
<p>Git / Github</p>
<div class="graph line80">
<span style="width:80%">80%</span>
</div>
</article>
</section>
<section id="contact" class="section">
<article class="contactIntro">
<p>I am glad to talk with you</p>
</article>
<div class="row contactBox">
<div class="column">
<i class="contactIcon ti-mobile"></i>
<h5 class="contactText">Phone</h5>
<a href="tel:0210626074">
<p>+64210626074</p>
</a>
</div>
<div class="column">
<i class="contactIcon ti-email"></i>
<h5 class="contactText">Email</h5>
<a href="mailto:[email protected]">
<p>[email protected] </p>
</a>
</div>
<div class="column">
<i class="contactIcon ti-location-pin "></i>
<h5 class="contactText">Location</h5>
<a href="https://goo.gl/maps/U6PMYkxr5fRFUAoF7" target="_blank">
<p>Wellington, New Zealand</p>
</a>
</div>
</div>
</section>
</main>
<footer>
<p>Copyright ©
<script>
var CurrentYear = new Date().getFullYear()
document.write(CurrentYear)
</script>
by Sophie Kim</p>
</footer>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="js/script.js" charset="utf-8"></script>
</body>
</html>