From 4a9bf8bdf64c67cdb0fabf0d1111503898f6c859 Mon Sep 17 00:00:00 2001
From: JollyJolli <formen.a@hotmail.com>
Date: Mon, 4 Nov 2024 11:20:06 -0600
Subject: [PATCH] feat: Better UI

---
 index.html | 252 ++++++++++++++++++++++++++++++++++-------------------
 1 file changed, 164 insertions(+), 88 deletions(-)
diff --git a/index.html b/index.html
index 7ebda67..2f6188b 100644
--- a/index.html
+++ b/index.html
@@ -3,19 +3,20 @@
 <head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
-  <title>HacktoberWall Directory</title>
+  <title>HacktoberWall</title>
   <link rel="preconnect" href="https://fonts.googleapis.com">
   <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
-  <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;700&display=swap" rel="stylesheet">
+  <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;700&family=Playfair+Display:wght@700&display=swap" rel="stylesheet">
+  <link href="https://cdn.jsdelivr.net/npm/locomotive-scroll@4.1.4/dist/locomotive-scroll.min.css" rel="stylesheet">
   <style>
     /* Color Variables */
     :root {
-      --bg-primary: #f2f5f7;
-      --bg-secondary: #ffffff;
-      --text-primary: #2b2d42;
-      --text-secondary: #606060;
-      --accent-color: #00796b;
-      --accent-hover: #005a4d;
+      --bg-primary: #F5F5F5;
+      --bg-secondary: #FFFFFF;
+      --text-primary: #333333;
+      --text-secondary: #666666;
+      --accent-color: #6C63FF;
+      --accent-hover: #4E48D8;
     }
 
     /* Reset and Global Styles */
@@ -25,45 +26,63 @@
       padding: 0;
     }
     body {
-      font-family: 'Poppins', sans-serif;
+      font-family: 'Inter', sans-serif;
       background-color: var(--bg-primary);
       color: var(--text-primary);
-      line-height: 1.7;
+      line-height: 1.6;
       font-size: 16px;
     }
     .container {
-      max-width: 1100px;
+      max-width: 1200px;
       margin: auto;
-      padding: 0 20px;
+      padding: 0 30px;
     }
 
     /* Header Styles */
     header {
       background-color: var(--bg-secondary);
-      padding: 15px 0;
-      box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
-      margin-bottom: 50px;
+      padding: 20px 0;
+      box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
+      position: fixed;
+      top: 0;
+      left: 0;
+      width: 100%;
+      z-index: 100;
+      transition: background-color 0.3s, box-shadow 0.3s;
     }
