From a8a930d1fe4e15170a54c3dbcbfca52bfbaf6427 Mon Sep 17 00:00:00 2001
From: jc <46619361+juancwu@users.noreply.github.com>
Date: Wed, 25 Oct 2023 17:05:48 -0400
Subject: [PATCH] in-progress: working on project cards

---
 pkg/pages/index.go      | 88 ++++++++++++++++++++++++++++++++++++++++-
 public/views/index.html | 70 +++++++++++++++++++++++++++++---
 tailwind.config.js      | 14 +++----
 3 files changed, 157 insertions(+), 15 deletions(-)

diff --git a/pkg/pages/index.go b/pkg/pages/index.go
index 36830ad..2d0acbe 100644
--- a/pkg/pages/index.go
+++ b/pkg/pages/index.go
@@ -4,8 +4,92 @@ import (
     "github.com/labstack/echo/v4"
 )
 
-type Page struct {}
+type Tech struct {
+    TechName string
+    TechURL string
+    TechClasses string
+}
+
+type Project struct {
+    Name string
+    URL string
+    Description string
+    TechList []Tech
+    Repo string
+    Classes string
+}
+
+type Page struct {
+    Projects []Project
+}
 
 func Index(c echo.Context) error {
-    return c.Render(200, "index.html", Page{})
+
+    data := Page{}
+    data.Projects = []Project{
+        {
+            Name: "Shoto",
+            URL: "https://www.shoto.at",
+            Description: "Simple and effective URL shortoner.",
+            Repo: "https://github.com/juancwu/shoto",
+            Classes: "border-indigo-500 hover:bg-indigo-950 hover:shadow-indigo-500/50",
+            TechList: []Tech{
+                {
+                    TechName: "Next.js",
+                    TechURL: "https://nextjs.org/",
+                    TechClasses: "bg-zinc-950 text-zinc-100",
+                },
+                {
+                    TechName: "Drizzle ORM",
+                    TechURL: "https://orm.drizzle.team/",
+                    TechClasses: "bg-zinc-950 text-zinc-100",
+                },
+                {
+                    TechName: "Turso",
+                    TechURL: "https://turso.tech/",
+                    TechClasses: "bg-zinc-950 text-zinc-100",
+                },
+            },
+        },
+        {
+            Name: "Bento",
+            URL: "",
+            Description: "API service to manage projects' secrets or environment variables with the ability to separate the variables into their own environment.",
+            Repo: "https://github.com/juancwu/bento",
+            Classes: "border-sky-500 hover:bg-sky-950 hover:shadow-sky-500/50",
+            TechList: []Tech{
+                {
+                    TechName: "Golang",
+                    TechURL: "https://go.dev/",
+                    TechClasses: "bg-zinc-950 text-zinc-100",
+                },
+                {
+                    TechName: "Chi",
+                    TechURL: "https://go-chi.io/#/",
+                    TechClasses: "bg-zinc-950 text-zinc-100",
+                },
+                {
+                    TechName: "PlanetScale",
+                    TechURL: "https://planetscale.com/",
+                    TechClasses: "bg-zinc-950 text-zinc-100",
+                },
+            },
+        },
+        {
+            Name: "Interpreter In Go",
+            URL: "",
+            Description: "Custom programming language interpreter written with go.",
+            Repo: "https://github.com/juancwu/interpretor-in-go",
+            Classes: "border-pink-500 hover:bg-pink-950 hover:shadow-pink-500/50",
+            TechList: []Tech{
+                {
+                    TechName: "Golang",
+                    TechURL: "https://go.dev/",
+                    TechClasses: "bg-zinc-950 text-zinc-100",
+                },
+            },
+        },
+    }
+
+    return c.Render(200, "index.html", data)
 }
diff --git a/public/views/index.html b/public/views/index.html
index b4ce39e..9300fc4 100644
--- a/public/views/index.html
+++ b/public/views/index.html
@@ -328,13 +328,65 @@
                     </h1>
                 </div>
             </div>
-            <div class="flex items-center justify-end">
-                <a
-                    href="https://shoto.at/l/dumb-projects"
-                    class="text-sm text-sky-400 underline"
+            <div class="h-16" aria-hidden="true"></div>
+            <div class="grid grid-cols-1 gap-6 lg:grid-cols-2 2xl:grid-cols-3">
+                {{ range .Projects }}
+                <div
+                    class="w-full flex flex-col justify-between rounded border-2 border-indigo-500 bg-opacity-5 p-6 shadow-lg backdrop-blur-[2px] transition {{ .Classes }}"
                 >
