Skip to content

Commit c0ef0c6

Browse files
TranHuuDat2004TranHuuDat2004
committed
add resume
1 parent 077b73d commit c0ef0c6

8 files changed

Lines changed: 346 additions & 452 deletions

File tree

‎blog.html‎

Lines changed: 5 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -15,6 +15,7 @@
1515

1616
<!-- LINK CSS VÀ FONT AWESOME -->
1717
<link rel="stylesheet" href="css/styles.css" />
18+
<link rel="stylesheet" href="css/blog-style.css" />
1819
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css">
1920
</head>
2021
<body>
@@ -31,12 +32,13 @@
3132
<a href="index.html#hero">Home</a>
3233
<a href="index.html#about">About</a>
3334
<a href="index.html#skills">Skills</a>
34-
<a href="project.html" class="is-active">Projects</a> <!-- Link Projects active -->
35+
<a href="project.html">Projects</a> <!-- Link Projects active -->
3536
<a href="index.html#experience">Experience</a>
36-
<a href="index.html#blog">Blog</a>
37+
<a href="index.html#blog" class="is-active">Blog</a>
3738
<a href="index.html#contact">Contact</a>
39+
<a href="download-resume.html">Resume</a>
3840
</nav>
39-
<a href="assets/resume/TranHuuDat-Resume-Summary.pdf" class="resume-button" download>Resume</a>
41+
4042
<!-- Nút chuyển theme đã có từ trước -->
4143
<button id="theme-toggle" class="theme-toggle-btn">
4244
<i class="fas fa-sun"></i>

‎css/resume-page.css‎

Lines changed: 90 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,90 @@
1+
/* File: css/resume-page.css */
2+
3+
/* --- Wrapper chung cho trang con --- */
4+
.page-wrapper {
5+
padding-top: 6rem;
6+
padding-bottom: 4rem;
7+
}
8+
9+
/* --- Layout chính 2 cột --- */
10+
.resume-container {
11+
display: grid;
12+
grid-template-columns: 1.2fr 1fr; /* Cột trái rộng hơn một chút */
13+
gap: 2.5rem;
14+
align-items: flex-start;
15+
margin-top: 4rem;
16+
}
17+
18+
/* --- Cột Trái: Preview ảnh CV --- */
19+
.resume-preview {
20+
padding: 1rem; /* Padding nhỏ để tạo viền */
21+
position: sticky; /* Giúp preview cố định khi cuộn */
22+
top: 10rem; /* Vị trí bắt đầu cố định, dưới header */
23+
}
24+
.resume-preview img {
25+
width: 100%;
26+
height: auto;
27+
display: block;
28+
border-radius: 0.5rem; /* Bo góc ảnh */
29+
}
30+
31+
/* --- Cột Phải: Các lựa chọn tải về --- */
32+
.download-options {
33+
display: flex;
34+
flex-direction: column;
35+
gap: 2rem;
36+
}
37+
38+
.download-card {
39+
padding: 2rem;
40+
}
41+
42+
.download-header {
43+
display: flex;
44+
align-items: center;
45+
gap: 1rem;
46+
margin-bottom: 1rem;
47+
border-bottom: 1px solid var(--border-color);
48+
padding-bottom: 1rem;
49+
}
50+
.download-header i {
51+
font-size: 1.5rem;
52+
color: var(--gradient-purple);
53+
}
54+
.download-header h3 {
55+
margin: 0;
56+
font-size: 1.5rem;
57+
}
58+
59+
.download-desc {
60+
color: var(--text-secondary);
61+
margin-bottom: 2rem;
62+
font-size: 0.95rem;
63+
}
64+
65+
.download-buttons {
66+
display: flex;
67+
gap: 1rem;
68+
}
69+
.download-buttons .btn {
70+
flex-grow: 1; /* Cho các nút có chiều rộng bằng nhau */
71+
justify-content: center; /* Căn giữa nội dung nút */
72+
}
73+
74+
75+
/* --- Responsive cho màn hình nhỏ --- */
76+
@media (max-width: 992px) {
77+
.resume-container {
78+
grid-template-columns: 1fr; /* Chuyển thành 1 cột */
79+
}
80+
.resume-preview {
81+
position: static; /* Bỏ cố định trên mobile */
82+
margin-bottom: 2rem;
83+
}
84+
}
85+
86+
@media (max-width: 768px) {
87+
.download-buttons {
88+
flex-direction: column; /* Xếp các nút dọc trên mobile */
89+
}
90+
}

‎css/styles.css‎

Lines changed: 2 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -1179,18 +1179,6 @@ a:hover {
11791179
justify-content: center;
11801180
}
11811181

1182-
/* ====================================================== */
1183-
/* --- FOOTER --- */
1184-
/* ====================================================== */
1185-
.main-footer {
1186-
padding: 2rem 0;
1187-
text-align: center;
1188-
color: var(--text-secondary);
1189-
font-size: 0.875rem;
1190-
border-top: 1px solid var(--border-color);
1191-
margin-top: 4rem;
1192-
}
1193-
11941182
/* ====================================================== */
11951183
/* --- ANIMATION & RESPONSIVE (LAYOUT SỬA LỖI) --- */
11961184
/* ====================================================== */
@@ -1386,13 +1374,12 @@ footer a {
13861374
/* --- FOOTER (THAY THẾ TOÀN BỘ CSS FOOTER CŨ) --- */
13871375
/* ====================================================== */
13881376
.main-footer {
1389-
background-color: #1a1a1d;
1390-
/* Một màu nền tối hơn một chút */
1377+
background-color: var(--color-surface); /* << SỬA Ở ĐÂY */
13911378
color: var(--text-secondary);
13921379
padding-top: 4rem;
1393-
/* Tăng padding trên */
13941380
border-top: 1px solid var(--border-color);
13951381
margin-top: 4rem;
1382+
transition: background-color 0.3s, border-color 0.3s; /* Thêm transition cho mượt */
13961383
}
13971384

13981385
.footer-container {

0 commit comments

Comments
 (0)