-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathindex.html
More file actions
357 lines (322 loc) · 27.5 KB
/
index.html
File metadata and controls
357 lines (322 loc) · 27.5 KB
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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Kew Coder | Personal Portfolio Website</title>
<meta name="description" content="Kew Coder | Personal Portfolio Website" />
<meta name="”robots”" content="index, follow" />
<link
rel="stylesheet"
href="/assets/css/aristyle.css"
/>
<link rel="icon" href="/favicon.png" sizes="16x16" type="image/png" />
</head>
<body id="body" class="theme-light">
<div
class="bg-profile-img"
style="
background-image: url(/assets/img/kewcoder.png);
"
></div>
<header>
<a href="#" class="logo" data-tilt>Kew<span>Code.com</span></a>
<nav class="navbar">
<a href="#" class="hide-m">Course</a>
<a href="#" class="hide-m">Blog</a>
<a href="#" class="hide-m">Portfolio</a>
<a onclick="toggleDarkMode()">
<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" fill="currentColor" class="bi bi-lightbulb-fill" viewBox="0 0 16 16">
<path d="M2 6a6 6 0 1 1 10.174 4.31c-.203.196-.359.4-.453.619l-.762 1.769A.5.5 0 0 1 10.5 13h-5a.5.5 0 0 1-.46-.302l-.761-1.77a1.964 1.964 0 0 0-.453-.618A5.984 5.984 0 0 1 2 6zm3 8.5a.5.5 0 0 1 .5-.5h5a.5.5 0 0 1 0 1l-.224.447a1 1 0 0 1-.894.553H6.618a1 1 0 0 1-.894-.553L5.5 15a.5.5 0 0 1-.5-.5z"/>
</svg>
</a>
</nav>
</header>
<!-- About Me -->
<section >
<div class="about-me" id="aboutme">
<h2>Hi I'am</h2>
<h1 >Kew <span>Coder</span></h1>
<h2 class="experience">
<small>4 year experience</small> <br> as
<span id="typed"></span>
</h2>
<h2 class="experience-mobile">
<small>4 year experience as
<b><i>UI/UX Designer, Web Developer & Mobile Developer.</i></b> </small>
</h2>
<a href="#" class="btn-action" data-tilt>Hire Me</a>
<nav class="sosmed" >
<a href="https://github.com/kewcoder" data-tilt>
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-github" viewBox="0 0 16 16">
<path d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.012 8.012 0 0 0 16 8c0-4.42-3.58-8-8-8z"/>
</svg>
<span>@kewcoder</span>
</a>
<a href="https://instagram.com/kewcoder" data-tilt>
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-instagram" viewBox="0 0 16 16">
<path d="M8 0C5.829 0 5.556.01 4.703.048 3.85.088 3.269.222 2.76.42a3.917 3.917 0 0 0-1.417.923A3.927 3.927 0 0 0 .42 2.76C.222 3.268.087 3.85.048 4.7.01 5.555 0 5.827 0 8.001c0 2.172.01 2.444.048 3.297.04.852.174 1.433.372 1.942.205.526.478.972.923 1.417.444.445.89.719 1.416.923.51.198 1.09.333 1.942.372C5.555 15.99 5.827 16 8 16s2.444-.01 3.298-.048c.851-.04 1.434-.174 1.943-.372a3.916 3.916 0 0 0 1.416-.923c.445-.445.718-.891.923-1.417.197-.509.332-1.09.372-1.942C15.99 10.445 16 10.173 16 8s-.01-2.445-.048-3.299c-.04-.851-.175-1.433-.372-1.941a3.926 3.926 0 0 0-.923-1.417A3.911 3.911 0 0 0 13.24.42c-.51-.198-1.092-.333-1.943-.372C10.443.01 10.172 0 7.998 0h.003zm-.717 1.442h.718c2.136 0 2.389.007 3.232.046.78.035 1.204.166 1.486.275.373.145.64.319.92.599.28.28.453.546.598.92.11.281.24.705.275 1.485.039.843.047 1.096.047 3.231s-.008 2.389-.047 3.232c-.035.78-.166 1.203-.275 1.485a2.47 2.47 0 0 1-.599.919c-.28.28-.546.453-.92.598-.28.11-.704.24-1.485.276-.843.038-1.096.047-3.232.047s-2.39-.009-3.233-.047c-.78-.036-1.203-.166-1.485-.276a2.478 2.478 0 0 1-.92-.598 2.48 2.48 0 0 1-.6-.92c-.109-.281-.24-.705-.275-1.485-.038-.843-.046-1.096-.046-3.233 0-2.136.008-2.388.046-3.231.036-.78.166-1.204.276-1.486.145-.373.319-.64.599-.92.28-.28.546-.453.92-.598.282-.11.705-.24 1.485-.276.738-.034 1.024-.044 2.515-.045v.002zm4.988 1.328a.96.96 0 1 0 0 1.92.96.96 0 0 0 0-1.92zm-4.27 1.122a4.109 4.109 0 1 0 0 8.217 4.109 4.109 0 0 0 0-8.217zm0 1.441a2.667 2.667 0 1 1 0 5.334 2.667 2.667 0 0 1 0-5.334z"/>
</svg>
<span>@kewcoder</span>
</a>
<a href="#" data-tilt>
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-youtube" viewBox="0 0 16 16">
<path d="M8.051 1.999h.089c.822.003 4.987.033 6.11.335a2.01 2.01 0 0 1 1.415 1.42c.101.38.172.883.22 1.402l.01.104.022.26.008.104c.065.914.073 1.77.074 1.957v.075c-.001.194-.01 1.108-.082 2.06l-.008.105-.009.104c-.05.572-.124 1.14-.235 1.558a2.007 2.007 0 0 1-1.415 1.42c-1.16.312-5.569.334-6.18.335h-.142c-.309 0-1.587-.006-2.927-.052l-.17-.006-.087-.004-.171-.007-.171-.007c-1.11-.049-2.167-.128-2.654-.26a2.007 2.007 0 0 1-1.415-1.419c-.111-.417-.185-.986-.235-1.558L.09 9.82l-.008-.104A31.4 31.4 0 0 1 0 7.68v-.122C.002 7.343.01 6.6.064 5.78l.007-.103.003-.052.008-.104.022-.26.01-.104c.048-.519.119-1.023.22-1.402a2.007 2.007 0 0 1 1.415-1.42c.487-.13 1.544-.21 2.654-.26l.17-.007.172-.006.086-.003.171-.007A99.788 99.788 0 0 1 7.858 2h.193zM6.4 5.209v4.818l4.157-2.408L6.4 5.209z"/>
</svg>
<span>Kew Coder</span>
</a>
</nav>
</div>
<a href="#services" class="btn-next-page" data-tilt>
<span>My Awesome Services</span>
<div class="circle"></div>
</a>
</section>
<!-- End About Me -->
<section class="services" id="services">
<h1>
My <span>Awesome</span> Services
</h1>
<div class="services__item">
<div class="box" data-tilt>
<svg width="100" height="100" viewBox="0 0 134 134" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M79.268 112.471C79.268 105.695 73.7751 100.203 66.9995 100.203C60.2239 100.203 54.7314 105.695 54.7314 112.471C54.7314 119.246 60.2242 134 66.9995 134C73.7751 134 79.268 119.247 79.268 112.471Z" fill="#FFC843"/>
<path d="M72.9936 112.124C72.9936 108.814 70.3098 106.13 66.9995 106.13C63.6892 106.13 61.0054 108.814 61.0054 112.124C61.0054 115.435 63.6892 122.643 66.9995 122.643C70.3098 122.642 72.9936 115.435 72.9936 112.124Z" fill="#BF534F"/>
<path d="M79.972 104.984C81.581 104.984 91.3478 104.439 93.2458 113.028C94.7463 119.817 95.2572 123.386 100.084 123.386C104.91 123.386 106.972 119.314 104.911 106.995C103.218 96.8823 101.894 90.0508 79.972 90.0508V104.984Z" fill="#BF534F"/>
<path d="M54.0276 104.984C52.4187 104.984 42.6518 104.439 40.7538 113.028C39.2534 119.817 38.7424 123.386 33.9159 123.386C29.0893 123.386 27.0275 119.314 29.089 106.995C30.7812 96.8823 32.1057 90.0508 54.0276 90.0508V104.984Z" fill="#BF534F"/>
<path d="M83.8937 108.302C88.0944 92.3605 91.6785 65.3133 91.6785 54.1513C91.6785 42.9893 83.5923 14.179 66.9998 0.000244141C50.4076 14.179 42.3208 42.9893 42.3208 54.1513C42.3208 65.3133 45.905 92.3605 50.1057 108.302H83.8937Z" fill="#1E90FF"/>
<path d="M66.9995 0C61.4857 4.71193 56.9123 11.0403 53.2616 17.7991H80.7374C77.0867 11.0403 72.5137 4.71193 66.9995 0Z" fill="#BF534F"/>
<path d="M47.296 95.6318C48.1734 100.233 49.1226 104.572 50.1057 108.302H83.8937C84.8768 104.572 85.8259 100.233 86.7034 95.6318H47.296Z" fill="#333E48"/>
<path d="M72.9225 67.1818C72.9225 60.7391 81.0277 58.9725 81.0277 48.2695C81.0277 40.5217 74.7472 34.2412 66.9998 34.2412C59.2524 34.2412 52.9716 40.5217 52.9716 48.2695C52.9716 58.9725 61.0768 60.7388 61.0768 67.1818H72.9225Z" fill="white"/>
<path d="M60.302 69.626C60.302 73.3251 63.3006 76.3237 66.9998 76.3237C70.6989 76.3237 73.6976 73.3251 73.6976 69.626H60.302Z" fill="#A4A9AD"/>
<path d="M74.907 69.0519C74.907 68.0229 74.0654 67.1816 73.0365 67.1816H60.9618C59.9332 67.1816 59.0916 68.0229 59.0916 69.0519V71.6494C59.0916 72.6783 59.9335 73.52 60.9618 73.52H73.0365C74.0654 73.52 74.907 72.6783 74.907 71.6494V69.0519Z" fill="#333E48"/>
</svg>
<div class="text">
Minimal <br>
Viable <br>
Product <br>
<span> Digital Startup </span><br>
</div>
</div>
<h1>
1. Create MVP WebApp for your Startup fast & awesome
</h1>
</div>
<div class="services__item right">
<div class="box" data-tilt>
<svg width="70" height="70" viewBox="0 0 147 147" fill="none" xmlns="http://www.w3.org/2000/svg">
<g clip-path="url(#clip0)">
<path d="M134.978 0H12.0218C5.72838 0 0.608643 5.11973 0.608643 11.4132V135.587C0.608643 141.88 5.72838 147 12.0218 147H134.978C141.272 147 146.392 141.88 146.392 135.587V11.4132C146.391 5.11973 141.272 0 134.978 0Z" fill="#E5E5E5"/>
<path d="M146.391 11.4132C146.391 5.11973 141.272 0 134.978 0H12.0218C5.72838 0 0.608643 5.11973 0.608643 11.4132V22.6742H146.391V11.4132Z" fill="#458FDE"/>
<path d="M0.608643 22.6738V135.587C0.608643 141.88 5.72838 147 12.0218 147H134.978C141.272 147 146.392 141.88 146.392 135.587V22.6738H0.608643Z" fill="#F2F2F2"/>
<path d="M17.4746 0H12.0218C5.72838 0 0.608643 5.11973 0.608643 11.4132V22.6742H6.06171V11.4132C6.06171 5.11973 11.1814 0 17.4746 0Z" fill="#4F5AA8"/>
<path d="M6.06171 135.587V22.6738H0.608643V135.587C0.608643 141.88 5.72838 147 12.0218 147H17.4749C11.1814 147 6.06171 141.88 6.06171 135.587Z" fill="#CCCCCC"/>
<path d="M21.1522 16.8916C23.5055 16.8916 25.4132 14.9839 25.4132 12.6306C25.4132 10.2773 23.5055 8.36963 21.1522 8.36963C18.7989 8.36963 16.8912 10.2773 16.8912 12.6306C16.8912 14.9839 18.7989 16.8916 21.1522 16.8916Z" fill="#FF7452"/>
<path d="M40.0216 16.8916C42.3749 16.8916 44.2826 14.9839 44.2826 12.6306C44.2826 10.2773 42.3749 8.36963 40.0216 8.36963C37.6683 8.36963 35.7606 10.2773 35.7606 12.6306C35.7606 14.9839 37.6683 16.8916 40.0216 16.8916Z" fill="#AFF078"/>
<path d="M58.8912 16.8916C61.2445 16.8916 63.1522 14.9839 63.1522 12.6306C63.1522 10.2773 61.2445 8.36963 58.8912 8.36963C56.538 8.36963 54.6302 10.2773 54.6302 12.6306C54.6302 14.9839 56.538 16.8916 58.8912 16.8916Z" fill="#FFD652"/>
<path d="M21.4565 97.544C20.8725 97.544 20.2882 97.3212 19.8424 96.8753L9.79898 86.8319C8.9075 85.9405 8.9075 84.4952 9.79898 83.604L20.1467 73.2563C21.0384 72.3648 22.4835 72.3648 23.3749 73.2563C24.2664 74.1477 24.2664 75.593 23.3749 76.4842L14.6411 85.2181L23.0706 93.6476C24.4708 95.0476 23.4654 97.544 21.4565 97.544Z" fill="#4C4C4C"/>
<path d="M125.543 97.5433C123.535 97.5433 122.529 95.0466 123.929 93.6466L132.359 85.2171L123.625 76.4832C122.734 75.5918 122.734 74.1465 123.625 73.2553C124.517 72.3638 125.962 72.3638 126.854 73.2553L137.201 83.603C138.093 84.4945 138.093 85.9398 137.201 86.831L127.158 96.8743C126.712 97.3205 126.127 97.5433 125.543 97.5433Z" fill="#4C4C4C"/>
<path d="M114.891 17.9564H84.4564C83.1954 17.9564 82.1738 16.9343 82.1738 15.6739C82.1738 14.4135 83.1957 13.3914 84.4564 13.3914H114.891C116.152 13.3914 117.174 14.4135 117.174 15.6739C117.174 16.9343 116.152 17.9564 114.891 17.9564Z" fill="#4F5AA8"/>
<path d="M132.543 17.9564H124.63C123.369 17.9564 122.348 16.9343 122.348 15.6739C122.348 14.4135 123.37 13.3914 124.63 13.3914H132.543C133.804 13.3914 134.826 14.4135 134.826 15.6739C134.826 16.9343 133.804 17.9564 132.543 17.9564Z" fill="#4F5AA8"/>
<path d="M117.773 70.485L99.6964 52.4077C99.2405 51.952 98.6013 51.7086 97.9657 51.7422C97.9266 51.7404 97.8876 51.739 97.848 51.739H49.1522C49.1126 51.739 49.0733 51.7399 49.0345 51.7422C48.3945 51.7106 47.76 51.952 47.3038 52.4077L29.2268 70.485C28.3354 71.3764 28.3354 72.8217 29.2268 73.7129L40.4178 84.9039C40.8459 85.332 41.4264 85.5726 42.0319 85.5726C42.6374 85.5726 43.2177 85.3322 43.646 84.9039L46.8697 81.6799V116.109C46.8697 117.369 47.8915 118.391 49.1522 118.391H97.848C99.109 118.391 100.13 117.369 100.13 116.109V81.6799L103.354 84.9039C103.783 85.332 104.363 85.5726 104.969 85.5726C105.574 85.5726 106.154 85.3322 106.583 84.9039L117.774 73.7129C118.665 72.8217 118.665 71.3764 117.773 70.485Z" fill="#FFD652"/>
<path d="M49.1522 51.739C49.1126 51.739 49.0733 51.7399 49.0345 51.7422C48.3945 51.7106 47.76 51.952 47.3038 52.4077L29.2268 70.485C28.3354 71.3764 28.3354 72.8217 29.2268 73.7129L40.4178 84.9039C40.8459 85.332 41.4264 85.5726 42.0319 85.5726C42.6374 85.5726 43.2177 85.3322 43.646 84.9039L46.8697 81.6799V116.109C46.8697 117.369 47.8915 118.391 49.1522 118.391H75.8764L52.2608 51.739H49.1522Z" fill="#FB9D46"/>
<path d="M91.0281 51.739H55.972C54.2769 52.265 53.7811 53.9561 54.481 55.1654L61.1314 66.6523C61.9155 68.0066 63.7831 68.3052 64.8529 67.1088L71.2175 59.996V117.63C71.2175 117.898 71.266 118.153 71.3502 118.391H75.6499C75.7343 118.153 75.7826 117.898 75.7826 117.63V59.996L82.1469 67.1088C83.2167 68.3052 85.0846 68.0066 85.8684 66.6523L92.5187 55.1654C93.219 53.9561 92.7229 52.2653 91.0281 51.739Z" fill="#FF7452"/>
<path d="M89.326 78.2174H81.413C80.152 78.2174 79.1305 77.1953 79.1305 75.9349C79.1305 74.6745 80.1523 73.6523 81.413 73.6523H89.326C90.587 73.6523 91.6086 74.6745 91.6086 75.9349C91.6086 77.1953 90.587 78.2174 89.326 78.2174Z" fill="#FF7452"/>
<path d="M65.587 78.2174H57.674C56.413 78.2174 55.3915 77.1953 55.3915 75.9349C55.3915 74.6745 56.4133 73.6523 57.674 73.6523H65.587C66.848 73.6523 67.8695 74.6745 67.8695 75.9349C67.8695 77.1953 66.848 78.2174 65.587 78.2174Z" fill="#FF7452"/>
</g>
<defs>
<clipPath id="clip0">
<rect width="147" height="147" fill="white"/>
</clipPath>
</defs>
</svg>
<div class="text">
Ecommerce <br>
Website <br>
+ Point Of Sale <br>
</div>
</div>
<h1 >
2. Create Beautifull Ecommerce Website
+ Point Of Sale
</h1>
</div>
<div class="services__item">
<div class="box" data-tilt>
<svg width="70" height="70" viewBox="0 0 140 140" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M45.5253 121.039C56.6248 121.039 65.6227 112.041 65.6227 100.942C65.6227 89.8421 56.6248 80.8442 45.5253 80.8442C34.4259 80.8442 25.428 89.8421 25.428 100.942C25.428 112.041 34.4259 121.039 45.5253 121.039Z" fill="#1E90FF"/>
<path d="M45.5253 124.812C32.363 124.812 21.6544 114.104 21.6544 100.941C21.6544 87.7789 32.3627 77.0706 45.5253 77.0706C58.6879 77.0706 69.3962 87.7789 69.3962 100.941C69.3962 114.104 58.6876 124.812 45.5253 124.812ZM45.5253 84.6177C36.5242 84.6177 29.2015 91.9404 29.2015 100.941C29.2015 109.943 36.5242 117.265 45.5253 117.265C54.5264 117.265 61.8491 109.943 61.8491 100.941C61.8491 91.9404 54.5261 84.6177 45.5253 84.6177Z" fill="#1F2C47"/>
<path d="M39.8974 100.942H32.3502C32.3502 93.6767 38.2608 87.7661 45.5253 87.7661V95.3133C42.4219 95.3133 39.8974 97.8382 39.8974 100.942Z" fill="#1F2C47"/>
<path d="M94.4747 121.039C105.574 121.039 114.572 112.041 114.572 100.942C114.572 89.8421 105.574 80.8442 94.4747 80.8442C83.3753 80.8442 74.3774 89.8421 74.3774 100.942C74.3774 112.041 83.3753 121.039 94.4747 121.039Z" fill="#1E90FF"/>
<path d="M94.4748 124.812C81.3121 124.812 70.6038 114.104 70.6038 100.941C70.6038 87.7789 81.3121 77.0706 94.4748 77.0706C107.637 77.0706 118.346 87.7789 118.346 100.941C118.346 114.104 107.637 124.812 94.4748 124.812ZM94.4748 84.6177C85.4736 84.6177 78.151 91.9404 78.151 100.941C78.151 109.943 85.4736 117.265 94.4748 117.265C103.476 117.265 110.799 109.943 110.799 100.941C110.799 91.9404 103.476 84.6177 94.4748 84.6177Z" fill="#1F2C47"/>
<path d="M88.8464 100.942H81.2993C81.2993 93.6767 87.2098 87.7661 94.4747 87.7661V95.3133C91.3713 95.3133 88.8464 97.8382 88.8464 100.942Z" fill="#1F2C47"/>
<path d="M75.4665 97.168H64.5336V104.715H75.4665V97.168Z" fill="#1F2C47"/>
<path d="M119.845 75.5648H112.495L111.366 74.2596C106.625 68.7781 99.7604 65.6343 92.5317 65.6343C85.303 65.6343 78.4377 68.7781 73.6974 74.2596L72.5687 75.5648H67.4317L66.303 74.2596C61.5623 68.7781 54.6974 65.6343 47.4687 65.6343C43.3808 65.6343 39.4875 66.5935 35.897 68.4852L32.3789 61.8086C36.9989 59.3743 42.217 58.0875 47.4687 58.0875C55.9121 58.0875 63.9728 61.3766 70.0004 67.1984C76.0279 61.3766 84.0887 58.0875 92.5321 58.0875C99.7423 58.0875 106.674 60.486 112.298 64.812V36.3052H27.7023V71.7913H20.1551V28.7581H119.845V75.5648Z" fill="#1F2C47"/>
<path d="M133.058 32.5316H6.94224C5.19205 32.5316 3.77356 31.1127 3.77356 29.3629V22.1301C3.77356 20.3799 5.19243 18.9614 6.94224 18.9614H133.057C134.808 18.9614 136.226 20.3803 136.226 22.1301V29.3629C136.226 31.1127 134.808 32.5316 133.058 32.5316Z" fill="#1E90FF"/>
<path d="M133.058 36.3052H6.94226C3.11434 36.3052 0 33.1909 0 29.363V22.1301C0 18.3018 3.11434 15.1875 6.94226 15.1875H133.057C136.886 15.1875 140 18.3018 140 22.1301V29.363C140 33.1909 136.886 36.3052 133.058 36.3052ZM7.54717 28.7581H132.453V22.7347H7.54717V28.7581Z" fill="#1F2C47"/>
<path d="M134.151 34.0554H126.604V96.2407H134.151V34.0554Z" fill="#1F2C47"/>
</svg>
<div class="text">
Finance <br>
Academic <br>
Human resources
& more
</div>
</div>
<h1>
3. Create Web & Aplication for
your School or Campus
</h1>
</div>
<a href="#testimonial" class="btn-next-page" data-tilt>
<span>Brand & Client Testimonial</span>
<div class="circle"></div>
</a>
</section>
<section class="testimonial" id="testimonial">
<h1>
Brand & Client <br> <span>Testimonial</span>
</h1>
<div class="client">
<p>
4 years of experience creating websites and applications for many brands and clients in the world. my vision is to provide the best for clients
</p>
<div>
<img src="/assets/img/clients/client-1.png" alt="Client KewCoder">
<img src="/assets/img/clients/client-2.png" alt="Client KewCoder">
<img src="/assets/img/clients/client-3.png" alt="Client KewCoder">
<img src="/assets/img/clients/client-4.png" alt="Client KewCoder">
<img src="/assets/img/clients/client-5.png" alt="Client KewCoder">
<img src="/assets/img/clients/client-6.png" alt="Client KewCoder">
<img src="/assets/img/clients/client-7.png" alt="Client KewCoder">
<img src="/assets/img/clients/client-8.png" alt="Client KewCoder">
</div>
</div>
<div class="box">
<div class="comment glass" data-tilt>
<p>
“ hard worker, results exceed expectations, just the best ”
</p>
<div class="people glass">
<img src="/assets/img/client.png" alt="Client">
</div>
</div>
</div>
<a href="#latestproject" class="btn-next-page" data-tilt>
<span>My Latest Project Work</span>
<div class="circle"></div>
</a>
</section>
<section class="latest-project" id="latestproject">
<h1 >
My <span >Latest Project</span> Work
</h1>
<div class="list">
<div class="list-item" data-tilt>
<img src="/assets/img/projects/project-1.jpg" alt="Project">
</div>
<div class="list-item" data-tilt>
<img src="/assets/img/projects/project-2.jpg" alt="Project">
</div>
<div class="list-item" data-tilt>
<img src="/assets/img/projects/project-3.jpg" alt="Project">
</div>
<div class="list-item" data-tilt>
<img src="/assets/img/projects/project-4.jpg" alt="Project">
</div>
<div class="list-item" data-tilt>
<img src="/assets/img/projects/project-5.jpg" alt="Project">
</div>
<div class="list-item" data-tilt>
<img src="/assets/img/projects/project-6.jpg" alt="Project">
</div>
</div>
<a href="#latestblogpost" class="btn-next-page" data-tilt>
<span>Latest Blog Post</span>
<div class="circle"></div>
</a>
</section>
<section id="latestblogpost" class="latest-blog-post">
<h1 >
Latest <span >Blog</span> Post
</h1>
<div class="list">
<div class="list-item" >
#100DaysOfCode Challenge as FrontEnd Web Developer 2021 HTML, CSS, Javascript & Framework Create WebApp
<a href="#" data-tilt>Read More</a>
</div>
<div class="list-item">
#100DaysOfDesign Challenge as UI Designer 2021 Figma, Adobe XD Create Web & Mobile App Deign
<a href="#" data-tilt>Read More</a>
</div>
</div>
<nav class="sosmed" >
<a href="https://github.com/kewcoder" data-tilt>
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-github" viewBox="0 0 16 16">
<path d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.012 8.012 0 0 0 16 8c0-4.42-3.58-8-8-8z"/>
</svg>
<span>@kewcoder</span>
</a>
<a href="https://instagram.com/kewcoder" data-tilt>
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-instagram" viewBox="0 0 16 16">
<path d="M8 0C5.829 0 5.556.01 4.703.048 3.85.088 3.269.222 2.76.42a3.917 3.917 0 0 0-1.417.923A3.927 3.927 0 0 0 .42 2.76C.222 3.268.087 3.85.048 4.7.01 5.555 0 5.827 0 8.001c0 2.172.01 2.444.048 3.297.04.852.174 1.433.372 1.942.205.526.478.972.923 1.417.444.445.89.719 1.416.923.51.198 1.09.333 1.942.372C5.555 15.99 5.827 16 8 16s2.444-.01 3.298-.048c.851-.04 1.434-.174 1.943-.372a3.916 3.916 0 0 0 1.416-.923c.445-.445.718-.891.923-1.417.197-.509.332-1.09.372-1.942C15.99 10.445 16 10.173 16 8s-.01-2.445-.048-3.299c-.04-.851-.175-1.433-.372-1.941a3.926 3.926 0 0 0-.923-1.417A3.911 3.911 0 0 0 13.24.42c-.51-.198-1.092-.333-1.943-.372C10.443.01 10.172 0 7.998 0h.003zm-.717 1.442h.718c2.136 0 2.389.007 3.232.046.78.035 1.204.166 1.486.275.373.145.64.319.92.599.28.28.453.546.598.92.11.281.24.705.275 1.485.039.843.047 1.096.047 3.231s-.008 2.389-.047 3.232c-.035.78-.166 1.203-.275 1.485a2.47 2.47 0 0 1-.599.919c-.28.28-.546.453-.92.598-.28.11-.704.24-1.485.276-.843.038-1.096.047-3.232.047s-2.39-.009-3.233-.047c-.78-.036-1.203-.166-1.485-.276a2.478 2.478 0 0 1-.92-.598 2.48 2.48 0 0 1-.6-.92c-.109-.281-.24-.705-.275-1.485-.038-.843-.046-1.096-.046-3.233 0-2.136.008-2.388.046-3.231.036-.78.166-1.204.276-1.486.145-.373.319-.64.599-.92.28-.28.546-.453.92-.598.282-.11.705-.24 1.485-.276.738-.034 1.024-.044 2.515-.045v.002zm4.988 1.328a.96.96 0 1 0 0 1.92.96.96 0 0 0 0-1.92zm-4.27 1.122a4.109 4.109 0 1 0 0 8.217 4.109 4.109 0 0 0 0-8.217zm0 1.441a2.667 2.667 0 1 1 0 5.334 2.667 2.667 0 0 1 0-5.334z"/>
</svg>
<span>@kewcoder</span>
</a>
<a href="#" data-tilt>
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-youtube" viewBox="0 0 16 16">
<path d="M8.051 1.999h.089c.822.003 4.987.033 6.11.335a2.01 2.01 0 0 1 1.415 1.42c.101.38.172.883.22 1.402l.01.104.022.26.008.104c.065.914.073 1.77.074 1.957v.075c-.001.194-.01 1.108-.082 2.06l-.008.105-.009.104c-.05.572-.124 1.14-.235 1.558a2.007 2.007 0 0 1-1.415 1.42c-1.16.312-5.569.334-6.18.335h-.142c-.309 0-1.587-.006-2.927-.052l-.17-.006-.087-.004-.171-.007-.171-.007c-1.11-.049-2.167-.128-2.654-.26a2.007 2.007 0 0 1-1.415-1.419c-.111-.417-.185-.986-.235-1.558L.09 9.82l-.008-.104A31.4 31.4 0 0 1 0 7.68v-.122C.002 7.343.01 6.6.064 5.78l.007-.103.003-.052.008-.104.022-.26.01-.104c.048-.519.119-1.023.22-1.402a2.007 2.007 0 0 1 1.415-1.42c.487-.13 1.544-.21 2.654-.26l.17-.007.172-.006.086-.003.171-.007A99.788 99.788 0 0 1 7.858 2h.193zM6.4 5.209v4.818l4.157-2.408L6.4 5.209z"/>
</svg>
<span>Kew Coder</span>
</a>
</nav>
<a href="#aboutme" class="btn-next-page" data-tilt>
<span>Back to Top</span>
<div class="circle"></div>
</a>
</section>
<script
type="text/javascript"
src="/assets/js/typed.min.js"
></script>
<script
type="text/javascript"
src="/assets/js/vanilla-tilt.min.js"
></script>
<script>
if (
window.matchMedia &&
window.matchMedia("(prefers-color-scheme: dark)").matches
) {
// dark mode
let el = document.getElementById("body");
el.className = "theme-dark";
}
function toggleDarkMode() {
let el = document.getElementById("body");
if (el.className === "theme-light") {
el.className = "theme-dark";
} else {
el.className = "theme-light";
}
}
// bg img
VanillaTilt.init(document.querySelector(".bg-profile-img"), {
scale: 1.2,
});
new Typed("#typed", {
strings: [
"<strong><i>UI/UX Designer</i></strong>",
"<strong><i>Web Developer</i></strong>",
"<strong><i>Mobile Developer</i></strong>",
],
typeSpeed: 80,
backSpeed: 30,
cursorChar: "<strong>_</strong>",
shuffle: true,
smartBackspace: false,
loop: true,
});
</script>
</body>
</html>