From 9cc33b7f9a1e5089c451742ddd733f0aee354e95 Mon Sep 17 00:00:00 2001
From: "Zaid Arshad (Nico)" <nico.03727+github@gmail.com>
Date: Sun, 21 Jan 2024 02:22:46 -0500
Subject: [PATCH] feat: custom scrollbar

---
 bun.lockb                    | Bin 221456 -> 221456 bytes
 src/layouts/PageLayout.astro |   1 +
 src/pages/index.astro        |  47 ++++++++++++++++-------------------
 src/styles/globals.css       |  17 +++++++++++++
 4 files changed, 39 insertions(+), 26 deletions(-)

diff --git a/bun.lockb b/bun.lockb
index 8fa4e87fa672f51632842bb1243e90ce909959e7..4c1d4f98b01f5fbffb5b1f00e66774af9019ad9d 100755
GIT binary patch
delta 31
ncmbPmh<Cyv-i8*&Elj7~*cs!D^-S~(+b_8>ZNKEkY$pW(xXTK#

delta 31
jcmbPmh<Cyv-i8*&Elj7~*qIo>p#72?)Ambl%yv=$rj!X^

diff --git a/src/layouts/PageLayout.astro b/src/layouts/PageLayout.astro
index 4d2b120..9d5a8eb 100644
--- a/src/layouts/PageLayout.astro
+++ b/src/layouts/PageLayout.astro
@@ -1,6 +1,7 @@
 ---
 import Layout from "./Layout.astro";
 import Navbar from "../components/nav/Navbar.tsx";
+import { Scrollbar } from "react-scrollbars-custom";
 
 interface Props {
     title: string;
diff --git a/src/pages/index.astro b/src/pages/index.astro
index db6c53d..46a9763 100644
--- a/src/pages/index.astro
+++ b/src/pages/index.astro
@@ -6,6 +6,13 @@ import projects_data from "../data/projects.json";
 import PageLayout from "../layouts/PageLayout.astro";
 import ProjectCard from "../components/project/ProjectCard";
 import { Github, Mail } from "lucide-react";
+import { Scrollbar } from "react-scrollbars-custom";
+
+const project_sections: Record<string, keyof typeof projects_data> = {
+    "Websites & Fullstack": "sites",
+    "Backend & Bots": "backends",
+    Libraries: "libraries",
+};
 ---
 
 <PageLayout title="Zaid's Site">
@@ -52,32 +59,20 @@ import { Github, Mail } from "lucide-react";
         <h2>Featured Projects</h2>
 
         <div class="flex flex-col gap-4">
-            <h3>Websites & Fullstack</h3>
-            <div class="flex flex-row flex-wrap gap-4">
-                {
-                    projects_data.sites.map((project) => (
-                        <ProjectCard {...project} />
-                    ))
-                }
-            </div>
-
-            <h3>Backend & Bots</h3>
-            <div class="flex flex-row flex-wrap gap-4">
-                {
-                    projects_data.backends.map((project) => (
-                        <ProjectCard {...project} />
-                    ))
-                }
-            </div>
-
-            <h3>Libraries</h3>
-            <div class="flex flex-row flex-wrap gap-4">
-                {
-                    projects_data.libraries.map((project) => (
-                        <ProjectCard {...project} />
-                    ))
-                }
-            </div>
+            {
+                Object.entries(project_sections).map(
+                    ([title, json_section]) => (
+                        <>
+                            <h3>{title}</h3>
+                            <div class="flex flex-row gap-4 overflow-x-auto pb-4">
+                                {projects_data[json_section].map((project) => (
+                                    <ProjectCard {...project} />
+                                ))}
+                            </div>
+                        </>
+                    ),
+                )
+            }
         </div>
 
         <div id="competitions">
diff --git a/src/styles/globals.css b/src/styles/globals.css
index f0b2d9d..148e01d 100644
--- a/src/styles/globals.css
+++ b/src/styles/globals.css
@@ -30,4 +30,21 @@
     html {
         @apply overflow-y-scroll
     }
+
+    * {
+        scrollbar-width: auto;
+        scrollbar-color: #8f54a0 #ffffff;
+    }
+
+    *::-webkit-scrollbar {
+        @apply w-[12px];
+    }
+
+    *::-webkit-scrollbar-track {
+        @apply bg-white
+    }
+
+    *::-webkit-scrollbar-thumb {
+        @apply bg-slate-800 border border-white;
+    }
 }
\ No newline at end of file