@@ -0,0 +1,43 @@
+---
+import type { Link } from "@/types";
+
+interface Props {
+	links: Link[];
+}
+const { links } = Astro.props;
+---
+
+<ul>
+    {links.map((link) => (
+    	<li><a class="link" href={link.href}>{link.title}</a></li>
+    ))}
+</ul>
+
+<style>
+ul {
+    display: inline-flex;
+    flex-direction: column;
+    gap: 0.5rem;
+    list-style: none;
+
+    li {
+        margin-left: 2ch;
+    }
+
+    a {
+        --fg: var(--subtext1);
+
+        display: inline-flex;
+        align-items: center;
+        gap: 1ch;
+
+        font-size: 1.25rem;
+        font-weight: 500;
+
+        svg {
+            width: 1.5rem;
+            height: 1.5rem;
+        }
+    }
+}
+</style>

@@ -23,40 +23,45 @@ <p>{description}</p>
 		{
 			languages && languages.length > 0 && (
 				<div class="languages">
-					{languages.map((lang) => (
-						<span
-							class="language"
-							title={lang.name}
-							style={{ "--colour": `var(--${lang.colour})` }}
-						>
-							{lang.name}
-						</span>
-					))}
+
 				</div>
 			)
 		}
 	</div>
 
-	<div class="links">
-		{
-			externalLinks.length > 0 && (
-				<div class="link-section left">
-					{externalLinks.map((link) => (
-						<a href={link.href} target="_blank" rel="noreferrer">
-							{link.label}
-						</a>
-					))}
-				</div>
-			)
-		}
+	<div class="footer">
+	    <div class="links">
+    		{
+    			externalLinks.length > 0 && (
+    				<div class="link-section left">
+    					{externalLinks.map((link) => (
+    						<a href={link.href} target="_blank" rel="noreferrer">
+    							{link.label}
+    						</a>
+    					))}
+    				</div>
+    			)
+    		}
 
-		{
-			internal && (
-				<div class="link-section right">
-					<a href={`/p/${internal}`}>read about it</a>
-				</div>
-			)
-		}
+    		{
+    			internal && (
+    				<div class="link-section right">
+    					<a href={`/p/${internal}`}>read about it</a>
+    				</div>
+    			)
+    		}
+		</div>
+		<div class="languages">
+    		{languages.map((lang) => (
+    			<span
+    				class="language"
+    				title={lang.name}
+    				style={{ "--colour": `var(--${lang.colour})` }}
+    			>
+    				{lang.name}
+    			</span>
+            ))}
+		</div>
 	</div>
 </div>
 
@@ -98,6 +103,14 @@ font-weight: 550;
 			background-color: hsla(var(--surface0) / 1);
 			color: hsl(var(--text));
 			border: 2px solid hsla(var(--colour) / 0.5);
+			user-select: none;
+
+			&:hover {
+				background-color: hsla(var(--colour) / 0.4);
+			}
+			&:active {
+				background-color: hsla(var(--colour) / 0.3);
+			}
 		}
 	}
 
@@ -105,7 +118,7 @@ .links {
 		display: flex;
 		flex-direction: row;
 		align-items: center;
-		gap: 1ch;
+		gap: 0.5rem;
 		margin-top: 1ch;
 
 		.link-section {
@@ -152,9 +165,13 @@ background-color: hsla(var(--accent) / 0.8);
 				color: hsl(var(--on-accent));
 			}
 		}
+	}
 
-		.right {
-			margin-left: auto;
-		}
+	.footer {
+	display: flex;
+	flex-direction: row;
+		gap: 1ch;
+		align-items: flex-end;
+		justify-content: space-between;
 	}
 </style>

@@ -1,14 +1,11 @@
 ---
+import LinkList from "@/components/LinkList.astro";
 import ProjectComponent from "@/components/Project.astro";
 import { LANGUAGES as LANG } from "@/constants";
 import Layout from "@/layouts/Layout.astro";
 
-import type { Project } from "@/types";
+import type { Link, Project, UsesItem } from "@/types";
 
-type Link = {
-	title: string;
-	href: string;
-};
 const links: Link[] = [
 	{
 		title: "tangled (git)",
@@ -55,6 +52,73 @@ },
 		languages: [LANG.TypeScript],
 	},
 ];
+
+const uses: UsesItem[] = [
+	{
+		title: "desktop",
+		description: "my desktop setup that is really fast (not!) and usable",
+		items: [
+			{ label: "purpose", value: "desktop" },
+			{ label: "operating system", value: "nixos 26.05" },
+			{ label: "ram", value: "16gb" },
+			{ label: "cpu", value: "intel core i5-3470" },
+			{ label: "gpu", value: "rx 6400" },
+		],
+	},
+	{
+		title: "ivy",
+		description: "my home server",
+		items: [
+			{ label: "purpose", value: "server" },
+			{ label: "operating system", value: "nixos 26.05" },
+			{ label: "model", value: "hp proliant dl360 g9" },
+			{ label: "ram", value: "48gb" },
+			{ label: "cpu", value: "intel xeon e5-2620 v4 x2" },
+		],
+	},
+	{
+		title: "phone",
+		description: "my daily driver phone",
+		items: [
+			{ label: "model", value: "pixel 9a", subtext: "google" },
+			{ label: "os", value: "android 16" },
+		],
+	},
+	{
+		title: "software",
+		description: "the software i use",
+		items: [
+			{
+				label: "theme",
+				value: "evergarden",
+				link: "https://evergarden.moe/",
+			},
+			{
+				label: "editor",
+				value: "zed",
+				link: "https://zed.dev/",
+			},
+			{
+				label: "terminal",
+				value: "foot",
+				link: "https://codeberg.org/dnkl/foot",
+			},
+			{
+				label: "browser",
+				value: "firefox",
+			},
+			{
+				label: "window manager",
+				value: "sway",
+			},
+			{
+				label: "shell",
+				value: "fish",
+				link: "https://fishshell.com/",
+			},
+		],
+	},
+];
 ---
 
 <Layout>
@@ -69,17 +133,7 @@ </p>
 	</header>
 	<section class="links">
 		<header><h2>links</h2></header>
-		<ul>
-			{
-				links.map((link) => (
-					<li>
-						<a class="link" href={link.href}>
-							{link.title}
-						</a>
-					</li>
-				))
-			}
-		</ul>
+	    <LinkList links={links} />
 	</section>
 	<section class="projects">
 		<header>

@@ -1,5 +1,11 @@
 import type { Language } from "./constants";
 
+export type UsesItem = {
+	title: string;
+	description: string;
+	items: { label: string; value: string; subtext?: string; link?: string }[];
+};
+
 export type Project = {
 	name: string;
 	description: string;
@@ -11,3 +17,8 @@ /** the link to the relevant page on this site */
 		internal?: string;
 	};
 };
+
+export type Link = {
+	title: string;
+	href: string;
+};