Skip to content

Commit f3cc3c3

Browse files
TranHuuDat2004TranHuuDat2004
committed
chia nhỏ các file css lớn thành các components css nhỏ
1 parent 8a82c0a commit f3cc3c3

26 files changed

Lines changed: 2174 additions & 2071 deletions

‎archived-designs.html‎

Lines changed: 94 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,94 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6+
<title>Archived "Skills" Design</title>
7+
8+
<!-- Google Fonts -->
9+
<link rel="preconnect" href="https://fonts.googleapis.com">
10+
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
11+
<link href="https://fonts.googleapis.com/css2?family=Sora:wght@400;500;600;700;800&display=swap" rel="stylesheet">
12+
13+
<!-- Component CSS -->
14+
<link rel="stylesheet" href="css/components/base.css" />
15+
<link rel="stylesheet" href="css/components/sections.css" />
16+
<link rel="stylesheet" href="css/components/skills.css" />
17+
<link rel="stylesheet" href="css/components/animations.css" />
18+
19+
<!-- Font Awesome -->
20+
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css">
21+
22+
23+
</head>
24+
<body>
25+
26+
<section id="skills" class="content-section">
27+
<div class="container">
28+
<div class="section-header animate-on-scroll">
29+
<div class="section-badge">Technologies I work with</div>
30+
<h2 class="section-title">My Skills</h2>
31+
<div class="title-underline"></div>
32+
</div>
33+
<div class="skills-grid">
34+
<div class="skill-card glass-card animate-on-scroll">
35+
<div class="skill-header"><span class="skill-name">JavaScript (ES6+)</span><span
36+
class="skill-percentage">85%</span></div>
37+
<div class="skill-bar">
38+
<div class="skill-level" data-level="85%"></div>
39+
</div>
40+
</div>
41+
<div class="skill-card glass-card animate-on-scroll">
42+
<div class="skill-header"><span class="skill-name">Node.js / Express.js</span><span
43+
class="skill-percentage">80%</span></div>
44+
<div class="skill-bar">
45+
<div class="skill-level" data-level="80%"></div>
46+
</div>
47+
</div>
48+
<div class="skill-card glass-card animate-on-scroll">
49+
<div class="skill-header"><span class="skill-name">PHP</span><span
50+
class="skill-percentage">75%</span></div>
51+
<div class="skill-bar">
52+
<div class="skill-level" data-level="75%"></div>
53+
</div>
54+
</div>
55+
<div class="skill-card glass-card animate-on-scroll">
56+
<div class="skill-header"><span class="skill-name">HTML5 & CSS3</span><span
57+
class="skill-percentage">90%</span></div>
58+
<div class="skill-bar">
59+
<div class="skill-level" data-level="90%"></div>
60+
</div>
61+
</div>
62+
<div class="skill-card glass-card animate-on-scroll">
63+
<div class="skill-header"><span class="skill-name">SQL (MySQL & Firebase)</span><span
64+
class="skill-percentage">70%</span></div>
65+
<div class="skill-bar">
66+
<div class="skill-level" data-level="70%"></div>
67+
</div>
68+
</div>
69+
<div class="skill-card glass-card animate-on-scroll">
70+
<div class="skill-header"><span class="skill-name">Tailwind & Bootstrap</span></div>
71+
<div class="skill-bar">
72+
<div class="skill-level" data-level="80%"></div>
73+
</div>
74+
</div>
75+
<div class="skill-card glass-card animate-on-scroll">
76+
<div class="skill-header"><span class="skill-name">Git & GitHub</span><span
77+
class="skill-percentage">85%</span></div>
78+
<div class="skill-bar">
79+
<div class="skill-level" data-level="85%"></div>
80+
</div>
81+
</div>
82+
<div class="skill-card glass-card animate-on-scroll">
83+
<div class="skill-header"><span class="skill-name">Docker</span><span
84+
class="skill-percentage">60%</span></div>
85+
<div class="skill-bar">
86+
<div class="skill-level" data-level="60%"></div>
87+
</div>
88+
</div>
89+
</div>
90+
</div>
91+
</section>
92+
93+
</body>
94+
</html>

‎blog.html‎

Lines changed: 18 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,24 @@
1414
<link href="https://fonts.googleapis.com/css2?family=Sora:wght@400;500;600;700;800&display=swap" rel="stylesheet">
1515

1616
<!-- LINK CSS VÀ FONT AWESOME -->
17-
<link rel="stylesheet" href="css/styles.css" />
17+
<link rel="stylesheet" href="css/components/base.css" />
18+
<link rel="stylesheet" href="css/components/header.css" />
19+
<link rel="stylesheet" href="css/components/hero.css" />
20+
<link rel="stylesheet" href="css/components/music-player.css" />
21+
<link rel="stylesheet" href="css/components/sections.css" />
22+
<link rel="stylesheet" href="css/components/about.css" />
23+
<link rel="stylesheet" href="css/components/skills.css" />
24+
<link rel="stylesheet" href="css/components/projects.css" />
25+
<link rel="stylesheet" href="css/components/blog.css" />
26+
<link rel="stylesheet" href="css/components/experience.css" />
27+
<link rel="stylesheet" href="css/components/contact.css" />
28+
<link rel="stylesheet" href="css/components/animations.css" />
29+
<link rel="stylesheet" href="css/components/awards.css" />
30+
<link rel="stylesheet" href="css/components/footer.css" />
31+
<link rel="stylesheet" href="css/components/wakatime.css" />
32+
<link rel="stylesheet" href="css/components/featured-projects.css" />
33+
<link rel="stylesheet" href="css/components/interactive-skills.css" />
34+
<link rel="stylesheet" href="css/components/theme.css" />
1835
<link rel="stylesheet" href="css/blog-style.css" />
1936
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css">
2037
</head>

