From 2b7650847169a2cc49e500155de1f1e92c0c6d15 Mon Sep 17 00:00:00 2001
From: Ayo <ramon.aycojr@gmail.com>
Date: Tue, 7 Feb 2023 11:17:41 +0100
Subject: [PATCH] Fun Side Projects card

---
 src/components/Posts.astro               | 20 +++++++
 src/layouts/Post.astro                   |  0
 src/pages/index.astro                    | 25 ++++----
 src/pages/now/and-then/09-20-2022.astro  | 74 ++++++++++++++++++++++++
 src/pages/{now.astro => now/index.astro} | 12 +++-
 src/pages/showcase/index.astro           | 11 +++-
 6 files changed, 125 insertions(+), 17 deletions(-)
 create mode 100644 src/components/Posts.astro
 create mode 100644 src/layouts/Post.astro
 create mode 100644 src/pages/now/and-then/09-20-2022.astro
 rename src/pages/{now.astro => now/index.astro} (84%)

diff --git a/src/components/Posts.astro b/src/components/Posts.astro
new file mode 100644
index 0000000..5408607
--- /dev/null
+++ b/src/components/Posts.astro
@@ -0,0 +1,20 @@
+---
+import Card from "./Card.astro";
+import type { AstroInstance } from "astro";
+
+export interface Props {
+  posts: AstroInstance[];
+  title: string;
+}
+const { title, posts } = Astro.props;
+const postUrls: string[] = posts.map((post) => post.url || "");
+---
+
+<h2>{title}</h2>
+{
+  postUrls
+    .filter((url) => url !== "")
+    .map((url) => (
+      <Card href={url} title={url?.replace("/now/and-then/", "")} body="" />
+    ))
+}
diff --git a/src/layouts/Post.astro b/src/layouts/Post.astro
new file mode 100644
index 0000000..e69de29
diff --git a/src/pages/index.astro b/src/pages/index.astro
index 2954999..2e7330c 100644
--- a/src/pages/index.astro
+++ b/src/pages/index.astro
@@ -24,28 +24,29 @@ import Footer from "../components/Footer.astro";
   <main>
     <section class="cards-section">
      <ul role="list" class="cards-section__grid">
+        <Card
+          href="/showcase"
+          title="Fun Side Projects"
+          body="See demos of opensource side projects I created"
+        />
+        <Card
+          href="/social"
+          title="Social"
+          body="Connect with me on various social platforms"
+        />
         <Card
           newTab={true}
           href="https://drive.google.com/file/d/1MhN8qWRJnSHM_epU9GFQL9lEsMFtHWQK/view?usp=sharing"
           title="CV / Resume"
-          body="Download and peruse my skills and experience."
+          body="Download and peruse my skills and experience"
         />
         <Card
           newTab={true}
           href="https://github.com/ayoayco"
           title="Github"
-          body="See my public projects over at Github."
-        />
-        <Card
-          href="/social"
-          title="Social"
-          body="Connect with me on various social platforms."
-        />
-        <Card
-          href="/showcase"
-          title="UI Components"
-          body="See demos of opensource components I created."
+          body="See my public projects over at Github"
         />
+
       </ul>
       <Footer />
     </section>
