diff --git a/constants/projects.go b/constants/projects.go
new file mode 100644
index 0000000..8996467
--- /dev/null
+++ b/constants/projects.go
@@ -0,0 +1,8 @@
+package constants
+
+type Project struct {
+	Url         string
+	Name        string
+	Description string
+	TechTags    []string
+}
diff --git a/main.go b/main.go
index a483409..089ba81 100644
--- a/main.go
+++ b/main.go
@@ -6,6 +6,7 @@ import (
 	"net/http"
 	"os"
 	"os/signal"
+	"personal-site/constants"
 	"personal-site/handlers"
 	"personal-site/pages"
 	"syscall"
@@ -22,6 +23,24 @@ func setupRoutesAndMiddleware() *gin.Engine {
 		page := pages.Index()
 		page.Render(c.Request.Context(), c.Writer)
 	})
+	var projects = []constants.Project{
+		{
+			Url:         "https://derrickgee.dev/projects/support-tickets",
+			Name:        "Project One",
+			Description: "A simple Go Gin + Templ app demonstrating the project pattern.",
+			TechTags:    []string{"Typescript", "Javascript", "React", "Express"},
+		},
+		{
+			Url:         "https://derrickgee.dev/projects/support-tickets",
+			Name:        "Project Two",
+			Description: "A simple Go Gin + Templ app demonstrating the project pattern.",
+			TechTags:    []string{"Go", "Bash"},
+		},
+	}
+	r.GET("/projects", func(c *gin.Context) {
+		page := pages.ProjectPage(projects)
+		page.Render(c.Request.Context(), c.Writer)
+	})
 	r.NoRoute(handlers.NotFoundHandler)
 	return r
 }
diff --git a/pages/projects.templ b/pages/projects.templ
new file mode 100644
index 0000000..ea81b9f
--- /dev/null
+++ b/pages/projects.templ
@@ -0,0 +1,48 @@
+package pages
+
+import "personal-site/constants"
+import "fmt"
+import "personal-site/components"
+
+templ projectCard(idx int, project constants.Project) {
+<a href={ project.Url } target="_blank"
+    class="group rounded-lg px-5 py-4 flex items-start justify-between gap-4 fade-up bg-[#111113] border border-zinc-800 transition-all duration-150 ease-in-out hover:border-zinc-600 hover:bg-[#18181b] hover:-translate-y-0.5"
+    style={ fmt.Sprintf("animation-delay: %dms", idx*30) }>
+    <div class="flex-1 min-w-0">
+        <div class="flex items-center gap-2.5 mb-1.5">
+            <span class="text-sm font-medium">{ project.Name }</span>
+        </div>
+        <p class="text-zinc-500 text-xs leading-relaxed mb-3">{ project.Description }</p>
+        <div class="flex flex-wrap gap-1.5">
+            for _, tag := range project.TechTags {
+            <span class="font-mono text-xs px-2 py-0.5 rounded-sm bg-zinc-800 text-fg-200">{ tag }</span>
+            }
+        </div>
+    </div>
+    <div
+        class="arrow text-fg-200 mt-0.5 shrink-0 opacity-0 group-hover:opacity-100 transition-all duration-150 ease-in-out">
+        <svg width="14" height="14" viewBox="0 0 14 14" fill="none">
+            <path d="M2 12L12 2M12 2H5M12 2V9" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"
+                stroke-linejoin="round"></path>
+        </svg>
+    </div>
+</a>
+}
+
+templ ProjectPage(projects []constants.Project) {
+    {{ params := constants.NewLayoutParams("Home") }}
+    @components.MainLayout(params) {
+        <div class="fade-up flex flex-col gap-3" style="animation-delay:0ms">
+            <p class="mono text-xs text-fg-200 tracking-widest uppercase">derrickgee.dev/projects</p>
+            <h1 class="text-3xl font-semibold tracking-tight">Projects Directory</h1>
+            <p class="text-fg-200 text-sm leading-relaxed max-w-md">
+                A collection of projects built across different languages and frameworks.
+                Each runs as an independent service.
+            </p>
+        </div>
+        <hr class="border-base-100 fade-up" style="animation-delay:80ms" />
+        for idx, p := range projects {
+            @projectCard(idx, p)
+        }
+    }
+}