init

src/pages/projects/index.astro

@@ -0,0 +1,62 @@
+---
+import Layout from "../../layouts/Layout.astro";
+import { getCollection } from "astro:content";
+import ProjectCard from "../../components/ProjectCard.astro";
+import { ChevronLeft } from "@lucide/astro";
+import { ArrowRight } from "lucide-astro";
+
+const projects = await getCollection("projects");
+---
+
+<Layout
+  title="Projects - Another Hadi"
+  description="Explore my latest projects and work"
+>
+  <main class="max-w-6xl mx-auto px-4 py-20">
+    <!-- Header -->
+    <div class="text-center mb-16">
+      <h1 class="text-5xl font-bold mb-4">Projects</h1>
+      <p class="text-xl text-base-content/70">
+        I enjoy the challenge of reimagining existing programs & scripts in my
+        own unique way. By creating these projects from scratch, I can ensure
+        complete control over every aspect of their design and functionality.
+      </p>
+    </div>
+
+    <!-- Back to Home -->
+    <div class="mb-8">
+      <a href="/" class="btn btn-ghost btn-sm">
+        <ChevronLeft size={18} />
+        Back to Home
+      </a>
+    </div>
+
+    <!-- Projects Grid -->
+    {
+      projects.length === 0 ? (
+        <div class="text-center py-20">
+          <p class="text-2xl text-base-content/60">
+            No projects yet. Check back soon!
+          </p>
+        </div>
+      ) : (
+        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
+          {projects.map((project) => (
+            <ProjectCard project={project} />
+          ))}
+        </div>
+      )
+    }
+
+    <div class="text-center mt-12">
+      <a
+        href="https://github.com/anotherhadi"
+        target="_blank"
+        class="btn btn-ghost gap-2"
+      >
+        View All Projects
+        <ArrowRight class="size-4" />
+      </a>
+    </div>
+  </main>
+</Layout>