-    nav {
+    header.scrolled {
+      background-color: rgba(255, 255, 255, 0.95);
+      box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
+    }
+    .header-content {
       display: flex;
       justify-content: space-between;
       align-items: center;
     }
     .logo {
-      font-size: 1.8rem;
+      font-family: 'Playfair Display', serif;
+      font-size: 2.4rem;
       font-weight: 700;
       color: var(--accent-color);
       text-decoration: none;
+      text-transform: uppercase;
+      letter-spacing: 2px;
+      transition: color 0.3s;
+    }
+    .logo:hover {
+      color: var(--accent-hover);
     }
     .nav-links {
       list-style: none;
       display: flex;
-      gap: 25px;
+      gap: 30px;
     }
     .nav-links a {
       color: var(--text-secondary);
       font-weight: 500;
       text-decoration: none;
+      text-transform: uppercase;
+      letter-spacing: 1px;
       transition: color 0.3s;
     }
     .nav-links a:hover {
@@ -71,49 +90,72 @@
     }
 
     /* Main Content */
-    main {
-      padding: 40px 0;
+    .main-content {
+      padding-top: 120px;
     }
     .section {
-      margin-bottom: 50px;
+      padding: 100px 0;
+      scroll-snap-align: start;
     }
     .section h2 {
-      font-size: 2.2rem;
+      font-size: 2.6rem;
       font-weight: 700;
-      margin-bottom: 20px;
+      margin-bottom: 30px;
       color: var(--text-primary);
+      font-family: 'Playfair Display', serif;
+      letter-spacing: 1px;
     }
     .section p {
-      font-size: 1rem;
+      font-size: 1.1rem;
       color: var(--text-secondary);
-      margin-bottom: 15px;
+      margin-bottom: 20px;
     }
 
     /* Directory Section */
     .directory {
-      display: flex;
-      flex-wrap: wrap;
-      gap: 30px;
-      justify-content: center;
+      display: grid;
+      grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
+      gap: 40px;
     }
     .year-card {
       background-color: var(--bg-secondary);
-      padding: 30px;
-      border-radius: 10px;
-      width: 220px;
+      padding: 40px;
+      border-radius: 12px;
       text-align: center;
-      box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
-      transition: transform 0.3s, box-shadow 0.3s;
+      box-shadow: 0 8px 20px rgba(0, 0, 0, 0.08);
+      transition: transform 0.3s, box-shadow 0.4s;
+      position: relative;
+      overflow: hidden;
     }
     .year-card:hover {
-      transform: translateY(-5px);
-      box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
+      transform: translateY(-10px);
+      box-shadow: 0 12px 24px rgba(0, 0, 0, 0.12);
+    }
+    .year-card:before {
+      content: "";
+      position: absolute;
+      top: 0;
+      left: 0;
+      width: 100%;
+      height: 100%;
+      background: linear-gradient(45deg, var(--accent-color), var(--accent-hover));
+      opacity: 0.08;
+      transition: opacity 0.3s;
+    }
+    .year-card:hover:before {
+      opacity: 0.12;
     }
     .year-card a {
-      font-size: 1.5rem;
+      font-size: 2rem;
       color: var(--accent-color);
-      font-weight: 600;
+      font-weight: 700;
       text-decoration: none;
+      text-transform: uppercase;
+      letter-spacing: 2px;
+      font-family: 'Playfair Display', serif;
+      position: relative;
+      z-index: 1;
+      transition: color 0.3s;
     }
     .year-card a:hover {
       color: var(--accent-hover);
@@ -121,18 +163,21 @@
     .coming-soon {
       color: var(--text-secondary);
       font-weight: 500;
-      font-size: 1rem;
+      font-size: 1.1rem;
+      text-transform: uppercase;
+      letter-spacing: 1px;
+      position: relative;
+      z-index: 1;
     }
 
     /* Footer Styles */
     footer {
       background-color: var(--bg-secondary);
-      padding: 15px 0;
+      padding: 20px 0;
       text-align: center;
       color: var(--text-secondary);
-      font-size: 0.9rem;
-      border-top: 1px solid #e0e0e0;
-      margin-top: 50px;
+      font-size: 1rem;
+      border-top: 1px solid #eee;
     }
     .contact-email {
       color: var(--accent-color);
@@ -145,44 +190,47 @@
     }
   </style>
 </head>
-<body>
-  <header>
+<body data-scroll-container>
+  <header id="header">
     <div class="container">
-      <nav>
+      <div class="header-content">
         <a href="#" class="logo">HacktoberWall</a>
         <ul class="nav-links">
-          <li><a href="#">Home</a></li>
-          <li><a href="#">About</a></li>
-          <li><a href="#">Directory</a></li>
-          <li><a href="#">Contact</a></li>
+          <li><a href="#about">About</a></li>
+          <li><a href="#directory">Directory</a></li>
+          <li><a href="#contact">Contact</a></li>
         </ul>
-      </nav>
+      </div>
     </div>
   </header>
 
-  <main>
-    <div class="container">
-      <!-- About Section -->
-      <section class="section">
+  <div class="main-content" data-scroll-section>
+    <!-- About Section -->
+    <section class="section" id="about">
+      <div class="container">
         <h2>About HacktoberWall</h2>
-        <p>HacktoberWall is an open-source initiative encouraging newcomers to contribute to open source projects. Our annual archive showcases contributor names, marking each year with a unique design and visual style.</p>
-        <p>Founded by <strong>Jolly (Owner)</strong> and <strong>Phanty (Co-owner)</strong>, HacktoberWall remains committed to promoting inclusivity and community in open source.</p>
-      </section>
+        <p>HacktoberWall is an open-source initiative that encourages newcomers to contribute to open source projects. Our annual archive showcases contributor names, each year marked with a unique design and visual style.</p>
+        <p>Founded by <strong>Jolly (Owner)</strong> and <strong>Phanty (Co-owner)</strong>, HacktoberWall remains committed to promoting inclusivity and community in open source, especially during the spooky season of Hacktoberfest.</p>
+      </div>
+    </section>
 
-      <!-- Directory Section -->
-      <section class="section">
-        <h2>Explore Each Year Here</h2>
+    <!-- Directory Section -->
+    <section class="section" id="directory">
+      <div class="container">
+        <h2>Explore Each Year</h2>
         <div class="directory" id="directory"></div>
-      </section>
+      </div>
+    </section>
 
-      <!-- Contact Section -->
-      <section class="section">
+    <!-- Contact Section -->
+    <section class="section" id="contact">
+      <div class="container">
         <h2>Contact Us</h2>
         <p>If you have questions or would like to contribute, please reach out:</p>
         <a href="mailto:formen@duck.com" class="contact-email">formen@duck.com</a>
-      </section>
-    </div>
-  </main>
+      </div>
+    </section>
+  </div>
 
   <footer>
     <div class="container">
@@ -190,28 +238,56 @@ <h2>Contact Us</h2>
     </div>
   </footer>
 
+  <script src="https://cdn.jsdelivr.net/npm/locomotive-scroll@4.1.4/dist/locomotive-scroll.min.js"></script>
   <script>
-    // Data for Directory
-    const years = [
-      { year: 2024, url: "2024/src/index.html" },
-      { year: 2025, url: null }
-    ];
-
-    // Populate Directory
-    const directory = document.getElementById("directory");
-
-    years.forEach(entry => {
-      const card = document.createElement("div");
-      card.classList.add("year-card");
-
-      if (entry.url) {
-        card.innerHTML = `<a href="${entry.url}">${entry.year}</a>`;
-      } else {
-        card.innerHTML = `${entry.year} <span class="coming-soon">(Coming Soon)</span>`;
-      }
-
-      directory.appendChild(card);
+    // Initialize Locomotive Scroll
+    document.addEventListener('DOMContentLoaded', () => {
+      const scroll = new LocomotiveScroll({
+        el: document.querySelector('[data-scroll-container]'),
+        smooth: true,
+        smartphone: {
+          smooth: true
+        },
+        tablet: {
+          smooth: true
+        }
+      });
+
+      // Toggle header background on scroll
+      const header = document.getElementById("header");
+      scroll.on("scroll", (instance) => {
+        if (instance.scroll.y > 0) {
+          header.classList.add("scrolled");
+        } else {
+          header.classList.remove("scrolled");
+        }
+      });
+
+      // Data for Directory
+      const years = [
+        { year: 2024, url: "2024/src/index.html" },
+        { year: 2025, url: null }
+      ];
+
+      // Populate Directory
+      const directory = document.getElementById("directory");
+
+      years.forEach(entry => {
+        const card = document.createElement("div");
+        card.classList.add("year-card");
+
+        if (entry.url) {
+          const link = document.createElement("a");
+          link.href = entry.url;
+          link.textContent = entry.year;
+          card.appendChild(link);
+        } else {
+          card.innerHTML = `${entry.year} <span class="coming-soon">(Coming Soon)</span>`;
+        }
+
+        directory.appendChild(card);
+      });
     });
   </script>
 </body>
-</html>
+</html>
\ No newline at end of file
