fix: responsive

Author: TranHuuDat2004

css/projects-page.css

@@ -4,7 +4,7 @@
 
 /* --- BỔ SUNG: Wrapper cho trang con --- */
 .page-wrapper {
-    padding-top: 10rem; /* Tạo khoảng trống ở trên để không bị header che */
+    padding-top: 0; 
 }
 
 .text-primary {
@@ -14,6 +14,7 @@
 .text-gradient {
     background: linear-gradient(to right, var(--gradient-purple), var(--gradient-pink));
     -webkit-background-clip: text;
+    background-clip: text;
     -webkit-text-fill-color: transparent;
 }
 
@@ -391,7 +392,7 @@ footer a {
 
 /* --- BỔ SUNG: Wrapper cho trang con --- */
 .page-wrapper {
-    padding-top: 10rem;
+    padding-top: 5rem; /* Reduced padding since we have a hero now */
 }
 
 /* --- [MỚI] BỔ SUNG: Style cho tiêu đề phân loại dự án --- */
@@ -451,4 +452,90 @@ body.light-mode .back-to-home-btn:hover {
 /* Điều chỉnh lại max-width của container project cho rộng hơn một chút */
 #projects .container {
     max-width: 1400px;
+}
+
+/* --- PROJECTS HERO SECTION --- */
+.projects-hero {
+    position: relative;
+    padding: 12rem 0 6rem 0;
+    background: var(--bg-primary);
+    overflow: hidden;
+    text-align: center;
+}
+
+.projects-hero .hero-background {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background: 
+        radial-gradient(circle at 20% 30%, rgba(192, 132, 252, 0.1) 0%, transparent 40%),
+        radial-gradient(circle at 80% 70%, rgba(244, 114, 182, 0.1) 0%, transparent 40%);
+    z-index: 1;
+}
+
+.projects-hero .container {
+    position: relative;
+    z-index: 2;
+}
+
+.projects-hero .welcome-badge {
+    display: inline-block;
+    padding: 0.5rem 1.25rem;
+    background: rgba(255, 255, 255, 0.05);
+    border: 1px solid var(--border-color);
+    border-radius: 9999px;
+    color: var(--gradient-purple);
+    font-weight: 600;
+    font-size: 0.875rem;
+    margin-bottom: 2rem;
+    text-transform: uppercase;
+    letter-spacing: 0.1em;
+}
+
+.projects-hero h1 {
+    font-size: clamp(3rem, 8vw, 5rem);
+    font-weight: 800;
+    line-height: 1.1;
+    margin-bottom: 1.5rem;
+    color: var(--text-primary);
+}
+
+.projects-hero h1 .gradient-text {
+    background: linear-gradient(to right, var(--gradient-purple), var(--gradient-pink));
+    -webkit-background-clip: text;
+    background-clip: text;
+    -webkit-text-fill-color: transparent;
+}
+
+.projects-hero p {
+    max-width: 700px;
+    margin: 0 auto 2.5rem;
+    font-size: 1.1rem;
+    color: var(--text-secondary);
+    line-height: 1.6;
+}
+
+.projects-hero .hero-buttons,
+.hero-buttons {
+    display: flex;
+    justify-content: center;
+    gap: 1.5rem;
+    margin-top: 3rem; /* Add some space above the button at the bottom */
+}
+
+/* Adjust projects grid alignment */
+#projects.content-section {
+    padding-top: 2rem;
+}
+
+@media (max-width: 768px) {
+    .projects-hero {
+        padding: 8rem 0 4rem 0;
+    }
+    
+    .projects-hero h1 {
+        font-size: 2.5rem;
+    }
 }

project.html

@@ -81,18 +81,30 @@ <h4 id="song-title">Điều chưa nói</h4>
     </div>
 
     <main class="page-wrapper">
-        <!-- === THAY THẾ TOÀN BỘ SECTION NÀY === -->
+        <!-- <section class="projects-hero">
+            <div class="hero-background"></div>
+            <div class="container hero-container">
+                <div class="hero-text-content animate-on-scroll">
+                    <div class="welcome-badge">Portfolio Highlights</div>
+                    <h1 class="animate-on-scroll">
+                        My Creative<br>
+                        <span class="gradient-text">Journey</span>
+                    </h1>
+                    <p class="animate-on-scroll">A collection of web applications, experiments, and interactive tools built with passion and code.</p>
+                    <div class="hero-buttons">
+                        <a href="index.html" class="btn btn-secondary">
+                            <i class="fas fa-arrow-left"></i> Back to Home
+                        </a>
+                    </div>
+                </div>
+            </div>
+        </section> -->
+
         <section id="projects" class="content-section">
-            <!-- Bỏ class .container ở đây -->
             <div class="section-header animate-on-scroll">
-                <div class="section-badge">All My Works</div>
-                <h2 class="section-title">My Projects</h2>
+                <div class="section-badge">Gallery</div>
+                <h2 class="section-title">All Projects</h2>
                 <div class="title-underline"></div>
-
-                <!-- === NÚT BACK TO HOME MỚI === -->
-                <a href="index.html" class="back-to-home-btn animate-on-scroll">
-                    <i class="fas fa-arrow-left"></i> Back to Home
-                </a>
             </div>
 
             <!-- Grid Container for Projects -->
@@ -230,9 +242,14 @@ <h3>Signature Verification</h3>
                             </div>
                         </div>
                     </div>
-
+                </div>
+                <div class="hero-buttons">
+                    <a href="index.html" class="btn btn-secondary">
+                        <i class="fas fa-arrow-left"></i> Back to Home
+                    </a>
                 </div>
             </div>
+            
         </section>
     </main>