wip /uses page

src/components/CardItem.astro

···
+---
+interface Props {
+	name: string;
+	description: string;
+}
+---
+
+<li class="border border-gray-300 rounded-sm p-3">
+    <h3 class="font-semibold mb-2">{Astro.props.name}</h3>
+    <p class="text-gray-600">{Astro.props.description}</p>
+</li>

src/components/Navbar.astro

···
 ---
 const paths = [
-    { name: "home", path: "/" },
-    { name: "blogs", path: "/blogs" },
+	{ name: "home", path: "/" },
+	{ name: "blogs", path: "/blogs" },
+	{ name: "uses", path: "/uses" },
 ];
 import Link from "@components/Link.astro";
 ---

src/pages/blogs/[blog].astro

···
 	const documents = await getCollection("documents");
 	const blogs = await getCollection("blogs");
 
-	// Combine both collections for static paths
 	const allPosts = [
 		...documents.map((document) => ({
 			params: { blog: document.id },
···
 	return allPosts;
 }
 
-// Try to get the entry from both collections
 let entry: CollectionEntry<"documents"> | CollectionEntry<"blogs"> | undefined =
 	await getEntry("documents", Astro.params.blog);
 

src/pages/index.astro

···
 const documents = await getCollection("documents");
 const blogs = await getCollection("blogs");
 
-// Combine both collections and sort by publishedAt
 const allPosts = [
 	...blogs.map((blog) => ({
 		...blog,
···
 	})),
 ]
 	.sort((a, b) => b.data.publishedAt.valueOf() - a.data.publishedAt.valueOf())
-	.slice(0, 5); // Show only the 5 most recent
+	.slice(0, 5);
 ---
 
 <Layout
···
                 <li class="flex items-center gap-1">
                     <div class="i-lucide-mailbox"></div>
                     <Link
-                        href="mailto:[e-mail]?subject=Hey%20There"
+                        href="mailto:[e-mail]?subject=Hey%20There"
                     >
-                        Send Message
+                        send message
                     </Link>
                 </li>
                 <li class="flex items-center gap-1">
···
                         target="_blank"
                         rel="noopener noreferrer"
                     >
-                        Add on LinkedIn
-                    </Link>
-                </li>
-                <li class="flex items-center gap-1">
-                    <div class="i-lucide-at-sign"></div>
-                    <Link
-                        href="https://www.threads.net/@dane__m"
-                        target="_blank"
-                        rel="noopener noreferrer"
-                    >
-                        Follow on Threads
+                        add on linkedin
                     </Link>
                 </li>
                 <li class="flex items-center gap-1">
                     <div class="i-tabler-brand-bluesky"></div>
                     <Link
-                        href="https://bsky.app/profile/dane.computer"
+                        href="https://bsky.app/profile/dane.is.extraordinarily.cool"
                         target="_blank"
                         rel="noopener noreferrer"
                     >
-                        Follow on BlueSky
+                        follow on bluesky
                     </Link>
                 </li>
             </ul>

src/pages/uses.astro

···
+---
+import CardItem from "@components/CardItem.astro";
+import Layout from "@layouts/Layout.astro";
+const uses = {
+	hardware: [
+		{
+			item: "Macbook Air (M2, 2022)",
+			description:
+				"My personal laptop that I use for development or just surfing the web",
+		},
+		{
+			item: "Sony WH-1000XM5 Headphones",
+			description: "Headphones that I use when I'm at my desktop or laptop.",
+		},
+		{
+			item: "EPOMAKER P75",
+			description:
+				"My daily driver keyboard at the moment. Previously used an NK65 keyboard with lubed yellow switches.",
+		},
+		{
+			item: "Logitech MX Master 3S",
+			description:
+				"Easily one of the best mice I've used. If this one breaks I'm buying another one.",
+		},
+		{
+			item: "Dell 34inch Curved Gaming Monitor",
+			description:
+				"No complaints about this monitor. Was skeptical about ultrawide monitors but it's been an alright experience.",
+		},
+	],
+	tools: [
+		{
+			item: "Zed",
+			description: "My current preferred code editor.",
+		},
+		{
+			item: "Ghostty",
+			description:
+				"Haven't been using this very long but I've been enjoying it. Does what it needs to and it's fast.",
+		},
+		{
+			item: "Tangled",
+			description:
+				"I've started pushing my code to tangled.sh since they now support a lot of the features I wanted from other services. It's also built on the AT Protocol.",
+		},
+	],
+};
+---
+
+<Layout
+    title="Dane's Space | Uses"
+    description="A list of the hardware, software, and tools that power my daily workflow and help me build great things."
+>
+    <h1 class="mt-4 mb-4 text-2xl font-bold text-snes-black">Uses</h1>
+    <p class="mb-10">
+        A comprehensive list of the hardware, software, and tools that power my
+        daily workflow and help me build great things.
+    </p>
+    <section id="uses" class="mb-10">
+        <h2 class="font-semibold text-xl mb-4">Hardware</h2>
+        <ul class="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-3 gap-4">
+            {
+                uses.hardware.map(({ item, description }) => {
+                    return (
+                       <CardItem name={item} description={description}/>
+                    );
+                })
+            }
+        </ul>
+    </section>
+    <section id="tools">
+         <h2 class="font-semibold text-xl mb-4">Development Tools</h2>
+        <ul class="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-3 gap-4">
+            {
+                uses.tools.map(({ item, description }) => {
+                    return (
+                       <CardItem name={item} description={description}/>
+                    );
+                })
+            }
+        </ul>
+    </section>
+</Layout>