-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
executable file
·458 lines (449 loc) · 16.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
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
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
<!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
href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"
rel="stylesheet"
integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC"
crossorigin="anonymous"
/>
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css"
/>
<link rel="stylesheet" href="./css/font.css" />
<link rel="stylesheet" href="./css/laptop.css" />
<link rel="stylesheet" href="./css/tablet.css" />
<link rel="stylesheet" href="./css/mobile.css" />
<title>Assignment 03</title>
</head>
<body>
<!-- Header -->
<div id="banner">
<img src="images/mine/senda-banner.jpg" alt="Banner sen đá" />
<div id="banner-text">
<h1>Đinh Phương Thảo</h1>
<p>Full Stack Developer</p>
</div>
</div>
<!-- Menu / Navigation -->
<section id="nav-bar" class="d-sm-block">
<nav>
<a href="#about"><i class="icon-user"></i>Thông tin</a>
<a href="#personal-info"><i class="icon-doc-text-inv"></i>Lý lịch</a>
<a href="#job-info" id="nav-middle">
<!-- <h2>Đinh Phương Thảo</h2>
<span>Full Stack Developer</span> -->
<img src="images/mine/avatar.jpeg" alt="Avatar" />
</a>
<a href="#certificate"><i class="icon-mail-alt"></i>Chứng chỉ</a>
<a href="#project"><i class="icon-star-1"></i>Dự Án</a>
</nav>
</section>
<!-- About -->
<section id="about" class="bg-grey">
<!-- Mục tiêu -->
<div id="target">
<h2 class="section-title">Mục tiêu nghề nghiệp</h2>
<p class="text-grey">
Là một sinh viên đang theo học chương trình chứng chỉ Doanh Nghiệp của
FUNiX. Em mong muốn, sau khi tốt nghiệp, mình sẽ làm việc với vị trí
Fullstack Developer, có thể vận dụng những kiến thức đã, đang và sẽ
không ngừng trau dồi và học hỏi để phát triển bản thân, cũng như hoàn
thành tốt nhất công việc được giao.
</p>
</div>
<!-- Thông tin cá nhân -->
<div id="personal-info">
<h2 class="section-title">Thông tin cá nhân</h2>
<div class="personal-input">
<input
id="validate-email"
type="email"
placeholder="Enter email"
class="p-1 mb-1 w-100"
/>
<p class="small text-grey">Hãy nhập email để xác thực</p>
<button class="btn bg-light-blue px-2 py-1 text-light">Submit</button>
</div>
<div class="personal-detail hidden">
<ul class="mt-40 info text-grey">
<li><span>Giới tính</span> : Nữ</li>
<li><span>Ngày sinh</span> : 23/04/1998</li>
<li><span>Điện thoại</span> : (+84) 917234xxx</li>
<li><span>Email</span> : [email protected]</li>
<li><span>Địa chỉ</span> : Nam Từ Liêm, Hà Nội, Việt Nam</li>
<li><span>Website</span> : https://dpthao.com</li>
</ul>
<div id="social-accs">
<a href="" class="icon-twitter"></a>
<a href="" class="icon-facebook"></a>
<a href="" class="icon-gplus"></a>
<a href="" class="icon-linkedin"></a>
</div>
</div>
</div>
</section>
<!-- Job Information -->
<section id="job-info">
<!-- Job info section: Row 1 -->
<!-- Kinh nghiệm -->
<div class="job-card">
<h2 class="job-head">
Kinh nghiệm
<button class="job-btn">▼ view more</button>
</h2>
<i class="job-icon ic-toolbox"></i>
<ul class="job-content timeline-content">
<li>
<p>Fullstack Developer - Công ty Cổ phần 4handy Group</p>
<p class="text-grey">
<i class="time-text"
>08/2022 - <span class="current">Hiện tại</span></i
>
<br />
- Tham gia xây dựng các chức năng cho hệ thống ERP và bán hàng
(web và mobile applications) của công ty theo nhu cầu kinh doanh
<br />
- Hỗ trợ giải đáp, xử lý lỗi phát sinh cho các bộ phận nếu có để
đảm bảo vận hành chung
</p>
</li>
<li>
<p>Data Analyst - Công ty Cổ phần 4handy Group</p>
<p class="text-grey">
<i class="time-text">12/2020 - 07/2022</i>
<br />
- Trích xuất và tổng hợp dữ liệu theo yêu cầu, bằng MongoDB Query,
Python hoặc SQL với PostgreSQL
<br />
- Xây dựng các dashboard, báo cáo chỉ số cho các bộ phận bằng SQL
trên nền tảng Metabase
</p>
</li>
</ul>
</div>
<!-- Học vấn -->
<div class="job-card">
<h2 class="job-head">
Học vấn
<button class="job-btn">▼ view more</button>
</h2>
<i class="job-icon ic-pencil"></i>
<ul class="job-content timeline-content">
<li>
<p>Đại học Kinh tế - ĐHQGHN</p>
<p class="text-grey">
<i class="time-text">09/2016 - 09/2020</i>
<br />
- Chuyên ngành: Quản trị kinh doanh
<br />
- GPA: 3.2/4
</p>
</li>
</ul>
</div>
<!-- Hoạt động -->
<div class="job-card">
<h2 class="job-head">
Hoạt động
<button class="job-btn">▼ view more</button>
</h2>
<i class="job-icon ic-toolbox"></i>
<ul class="job-content timeline-content">
<li>
<p>VNU UEB-OCU Academic & Cultural Exchange 2018</p>
<p class="text-grey">
<i class="time-text">22/10/2018 - 10/11/2018</i>
<br />
- Làm quen, giao lưu và làm việc cùng các bạn sinh viên trường
Osaka City University
<br />
- Giải nhì thuyết trình nhóm về vấn đề của công ty được giao (phân
tích, so sánh, đề xuất giải pháp) sau khi đi thực tế doanh nghiệp,
nhà máy
</p>
</li>
</ul>
</div>
<!-- Job info: Row 2 -->
<!-- Sở thích -->
<div class="job-card">
<h2 class="job-head">
Sở thích
<button class="job-btn">▼ view more</button>
</h2>
<i class="job-icon ic-telescope"></i>
<div class="job-content hobby">
<div class="hobby-item">
<i class="icon-music"></i>
<p>Âm nhạc</p>
</div>
<div class="hobby-item">
<i class="icon-book"></i>
<p>Đọc sách</p>
</div>
<div class="hobby-item">
<i class="ic-strategy"></i>
<p>Chơi game</p>
</div>
<div class="hobby-item">
<i class="fa fa-running"></i>
<p>Chạy bộ</p>
</div>
</div>
</div>
<!-- Ngôn ngữ -->
<div class="job-card">
<h2 class="job-head">
Ngôn ngữ<button class="job-btn">▼ view more</button>
</h2>
<i class="job-icon ic-mic"></i>
<ul class="job-content level-content">
<li>
Tiếng Anh - VSTEP B2
<p>
<span class="level-bar blue-bar"></span>
<span class="level-bar blue-bar"></span>
<span class="level-bar grey-bar"></span>
</p>
</li>
</ul>
</div>
<!-- Kỹ năng -->
<div class="job-card">
<h2 class="job-head">
Kỹ năng<button class="job-btn">▼ view more</button>
</h2>
<i class="job-icon ic-tools-2"></i>
<ul class="job-content level-content">
<li>
HTML/CSS: Fundamental
<p>
<span class="level-bar blue-bar"></span>
<span class="level-bar grey-bar"></span>
<span class="level-bar grey-bar"></span>
</p>
</li>
<li>
Javascript: Intermediate
<p>
<span class="level-bar blue-bar"></span>
<span class="level-bar blue-bar"></span>
<span class="level-bar grey-bar"></span>
</p>
</li>
<li>
ReactJS: Fundamental
<p>
<span class="level-bar blue-bar"></span>
<span class="level-bar grey-bar"></span>
<span class="level-bar grey-bar"></span>
</p>
</li>
</ul>
</div>
</section>
<!-- Certificate -->
<section id="certificate" class="bg-grey">
<div class="container">
<h2 class="section-title">Chứng chỉ - Giải thưởng</h2>
<div class="cert-content-container">
<!-- cert row -->
<div class="cert-row">
<!-- cert 1 -->
<div class="cert-card">
<img
src="images/mine/data-arima.png"
alt="Cert Khóa học ARIMA Models in Python"
/>
<div class="cert-detail">
<p>Khóa học ARIMA Models in Python<br /></p>
<span class="text-grey">
- Thuộc track Time Series with Python (nền tảng Datacamp)
<br />- Hoàn thành
</span>
</div>
</div>
<!-- cert 2 -->
<div class="cert-card">
<img
src="images/mine/data-mkt.png"
alt="Cert Khóa học Analyzing Marketing Campaigns with pandas"
/>
<div class="cert-detail">
<p>Khóa học Analyzing Marketing Campaigns with pandas<br /></p>
<span class="text-grey">
- Thuộc track Marketing Analytics with Python (nền tảng
Datacamp)
<br />- Hoàn thành
</span>
</div>
</div>
</div>
<!-- cert row -->
<div class="cert-row">
<!-- cert 3 -->
<div class="cert-card">
<img
src="images/mine/mos-excel.png"
alt="Cert chứng chỉ MOS Excel"
/>
<div class="cert-detail">
<p>Chứng chỉ tin học văn phòng MOS Excel<br /></p>
<span class="text-grey"> - Điểm: 1000/1000 </span>
</div>
</div>
<!-- cert 4 -->
<div class="cert-card">
<img
src="images/mine/mos-word.png"
alt="Cert chứng chỉ MOS Word"
/>
<div class="cert-detail">
<p>Chứng chỉ tin học văn phòng MOS Word<br /></p>
<span class="text-grey"> - Điểm: 1000/1000 </span>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- Project -->
<section id="project">
<div class="container">
<h2 class="section-title">Dự án</h2>
<div class="project-content-container">
<!-- project 1 -->
<div class="project-card">
<a href="pages/cv-charter.html" target="_blank">
<img src="images/mine/web-cv.png" alt="Ảnh project CV cá nhân" />
</a>
<div class="project-head">Digital CV</div>
<div class="project-sub text-grey">
<span class="year-blue">2023</span>
<span class="org-n-role">
<div class="icon-user-1">FUNiX</div>
<div class="icon-lamp">Developer</div>
</span>
</div>
<table class="text-grey">
<tr>
<td>Mô tả</td>
<td>
Trang Web CV cá nhân online. Gồm các thông tin cá nhân cũng
như kỹ năng nghề nghiệp.
</td>
</tr>
<tr>
<td>Nhiệm vụ</td>
<td>- Phát triển, review, tối ưu code và xử lý lỗi.</td>
</tr>
<tr>
<td>Công nghệ</td>
<td>- HTML, CSS</td>
</tr>
</table>
</div>
<!-- project 2 -->
<div class="project-card">
<a href="pages/savor-charter.html" target="_blank">
<img
src="images/mine/web-food.png"
alt="Ảnh project web sản phẩm Savor"
/>
</a>
<div class="project-head">Trang Web sản phẩm Savor</div>
<div class="project-sub text-grey">
<span class="year-blue">2022</span>
<span class="org-n-role">
<div class="icon-user-1">4handy</div>
<div class="icon-lamp">Developer</div>
</span>
</div>
<table class="text-grey">
<tr>
<td>Mô tả</td>
<td>
Trang Web thông tin sản phẩm F&B thuộc công ty, gồm banner
bánh và menu các nhóm sản phẩm.
</td>
</tr>
<tr>
<td>Nhiệm vụ</td>
<td>- Phát triển, review, tối ưu code và xử lý lỗi.</td>
</tr>
<tr>
<td>Công nghệ</td>
<td>- ReactJS, Gatsby, TailwindCSS</td>
</tr>
</table>
</div>
<!-- project 3 -->
<div class="project-card">
<a href="pages/abby-charter.html" target="_blank">
<img
src="images/mine/web-bake.png"
alt="Ảnh project landing page Abby"
/></a>
<div class="project-head">Landing page sản phẩm Tết Abby</div>
<div class="project-sub text-grey">
<span class="year-blue">2023</span>
<span class="org-n-role">
<div class="icon-user-1">4handy</div>
<div class="icon-lamp">Developer</div>
</span>
</div>
<table class="text-grey">
<tr>
<td>Mô tả</td>
<td>
Trang Web thông tin nguyên liệu bán lẻ, nhóm sản phẩm nội bật,
giá bán và công dụng.
</td>
</tr>
<tr>
<td>Nhiệm vụ</td>
<td>- Phát triển, review, tối ưu code và xử lý lỗi.</td>
</tr>
<tr>
<td>Công nghệ</td>
<td>- ReactJS, Gatsby, TailwindCSS</td>
</tr>
</table>
</div>
</div>
</div>
</section>
<!-- Footer -->
<section id="footer" class="bg-grey">
<div class="container">
<a href="https://www.facebook.com/linie.blue/" target="_blank">
<i class="icon-facebook-circled"></i>
<span>Facebook</span>
</a>
<a
href="https://www.linkedin.com/in/th%E1%BA%A3o-%C4%91inh-855a29104/"
target="_blank"
>
<i class="icon-linkedin-circled"> </i>
<span>Linkedin</span>
</a>
<a href="https://github.com/ThaoDinh" target="_blank">
<i class="icon-github-circled"> </i>
<span>Github</span>
</a>
</div>
</section>
<!-- Scripts -->
<script
src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"
integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM"
crossorigin="anonymous"
></script>
<script src="script.js"></script>
</body>
</html>