@@ -0,0 +1,2 @@
+export { default as Line } from "./line.svg";
+export { default as PondImage } from "./pond.avif";

@@ -0,0 +1,107 @@
+---
+import type { UsesCategory } from "@/types";
+
+interface Props {
+	category: UsesCategory;
+}
+
+const { category } = Astro.props;
+const { items } = category;
+---
+
+<div class="uses-category">
+    <div class="meta">
+        <h3>{category.title}</h3>
+        <p>{category.description}</p>
+    </div>
+    <div class="items">
+        {items.map((item) => (
+            <div class="item">
+                <div class="label">
+                    <h4>{item.label}</h4>
+                </div>
+                <div class="value">
+                    <p>{item.value}</p>
+                    {item.subtext && <p class="subtext">{item.subtext}</p>}
+                </div>
+            </div>
+        ))}
+    </div>
+</div>
+
+<style>
+.uses-category {
+    display: flex;
+	flex-direction: column;
+	padding: 0.5rem;
+	background-color: hsl(var(--container-bg));
+	padding-bottom: 0;
+}
+
+.meta {
+	display: flex;
+	flex-direction: column;
+
+	h3 {
+		font-weight: 700;
+		font-size: 1.2rem;
+	}
+
+	p {
+		font-size: 0.9rem;
+		color: hsl(var(--subtext1));
+		margin-bottom: 0.5rem;
+	}
+}
+
+.items {
+	display: flex;
+	flex-direction: column;
+	margin-left: -0.5rem;
+	margin-right: -0.5rem;
+}
+
+.item {
+	display: flex;
+	flex-direction: row;
+	justify-content: space-between;
+	gap: 0.5rem;
+	padding: 0.2rem 0.5rem;
+
+	background-clip: padding-box;
+	border-top: 2px solid hsla(var(--surface1) / 0.25);
+	border-bottom: 2px solid transparent;
+	margin-top: -2px;
+
+
+	.label {
+		h4 {
+			color: hsl(var(--subtext1));
+			font-weight: 500;
+		}
+	}
+
+	.value {
+		color: hsl(var(--subtext0));
+		font-weight: 400;
+		text-align: right;
+		.subtext {
+			font-size: 0.8rem;
+			color: hsla(var(--subtext0) / 0.8);
+		}
+	}
+
+	&:hover {
+		background-color: hsla(var(--surface1) / 0.3);
+		border-bottom: 2px solid hsla(var(--surface1) / 0.5);
+		border-top: 2px solid hsla(var(--surface1) / 0.5);
+
+		transition: none;
+
+		.label h4, .value p, .value .subtext {
+    		color: hsl(var(--text));
+            transition: none;
+		}
+	}
+}
+</style>

@@ -0,0 +1,3 @@
+export { default as LinkList } from "./LinkList.astro";
+export { default as ProjectCard } from "./Project.astro";
+export { default as UsesCard } from "./Uses.astro";

@@ -1,6 +1,6 @@
 ---
 import Image from "astro/components/Image.astro";
-import PondImage from "../assets/pond.avif";
+import { PondImage } from "../assets";
 
 import "../css/index.css";
 

@@ -0,0 +1,1 @@
+export { default as Layout } from "./Layout.astro";

@@ -1,10 +1,9 @@
 ---
-import LinkList from "@/components/LinkList.astro";
-import ProjectComponent from "@/components/Project.astro";
+import { LinkList, ProjectCard, UsesCard } from "@/components";
 import { LANGUAGES as LANG } from "@/constants";
-import Layout from "@/layouts/Layout.astro";
+import { Layout } from "@/layouts";
 
-import type { Link, Project, UsesItem } from "@/types";
+import type { Link, Project, UsesCategory } from "@/types";
 
 const links: Link[] = [
 	{
@@ -53,7 +52,7 @@ languages: [LANG.TypeScript],
 	},
 ];
 
-const uses: UsesItem[] = [
+const uses: UsesCategory[] = [
 	{
 		title: "desktop",
 		description: "my desktop setup that is really fast (not!) and usable",
@@ -131,19 +130,33 @@ <p class="subtitle">
 			demifem {"{rat,cat}"}girl frontend developer thing!
 		</p>
 	</header>
+
 	<section class="links">
 		<header><h2>links</h2></header>
 	    <LinkList links={links} />
 	</section>
+
 	<section class="projects">
 		<header>
 			<h2>projects</h2>
 			<p>some things that are public that i am working on!</p>
 		</header>
 		<div class="project-list">
-			{projects.map((project) => <ProjectComponent project={project} />)}
+			{projects.map((project) => <ProjectCard project={project} />)}
 		</div>
 	</section>
+
+	<section class="uses">
+    	<header>
+    		<h2>uses</h2>
+    		<p>things that i use!</p>
+    	</header>
+
+        <div class="uses-list">
+            {uses.map((category) => <UsesCard category={category} />)}
+        </div>
+	</section>
+
 </Layout>
 
 <style>
@@ -174,7 +187,8 @@ }
 		}
 	}
 
-	.projects .project-list {
+	.projects .project-list,
+	.uses .uses-list {
 		border-radius: 1.5rem;
 		overflow: hidden;
 		border: 2px solid hsla(var(--overlay0) / 0.25);
@@ -184,12 +198,18 @@ display: flex;
 		flex-direction: column;
 		background-color: hsl(var(--container-bg));
 
-		.project:first-child {
+		.project:first-child,
+		.uses-category:first-child {
 			padding-top: 0.75rem;
 		}
 
-		.project:not(:last-child) {
+		.project:not(:last-child),
+		.uses-category:not(:last-child) {
 			border-bottom: 2px solid hsla(var(--overlay0) / 0.25);
+		}
+
+		.uses-category:last-child .items.item :last-child {
+			padding-bottom: 0.75rem;
 		}
 
 		/*margin-left: -0.5rem;

@@ -1,6 +1,6 @@
 import type { Language } from "./constants";
 
-export type UsesItem = {
+export type UsesCategory = {
 	title: string;
 	description: string;
 	items: { label: string; value: string; subtext?: string; link?: string }[];