-
Notifications
You must be signed in to change notification settings - Fork 1
/
index.html
189 lines (176 loc) · 9.32 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
<!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" />
<meta name="description"
content="A back-end developer and last year university student with experience working with back-end and data frameworks and technologies." />
<meta name="author" content="PrometheusAlpha" />
<meta name="keywords"
content="prometheusalpha, prometheusalpha JS, prometheusalpha developer, Prometheusalpha, PrometheusAlpha, CV, Resume, curriculum vitae, portfolio" />
<link rel="icon" type="image/png" href="image/favicon.svg" />
<title>Nguyễn Huy Hoàng</title>
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link rel="preload" as="image" href="image/portrait.jpg" />
<link href="https://fonts.googleapis.com/css2?family=IBM+Plex+Mono&display=swap" rel="stylesheet" />
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;700&display=swap" rel="stylesheet" />
<link rel="stylesheet" href="/dist/output.css" />
<script src="scripts/select.js" defer async type="module"></script>
<!-- <script src="scripts/index.js" defer async type="module"></script> -->
</head>
<body class="font-['Inter'] bg-gray-900 text-gray-300 overflow-y-scroll">
<div class="h-screen flex justify-start px-[4vw] items-center">
<div class="font-['IBM_Plex_Mono']">
<h1 class="text-5xl py-3">$ whoami</h1>
<h1 class="text-5xl py-3">I am <span id="glitch">Nguyễn Huy Hoàng</span></h1>
<h1 class="text-5xl py-3">$ ls</h1>
<h1 class="text-5xl py-3 flex flex-col lg:flex-row gap-8" id="links">
<a href="#about" class="text-green-400 hover:underline">about</a>
<a href="#experiences" class="text-green-400 hover:underline">experiences</a>
<a href="#contacts" class="text-green-400 hover:underline">contacts</a>
</h1>
<h1 class="text-5xl py-3 items-center hidden lg:flex">$ cd
<div class="grid items-center">
<input type="text" id="cd"
class="bg-transparent focus:outline-none placeholder:text-gray-800 z-10 row-span-full col-span-full" />
<span class="text-gray-800 row-span-full col-span-full" id="placeholder">about</span>
</div>
</h1>
<div class="text-5xl py-3 text-gray-800 hidden lg:block"><kbd class="border-2 border-gray-800 px-3">→</kbd>
to fill</div>
</div>
</div>
<section class="flex flex-col items-center min-h-screen mb-48 snap-start z-10" id="about">
<h1 class="text-center text-7xl py-16 font-semibold">ABOUT ME</h1>
<div class="lg:flex max-w-7xl items-center">
<img src="image/portrait.jpg" alt="" class="mx-auto md:w-96 w-full h-auto" />
<div class="text-2xl m-10 text-justify">
<div>
<h1 class="text-4xl py-8 font-['IBM_Plex_Mono']">Hi, I'm <span class="text-green-400">Nguyễn Huy Hoàng</span>
</h1>
<p class="leading-normal">
I am a capable backend developer with experiences in large, complex systems and databases.
</p>
<br />
<p class="leading-normal">
People think of me as someone who can learn and adapt to new
knowledge and skills quickly. I learn quickly and can easily adapt to new technologies.
My analytical abilities allow me to efficiently investigate
and solve problems. My goal is to work on projects that can make a difference
in the world.
</p>
<br />
<ul class="leading-normal">
<li>🔭 I’m currently working on backend development</li>
<li>🌱 I’m currently learning Go</li>
<li>
🤔 I’m looking for help with system design and architecture
</li>
<li>⚡ Fun fact: My productivity depends a little on my music 😄</li>
</ul>
</div>
</div>
</div>
</section>
<div class="relative max-w-7xl mx-auto" id="experiences">
<div class="mx-auto md:min-h-screen min-h-[60vmax] flex flex-col">
<h1 class="text-center text-7xl font-semibold py-10">EXPERIENCES</h1>
<ol class="relative border-l space-y-10 border-gray-700 md:text-xl text-3xl grow mx-[4vw] pb-20">
<li class="ml-4">
<div class="absolute w-3 h-3 rounded-full mt-1.5 -left-1.5 border border-gray-900 bg-gray-700">
</div>
<time class="mb-1 text-xl md:text-sm font-normal leading-none text-gray-500">August 2022 -
present</time>
<h3 class="font-semibold text-white">
Web Engineer at GHTK
</h3>
<ul class="text-xl md:text-base font-normal text-gray-400 list-disc">
<li>Developed over 10 ETL processes integrating multi-terabyte datasets from 3 critical upstream systems
into our in-house data warehouse, enabling real-time analytics and reporting for multiple business teams.
</li>
<br>
<li>Designed scalable REST APIs serving up to 200 requests per second that allowed secure access to refined
data products.</li>
<br>
<li>
Established automated monitoring and scheduling for all ETL workloads, improving uptime system-wide.
</li>
</ul>
</li>
<li class="ml-4">
<div class="absolute w-3 h-3 rounded-full mt-1.5 -left-1.5 border border-gray-900 bg-gray-700">
</div>
<time class="mb-1 text-xl md:text-sm font-normal leading-none text-gray-500">January 2021 -
April
2021</time>
<h3 class="font-semibold text-white">
Freelance Developer
</h3>
<p class="text-xl md:text-base font-normal text-gray-400">
Architected a high-throughput web crawling system that extracts real-time financial data from multiple sources. Built
using Python, the system processes and normalizes over thousands of items on-demand into consumable formats.
</p>
</li>
<li class="ml-4">
<div class="absolute w-3 h-3 rounded-full mt-1.5 -left-1.5 border border-gray-900 bg-gray-700">
</div>
<time class="mb-1 text-xl md:text-sm font-normal leading-none text-gray-500">December 2020 -
present</time>
<h3 class="font-semibold text-white">
FPT University's JS Club core member
</h3>
<p class="text-xl md:text-base font-normal text-gray-400">
Help organizing programming events and teaching programming skills
for club members
</p>
<a href="https://www.facebook.com/fu.jsclub" target="_blank"
class="inline-flex items-center mt-4 px-4 py-2 md:text-sm text-xl font-medium border rounded-lg focus:z-10 focus:ring-4 focus:outline-none bg-gray-800 text-gray-400 border-gray-600 hover:text-white hover:bg-gray-700 focus:ring-gray-700">Learn
more
<svg class="w-3 h-3 ml-2" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd"
d="M12.293 5.293a1 1 0 011.414 0l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414-1.414L14.586 11H3a1 1 0 110-2h11.586l-2.293-2.293a1 1 0 010-1.414z"
clip-rule="evenodd"></path>
</svg></a>
</li>
</ol>
</div>
</div>
<section class="w-full md:h-screen h-[60vmax] min-h-fit grid place-items-center p-8" id="contacts">
<div class="flex flex-col items-center">
<h1 class="text-3xl text-gray-500 text-center">
'With great responsibility comes great power' - Mark Manson
</h1>
<section class="flex items-center gap-8 mt-12">
<a href="https://www.facebook.com/theprometheusalpha/" target="_blank" rel="noopener noreferrer"
class="facebook rounded-full border-2 border-gray-600 p-4 hover:border-gray-100">
<img src="./image/fb.svg" alt="" class="w-8 h-8" />
</a>
<a href="https://github.com/prometheusalpha" target="_blank" rel="noopener noreferrer"
class="github rounded-full border-2 border-gray-600 p-4 hover:border-gray-100">
<img src="./image/github.svg" alt="" class="w-8 h-8 text-white" />
</a>
<a href="https://www.linkedin.com/in/prometheusalpha/" target="_blank" rel="noopener noreferrer"
class="linkedin rounded-full border-2 border-gray-600 p-4 hover:border-gray-100">
<img src="./image/linkedin.svg" alt="" class="w-8 h-8 text-white" />
</a>
<a href="mailto:hoangnguyen.hn212.hn@gmail.com" target="_blank" rel="noopener noreferrer"
class="linkedin rounded-full border-2 border-gray-600 p-4 hover:border-gray-100">
<img src="./image/mail.svg" alt="" class="w-10 h-10 text-white" />
</a>
</section>
<p class="text-2xl text-gray-500 pt-24">Last updated January 2024</p>
<p class="text-2xl text-gray-500 pt-2 flex items-center">
Made with
<a href="https://tailwindcss.com/" target="_blank">
<img src="image/tailwind.svg" class="h-8 w-56 px-2 opacity-50" alt="" />
</a>
</p>
</div>
</section>
<div id="top" class="cursor-pointer fixed right-4 bottom-4 text-center text-5xl lg:text-xl text-gray-500">
↑
</div>
</body>
</html>