diff --git a/pkg/pages/index.go b/pkg/pages/index.go
index 2d0acbe..851105e 100644
--- a/pkg/pages/index.go
+++ b/pkg/pages/index.go
@@ -1,95 +1,95 @@
 package pages
 
 import (
-    "github.com/labstack/echo/v4"
+	"github.com/labstack/echo/v4"
 )
 
 type Tech struct {
-    TechName string
-    TechURL string
-    TechClasses string
+	TechName    string
+	TechURL     string
+	TechClasses string
 }
 
 type Project struct {
-    Name string
-    URL string
-    Description string
-    TechList []Tech
-    Repo string
-    Classes string
+	Name        string
+	URL         string
+	Description string
+	TechList    []Tech
+	Repo        string
+	Classes     string
 }
 
 type Page struct {
-    Projects []Project
+	Projects []Project
 }
 
 func Index(c echo.Context) error {
 
-    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",
-                },
-            },
-        },
-    }
+	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",
+			TechList: []Tech{
+				{
+					TechName:    "Next.js",
+					TechURL:     "https://nextjs.org/",
+					TechClasses: "transition bg-zinc-950 text-zinc-100 hover:bg-zinc-100 hover:text-gray-950",
+				},
+				{
+					TechName:    "Drizzle ORM",
+					TechURL:     "https://orm.drizzle.team/",
+                    TechClasses: "transition bg-zinc-950 text-zinc-100 hover:bg-green-600",
+				},
+				{
+					TechName:    "Turso",
+					TechURL:     "https://turso.tech/",
+                    TechClasses: "transition bg-zinc-950 text-zinc-100 hover:bg-teal-600",
+				},
+			},
+		},
+		{
+			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",
+			TechList: []Tech{
+				{
+					TechName:    "Golang",
+					TechURL:     "https://go.dev/",
+					TechClasses: "transition 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 following the book \"Writing an Interpreter In Go\" By Thorsten Ball",
+			Repo:        "https://github.com/juancwu/interpretor-in-go",
+			Classes:     "border-emerald-500",
+			TechList: []Tech{
+				{
+					TechName:    "Golang",
+					TechURL:     "https://go.dev/",
+					TechClasses: "bg-zinc-950 text-zinc-100",
+				},
+			},
+		},
+	}
 
-    return c.Render(200, "index.html", data)
+	return c.Render(200, "index.html", data)
 }
diff --git a/public/views/index.html b/public/views/index.html
index 9300fc4..4a005e5 100644
--- a/public/views/index.html
+++ b/public/views/index.html
@@ -66,9 +66,53 @@
                         >
                     </div>
                 </div>
-                <nav class="ml-auto hidden items-center lg:flex">
+                <button
+                    class="ml-auto lg:hidden"
+                    aria-label="Open mobile navigation menu"
+                    _="on click remove .translate-x-full from <nav /> then add .overflow-hidden to <body />"
+                >
+                    <svg
+                        xmlns="http://www.w3.org/2000/svg"
+                        fill="none"
+                        viewBox="0 0 24 24"
+                        stroke-width="1.5"
+                        stroke="currentColor"
+                        aria-hidden="true"
+                        class="h-6 w-6"
+                    >
+                        <path
+                            stroke-linecap="round"
+                            stroke-linejoin="round"
+                            d="M3.75 6.75h16.5M3.75 12h16.5m-16.5 5.25h16.5"
+                        />
+                    </svg>
+                </button>
+                <nav
+                    class="fixed inset-0 z-10 translate-x-full items-center bg-zinc-900 transition-transform lg:relative lg:ml-auto lg:flex lg:bg-transparent"
+                >
+                    <div class="flex justify-end p-8">
+                        <button
+                            aria-label="close mobile navigation menu"
+                            _="on click add .translate-x-full to <nav /> then remove .overflow-hidden from <body />"
+                        >
+                            <svg
+                                xmlns="http://www.w3.org/2000/svg"
+                                fill="none"
+                                viewBox="0 0 24 24"
+                                stroke-width="1.5"
+                                stroke="currentColor"
+                                class="h-6 w-6 text-red-500"
+                            >
+                                <path
+                                    stroke-linecap="round"
+                                    stroke-linejoin="round"
+                                    d="M6 18L18 6M6 6l12 12"
+                                />
+                            </svg>
+                        </button>
+                    </div>
                     <ul
-                        class="flex items-center justify-center gap-4 uppercase text-white"
+                        class="flex flex-col items-center justify-center gap-8 uppercase text-white lg:flex-row lg:gap-4"
                     >
                         <li>
                             <a