-                    Juan's dumb projects archive
-                </a>
+                    <div>
+                        <div class="my-2 flex items-center justify-between">
+                            {{ if gt (len .URL) 1 }}
+                            <a
+                                href="{{ .URL }}"
+                                class="relative flex items-center gap-2 transition-colors hover:text-sky-400"
+                            >
+                                <h3 class="text-2xl font-medium">
+                                    {{ .Name }}
+                                    <svg
+                                        xmlns="http://www.w3.org/2000/svg"
+                                        fill="none"
+                                        viewBox="0 0 24 24"
+                                        stroke-width="1.5"
+                                        stroke="currentColor"
+                                        class="-mt-1 inline-block h-6 w-6"
+                                    >
+                                        <path
+                                            stroke-linecap="round"
+                                            stroke-linejoin="round"
+                                            d="M13.5 6H5.25A2.25 2.25 0 003 8.25v10.5A2.25 2.25 0 005.25 21h10.5A2.25 2.25 0 0018 18.75V10.5m-10.5 6L21 3m0 0h-5.25M21 3v5.25"
+                                        />
+                                    </svg>
+                                </h3>
+                            </a>
+                            {{ else }}
+                            <h3 class="text-2xl font-medium">{{ .Name }}</h3>
+                            {{ end }}
+                            <ul class="flex gap-2">
+                                {{ range .TechList }}
+                                <li>
+                                    <a
+                                        href="{{ .TechURL }}"
+                                        class="rounded-md px-4 py-2 {{ .TechClasses }}"
+                                        >{{ .TechName }}</a
+                                    >
+                                </li>
+                                {{ end }}
+                            </ul>
+                        </div>
+                        <hr class="border-white/25" />
+                        <p>{{ .Description }}</p>
+                    </div>
+                    <p>
+                        Checkout the code in
+                        <a
+                            href="{{ .Repo }}"
+                            class="underline decoration-sky-400"
+                            >GitHub</a
+                        >
+                    </p>
+                </div>
+                {{ end }}
             </div>
         </section>
         <div class="h-64" aria-hidden="true"></div>
@@ -360,5 +412,11 @@
             </div>
         </section>
         <div class="h-64" aria-hidden="true"></div>
+        <a
+            href="https://shoto.at/l/dumb-projects"
+            class="text-sm text-sky-400 underline"
+        >
+            Juan's dumb projects archive
+        </a>
     </body>
 </html>
diff --git a/tailwind.config.js b/tailwind.config.js
index 429bef5..caf8a17 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -1,15 +1,15 @@
 /** @type {import('tailwindcss').Config} */
 module.exports = {
-    content: ['./public/views/**/*.html'],
+    content: ["./pkg/pages/**/*.go", "./public/views/**/*.html"],
     theme: {
         extend: {
             fontFamily: {
-                inter: ['Inter', 'sans-serif'],
+                inter: ["Inter", "sans-serif"],
             },
             screens: {
-                '3xl': '2048px',
-                '4xl': '2560px',
-                '5xl': '4096px',
+                "3xl": "2048px",
+                "4xl": "2560px",
+                "5xl": "4096px",
                 // for mac users
                 retina: {
                     raw: `@media
@@ -21,7 +21,7 @@ only screen and (min-resolution: 192dpi),
 only screen and (min-resolution: 2dppx)
 `,
                 },
-                'retina-sm': {
+                "retina-sm": {
                     raw: `@media
 only screen and (-webkit-min-device-pixel-ratio: 2) and (min-width: 640px),
 only screen and (min--moz-device-pixel-ratio: 2) and (min-width: 640px),
@@ -31,7 +31,7 @@ only screen and (min-resolution: 192dpi) and (min-width: 640px),
 only screen and (min-resolution: 2dppx) and (min-width: 640px)
 `,
                 },
-                'retina-md': {
+                "retina-md": {
                     raw: `@media
 only screen and (-webkit-min-device-pixel-ratio: 2) and (min-width: 1024px),
 only screen and (min--moz-device-pixel-ratio: 2) and (min-width: 1024px),