projects list

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>

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>

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);
 }