diff --git a/flake.lock b/flake.lock
index 76d280e..e051e80 100644
--- a/flake.lock
+++ b/flake.lock
@@ -19,20 +19,20 @@
       }
     },
     "nixpkgs": {
-      "locked": {
-        "lastModified": 1717196966,
-        "narHash": "sha256-yZKhxVIKd2lsbOqYd5iDoUIwsRZFqE87smE2Vzf6Ck0=",
-        "owner": "NixOS",
-        "repo": "nixpkgs",
-        "rev": "57610d2f8f0937f39dbd72251e9614b1561942d8",
-        "type": "github"
-      },
-      "original": {
-        "owner": "NixOS",
-        "ref": "nixos-unstable",
-        "repo": "nixpkgs",
-        "type": "github"
-      }
+        "locked": {
+            "lastModified": 1712963716,
+            "narHash": "sha256-WKm9CvgCldeIVvRz87iOMi8CFVB1apJlkUT4GGvA0iM=",
+            "owner": "NixOS",
+            "repo": "nixpkgs",
+            "rev": "cfd6b5fc90b15709b780a5a1619695a88505a176",
+            "type": "github"
+        },
+        "original": {
+            "owner": "NixOS",
+            "ref": "nixos-unstable",
+            "repo": "nixpkgs",
+            "type": "github"
+        }
     },
     "root": {
       "inputs": {
diff --git a/src/components/Projects.astro b/src/components/Projects.astro
new file mode 100644
index 0000000..207c529
--- /dev/null
+++ b/src/components/Projects.astro
@@ -0,0 +1,76 @@
+---
+interface Props {
+    projects: {
+        name: string,
+        description: string,
+        date: Date,
+        dateVisual?: string,
+        links: string[]
+    }[]
+}
+
+const { projects } = Astro.props;
+
+let lastYear = 0;
+---
+
+<div>
+    {projects.sort((a, b) => b.date.getTime() - a.date.getTime()).map((project) => {
+        const isNewYear = project.date.getFullYear() !== lastYear;
+        lastYear = project.date.getFullYear();
+
+        return <>
+            {isNewYear && <div class="seperator"><span class="year">{project.date.getFullYear()}</span></div>}
+            <details>
+                <summary>
+                    <span class="name">{project.name}</span>
+                    <span class="date">{project.dateVisual || project.date.toLocaleString("default", { month: "long" })}</span>
+                </summary>
+                <div class="open">
+                    <p>{project.description}</p>
+                    <div class="links">
+                        {project.links.map((link) => {
+                            return <a target="_blank" rel="noopener" href={link}>{link}</a>;
+                        })}
+                    </div>
+                </div>
+            </details>
+        </>;
+    })}
+</div>
+<style>
+    .seperator {
+        background: linear-gradient(transparent calc(50% - 1px), #888888 calc(50%), transparent calc(50% - 1px));
+        margin: .5em 0;
+        text-align: center;
+
+        & .year {
+            background: #eeeeee;
+        }
+    }
+
+    summary {
+        display: flex;
+        flex-direction: row;
+        cursor: pointer;
+    }
+    details .open {
+        background-color: #e2e2e2;
+        padding: .5em 1em;
+        margin: .5em 0;
+    }
+
+    .name {
+        flex: 1 1 0;
+    }
+    .date {
+        flex: 0 0 auto;
+        color: #888888;
+    }
+
+    .links {
+        display: flex;
+        flex-direction: column;
+        align-items: flex-end;
+    }
+</style>
\ No newline at end of file
diff --git a/src/pages/projects.astro b/src/pages/projects.astro
index c9eb24f..066b2f2 100644
--- a/src/pages/projects.astro
+++ b/src/pages/projects.astro
@@ -2,11 +2,26 @@
 import Layout from "../layouts/Layout.astro";
 
 import Card from "../components/Card.astro";
+/* funny import/export conflict if we don't do this :( */
+import ProjectsList from "../components/Projects.astro";
 ---
 
 <Layout title="projects" description="a personal website for some computer nerd">
     <Card title="projects">
         <p>unfortunately, at the moment, i don't have too much interesting things for you to see. eventually when i get my shit together, you'll see more and more things appear on here</p>
         <p>as always, my socials and contacts are on the left or top side of the screen for you to access if you wanna poke around in my git repositories</p>
+        <ProjectsList
+            projects={[
+                {
+                    name: "reidlab.online",
+                    description: "this website!",
+                    date: new Date(2024, 6, 14),
+                    links: [
+                        "https://reidlab.online",
+                        "https://git.reidlab.online/reidlab/website"
+                    ]
+                }
+            ]}
+        />
     </Card>
 </Layout>
\ No newline at end of file
diff --git a/src/styles/main.css b/src/styles/main.css
index 2ad0fcc..19565d0 100644
--- a/src/styles/main.css
+++ b/src/styles/main.css
@@ -77,4 +77,14 @@ a {
 }
 a:hover {
     color: #005ae0;
+}
+
+summary::before {
+    font-family: monospace;
+    content: "\25ba";
+    margin-right: 0.5em;
+    color: #888888;
+}
+details[open] summary::before {
+    transform: rotate(90deg);
 }
\ No newline at end of file