-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
343 lines (330 loc) · 14.9 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
<!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" />
<link rel="shortcut icon" href="img/favicon.png" />
<!-- Fonts -->
<link rel="preconnect" href="https://fonts.gstatic.com" />
<link
href="https://fonts.googleapis.com/css2?family=Bebas+Neue&display=swap"
rel="stylesheet"
/>
<link
href="https://fonts.googleapis.com/css2?family=Abel&display=swap"
rel="stylesheet"
/>
<link
href="https://fonts.googleapis.com/css2?family=Lato:wght@100;300;400;700;900&display=swap"
rel="stylesheet"
/>
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"
/>
<link rel="stylesheet" href="css/master.css" />
<title>Owenn Gimli</title>
</head>
<body>
<nav>
<div class="burger">
<div class="line1"></div>
<div class="line2"></div>
<div class="line3"></div>
</div>
<ul class="nav-links">
<li><a href="#home">HOME</a></li>
<li><a href="#about">ABOUT</a></li>
<li><a href="#projects">PROJECTS</a></li>
<li><a href="#skills">SKILLS</a></li>
<li><a href="#contact">CONTACT</a></li>
</ul>
<a
href="download/owennGimli_resume.pdf"
id="resume-btn"
download="Owenn Gimli - Resume"
>RESUME</a
>
</nav>
<section id="home" class="intro-page">
<div class="container">
<svg
id="logo-anim"
width="461"
height="226"
viewBox="0 0 461 226"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M57.3316 206.431L57.3521 206.442L57.3727 206.454C73.5239 215.539 91.3679 220.056 110.8 220.056C130.415 220.056 148.356 215.543 164.515 206.454L164.536 206.442L164.556 206.431C180.698 197.149 193.431 184.31 202.7 167.989C212.003 151.607 216.6 133.076 216.6 112.528C216.6 91.9801 212.003 73.4491 202.7 57.0669C193.43 40.7439 180.69 27.9934 164.536 18.9016C148.376 9.61436 130.426 5 110.8 5C91.356 5 73.5043 9.61896 57.3521 18.9017C41.1915 27.9969 28.3646 40.8424 18.91 57.3376L18.9051 57.3462L18.9002 57.3549C9.60087 73.7298 5 92.1628 5 112.528C5 132.894 9.601 151.412 18.8873 167.966L18.9051 167.998L18.9233 168.029C28.3806 184.328 41.1996 197.155 57.3316 206.431ZM146.032 178.18L146.015 178.189L145.999 178.199C135.695 184.239 124.006 187.304 110.8 187.304C97.6017 187.304 85.8065 184.242 75.2965 178.189C65.0174 172.159 56.8207 163.554 50.7028 152.229C44.8093 140.965 41.784 127.779 41.784 112.528C41.784 97.0654 44.817 83.8911 50.6949 72.842C56.8169 61.5033 65.0216 52.8902 75.3126 46.8575C85.6061 40.8234 97.3889 37.752 110.8 37.752C124.211 37.752 135.994 40.8234 146.287 46.8575C156.568 52.8842 164.667 61.4832 170.595 72.8L170.617 72.8423L170.64 72.8842C176.694 83.9242 179.816 97.0825 179.816 112.528C179.816 127.768 176.7 140.944 170.624 152.201L170.609 152.229L170.595 152.256C164.679 163.551 156.5 172.147 146.032 178.18ZM408.147 72.6268L409.503 75.48H412.662H444.054H451.371L448.713 68.6633C440.863 48.535 428.205 32.795 410.759 21.6345C393.555 10.5059 373.78 5 351.606 5C332.162 5 314.31 9.61918 298.157 18.9025C281.997 27.9976 269.171 40.8429 259.716 57.3376L259.711 57.3462L259.706 57.3549C250.407 73.7298 245.806 92.1628 245.806 112.528C245.806 132.893 250.407 151.326 259.706 167.701L259.718 167.721L259.73 167.741C269.187 184.04 282.006 196.867 298.138 206.143L298.158 206.154L298.179 206.166C314.33 215.251 332.174 219.768 351.606 219.768C370.043 219.768 386.909 215.652 402.101 207.347L402.123 207.335L402.145 207.323C417.243 198.868 429.465 187.46 438.747 173.135L438.755 173.121L438.764 173.108C448.03 158.605 453.472 142.671 455.081 125.375L455.102 125.144V124.912V104.752V99.752H450.102H342.102H337.102V104.752V126.064V131.064H342.102H416.45C413.76 147.381 407.079 160.224 396.597 169.912C384.974 180.654 370.115 186.152 351.606 186.152C338.393 186.152 326.587 183.178 316.075 177.309C305.789 171.269 297.6 162.748 291.493 151.623C285.612 140.561 282.59 127.578 282.59 112.528C282.59 97.4719 285.614 84.4842 291.501 73.4189C297.617 62.0909 305.805 53.5904 316.063 47.7538L316.075 47.747L316.087 47.7401C326.601 41.6812 338.401 38.616 351.606 38.616C364.816 38.616 376.169 41.6821 385.841 47.661L385.869 47.6784L385.898 47.6955C395.567 53.4972 402.978 61.7544 408.147 72.6268Z"
stroke="#D94479"
stroke-width="10"
/>
</svg>
<svg
id="logo-finish"
width="455"
height="217"
viewBox="0 0 455 217"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M109.2 216.1C89.3999 216.1 71.1999 211.5 54.5999 202.3C38.1999 193.1 25.0999 180.3 15.2999 163.9C5.6999 147.3 0.899902 128.7 0.899902 108.1C0.899902 87.5 5.6999 69 15.2999 52.6C25.0999 36.2 38.1999 23.4 54.5999 14.2C71.1999 5 89.3999 0.399994 109.2 0.399994C129 0.399994 147.1 5 163.5 14.2C180.1 23.4 193.1 36.2 202.5 52.6C212.1 69 216.9 87.5 216.9 108.1C216.9 128.7 212.1 147.3 202.5 163.9C192.9 180.3 179.9 193.1 163.5 202.3C147.1 211.5 129 216.1 109.2 216.1ZM109.2 169.3C126 169.3 139.4 163.7 149.4 152.5C159.6 141.3 164.7 126.5 164.7 108.1C164.7 89.5 159.6 74.7 149.4 63.7C139.4 52.5 126 46.9 109.2 46.9C92.1999 46.9 78.5999 52.4 68.3999 63.4C58.3999 74.4 53.3999 89.3 53.3999 108.1C53.3999 126.7 58.3999 141.6 68.3999 152.8C78.5999 163.8 92.1999 169.3 109.2 169.3Z"
fill="url(#paint0_linear)"
/>
<path
d="M394.24 70C390.44 63 384.94 57.7 377.74 54.1C370.74 50.3 362.44 48.4 352.84 48.4C336.24 48.4 322.94 53.9 312.94 64.9C302.94 75.7 297.94 90.2 297.94 108.4C297.94 127.8 303.14 143 313.54 154C324.14 164.8 338.64 170.2 357.04 170.2C369.64 170.2 380.24 167 388.84 160.6C397.64 154.2 404.04 145 408.04 133H342.94V95.2H454.54V142.9C450.74 155.7 444.24 167.6 435.04 178.6C426.04 189.6 414.54 198.5 400.54 205.3C386.54 212.1 370.74 215.5 353.14 215.5C332.34 215.5 313.74 211 297.34 202C281.14 192.8 268.44 180.1 259.24 163.9C250.24 147.7 245.74 129.2 245.74 108.4C245.74 87.6 250.24 69.1 259.24 52.9C268.44 36.5 281.14 23.8 297.34 14.8C313.54 5.59999 332.04 0.999985 352.84 0.999985C378.04 0.999985 399.24 7.09999 416.44 19.3C433.84 31.5 445.34 48.4 450.94 70H394.24Z"
fill="url(#paint1_linear)"
/>
<defs>
<linearGradient
id="paint0_linear"
x1="227.72"
y1="0.399993"
x2="227.72"
y2="216.1"
gradientUnits="userSpaceOnUse"
>
<stop stop-color="#DA4453" />
<stop offset="0.484375" stop-color="#89216B" />
<stop offset="1" stop-color="#24252A" />
</linearGradient>
<linearGradient
id="paint1_linear"
x1="227.72"
y1="0.399993"
x2="227.72"
y2="216.1"
gradientUnits="userSpaceOnUse"
>
<stop stop-color="#DA4453" />
<stop offset="0.484375" stop-color="#89216B" />
<stop offset="1" stop-color="#24252A" />
</linearGradient>
</defs>
</svg>
<div class="big-text">
<h1>Owenn Gimli</h1>
<h5>Data Science & Full-Stack Web Development</h5>
<ul class="outer-links">
<li><a href="#about">ABOUT</a></li>
<span>/</span>
<li><a href="#projects">PROJECTS</a></li>
<span>/</span>
<li><a href="#contact">CONTACT</a></li>
</ul>
</div>
</div>
<div class="mouse-div">
<div class="mouse"></div>
<span id="scroll">Scroll Down</span>
</div>
</section>
<section class="welcome-text">
<div class="container">
<h3>
Hi! I am a Web Developer looking to
<span>create amazing looking websites</span> and a Data Scientist
aiming to <span>better people's lives</span>.
</h3>
</div>
<img id="wave" src="img/wave.svg" alt="" />
</section>
<section id="projects" class="projects">
<div class="container">
<h4 class="title">// <span>web projects</span> i have done.</h4>
<div class="icastem-wrapper">
<div class="icastem-img">
<img src="img/icastem.png" alt="icastem-web" data-tilt />
</div>
<div class="icastem-text">
<h4>ICASTEM 2021</h4>
<h5>Features:</h5>
<ul>
<li>Landing Page</li>
<li>Registration</li>
<li>Admin Dashboard</li>
</ul>
<a
class="website-btn"
href="https://icastem.prasetiyamulya.ac.id/"
target="_blank"
rel="noopener noreferrer"
>Visit Website</a
>
</div>
</div>
<div class="eximia-wrapper">
<div class="eximia-text">
<h4>Eximia Denim</h4>
<h5>Features:</h5>
<ul>
<li>Landing Page</li>
<li>Contact Page</li>
</ul>
<a
class="website-btn"
href="http://eximia-denim.com/"
target="_blank"
rel="noopener noreferrer"
>Visit Website</a
>
</div>
<div class="eximia-img">
<img src="img/eximia.png" alt="eximia-web" data-tilt />
</div>
</div>
</div>
</section>
<section id="skills" class="skills">
<div class="container">
<h4>// what are my <span>skills</span>.</h4>
<div class="skills-wrapper">
<div class="skills-row">
<div class="skill">
<img src="img/skills-logo/html.png" alt="html" />
<h5>HTML</h5>
</div>
<div class="skill">
<img src="img/skills-logo/css.png" alt="css" />
<h5>CSS</h5>
</div>
<div class="skill">
<img src="img/skills-logo/js.png" alt="js" />
<h5>JavaScript</h5>
</div>
<div class="skill">
<img src="img/skills-logo/react.png" alt="react" />
<h5>React.js</h5>
</div>
<div class="skill">
<img src="img/skills-logo/pandas.png" alt="pandas" />
<h5>Pandas</h5>
</div>
</div>
<div class="skills-row">
<div class="skill">
<img src="img/skills-logo/django.png" alt="django" />
<h5>Django</h5>
</div>
<div class="skill">
<img src="img/skills-logo/php.png" alt="php" />
<h5>PHP</h5>
</div>
<div class="skill">
<img src="img/skills-logo/sql.png" alt="sql" />
<h5>SQL</h5>
</div>
<div class="skill">
<img src="img/skills-logo/photoshop.png" alt="photoshop" />
<h5>Photoshop</h5>
</div>
<div class="skill">
<img src="img/skills-logo/figma.png" alt="figma" />
<h5>Figma</h5>
</div>
</div>
</div>
</div>
</section>
<section id="about" class="about">
<div class="container">
<h4>// more about <span>me</span>.</h4>
<div class="about-wrapper">
<div class="about-img">
<img src="img/owenn-gimli.png" alt="its me" />
</div>
<div class="about-text">
<h5>
My name is Tang Owenn Gimli and I'm 21 years old. I am a Data
Scientist & Web Developer based in Indonesia. I am currently
pursuing a Business Mathematics major at Universitas Prasetiya
Mulya BSD. I personally think that Data is just exciting. It could
show you the past, the present and the future. With the right
skillset, we could harness the data and develop it into something
big.
</h5>
<h5>
I am currently working as a Data Scientist at Supertype. However,
I'm always open for discussion and collaboration. Feel free to
contact me through the information I've provided below!
</h5>
</div>
</div>
</div>
</section>
<section id="contact" class="contact">
<div class="container">
<h4>I love working with amazing people.</h4>
<h1>LET'S CONNECT</h1>
<div class="socials">
<div class="column">
<a
href="tel:+628114538300"
target="_blank"
rel="noopener noreferrer"
class="fa fa-phone"
></a>
<a
href="https://api.whatsapp.com/send?phone=+628114538300"
target="_blank"
rel="noopener noreferrer"
class="fa fa-whatsapp"
></a>
<a
href="https://www.instagram.com/gimli_tangster/"
target="_blank"
rel="noopener noreferrer"
class="fa fa-instagram"
></a>
</div>
<div class="column">
<a
href="https://github.com/owenn2106"
target="_blank"
rel="noopener noreferrer"
class="fa fa-github"
></a>
<a
href="https://www.linkedin.com/in/owenn-gimli-8567b1196/"
target="_blank"
rel="noopener noreferrer"
class="fa fa-linkedin"
></a>
<a
href="mailto:owenn2106@gmail.com"
target="_blank"
rel="noopener noreferrer"
class="fa fa-envelope"
></a>
</div>
</div>
</div>
</section>
<script
src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"
integrity="sha512-894YE6QWD5I59HgZOGReFYm4dnWc1Qt5NtvYSaNcOP+u1T9qYdvdihz0PPSiiqn/+/3e7Jo4EaG7TubfWGUrMQ=="
crossorigin="anonymous"
referrerpolicy="no-referrer"
></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.6.1/gsap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.6.1/ScrollTrigger.min.js"></script>
<script
src="https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.8/ScrollMagic.min.js"
integrity="sha512-8E3KZoPoZCD+1dgfqhPbejQBnQfBXe8FuwL4z/c8sTrgeDMFEnoyTlH3obB4/fV+6Sg0a0XF+L/6xS4Xx1fUEg=="
crossorigin="anonymous"
referrerpolicy="no-referrer"
></script>
<script type="text/javascript" src="js/vanilla-tilt.js"></script>
<script src="js/navbar.js"></script>
<script src="js/intro.js"></script>
<script src="js/text-parallax.js"></script>
<script src="js/web-projects.js"></script>
<script src="js/skills.js"></script>
<script src="js/about.js"></script>
<script src="js/app.js"></script>
</body>
</html>