‎css/components/about.css‎

Lines changed: 93 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,93 @@
1+
/* ====================================================== */
2+
/* --- ABOUT ME SECTION --- */
3+
/* ====================================================== */
4+
.about-grid {
5+
display: grid;
6+
grid-template-columns: 1fr 1.2fr;
7+
gap: 3rem;
8+
align-items: flex-start;
9+
}
10+
11+
.about-image-wrapper {
12+
position: relative;
13+
border-radius: 1rem;
14+
overflow: hidden;
15+
}
16+
17+
.about-image-wrapper img {
18+
width: 100%;
19+
display: block;
20+
}
21+
22+
.status-tag {
23+
position: absolute;
24+
bottom: 1rem;
25+
left: 1rem;
26+
background: rgba(0, 0, 0, 0.5);
27+
backdrop-filter: blur(5px);
28+
padding: 0.5rem 1rem;
29+
border-radius: 9999px;
30+
font-size: 0.875rem;
31+
display: flex;
32+
align-items: center;
33+
gap: 0.5rem;
34+
border: 1px solid var(--border-color);
35+
}
36+
37+
.green-dot {
38+
width: 8px;
39+
height: 8px;
40+
background-color: var(--gradient-green);
41+
border-radius: 50%;
42+
}
43+
44+
.about-text-content p {
45+
color: var(--text-secondary);
46+
margin-bottom: 1rem;
47+
}
48+
49+
.info-box-wrapper {
50+
margin-top: 2rem;
51+
padding: 1.5rem;
52+
}
53+
54+
.info-box {
55+
display: grid;
56+
grid-template-columns: 1fr 1fr;
57+
gap: 1.5rem;
58+
margin-bottom: 1.5rem;
59+
}
60+
61+
.info-label {
62+
color: var(--text-secondary);
63+
font-size: 0.875rem;
64+
margin-bottom: 0.25rem;
65+
display: block;
66+
}
67+
68+
.info-box p {
69+
color: var(--text-primary);
70+
font-weight: 500;
71+
margin: 0;
72+
}
73+
74+
.available-status {
75+
color: var(--gradient-green);
76+
}
77+
78+
.btn-download-resume {
79+
display: block;
80+
width: 100%;
81+
text-align: center;
82+
padding: 0.75rem;
83+
border: 1px solid var(--border-color);
84+
border-radius: 0.5rem;
85+
text-decoration: none;
86+
color: var(--text-primary);
87+
background: rgba(255, 255, 255, 0.1);
88+
transition: background-color 0.3s;
89+
}
90+
91+
.btn-download-resume:hover {
92+
background-color: rgba(255, 255, 255, 0.15);
93+
}

‎css/components/animations.css‎

Lines changed: 89 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,89 @@
1+
/* ====================================================== */
2+
/* --- ANIMATION & RESPONSIVE (LAYOUT SỬA LỖI) --- */
3+
/* ====================================================== */
4+
5+
6+
/* THAY THẾ KHỐI NÀY */
7+
.animate-on-scroll {
8+
opacity: 0;
9+
transform: translateY(30px);
10+
/* Giữ nguyên transition cho cả lúc hiện và lúc ẩn */
11+
transition: opacity 0.6s ease-out, transform 0.6s ease-out;
12+
}
13+
14+
.animate-on-scroll.is-visible {
15+
opacity: 1;
16+
transform: translateY(0);
17+
}
18+
19+
/* SỬA LỖI: Đặt @media cho header vào đúng khu vực responsive */
20+
@media (max-width: 1600px) {
21+
.main-header {
22+
gap: 0.75rem;
23+
padding: 0.75rem 0.75rem;
24+
}
25+
26+
.logo {
27+
font-size: 1.1rem;
28+
}
29+
30+
.main-nav a {
31+
padding: 0.4rem 0.6rem;
32+
font-size: 0.8rem;
33+
}
34+
35+
.resume-button {
36+
padding: 0.4rem 0.8rem;
37+
font-size: 0.8rem;
38+
}
39+
}
40+
41+
@media (max-width: 992px) {
42+
43+
/* SỬA LỖI: Chuyển Hero section sang layout 1 cột trên màn hình nhỏ */
44+
.hero-container {
45+
grid-template-columns: 1fr;
46+
/* Chuyển thành 1 cột */
47+
justify-items: center;
48+
/* Căn các item vào giữa */
49+
}
50+
51+
.hero-text-content {
52+
text-align: center;
53+
/* Căn giữa lại text */
54+
order: -1;
55+
/* Đưa khối text lên trên khối profile */
56+
margin-bottom: 3rem;
57+
/* Tạo khoảng cách với khối profile bên dưới */
58+
}
59+
60+
/* Căn giữa lại các nút và icon social trên màn hình nhỏ */
61+
.hero-buttons,
62+
.social-links {
63+
justify-content: center;
64+
}
65+
66+
.about-grid,
67+
.contact-grid {
68+
grid-template-columns: 1fr;
69+
}
70+
71+
.main-nav {
72+
display: none;
73+
/* Hoặc có thể làm menu hamburger */
74+
}
75+
}
76+
77+
@media (max-width: 768px) {
78+
.main-header {
79+
flex-direction: column;
80+
gap: 0.5rem;
81+
padding: 0.75rem;
82+
border-radius: 1rem;
83+
}
84+
85+
.music-player-widget {
86+
display: none;
87+
/* Ẩn trên mobile cho gọn */
88+
}
89+
}

0 commit comments

Comments
 (0)