Skip to content

Commit 707e423

Browse files
TranHuuDat2004TranHuuDat2004
committed
feats: add certiftcate
1 parent 8aece67 commit 707e423

6 files changed

Lines changed: 264 additions & 118 deletions

File tree

‎assets/certificate/TranHuuDat_VibeCoding.pdf‎

392 KB
Binary file not shown.

‎assets/certificate/TranHuuDat_VibeCoding.png‎

772 KB
Loading

assets/certificate/TranHuuDat_Rikkie.pdf renamed to assets/certificate/TranHuuDat_XayDungDuAnCaNhan.pdf

File renamed without changes.

‎assets/certificate/TranHuuDat_XayDungDuAnCaNhan.png‎

394 KB
Loading

‎css/components/awards.css‎

Lines changed: 240 additions & 118 deletions
Original file line numberDiff line numberDiff line change
@@ -1,118 +1,240 @@
1-
/* --- CSS CHO AWARD SECTION --- */
2-
3-
.award-card {
4-
display: grid;
5-
grid-template-columns: 1fr 2fr;
6-
/* Chia làm 2 cột, cột mô tả rộng hơn */
7-
gap: 2rem;
8-
padding: 2.5rem;
9-
align-items: center;
10-
}
11-
12-
.award-info {
13-
text-align: right;
14-
border-right: 2px solid var(--border-color);
15-
padding-right: 2rem;
16-
}
17-
18-
.award-date {
19-
color: var(--gradient-purple);
20-
font-weight: 700;
21-
margin-bottom: 0.5rem;
22-
}
23-
24-
.award-title {
25-
font-size: 1.75rem;
26-
font-weight: 600;
27-
color: var(--text-primary);
28-
margin-bottom: 0.25rem;
29-
}
30-
31-
.award-competition {
32-
font-style: italic;
33-
color: var(--text-secondary);
34-
margin-bottom: 1rem;
35-
}
36-
37-
.award-issuer {
38-
font-size: 0.9rem;
39-
color: var(--text-secondary);
40-
}
41-
42-
.award-description ul {
43-
list-style-type: none;
44-
padding-left: 0;
45-
}
46-
47-
.award-description li {
48-
position: relative;
49-
padding-left: 1.75rem;
50-
margin-bottom: 1rem;
51-
color: var(--text-secondary);
52-
}
53-
54-
.award-description li::before {
55-
content: '🏆';
56-
/* Hoặc dùng '✨', '✓' */
57-
position: absolute;
58-
left: 0;
59-
top: 0;
60-
color: var(--gradient-yellow);
61-
font-size: 1rem;
62-
}
63-
64-
/* Responsive cho màn hình nhỏ */
65-
@media (max-width: 768px) {
66-
.award-card {
67-
grid-template-columns: 1fr;
68-
/* Chuyển thành 1 cột */
69-
gap: 1.5rem;
70-
}
71-
72-
.award-info {
73-
text-align: center;
74-
border-right: none;
75-
border-bottom: 2px solid var(--border-color);
76-
padding-right: 0;
77-
padding-bottom: 1.5rem;
78-
}
79-
80-
.award-description li {
81-
padding-left: 1.5rem;
82-
}
83-
}
84-
85-
.award-photo-card {
86-
margin-top: 2rem;
87-
padding: 2rem;
88-
text-align: center;
89-
}
90-
91-
.award-photo-card .photo-title {
92-
font-size: 1.25rem;
93-
color: var(--text-secondary);
94-
margin-bottom: 1.5rem;
95-
font-weight: 500;
96-
}
97-
98-
.award-photo-card .photo-wrapper {
99-
max-width: 700px;
100-
margin: 0 auto;
101-
border-radius: 0.75rem;
102-
overflow: hidden;
103-
border: 1px solid var(--border-color);
104-
box-shadow: 0 5px 20px rgba(0, 0, 0, 0.2);
105-
}
106-
107-
.award-photo-card img {
108-
width: 100%;
109-
height: auto;
110-
display: block;
111-
}
112-
113-
.award-photo-card .photo-caption {
114-
margin-top: 1.5rem;
115-
font-style: italic;
116-
font-size: 0.9rem;
117-
color: var(--text-secondary);
118-
}
1+
/* --- CSS CHO AWARD SECTION --- */
2+
3+
.award-card {
4+
display: grid;
5+
grid-template-columns: 1fr 2fr;
6+
/* Chia làm 2 cột, cột mô tả rộng hơn */
7+
gap: 2rem;
8+
padding: 2.5rem;
9+
align-items: center;
10+
}
11+
12+
.award-info {
13+
text-align: right;
14+
border-right: 2px solid var(--border-color);
15+
padding-right: 2rem;
16+
}
17+
18+
.award-date {
19+
color: var(--gradient-purple);
20+
font-weight: 700;
21+
margin-bottom: 0.5rem;
22+
}
23+
24+
.award-title {
25+
font-size: 1.75rem;
26+
font-weight: 600;
27+
color: var(--text-primary);
28+
margin-bottom: 0.25rem;
29+
}
30+
31+
.award-competition {
32+
font-style: italic;
33+
color: var(--text-secondary);
34+
margin-bottom: 1rem;
35+
}
36+
37+
.award-issuer {
38+
font-size: 0.9rem;
39+
color: var(--text-secondary);
40+
}
41+
42+
.award-description ul {
43+
list-style-type: none;
44+
padding-left: 0;
45+
}
46+
47+
.award-description li {
48+
position: relative;
49+
padding-left: 1.75rem;
50+
margin-bottom: 1rem;
51+
color: var(--text-secondary);
52+
}
53+
54+
.award-description li::before {
55+
content: '🏆';
56+
/* Hoặc dùng '✨', '✓' */
57+
position: absolute;
58+
left: 0;
59+
top: 0;
60+
color: var(--gradient-yellow);
61+
font-size: 1rem;
62+
}
63+
64+
/* Responsive cho màn hình nhỏ */
65+
@media (max-width: 768px) {
66+
.award-card {
67+
grid-template-columns: 1fr;
68+
/* Chuyển thành 1 cột */
69+
gap: 1.5rem;
70+
}
71+
72+
.award-info {
73+
text-align: center;
74+
border-right: none;
75+
border-bottom: 2px solid var(--border-color);
76+
padding-right: 0;
77+
padding-bottom: 1.5rem;
78+
}
79+
80+
.award-description li {
81+
padding-left: 1.5rem;
82+
}
83+
}
84+
85+
.award-photo-card {
86+
margin-top: 2rem;
87+
padding: 2rem;
88+
text-align: center;
89+
}
90+
91+
.award-photo-card .photo-title {
92+
font-size: 1.25rem;
93+
color: var(--text-secondary);
94+
margin-bottom: 1.5rem;
95+
font-weight: 500;
96+
}
97+
98+
.award-photo-card .photo-wrapper {
99+
max-width: 700px;
100+
margin: 0 auto;
101+
border-radius: 0.75rem;
102+
overflow: hidden;
103+
border: 1px solid var(--border-color);
104+
box-shadow: 0 5px 20px rgba(0, 0, 0, 0.2);
105+
}
106+
107+
.award-photo-card img {
108+
width: 100%;
109+
height: auto;
110+
display: block;
111+
}
112+
113+
.award-photo-card .photo-caption {
114+
margin-top: 1.5rem;
115+
font-style: italic;
116+
font-size: 0.9rem;
117+
color: var(--text-secondary);
118+
}
119+
120+
/* --- DIGITAL CERTIFICATES --- */
121+
.certificates-grid {
122+
display: grid;
123+
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
124+
gap: 2rem;
125+
margin-top: 3rem;
126+
}
127+
128+
.certificate-card {
129+
padding: 2.5rem 2rem;
130+
text-align: center;
131+
transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
132+
display: flex;
133+
flex-direction: column;
134+
align-items: center;
135+
gap: 1.5rem;
136+
position: relative;
137+
overflow: hidden;
138+
}
139+
140+
.certificate-card::before {
141+
content: '';
142+
position: absolute;
143+
top: 0;
144+
left: 0;
145+
width: 100%;
146+
height: 100%;
147+
background: linear-gradient(135deg, rgba(255, 255, 255, 0.1), transparent);
148+
z-index: 0;
149+
opacity: 0;
150+
transition: opacity 0.3s ease;
151+
}
152+
153+
.certificate-card:hover::before {
154+
opacity: 1;
155+
}
156+
157+
.certificate-card:hover {
158+
transform: translateY(-10px);
159+
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.4);
160+
border-color: var(--gradient-blue);
161+
}
162+
163+
.certificate-image {
164+
width: 100%;
165+
aspect-ratio: 1414 / 1000; /* Standard A4 landscape ratio (w/h) */
166+
border-radius: 0.5rem;
167+
overflow: hidden;
168+
border: 1px solid var(--border-color);
169+
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
170+
z-index: 1;
171+
display: flex;
172+
align-items: center;
173+
justify-content: center;
174+
background: rgba(0, 0, 0, 0.1);
175+
}
176+
177+
.certificate-image img {
178+
width: 100%;
179+
height: 100%;
180+
object-fit: contain; /* Changed from cover to show the whole certificate */
181+
transition: transform 0.5s ease;
182+
}
183+
184+
.certificate-card:hover .certificate-image img {
185+
transform: scale(1.05);
186+
}
187+
188+
.certificate-title {
189+
font-size: 1.25rem;
190+
font-weight: 700;
191+
color: var(--text-primary);
192+
line-height: 1.4;
193+
z-index: 1;
194+
}
195+
196+
.btn-view-cert {
197+
display: inline-flex;
198+
align-items: center;
199+
gap: 0.6rem;
200+
padding: 0.8rem 1.8rem;
201+
border-radius: 9999px;
202+
background: rgba(255, 255, 255, 0.05);
203+
border: 1px solid var(--border-color);
204+
color: var(--text-primary);
205+
text-decoration: none;
206+
font-weight: 700;
207+
font-size: 0.9rem;
208+
transition: all 0.3s ease;
209+
margin-top: auto;
210+
z-index: 1;
211+
}
212+
213+
.btn-view-cert:hover {
214+
background: linear-gradient(135deg, var(--gradient-blue), var(--gradient-purple));
215+
border-color: transparent;
216+
color: white;
217+
transform: scale(1.05);
218+
box-shadow: 0 5px 15px rgba(109, 40, 217, 0.4);
219+
}
220+
221+
.section-subtitle {
222+
text-align: center;
223+
font-size: 1.75rem;
224+
color: var(--text-primary);
225+
margin-top: 5rem;
226+
margin-bottom: 2.5rem;
227+
font-weight: 700;
228+
letter-spacing: -0.02em;
229+
}
230+
231+
@media (max-width: 768px) {
232+
.certificates-grid {
233+
grid-template-columns: 1fr;
234+
padding: 0 1rem;
235+
}
236+
237+
.section-subtitle {
238+
margin-top: 3.5rem;
239+
}
240+
}

