From 838b4f73f6fefb6a449d1d783519d09d8db9922d Mon Sep 17 00:00:00 2001
From: saymanlal <buisnesssayman@gmail.com>
Date: Fri, 31 Oct 2025 14:28:21 -0400
Subject: [PATCH 1/2] preview webpage

---
 host.html | 11 +++++++++++
 1 file changed, 11 insertions(+)
 create mode 100644 host.html
diff --git a/host.html b/host.html
new file mode 100644
index 0000000..d01f779
--- /dev/null
+++ b/host.html
@@ -0,0 +1,11 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Document</title>
+</head>
+<body>
+    
+</body>
+</html>
\ No newline at end of file

From ba3b3b8667e378f159e4b599cef0bd728efce167 Mon Sep 17 00:00:00 2001
From: saymanlal <buisnesssayman@gmail.com>
Date: Fri, 31 Oct 2025 14:33:31 -0400
Subject: [PATCH 2/2] added the frontend ready to deploy using github pages

---
 host.html | 197 ++++++++++++++++++++++++++++++++++++++++++++++++++++--
 1 file changed, 192 insertions(+), 5 deletions(-)

diff --git a/host.html b/host.html
index d01f779..452ec64 100644
--- a/host.html
+++ b/host.html
@@ -1,11 +1,198 @@
 <!DOCTYPE html>
 <html lang="en">
 <head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Document</title>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>Hacktoberfest Projects 2025 | Open Source Showcase</title>
+
+  <!-- Favicon & Icons -->
+  <link rel="icon" href="https://cdn-icons-png.flaticon.com/512/919/919827.png" />
+  <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;600;700&display=swap" rel="stylesheet" />
+  <script src="https://kit.fontawesome.com/a2e8f5a1f4.js" crossorigin="anonymous"></script>
+
+  <style>
+    :root {
+      --bg: #0d1117;
+      --text: #f0f6fc;
+      --accent: #58a6ff;
+      --secondary: #161b22;
+    }
+
+    * {
+      margin: 0;
+      padding: 0;
+      box-sizing: border-box;
+      font-family: 'Poppins', sans-serif;
+      scroll-behavior: smooth;
+    }
+
+    body {
+      background: var(--bg);
+      color: var(--text);
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      justify-content: center;
+      min-height: 100vh;
+      overflow-x: hidden;
+    }
+
+    header {
+      text-align: center;
+      padding: 2rem 1rem;
+      animation: fadeInDown 1s ease forwards;
+    }
+
+    header h1 {
+      font-size: 2.5rem;
+      color: var(--accent);
+    }
+
+    header p {
+      font-size: 1.1rem;
+      color: #8b949e;
+      margin-top: 0.5rem;
+    }
+
+    .btn {
+      display: inline-block;
+      margin-top: 1.5rem;
+      background: var(--accent);
+      color: white;
+      padding: 0.8rem 1.5rem;
+      border-radius: 8px;
+      text-decoration: none;
+      font-weight: 600;
+      transition: all 0.3s ease;
+    }
+
+    .btn:hover {
+      background: #1f6feb;
+      transform: translateY(-3px);
+    }
+
+    main {
+      max-width: 1000px;
+      padding: 2rem;
+      text-align: center;
+      animation: fadeInUp 1s ease forwards;
+    }
+
+    .projects {
+      display: grid;
+      grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
+      gap: 1.5rem;
+      margin-top: 2rem;
+    }
+
+    .card {
+      background: var(--secondary);
+      border-radius: 12px;
+      padding: 1.5rem;
+      transition: all 0.3s ease;
+      border: 1px solid #21262d;
+    }
+
+    .card:hover {
+      transform: translateY(-5px);
+      border-color: var(--accent);
+      box-shadow: 0 0 15px rgba(88, 166, 255, 0.2);
+    }
+
+    .card h3 {
+      color: var(--accent);
+      font-size: 1.2rem;
+      margin-bottom: 0.5rem;
+    }
+
+    .card p {
+      font-size: 0.95rem;
+      color: #c9d1d9;
+    }
+
+    footer {
+      margin-top: 3rem;
+      text-align: center;
+      color: #8b949e;
+      padding-bottom: 2rem;
+    }
+
+    .socials a {
+      color: var(--accent);
+      margin: 0 10px;
+      font-size: 1.5rem;
+      transition: color 0.3s ease;
+    }
+
+    .socials a:hover {
+      color: white;
+    }
+
+    @keyframes fadeInUp {
+      from {
+        opacity: 0;
+        transform: translateY(20px);
+      }
+      to {
+        opacity: 1;
+        transform: translateY(0);
+      }
+    }
+
+    @keyframes fadeInDown {
+      from {
+        opacity: 0;
+        transform: translateY(-20px);
+      }
+      to {
+        opacity: 1;
+        transform: translateY(0);
+      }
+    }
+  </style>
 </head>
+
 <body>
-    
+  <header role="banner">
+    <h1>Hacktoberfest Projects 2025</h1>
+    <p>Explore, Contribute, and Grow with Open Source</p>
+    <a href="https://github.com/gitsofaryan/Hacktoberfest-Projects-2025" class="btn" aria-label="View repository on GitHub">
+      <i class="fab fa-github"></i> View on GitHub
+    </a>
+  </header>
+
+  <main role="main">
+    <h2>🌱 Featured Projects</h2>
+    <div class="projects" aria-label="Project showcase">
+      <div class="card">
+        <h3><i class="fas fa-code"></i> BitMasking</h3>
+        <p>Understand the power of bitwise operations through clean C++ implementations.</p>
+      </div>
+
+      <div class="card">
+        <h3><i class="fas fa-brain"></i> Handwritten Digit Recognition</h3>
+        <p>Train a model to recognize handwritten digits using ML fundamentals.</p>
+      </div>
+
+      <div class="card">
+        <h3><i class="fas fa-car"></i> Vehicle Parking Management</h3>
+        <p>A complete Python + Flask based system to manage parking slots efficiently.</p>
+      </div>
+
+      <div class="card">
+        <h3><i class="fas fa-terminal"></i> Learn Bash Scripting</h3>
+        <p>Master shell scripting with real-world examples and exercises.</p>
+      </div>
+    </div>
+  </main>
+
+  <footer role="contentinfo">
+    <div class="socials" aria-label="Social media links">
+      <a href="https://github.com/YourUsername" aria-label="GitHub"><i class="fab fa-github"></i></a>
+      <a href="https://x.com/YourUsername" aria-label="X (Twitter)"><i class="fab fa-x-twitter"></i></a>
+      <a href="https://www.linkedin.com/in/YourUsername" aria-label="LinkedIn"><i class="fab fa-linkedin"></i></a>
+    </div>
+    <p>Made with ❤️ by contributors of Hacktoberfest 2025</p>
+  </footer>
 </body>
-</html>
\ No newline at end of file
+</html>
