fix: polish section layout with cards, smooth hero fade, tighter spacing

Made-with: Cursor

Author: TMHSDigital

site-template/template.html.j2

@@ -49,7 +49,7 @@
     .nav-toggle svg { width: 24px; height: 24px; }
 
     /* HERO */
-    .hero { text-align: center; padding: 5rem 1.5rem 3.5rem; background: linear-gradient(180deg, var(--hero-from), var(--hero-to)); }
+    .hero { text-align: center; padding: 5rem 1.5rem 4.5rem; background: linear-gradient(180deg, var(--hero-from) 0%, var(--hero-to) 70%, var(--bg) 100%); position: relative; }
     .hero-inner { max-width: 720px; margin: 0 auto; }
     .hero h1 { font-size: 2.75rem; font-weight: 700; margin-bottom: 1rem; background: linear-gradient(135deg, var(--text), var(--accent-light)); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; }
     .hero p { font-size: 1.125rem; color: var(--text-dim); margin-bottom: 2rem; max-width: 600px; margin-left: auto; margin-right: auto; }
@@ -62,13 +62,16 @@
     .badge:hover { border-color: var(--accent); background: var(--bg3); color: var(--text); }
     .badge svg { width: 18px; height: 18px; flex-shrink: 0; }
 
+    /* CONTENT AREA */
+    .content-area { max-width: 1040px; margin: 0 auto; padding: 2rem 1.5rem 0; }
+
     /* SECTIONS */
-    .section { max-width: 1000px; margin: 0 auto; padding: 3rem 1.5rem; }
-    .section-header { display: flex; align-items: center; gap: 0.5rem; margin-bottom: 1.5rem; padding-bottom: 0.75rem; border-bottom: 2px solid var(--border); flex-wrap: wrap; }
-    .section-header h2 { font-size: 1.5rem; font-weight: 700; margin: 0; }
-    .count { font-size: 0.875rem; font-weight: 500; color: var(--text-dim); background: var(--bg2); padding: 0.15rem 0.6rem; border-radius: 12px; }
+    .section { background: var(--bg2); border: 1px solid var(--border); border-radius: 12px; padding: 1.75rem 2rem; margin-bottom: 1.25rem; }
+    .section-header { display: flex; align-items: center; gap: 0.5rem; margin-bottom: 1rem; padding-bottom: 0.625rem; border-bottom: 1px solid var(--border); flex-wrap: wrap; }
+    .section-header h2 { font-size: 1.25rem; font-weight: 700; margin: 0; }
+    .count { font-size: 0.8125rem; font-weight: 500; color: var(--text-dim); background: var(--bg3); padding: 0.15rem 0.6rem; border-radius: 12px; }
     .section-actions { margin-left: auto; display: flex; gap: 0.5rem; align-items: center; }
-    .btn-sm { padding: 0.3rem 0.75rem; background: var(--bg2); border: 1px solid var(--border); border-radius: 6px; color: var(--text-dim); font-size: 0.75rem; font-weight: 500; cursor: pointer; transition: color 0.2s, border-color 0.2s; font-family: var(--font-sans); }
+    .btn-sm { padding: 0.3rem 0.75rem; background: var(--bg3); border: 1px solid var(--border); border-radius: 6px; color: var(--text-dim); font-size: 0.75rem; font-weight: 500; cursor: pointer; transition: color 0.2s, border-color 0.2s; font-family: var(--font-sans); }
     .btn-sm:hover { color: var(--accent-light); border-color: var(--accent); }
 
     /* SEARCH */
@@ -119,7 +122,7 @@
     .back-to-top svg { width: 20px; height: 20px; }
 
     /* FOOTER */
-    footer { border-top: 1px solid var(--border); text-align: center; padding: 2.5rem 1.5rem; color: var(--text-dim); font-size: 0.8125rem; }
+    footer { text-align: center; padding: 2.5rem 1.5rem; color: var(--text-dim); font-size: 0.8125rem; margin-top: 1rem; }
     footer a { color: var(--accent-light); }
 
     /* RESPONSIVE */
@@ -135,9 +138,11 @@
       .nav-toggle { display: block; }
       .nav-links { display: none; position: absolute; top: 56px; left: 0; right: 0; flex-direction: column; background: rgba(13,17,23,0.97); border-bottom: 1px solid var(--border); padding: 1rem 1.5rem; gap: 0.75rem; }
       .nav-links.open { display: flex; }
-      .hero { padding: 3rem 1rem 2rem; }
+      .hero { padding: 3rem 1rem 2.5rem; }
       .hero h1 { font-size: 1.5rem; }
       .hero-badges { flex-direction: column; align-items: center; }
+      .content-area { padding: 0 0.75rem; }
+      .section { padding: 1.25rem 1rem; border-radius: 8px; }
       .section-header { flex-direction: column; align-items: flex-start; gap: 0.75rem; }
       .section-actions { margin-left: 0; }
     }
@@ -196,6 +201,9 @@
     </div>
   </section>
 
+  <!-- Content sections -->
+  <div class="content-area">
+
   <!-- Skills -->
   {% if skills %}
   <section class="section" id="skills">
@@ -330,6 +338,8 @@
   </section>
   {% endif %}
 
+  </div><!-- /.content-area -->
+
   <!-- Footer -->
   <footer>
     <p>