‎index.html‎

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -493,6 +493,30 @@ <h3 class="photo-title">A Proud Moment</h3>
493493
<p class="photo-caption">Receiving the design award at Ton Duc Thang University, 2023.</p>
494494
</div>
495495

496+
<!-- NEW: Digital Certifications Section -->
497+
<h3 class="section-subtitle animate-on-scroll">Digital Certifications</h3>
498+
<div class="certificates-grid">
499+
<div class="certificate-card glass-card animate-on-scroll">
500+
<div class="certificate-image">
501+
<img src="assets/certificate/TranHuuDat_VibeCoding.png" alt="Chứng nhận Vibe Coding">
502+
</div>
503+
<h4 class="certificate-title">Chứng nhận: Vibe Coding</h4>
504+
<a href="assets/certificate/TranHuuDat_VibeCoding.pdf" class="btn-view-cert" target="_blank">
505+
View PDF <i class="fas fa-file-pdf"></i>
506+
</a>
507+
</div>
508+
509+
<div class="certificate-card glass-card animate-on-scroll">
510+
<div class="certificate-image">
511+
<img src="assets/certificate/TranHuuDat_XayDungDuAnCaNhan.png" alt="Chứng nhận Xây Dựng Dự Án Cá Nhân">
512+
</div>
513+
<h4 class="certificate-title">Chứng nhận: Xây Dựng Dự Án Cá Nhân</h4>
514+
<a href="assets/certificate/TranHuuDat_XayDungDuAnCaNhan.pdf" class="btn-view-cert" target="_blank">
515+
View PDF <i class="fas fa-file-pdf"></i>
516+
</a>
517+
</div>
518+
</div>
519+
496520
</div>
497521
</section>
498522

0 commit comments

Comments
 (0)