@@ -81,23 +125,7 @@
                         <li aria-hidden="true">
                             <span
                                 aria-hidden="true"
-                                class="select-none font-normal text-fuchsia-400"
-                            >
-                                -
-                            </span>
-                        </li>
-                        <li>
-                            <a
-                                href="#aboutme"
-                                class="relative z-0 whitespace-nowrap p-2 after:absolute after:-right-2 after:top-1/2 after:-z-10 after:h-3/4 after:w-full after:bg-gradient-to-r after:from-emerald-500 after:to-teal-600 after:opacity-0 after:transition-all hover:after:right-0 hover:after:top-0 hover:after:translate-y-[15%] hover:after:opacity-100 focus:after:right-0 focus:after:top-0 focus:after:translate-y-[15%] focus:after:opacity-100"
-                            >
-                                About Me
-                            </a>
-                        </li>
-                        <li aria-hidden="true">
-                            <span
-                                aria-hidden="true"
-                                class="select-none font-normal text-fuchsia-400"
+                                class="hidden select-none font-normal text-fuchsia-400 lg:inline"
                             >
                                 -
                             </span>
@@ -112,7 +140,7 @@
                         <li aria-hidden="true">
                             <span
                                 aria-hidden="true"
-                                class="select-none font-normal text-fuchsia-400"
+                                class="hidden select-none font-normal text-fuchsia-400 lg:inline"
                             >
                                 -
                             </span>
@@ -127,7 +155,7 @@
                         <li aria-hidden="true">
                             <span
                                 aria-hidden="true"
-                                class="select-none font-normal text-fuchsia-400"
+                                class="hidden select-none font-normal text-fuchsia-400 lg:inline"
                             >
                                 -
                             </span>
@@ -141,100 +169,9 @@
                         </li>
                     </ul>
                 </nav>
-                <div class="ml-auto block lg:hidden">
-                    <button
-                        aria-label="Open mobile navigation menu"
-                        _="on click remove .translate-x-full from #mobileNav then add .overflow-hidden to <body />"
-                    >
-                        <svg
-                            xmlns="http://www.w3.org/2000/svg"
-                            fill="none"
-                            viewBox="0 0 24 24"
-                            stroke-width="1.5"
-                            stroke="currentColor"
-                            aria-hidden="true"
-                            class="h-6 w-6"
-                        >
-                            <path
-                                stroke-linecap="round"
-                                stroke-linejoin="round"
-                                d="M3.75 6.75h16.5M3.75 12h16.5m-16.5 5.25h16.5"
-                            />
-                        </svg>
-                    </button>
-                    <nav
-                        id="mobileNav"
-                        class="fixed bottom-0 left-0 right-0 top-0 z-50 translate-x-full bg-zinc-950 px-8 transition-transform"
-                    >
-                        <div class="h-8" aria-hidden="true"></div>
-                        <div class="flex items-center justify-end">
-                            <button
-                                aria-label="Close mobile navigation menu"
-                                _="on click add .translate-x-full to mobileNav then remove .overflow-hidden from <body />"
-                            >
-                                <svg
-                                    xmlns="http://www.w3.org/2000/svg"
-                                    fill="none"
-                                    viewBox="0 0 24 24"
-                                    stroke-width="1.5"
-                                    aria-hidden="true"
-                                    class="h-6 w-6 stroke-red-400"
-                                >
-                                    <path
-                                        stroke-linecap="round"
-                                        stroke-linejoin="round"
-                                        d="M6 18L18 6M6 6l12 12"
-                                    />
-                                </svg>
-                            </button>
-                        </div>
-                        <div class="h-8" aria-hidden="true"></div>
-                        <ul
-                            class="flex flex-col gap-2 divide-y divide-white/10 uppercase"
-                        >
-                            <li>
-                                <a
-                                    href="#projects"
-                                    class="block w-full p-6 pl-0"
-                                    _="on click add .translate-x-full to mobileNav"
-                                    >Projects</a
-                                >
-                            </li>
-                            <li>
-                                <a
-                                    href="#aboutme"
-                                    class="block w-full p-6 pl-0"
-                                    _="on click add .translate-x-full to mobileNav"
-                                    >About Me</a
-                                >
-                            </li>
-                            <li>
-                                <a
-                                    href="https://github.com/juancwu"
-                                    class="block w-full p-6 pl-0"
-                                    >GitHub</a
-                                >
-                            </li>
-                            <li>
-                                <a
-                                    href="https://linkedin.com/in/juancwu"
-                                    class="block w-full p-6 pl-0"
-                                    >LinkedIn</a
-                                >
-                            </li>
-                            <li>
-                                <a
-                                    href="https://linkedin.com/in/juancwu"
-                                    class="block w-full p-6 pl-0"
-                                    >RESUME</a
-                                >
-                            </li>
-                        </ul>
-                    </nav>
-                </div>
             </div>
         </header>