diff --git a/src/pages/now/and-then/09-20-2022.astro b/src/pages/now/and-then/09-20-2022.astro
new file mode 100644
index 0000000..e2c3a6f
--- /dev/null
+++ b/src/pages/now/and-then/09-20-2022.astro
@@ -0,0 +1,74 @@
+---
+import Layout from "../../../layouts/Layout.astro";
+import Footer from "../../../components/Footer.astro";
+import Back from "../../../components/Back.astro";
+---
+
+<Layout title="Now | Ayo Ayco | Software Engineer + Web Developer">
+  <main>
+    <Back url="/now" />
+    <h1><span class="text-gradient">Sep. 20, 2022</span></h1>
+    <p>
+      This year (2022) I have moved to The Netherlands with my family;
+      specifically to the northern area of Amsterdam.
+    </p>
+    <p>
+      For work, I'm busy being a consultant, doing mostly frontend development.
+    </p>
+    <p>
+      If I'm not working, I am playing games on Xbox with my kid, Kahel, or most
+      probably trying to annoy my wife, Jen, with silly jokes.
+    </p>
+    <p>
+      I have also found a renewed joy in exploring opensource projects in my
+      spare time.
+    </p>
+    <Footer />
+  </main>
+</Layout>
+
+<style>
+  h1 {
+    margin: 2rem 0;
+  }
+
+  main {
+    margin: auto;
+    padding: 1em;
+    max-width: var(--content-width);
+  }
+
+  .text-gradient {
+    font-weight: 900;
+    background-image: var(--ayo-gradient);
+    animation: pulse 4s ease-in-out infinite;
+    background-size: 500% 500%;
+    -webkit-background-clip: text;
+    -webkit-text-fill-color: transparent;
+    background-size: 100% 200%;
+    background-position-y: 100%;
+    border-radius: 0.4rem;
+  }
+
+  .highlighted-content {
+    line-height: 1.6;
+    margin: 1rem 0;
+    background: #4f39fa;
+    padding: 1rem;
+    border-radius: 0.4rem;
+    color: var(--color-bg);
+  }
+
+  .highlighted-content code {
+    font-size: 0.875em;
+    border: 0.1em solid var(--color-border);
+    border-radius: 4px;
+    padding: 0.15em 0.25em;
+  }
+
+  .link-card-grid {
+    display: grid;
+    gap: 1rem;
+    padding: 0;
+  }
+</style>
diff --git a/src/pages/now.astro b/src/pages/now/index.astro
similarity index 84%
rename from src/pages/now.astro
rename to src/pages/now/index.astro
index 2adafc1..462a209 100644
--- a/src/pages/now.astro
+++ b/src/pages/now/index.astro
@@ -1,7 +1,10 @@
 ---
-import Layout from "../layouts/Layout.astro";
-import Footer from "../components/Footer.astro";
-import Back from "../components/Back.astro";
+import Layout from "../../layouts/Layout.astro";
+import Footer from "../../components/Footer.astro";
+import Back from "../../components/Back.astro";
+import Posts from "../../components/Posts.astro";
+
+const posts = await Astro.glob("./and-then/*.astro");
 ---
 
 <Layout title="Now | Ayo Ayco | Software Engineer + Web Developer">
@@ -24,6 +27,9 @@ import Back from "../components/Back.astro";
       I have also found a renewed joy in exploring opensource projects in my
       spare time.
     </p>
+
+    <Posts posts={posts} title="...and then" />
+
     <hr />
     <em><a href="https://nownownow.com/about">About now pages</a></em>
     <Footer />
diff --git a/src/pages/showcase/index.astro b/src/pages/showcase/index.astro
index 438fc7c..ebf59ec 100644
--- a/src/pages/showcase/index.astro
+++ b/src/pages/showcase/index.astro
@@ -5,11 +5,18 @@ import Card from "../../components/Card.astro";
 import Back from "../../components/Back.astro";
 ---
 
-<Layout title="UI Components | Ayo Ayco | Software Engineer + Web Developer">
+<Layout title="Fun Side Projects | Ayo Ayco | Software Engineer + Web Developer">
   <main>
     <Back url="/" />
-    <h1>UI <span class="text-gradient">Components</span></h1>
+    <h1>Fun <span class="text-gradient">Side Projects</span></h1>
     <ul role="list">
+      <Card
+        newTab
+        href="https://kaboom.ayco.io"
+        title="Kaboom!"
+        body="A simple physics simulation with Matter.js 👨🏻‍🔬"
+      />
+
       <Card
         href="/showcase/astro-reactive-form"
         title="Astro Reactive Form"