src/components/Button.astro

@@ -0,0 +1,9 @@
+---
+const {position, text, url, id} = Astro.props;
+---
+<style>
+    button, a {
+        width: 100%;
+    }
+</style>
+{url ? <a href={url}><button id={id}>{text}</button></a> : <button id={id}>{text}</button>}

src/components/ButtonCollection.astro

@@ -0,0 +1,10 @@
+<style>
+    div {
+        display: grid;
+        grid-auto-flow: column;
+        grid-auto-columns: 1fr;
+    }
+</style>
+<div class="button-collection">
+    <slot />
+</div>

src/components/MainWindow.astro

@@ -4,6 +4,9 @@ import GroupBox from "../components/GroupBox.astro";
 import Me from "../components/Me.astro";
 import Presence from "../components/Presence.astro";
 import Window from "../components/Window.astro";
+import Button from "./Button.astro";
+import ButtonCollection from "./ButtonCollection.astro";
+import Spacer from "./Spacer.astro";
 ---
 <Window title="Home" maxWidth="600px">
     <Me />
@@ -18,4 +21,11 @@ import Window from "../components/Window.astro";
     <GroupBox name="Reach out">
         <Contacts />
     </GroupBox>
+    <ButtonCollection>
+        <Button position="left" text="Projects (soon)" url="/projects"/>
+        <Spacer />
+        <Button position="left" text="Code (soon)" url="/code"/>
+        <Spacer />
+        <Button position="left" text="Blog (ETA: 100 years)" url="/code"/>
+    </ButtonCollection>
 </Window>

src/components/Spacer.astro

@@ -0,0 +1 @@
+<span />