-        <main class="relative px-16 py-24">
+        <main class="relative z-0 px-16 py-24">
             <div class="grid-pattern absolute inset-0" aria-hidden="true"></div>
             <div
                 class="radial-overlay absolute inset-0"
@@ -300,19 +237,18 @@
                             src="/static/touching-grass-pic.jpg"
                             alt="Juan's portrait photo of him touching grass (figuratively)"
                         />
-                        <p></p>
                     </div>
                 </div>
             </section>
         </main>
-        <div class="hidden h-64 lg:block" aria-hidden="true"></div>
+        <div class="hidden h-12 lg:block" aria-hidden="true"></div>
         <section
             id="projects"
             aria-label="Juan's Projects"
             class="relative px-8"
         >
             <div class="relative flex items-center justify-center pt-8">
-                <div>
+                <div class="flex flex-col items-center">
                     <h1
                         class="flex flex-col gap-2 p-8 text-3xl font-bold uppercase md:text-5xl"
                     >
@@ -326,16 +262,24 @@
                             <span class="relative"> Project Graveyard </span>
                         </span>
                     </h1>
+                    <a
+                        href="https://shoto.at/l/dumb-projects"
+                        class="relative underline decoration-sky-400 after:absolute after:left-0 after:top-0 after:-z-10 after:h-full after:w-0 after:bg-sky-500 after:transition-all hover:text-white hover:decoration-sky-500 hover:after:w-full focus:text-white focus:decoration-sky-500 focus:after:w-full"
+                    >
+                        Juan's dumb projects archive
+                    </a>
                 </div>
             </div>
             <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 }}"
+                    class="flex w-full flex-col justify-between gap-4 rounded border-2 bg-zinc-800/10 p-6 shadow-lg backdrop-blur-[2px] transition {{ .Classes }}"
                 >
                     <div>
-                        <div class="my-2 flex items-center justify-between">
+                        <div
+                            class="flex flex-col items-center justify-between gap-4 md:flex-row md:gap-0"
+                        >
                             {{ if gt (len .URL) 1 }}
                             <a
                                 href="{{ .URL }}"
@@ -367,21 +311,23 @@
                                 <li>
                                     <a
                                         href="{{ .TechURL }}"
-                                        class="rounded-md px-4 py-2 {{ .TechClasses }}"
+                                        class="relative text-sm underline decoration-sky-400 after:absolute after:left-0 after:top-0 after:-z-10 after:h-full after:w-0 after:bg-sky-500 after:transition-all hover:text-white hover:decoration-sky-500 hover:after:w-full focus:text-white focus:decoration-sky-500 focus:after:w-full md:text-base"
                                         >{{ .TechName }}</a
                                     >
                                 </li>
                                 {{ end }}
                             </ul>
                         </div>
+                        <div class="h-4" aria-hidden="true"></div>
                         <hr class="border-white/25" />
+                        <div class="h-4" aria-hidden="true"></div>
                         <p>{{ .Description }}</p>
                     </div>
                     <p>
                         Checkout the code in
                         <a
                             href="{{ .Repo }}"
-                            class="underline decoration-sky-400"
+                            class="relative underline decoration-sky-400 after:absolute after:left-0 after:top-0 after:-z-10 after:h-full after:w-0 after:bg-sky-500 after:transition-all hover:text-white hover:decoration-sky-500 hover:after:w-full focus:text-white focus:decoration-sky-500 focus:after:w-full"
                             >GitHub</a
                         >
                     </p>
@@ -390,33 +336,5 @@
             </div>
         </section>
         <div class="h-64" aria-hidden="true"></div>
-        <section id="aboutme" aria-lable="About Juan">
-            <div class="relative flex items-center justify-center pt-8">
-                <div>
-                    <h1
-                        class="flex flex-col gap-2 p-8 text-3xl font-bold uppercase md:text-5xl"
-                    >
-                        <span
-                            class="relative text-xl font-medium text-zinc-300 md:text-2xl"
-                            >Welcome to</span
-                        >
-                        <span
-                            class="relative inline-block before:absolute before:-inset-1 before:block before:-skew-y-3 before:scale-90 before:bg-gradient-to-r before:from-emerald-500 before:to-teal-600 before:opacity-60 before:transition-all hover:before:scale-100"
-                        >
-                            <span class="relative">
-                                Juan's Narcissistic Biography
-                            </span>
-                        </span>
-                    </h1>
-                </div>
-            </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>