-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
362 lines (345 loc) · 30.4 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="keywords" content="HTML, CSS, tailwindcss, flowbite">
<link rel="icon" href="https://avatars.githubusercontent.com/u/13253140?v=4" type="image/png">
<meta name="description" content="To Duc AnhPersonal Website/Portfolio">
<meta name="author" content="To Duc Anh">
<title>Hyprnx Portfolio</title>
<link rel="stylesheet" href="build/tailwind.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/tailwindcss/2.0.2/tailwind.min.css">
</head>
<body>
<!-- Section 1 -->
<section class="w-full px-6 pb-12 antialiased bg-white ">
<div class="mx-auto max-w-7xl">
<nav class="relative z-50 h-24 select-none" x-data="{ showMenu: false }">
<div class="container relative flex flex-wrap items-center justify-between h-24 mx-auto overflow-hidden font-medium border-b border-gray-200 md:overflow-visible lg:justify-center sm:px-4 md:px-2 lg:px-0">
<div class="flex items-center justify-start w-1/4 h-full pr-4">
<a href="#_" class="inline-block py-4 md:py-0">
<span class="p-1 text-2xl font-black leading-none text-transparent bg-clip-text bg-gradient-to-r from-green-400 via-blue-500 to-purple-500 ">Hyprnx</span>
</a>
</div>
<div class="top-0 left-0 items-start hidden w-full h-full p-4 text-sm bg-gray-900 bg-opacity-50 md:items-center md:w-3/4 md:absolute lg:text-base md:bg-transparent md:p-0 md:relative md:flex" :class="{'flex fixed': showMenu, 'hidden': !showMenu }">
<div class="flex-col w-full h-auto overflow-hidden bg-white rounded-lg md:bg-transparent md:overflow-visible md:rounded-none md:relative md:flex md:flex-row">
<a href="#_" class="inline-flex items-center inline-block w-auto h-16 px-6 text-2xl font-black leading-none md:hidden"><span class="block w-full text-transparent bg-clip-text bg-gradient-to-r from-green-400 via-blue-500 to-purple-500 p-1">Hyprnx.</span></a>
<div class="flex flex-col items-start justify-center w-full space-x-6 text-center lg:space-x-8 md:w-2/3 md:mt-0 md:flex-row md:items-center">
<a href="#_" class="inline-block w-full py-2 mx-0 ml-6 font-medium text-left text-indigo-600 md:ml-0 md:w-auto md:px-0 md:mx-2 lg:mx-3 md:text-center">Home</a>
<a href="#introduction" class="inline-block w-full py-2 mx-0 font-medium text-left text-gray-700 md:w-auto md:px-0 md:mx-2 hover:text-indigo-600 lg:mx-3 md:text-center">introduction</a>
<a href="#projects" class="inline-block w-full py-2 mx-0 font-medium text-left text-gray-700 md:w-auto md:px-0 md:mx-2 hover:text-indigo-600 lg:mx-3 md:text-center">Projects</a>
<a href="#contact" class="inline-block w-full pt-2 pb-2 mx-0 font-medium text-left text-gray-700 md:w-auto md:px-0 md:mx-2 hover:text-indigo-600 lg:mx-3 md:text-center">Contact</a>
<a href="#hire_me" class="inline-block w-full pt-2 pb-2 mx-0 font-medium text-left text-gray-700 md:w-auto md:px-0 md:mx-2 hover:text-indigo-600 lg:mx-3 md:text-center">Jobs</a>
</div>
</div>
</div>
<div @click="showMenu = !showMenu" class="absolute right-0 flex flex-col items-center items-end justify-center w-10 h-10 bg-white rounded-full cursor-pointer md:hidden hover:bg-gray-100">
<svg class="w-6 h-6 text-gray-700" x-show="!showMenu" fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewBox="0 0 24 24" stroke="currentColor"><path d="M4 6h16M4 12h16M4 18h16"></path></svg>
<svg class="w-6 h-6 text-gray-700" x-show="showMenu" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" style="display: none;"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path></svg>
</div>
</div>
</nav>
<!-- Main Hero Content -->
<div class="container max-w-lg px-4 py-32 mx-auto mt-px text-left md:max-w-none md:text-center">
<h1 class="text-5xl font-extrabold leading-10 tracking-tight text-left text-gray-900 md:text-center sm:leading-none md:text-6xl lg:text-7xl">Hi friends! </h1>
<h1><span class="text-5xl font-extrabold leading-10 tracking-tight text-left sm:leading-none md:text-6xl lg:text-7xl relative mt-2 text-transparent bg-clip-text bg-gradient-to-br from-indigo-600 to-indigo-500 md:inline-block">Welcome on board</span></h1>
<div class="mx-auto mt-5 text-gray-500 md:mt-12 md:max-w-lg md:text-center lg:text-lg">Enjoy your stay! 😊</div>
<div class="flex flex-col items-center mt-12 text-center">
<span class="relative inline-flex w-full md:w-auto">
<a href="#introduction" type="button" class="inline-flex items-center justify-center w-full px-8 py-4 text-base font-bold leading-6 text-white bg-indigo-600 border border-transparent rounded-full md:w-auto hover:bg-indigo-500 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-600">Let's go!</a>
</span>
</div>
</div>
<!-- End Main Hero Content -->
</div>
</section>
<!-- Section 2 -->
<section id="introduction" class="h-auto bg-white">
<div class="px-8 py-28 mx-auto max-w-7xl">
<div class="p-12 w-full mx-auto text-left md:w-11/12 xl:w-9/12 md:text-center">
<span class="font-extrabold leading-none text-center text-4xl md:text-7xl pb-10 block w-full text-transparent bg-clip-text bg-gradient-to-r from-green-400 via-blue-500 to-purple-500 lg:inline">Who am I?</span>
</div>
<div class="w-full mx-auto text-left md:w-11/12 xl:w-9/12 md:text-center">
<h1 class="mb-6 text-xl font-extrabold leading-none tracking-normal text-gray-900 md:text-4xl md:tracking-tight"> Im Duc Anh, Vietnam based. Graduated from National Economics University(NEU), major in Data Science in Economics and Business. <span class="block w-full text-transparent bg-clip-text bg-gradient-to-r from-green-400 via-blue-500 to-purple-500 lg:inline md:tracking-tight">Detail oriented, Mathematics, Artificial Intelligence and Data Science enthusiast</span></h1>
<p class="px-0 text-gray-600 mb-6 sm:text-base md:text-xl lg:px-24 md:tracking-tight">Former member of NEU's DSLab, currently Senior Data Engineer, former Management Associate, Key Talent at Techcombank Vietnam.
</p>
<p class="px-0 text-gray-600 mb-6 sm:text-base md:text-xs lg:px-24 md:tracking-tight">I mean..., if you want to know more about my job, then read my resumé below. If you want to know more about me, im always open for a coffee 🥸. Send me an email then 🤔.
</p>
</div>
</div>
</section>
<!-- Section 3 -->
<section id="projects" class="w-full bg-white pt-7 pb-7 md:pt-20 md:pb-24">
<div class="p-12 w-full mx-auto text-left md:w-11/12 xl:w-9/12 md:text-center">
<span class="font-extrabold leading-none text-center text-4xl md:text-7xl pb-10 block w-full text-transparent bg-clip-text bg-gradient-to-r from-purple-500 to-pink-500 lg:inline">My projects</span>
</div>
<div class="box-border flex flex-col items-center content-center px-8 mx-auto leading-6 text-black border-0 border-gray-300 border-solid md:flex-row max-w-7xl lg:px-16">
<!-- Image -->
<div class="box-border relative w-full max-w-md px-4 mt-5 mb-4 -ml-5 text-center bg-no-repeat bg-contain border-solid md:ml-0 md:mt-0 md:max-w-none lg:mb-0 md:w-1/2 xl:pl-10">
<img src="https://cdn.devdojo.com/images/december2020/productivity.png" class="p-2 pl-6 pr-5 xl:pl-16 xl:pr-20">
</div>
<!-- Content -->
<div class="box-border order-first w-full text-black border-solid md:w-1/2 md:pl-10 md:order-none">
<h2 class="m-0 text-xl font-semibold leading-tight border-0 border-gray-300 lg:text-3xl md:text-2xl">
<a href="https://github.com/Hyprnx/used-cars-prices-prediction">Used cars price prediction.</a>
</h2>
<p class="pt-4 pb-8 m-0 leading-7 text-gray-700 border-0 border-gray-300 sm:pr-12 xl:pr-32 lg:text-lg">
Build open source crawlers and Machine Learning model to predict used cars price in Vietnamese Market
</p>
<ul class="p-0 m-0 leading-6 border-0 border-gray-300">
<li class="box-border relative py-1 pl-0 text-left text-gray-500 border-solid">
<span class="inline-flex items-center justify-center w-6 h-6 mr-2 text-white bg-yellow-300 rounded-full"><span class="text-sm font-bold">✓</span></span> Published in the National Science Conference, March 2022
</li>
<li class="box-border relative py-1 pl-0 text-left text-gray-500 border-solid">
<span class="inline-flex items-center justify-center w-6 h-6 mr-2 text-white bg-yellow-300 rounded-full"><span class="text-sm font-bold">✓</span></span> Third Prize in "Student Science Research Contest, NEU, June, 2022
</li>
<li class="box-border relative py-1 pl-0 text-left text-gray-500 border-solid">
<span class="inline-flex items-center justify-center w-6 h-6 mr-2 text-white bg-yellow-300 rounded-full"><span class="text-sm font-bold">✓</span></span> Public Viet-used-cars dataset with more than 48000 used cars selling in top Vietnamese e-commerce site
</li>
</ul>
</div>
<!-- End Content -->
</div>
<div class="box-border flex flex-col items-center content-center px-8 mx-auto mt-2 leading-6 text-black border-0 border-gray-300 border-solid md:mt-20 xl:mt-0 md:flex-row max-w-7xl lg:px-16">
<!-- Content -->
<div class="box-border w-full text-black border-solid md:w-1/2 md:pl-6 xl:pl-32">
<h2 class="m-0 text-xl font-semibold leading-tight border-0 border-gray-300 lg:text-3xl md:text-2xl">
<a href="https://github.com/Hyprnx/cars_specifications/tree/main/car_specifications/car_specifications/resources">Cars specification</a>
</h2>
<p class="pt-4 pb-8 m-0 leading-7 text-gray-700 border-0 border-gray-300 sm:pr-10 lg:text-lg">
A opensource dataset includes all car's model and its variation that were mass produce from 1985 to early 2022.
</p>
<ul class="p-0 m-0 leading-6 border-0 border-gray-300">
<li class="box-border relative py-1 pl-0 text-left text-gray-500 border-solid">
<span class="inline-flex items-center justify-center w-6 h-6 mr-2 text-white bg-yellow-300 rounded-full"><span class="text-sm font-bold">✓</span></span> 120 MB of cars specs published.
</li>
<li class="box-border relative py-1 pl-0 text-left text-gray-500 border-solid">
<span class="inline-flex items-center justify-center w-6 h-6 mr-2 text-white bg-yellow-300 rounded-full"><span class="text-sm font-bold">✓</span></span> Detailed crawling steps, crawler included.
</li>
</ul>
</div>
<!-- End Content -->
<!-- Image -->
<div class="box-border relative w-full max-w-md px-4 mt-10 mb-4 text-center bg-no-repeat bg-contain border-solid md:mt-0 md:max-w-none lg:mb-0 md:w-1/2">
<img src="https://cdn.devdojo.com/images/december2020/settings.png" class="pl-4 sm:pr-10 xl:pl-10 lg:pr-32">
</div>
</div>
</section>
<!-- Section 4 -->
<section id="know_me" class="px-2 py-32 bg-white md:px-0">
<div class="p-12 w-full mx-auto text-left md:w-11/12 xl:w-9/12 md:text-center">
<span class="font-extrabold leading-none text-center text-4xl md:text-7xl pb-10 block w-full text-transparent bg-clip-text bg-gradient-to-r from-purple-500 to-pink-500 lg:inline">Know my Stories!</span>
</div>
<div class="container items-center max-w-6xl px-8 mx-auto xl:px-5">
<div class="flex flex-wrap items-center sm:-mx-3">
<div class="w-full md:w-1/2 md:px-3">
<div class="w-full pb-6 space-y-6 sm:max-w-md lg:max-w-lg md:space-y-4 lg:space-y-8 xl:space-y-9 sm:pr-5 lg:pr-0 md:pb-0">
<h1 class="text-4xl font-extrabold tracking-tight text-gray-900 sm:text-5xl md:text-4xl lg:text-5xl xl:text-6xl">
<span class="block xl:inline">Go to my github to</span>
<span class="block text-indigo-600 xl:inline">Know me more!</span>
</h1>
<p class="mx-auto text-base text-gray-500 sm:max-w-md lg:text-xl md:max-w-3xl">It's never been easier to know and understand a Data Scientist or Developer via their Github repositories. Let's me tell you my stories via mine!</p>
<div class="relative flex flex-col sm:flex-row sm:space-x-4">
<a href="https://www.atlassian.com/git/tutorials/what-is-git" class="flex items-center px-6 py-3 text-gray-500 bg-gray-100 rounded-md hover:bg-gray-200 hover:text-gray-600">
What is... Git or Github?
</a>
<a href="https://github.com/Hyprnx" class="flex items-center w-full px-6 py-3 mb-3 text-lg text-white bg-indigo-600 rounded-md sm:mb-0 hover:bg-indigo-700 sm:w-auto">
My Github
<svg xmlns="http://www.w3.org/2000/svg" class="w-5 h-5 ml-1" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="5" y1="12" x2="19" y2="12"></line><polyline points="12 5 19 12 12 19"></polyline></svg>
</a>
</div>
</div>
</div>
<div class="w-full md:w-1/2">
<div class="w-full h-auto overflow-hidden rounded-md shadow-xl sm:rounded-xl">
<img src="https://images.unsplash.com/photo-1556075798-4825dfaaf498?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1176&q=80">
</div>
</div>
</div>
</div>
</section>
<!-- Section 5 -->
<section id="contact" class="w-full bg-white">
<div class="p-12 w-full mx-auto text-left md:w-11/12 xl:w-9/12 md:text-center">
<span class="font-extrabold leading-none text-center text-4xl md:text-7xl pb-10 block w-full text-transparent bg-clip-text bg-gradient-to-r from-purple-500 to-pink-500 lg:inline">Contact me!</span>
</div>
<div class="mx-auto max-w-7xl">
<div class="flex flex-col lg:flex-row">
<div class="relative w-full bg-cover lg:w-6/12 xl:w-7/12 bg-gradient-to-r from-white via-white to-gray-100">
<div class="relative flex flex-col items-center justify-center w-full h-full px-10 my-20 lg:px-16 lg:my-0">
<div class="flex flex-col items-start space-y-12 tracking-tight lg:max-w-3xl">
<div class="relative">
<!-- <p class="mb-2 font-medium text-gray-700 uppercase">Send me some emails!</p> -->
<h2 class="text-5xl font-bold text-gray-900 xl:text-6xl">Send me some emails!</h2>
</div>
<p class="text-xl sm: text-sm text-gray-700">I have created a simple button to help you send me email :D, not sure it is useful... but ye send me some emails :D if you want!</p>
<!-- <a href="#_" class="inline-block px-8 py-5 text-xl font-medium text-center text-white transition duration-200 bg-blue-600 rounded-lg hover:bg-blue-700 ease">Get Started Today</a> -->
</div>
</div>
</div>
<div class="w-full bg-white lg:w-6/12 xl:w-5/12">
<div class="flex flex-col items-start justify-start w-full h-full px-10 lg:p-16 xl:p-24">
<!-- <h4 class="w-full text-3xl font-bold">Signup</h4>
<p class="text-lg text-gray-500">or, if you have an account you can <a href="#_" class="text-blue-600 underline">sign in</a></p> -->
<div class="relative w-full mt-0 space-y-6">
<!-- <div class="relative">
<label class="font-medium text-gray-900">Name</label>
<input type="email" id="name" class="block w-full px-4 py-4 mt-2 text-xl placeholder-gray-400 bg-gray-200 rounded-lg focus:outline-none focus:ring-4 focus:ring-blue-600 focus:ring-opacity-50" placeholder="Enter Your Name">
</div>
<div class="relative">
<label class="font-medium text-gray-900">Email</label>
<input type="text" class="block w-full px-4 py-4 mt-2 text-xl placeholder-gray-400 bg-gray-200 rounded-lg focus:outline-none focus:ring-4 focus:ring-blue-600 focus:ring-opacity-50" placeholder="Enter Your Email Address">
</div>
<div class="relative">
<label class="font-medium text-gray-900">Message</label>
<input type="email" id="message" class="block w-full px-4 py-4 mt-2 text-xl placeholder-gray-400 bg-gray-200 rounded-lg focus:outline-none focus:ring-4 focus:ring-blue-600 focus:ring-opacity-50" placeholder="Enter your message here">
</div> -->
<div class="relative">
<a href="mailto: [email protected]?subject=Email from website" class="inline-block w-full px-5 py-4 text-lg font-medium text-center text-white transition duration-200 bg-blue-600 rounded-lg hover:bg-blue-700 ease">Send!<svg xmlns="http://www.w3.org/2000/svg" class="w-5 h-5 ml-1 inline-block align-top" viewBox="0 -5 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="5" y1="12" x2="19" y2="12"></line><polyline points="12 5 19 12 12 19"></polyline></svg></a>
<!-- <a href="#_" class="inline-block w-full px-5 py-4 mt-3 text-lg font-bold text-center text-gray-900 transition duration-200 bg-white border border-gray-300 rounded-lg hover:bg-gray-100 ease">Sign up with Google</a> -->
</div>
</div>
</div>
</div>
</div>
</div>
<section id='hire_me'>
<div class="p-6 w-120 md:w-240 lg:w-480 bg-white shadow overflow-hidden sm:rounded-lg">
<div class="p-12 sm:px-6">
<!-- <h2 class="text-xl py-1 leading-6 font-medium text-gray-900">Want to hire me?</h2> -->
<span class="font-extrabold leading-none text-center text-2xl md:text-4xl pb-10 block w-full text-transparent bg-clip-text bg-gradient-to-r from-purple-500 to-pink-500 lg:inline">Want to work with me?</span>
<p class="mt-1 max-w-2xl text-sm text-gray-500">Below are my personal information.</p>
</div>
<div class="border-t border-gray-200">
<dl>
<div class="bg-gray-50 px-4 py-5 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-6">
<dt class="text-sm font-medium text-gray-500">Full name</dt>
<dd class="mt-1 text-sm text-gray-900 sm:mt-0 sm:col-span-2">To Duc Anh</dd>
</div>
<div class="bg-white px-4 py-5 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-6">
<dt class="text-sm font-medium text-gray-500">Application for</dt>
<dd class="mt-1 text-sm text-gray-900 sm:mt-0 sm:col-span-2"> AI Engineer, MLOps Engineer, Data Engineer, Data Scientist.</dd>
</div>
<div class="bg-gray-50 px-4 py-5 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-6">
<dt class="text-sm font-medium text-gray-500">Email address</dt>
<dd class="mt-1 text-sm text-gray-900 sm:mt-0 sm:col-span-2">[email protected]</dd>
</div>
<div class="bg-white px-4 py-5 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-6">
<dt class="text-sm font-medium text-gray-500">Salary expectation</dt>
<dd class="mt-1 text-sm text-gray-900 sm:mt-0 sm:col-span-2">Contact me, maybe?</dd>
</div>
<div class="bg-gray-50 px-4 py-5 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-6">
<dt class="text-sm font-medium text-gray-500">About</dt>
<dd class="mt-1 text-sm text-gray-900 sm:mt-0 sm:col-span-2">Senior Data Engineer, Former Management Associate at Techcombank Vietnam, Data and Analytics Division. Graduated from National Economics University with high distinction degree, major in Data Science. Detail-oriented, Mathematics, Artificial Intelligence, Engineering enthusiast.</dd>
</div>
<div class="bg-white px-4 py-5 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-6">
<dt class="text-sm font-medium text-gray-500">Resume</dt>
<dd class="mt-1 text-sm text-gray-900 sm:mt-0 sm:col-span-2">
<ul role="list" class="border border-gray-200 rounded-md divide-y divide-gray-200">
<li class="pl-3 pr-4 py-3 flex items-center justify-between text-sm">
<div class="w-0 flex-1 flex items-center">
<!-- Heroicon name: solid/paper-clip -->
<svg class="flex-shrink-0 h-5 w-5 text-gray-400" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
<path fill-rule="evenodd" d="M8 4a3 3 0 00-3 3v4a5 5 0 0010 0V7a1 1 0 112 0v4a7 7 0 11-14 0V7a5 5 0 0110 0v4a3 3 0 11-6 0V7a1 1 0 012 0v4a1 1 0 102 0V7a3 3 0 00-3-3z" clip-rule="evenodd" />
</svg>
<span class="ml-2 flex-1 w-0 truncate"> White Edition.pdf </span>
</div>
<div class="ml-4 flex-shrink-0">
<a href="https://github.com/Hyprnx/resume/raw/main/CV_Light_Theme.pdf" class="font-medium text-indigo-600 hover:text-indigo-500"> Download </a>
</div>
</li>
<li class="pl-3 pr-4 py-3 flex items-center justify-between text-sm">
<div class="w-0 flex-1 flex items-center">
<!-- Heroicon name: solid/paper-clip -->
<svg class="flex-shrink-0 h-5 w-5 text-gray-400" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
<path fill-rule="evenodd" d="M8 4a3 3 0 00-3 3v4a5 5 0 0010 0V7a1 1 0 112 0v4a7 7 0 11-14 0V7a5 5 0 0110 0v4a3 3 0 11-6 0V7a1 1 0 012 0v4a1 1 0 102 0V7a3 3 0 00-3-3z" clip-rule="evenodd" />
</svg>
<span class="ml-2 flex-1 w-0 truncate"> Black Edition.pdf </span>
</div>
<div class="ml-4 flex-shrink-0">
<a href="https://github.com/Hyprnx/resume/raw/main/CV_Dark_Theme.pdf" class="font-medium text-indigo-600 hover:text-indigo-500"> Download </a>
</div>
</li>
</ul>
</dd>
</div>
</dl>
</div>
</div>
</section>
</section>
<!-- Section 6 -->
<section id="footer" class="bg-white">
<div class="max-w-screen-xl px-4 py-12 mx-auto space-y-8 overflow-hidden sm:px-6 lg:px-8">
<nav class="flex flex-wrap justify-center -mx-5 -my-2">
<div class="px-5 py-2">
<a href="#introduction" class="text-base leading-6 text-gray-500 hover:text-gray-900">
Introduction
</a>
</div>
<div class="px-5 py-2">
<a href="#projects" class="text-base leading-6 text-gray-500 hover:text-gray-900">
Projects
</a>
</div>
<div class="px-5 py-2">
<a href="#contact" class="text-base leading-6 text-gray-500 hover:text-gray-900">
Contact
</a>
</div>
<div class="px-5 py-2">
<a href="#hire_me" class="text-base leading-6 text-gray-500 hover:text-gray-900">
Jobs
</a>
</div>
<!-- <div class="px-5 py-2">
<a href="#" class="text-base leading-6 text-gray-500 hover:text-gray-900">
Contact
</a>
</div>
<div class="px-5 py-2">
<a href="#" class="text-base leading-6 text-gray-500 hover:text-gray-900">
Terms
</a>
</div> -->
</nav>
<div class="flex justify-center mt-8 space-x-6">
<!-- <a href="#" class="text-gray-400 hover:text-gray-500">-->
<!-- <span class="sr-only">Facebook</span>-->
<!-- <svg class="w-6 h-6" aria-hidden="true" fill="currentColor" viewBox="0 0 24 24">-->
<!-- <path fill-rule="evenodd" d="M22 12c0-5.523-4.477-10-10-10S2 6.477 2 12c0 4.991 3.657 9.128 8.438 9.878v-6.987h-2.54V12h2.54V9.797c0-2.506 1.492-3.89 3.777-3.89 1.094 0 2.238.195 2.238.195v2.46h-1.26c-1.243 0-1.63.771-1.63 1.562V12h2.773l-.443 2.89h-2.33v6.988C18.343 21.128 22 16.991 22 12z" clip-rule="evenodd"></path>-->
<!-- </svg>-->
<!-- </a>-->
<!-- <a href="#" class="text-gray-400 hover:text-gray-500">-->
<!-- <span class="sr-only">Instagram</span>-->
<!-- <svg class="w-6 h-6" aria-hidden="true" fill="currentColor" viewBox="0 0 24 24">-->
<!-- <path fill-rule="evenodd" d="M12.315 2c2.43 0 2.784.013 3.808.06 1.064.049 1.791.218 2.427.465a4.902 4.902 0 011.772 1.153 4.902 4.902 0 011.153 1.772c.247.636.416 1.363.465 2.427.048 1.067.06 1.407.06 4.123v.08c0 2.643-.012 2.987-.06 4.043-.049 1.064-.218 1.791-.465 2.427a4.902 4.902 0 01-1.153 1.772 4.902 4.902 0 01-1.772 1.153c-.636.247-1.363.416-2.427.465-1.067.048-1.407.06-4.123.06h-.08c-2.643 0-2.987-.012-4.043-.06-1.064-.049-1.791-.218-2.427-.465a4.902 4.902 0 01-1.772-1.153 4.902 4.902 0 01-1.153-1.772c-.247-.636-.416-1.363-.465-2.427-.047-1.024-.06-1.379-.06-3.808v-.63c0-2.43.013-2.784.06-3.808.049-1.064.218-1.791.465-2.427a4.902 4.902 0 011.153-1.772A4.902 4.902 0 015.45 2.525c.636-.247 1.363-.416 2.427-.465C8.901 2.013 9.256 2 11.685 2h.63zm-.081 1.802h-.468c-2.456 0-2.784.011-3.807.058-.975.045-1.504.207-1.857.344-.467.182-.8.398-1.15.748-.35.35-.566.683-.748 1.15-.137.353-.3.882-.344 1.857-.047 1.023-.058 1.351-.058 3.807v.468c0 2.456.011 2.784.058 3.807.045.975.207 1.504.344 1.857.182.466.399.8.748 1.15.35.35.683.566 1.15.748.353.137.882.3 1.857.344 1.054.048 1.37.058 4.041.058h.08c2.597 0 2.917-.01 3.96-.058.976-.045 1.505-.207 1.858-.344.466-.182.8-.398 1.15-.748.35-.35.566-.683.748-1.15.137-.353.3-.882.344-1.857.048-1.055.058-1.37.058-4.041v-.08c0-2.597-.01-2.917-.058-3.96-.045-.976-.207-1.505-.344-1.858a3.097 3.097 0 00-.748-1.15 3.098 3.098 0 00-1.15-.748c-.353-.137-.882-.3-1.857-.344-1.023-.047-1.351-.058-3.807-.058zM12 6.865a5.135 5.135 0 110 10.27 5.135 5.135 0 010-10.27zm0 1.802a3.333 3.333 0 100 6.666 3.333 3.333 0 000-6.666zm5.338-3.205a1.2 1.2 0 110 2.4 1.2 1.2 0 010-2.4z" clip-rule="evenodd"></path>-->
<!-- </svg>-->
<!-- </a>-->
<!-- <a href="#" class="text-gray-400 hover:text-gray-500">-->
<!-- <span class="sr-only">Twitter</span>-->
<!-- <svg class="w-6 h-6" aria-hidden="true" fill="currentColor" viewBox="0 0 24 24">-->
<!-- <path d="M8.29 20.251c7.547 0 11.675-6.253 11.675-11.675 0-.178 0-.355-.012-.53A8.348 8.348 0 0022 5.92a8.19 8.19 0 01-2.357.646 4.118 4.118 0 001.804-2.27 8.224 8.224 0 01-2.605.996 4.107 4.107 0 00-6.993 3.743 11.65 11.65 0 01-8.457-4.287 4.106 4.106 0 001.27 5.477A4.072 4.072 0 012.8 9.713v.052a4.105 4.105 0 003.292 4.022 4.095 4.095 0 01-1.853.07 4.108 4.108 0 003.834 2.85A8.233 8.233 0 012 18.407a11.616 11.616 0 006.29 1.84"></path>-->
<!-- </svg>-->
<!-- </a>-->
<a href="https://github.com/Hyprnx" class="text-gray-400 hover:text-gray-500">
<span class="sr-only">GitHub</span>
<svg class="w-6 h-6" aria-hidden="true" fill="currentColor" viewBox="0 0 24 24">
<path fill-rule="evenodd" d="M12 2C6.477 2 2 6.484 2 12.017c0 4.425 2.865 8.18 6.839 9.504.5.092.682-.217.682-.483 0-.237-.008-.868-.013-1.703-2.782.605-3.369-1.343-3.369-1.343-.454-1.158-1.11-1.466-1.11-1.466-.908-.62.069-.608.069-.608 1.003.07 1.531 1.032 1.531 1.032.892 1.53 2.341 1.088 2.91.832.092-.647.35-1.088.636-1.338-2.22-.253-4.555-1.113-4.555-4.951 0-1.093.39-1.988 1.029-2.688-.103-.253-.446-1.272.098-2.65 0 0 .84-.27 2.75 1.026A9.564 9.564 0 0112 6.844c.85.004 1.705.115 2.504.337 1.909-1.296 2.747-1.027 2.747-1.027.546 1.379.202 2.398.1 2.651.64.7 1.028 1.595 1.028 2.688 0 3.848-2.339 4.695-4.566 4.943.359.309.678.92.678 1.855 0 1.338-.012 2.419-.012 2.747 0 .268.18.58.688.482A10.019 10.019 0 0022 12.017C22 6.484 17.522 2 12 2z" clip-rule="evenodd"></path>
</svg>
</a>
<a href="https://www.linkedin.com/in/duc-anh-to/" class="text-gray-400 hover:text-gray-500">
<span class="sr-only">LinkedIn</span>
<svg class="w-6 h-6" aria-hidden="true" fill="currentColor" viewBox="0 0 24 24">
<path fill-rule="evenodd" d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10c5.51 0 10-4.48 10-10S17.51 2 12 2zm6.605 4.61a8.502 8.502 0 011.93 5.314c-.281-.054-3.101-.629-5.943-.271-.065-.141-.12-.293-.184-.445a25.416 25.416 0 00-.564-1.236c3.145-1.28 4.577-3.124 4.761-3.362zM12 3.475c2.17 0 4.154.813 5.662 2.148-.152.216-1.443 1.941-4.48 3.08-1.399-2.57-2.95-4.675-3.189-5A8.687 8.687 0 0112 3.475zm-3.633.803a53.896 53.896 0 013.167 4.935c-3.992 1.063-7.517 1.04-7.896 1.04a8.581 8.581 0 014.729-5.975zM3.453 12.01v-.26c.37.01 4.512.065 8.775-1.215.25.477.477.965.694 1.453-.109.033-.228.065-.336.098-4.404 1.42-6.747 5.303-6.942 5.629a8.522 8.522 0 01-2.19-5.705zM12 20.547a8.482 8.482 0 01-5.239-1.8c.152-.315 1.888-3.656 6.703-5.337.022-.01.033-.01.054-.022a35.318 35.318 0 011.823 6.475 8.4 8.4 0 01-3.341.684zm4.761-1.465c-.086-.52-.542-3.015-1.659-6.084 2.679-.423 5.022.271 5.314.369a8.468 8.468 0 01-3.655 5.715z" clip-rule="evenodd"></path>
</svg>
</a>
</div>
<p class="mt-8 text-base leading-6 text-center text-gray-400">© <script>document.write(new Date().getFullYear());</script> Duc Anh To All rights reserved.</p>
</div>
</section>
<!-- AlpineJS Library -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/alpinejs/2.8.0/alpine.js"></script>
</body>
</html>