From d344350285912ff7df3408a52c8f85c877a2ce7e Mon Sep 17 00:00:00 2001
From: Ayo <ramon.aycojr@gmail.com>
Date: Sat, 3 Jun 2023 01:03:19 +0200
Subject: [PATCH] updates to now page and highlighted links

---
 src/components/Nav.astro                      |  3 +-
 src/layouts/Layout.astro                      |  8 +--
 src/pages/index.astro                         | 29 +++-----
 src/pages/now.astro                           | 71 +++++++++++++++++++
 .../posts/01-19-2023.astro}                   | 20 ++----
 .../{showcase/index.astro => showcase.astro}  | 13 +++-
 6 files changed, 103 insertions(+), 41 deletions(-)
 create mode 100644 src/pages/now.astro
 rename src/pages/now/{index.astro => and-then/posts/01-19-2023.astro} (80%)
 rename src/pages/{showcase/index.astro => showcase.astro} (72%)

diff --git a/src/components/Nav.astro b/src/components/Nav.astro
index be5f8b2..4d66256 100644
--- a/src/components/Nav.astro
+++ b/src/components/Nav.astro
@@ -3,6 +3,7 @@ import Icon from "astro-icon";
 export type Link = {
   url: string;
   icon: string;
+  text?: string;
 };
 
 export interface Props {
@@ -26,7 +27,7 @@ if (Astro.url.pathname !== "/") {
           .filter((link) => link.url !== "")
           .map((link) => (
             <a href={link.url}>
-              <Icon pack="mdi" name={link.icon} /> {link.icon}
+              <Icon pack="mdi" name={link.icon} /> {link.text ?? link.icon}
             </a>
           ))
       }
diff --git a/src/layouts/Layout.astro b/src/layouts/Layout.astro
index d86be48..407e2f9 100644
--- a/src/layouts/Layout.astro
+++ b/src/layouts/Layout.astro
@@ -19,7 +19,7 @@ const links: Link[] = [
     icon: "mastodon",
   },
   {
-    url: "https://ayco.io/github",
+    url: "https://ayco.io/gh",
     icon: "github",
   },
 ];
@@ -56,17 +56,13 @@ const links: Link[] = [
         --ayo-gradient: linear-gradient(45deg, #3054bf, #416fff);
       }
 
-      html {
+      html, body, * {
         font-family: system-ui, sans-serif;
         font-size: var(--font-size-base);
         color: var(--color-text);
         background-color: var(--color-bg);
       }
 
-      body {
-        margin: 0;
-      }
-
       @keyframes pulse {
         0%,
         100% {
diff --git a/src/pages/index.astro b/src/pages/index.astro
index 9adc029..dcf2b6f 100644
--- a/src/pages/index.astro
+++ b/src/pages/index.astro
@@ -20,14 +20,12 @@ import Footer from "../components/Footer.astro";
         <ul role="list">
           <li>👨🏻‍💻 Software Extraordinaire</li>
           <li>🕵🏻‍♂️ Frontend Detective</li>
-          <li>
-            🚀 Building <a href="https://astro-reactive.dev">Astro Reactive</a>
-          </li>
-          <li>🦌 Contributing to <a href="https://elk.zone">Elk</a></li>
+          <li>🧙‍♂️ <a href="https://ayco.io/gh">Opensourcerer</a> Wannabe</li>
+          <li>🧸 <a href="https://ayco.io/gh/cozy">Cozy</a> Dev Avocado</li>
         </ul>
         <a href="/now" class="now-wrapper">
           <span class="now-label">Now</span>
-          <span class="status">The Fediverse and Other Passion Projects</span>
+          <span class="status">Building a Cozy Web without borders...</span>
         </a>
       </div>
     </div>
@@ -40,23 +38,12 @@ import Footer from "../components/Footer.astro";
           title="Fun Side Projects"
           body="See demos of opensource side projects I created"
         />
-        <Card
-          href="/social"
-          title="Social Links"
-          body="Connect with me on various social platforms"
-        />
         <Card
           newTab={true}
           href="/cv"
           title="CV / Resume"
           body="Download and peruse my skills and experience"
         />
-        <Card
-          newTab={true}
-          href="/github"
-          title="Github"
-          body="See my public projects over at Github"
-        />
       </ul>
       <Footer />
     </section>
@@ -110,7 +97,7 @@ import Footer from "../components/Footer.astro";
 
   .highlighted-section__content {
     margin: auto;
-    padding: 1em;
+    padding: 1em 0;
     max-width: var(--content-width);
     font-weight: normal;
     font-size: var(--font-size-lg);
@@ -120,7 +107,7 @@ import Footer from "../components/Footer.astro";
   .highlighted-section__content__profile-picture {
     float: right;
     width: 20%;
-    margin: 20px 0 0;
+    margin: 1em 1em 0 0;
     border: 1px solid var(--color-brand-blue-1);
     display: block;
     border-radius: 50%;
@@ -184,6 +171,9 @@ import Footer from "../components/Footer.astro";
   }
 
   @media only screen and (min-device-width: 280px) and (max-device-width: 653px) {
+    .highlighted-section__content {
+      padding: 1em;
+    }
     .highlighted-section__content__profile-picture {
       float: none;
       margin: 0;
@@ -195,6 +185,9 @@ import Footer from "../components/Footer.astro";
   }
 
   @media only screen and (min-device-width: 360px) and (max-device-width: 812px) {
+    .highlighted-section__content {
+      padding: 1em;
+    }
     .highlighted-section__content ul li {
       font-size: var(--font-size-base);
     }
diff --git a/src/pages/now.astro b/src/pages/now.astro
new file mode 100644
index 0000000..48862e3
--- /dev/null
+++ b/src/pages/now.astro
@@ -0,0 +1,71 @@
+---
+import Layout from "../layouts/Layout.astro";
+import Footer from "../components/Footer.astro";
+import Posts from "../components/Posts.astro";
+
+const posts = await Astro.glob("./now/and-then/posts/*.astro");
+---
+
+<Layout title="Now" description="What is Ayo Ayco currently up to?">
+  <main>
+    <h1><span class="text-gradient">Now</span></h1>
+    <em>What am I currently up to?</em>
+    <p>
+      Recently started a new project that aims to be a modern-day reading assistant, called <a href="https://ayco.io/gh/cozy">Cozy 🧸</a>.
+    </p>
+    <p>
+      The full motivation as of the moment, I've written on <a href="https://ayos.blog/building-a-cozy-web/">my blog</a>. 
+    </p>
+    <p>
+      Also started exploring ways to interact on the web without being confined on a centralized solution that big tech companies have lured us into.
+    </p>
+    <p>
+      I mean protocols that allow websites and people to exchange messages with each other without borders, like <a href="https://www.w3.org/TR/webmention/">webmention</a>, <a href="https://www.w3.org/TR/activitypub/">activitypub</a>, and the likes.
+    </p>
+    <Posts posts={posts} title="Previously..." />
+    <hr />
+    <em><a href="https://nownownow.com/about">About now pages</a></em>
+    <Footer />
+  </main>
+</Layout>
+
+<style>
+  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 {
+    margin: 1rem 0;
+    background: #4f39fa;
+    padding: 1rem;
+    border-radius: 0.4rem;
+    color: var(--color-bg);
+  }
+
+  .highlighted-content code {
+    font-size: var(--font-size-base);
+    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/index.astro b/src/pages/now/and-then/posts/01-19-2023.astro
similarity index 80%
rename from src/pages/now/index.astro
rename to src/pages/now/and-then/posts/01-19-2023.astro
index 3a723b5..f6efaf4 100644
--- a/src/pages/now/index.astro
+++ b/src/pages/now/and-then/posts/01-19-2023.astro
@@ -1,18 +1,15 @@
 ---
-import Layout from "../../layouts/Layout.astro";
-import Footer from "../../components/Footer.astro";
-import Posts from "../../components/Posts.astro";
-
-const posts = await Astro.glob("./and-then/posts/*.astro");
+import Layout from "../../../../layouts/Layout.astro";
+import Footer from "../../../../components/Footer.astro";
+const title = "The Fediverse and Other Passion Projects";
+const description = "I have been living now in Amsterdam for a little over a year with my wife and son."
 ---
 
-<Layout title="Now" description="What is Ayo Ayco currently up to?">
+<Layout title={title} description={description}>
   <main>
-    <h1><span class="text-gradient">Now</span></h1>
-    <em>What am I currently up to?</em>
+    <h1><span class="text-gradient">The Fediverse and Other Passion Projects</span></h1>
     <p>
-      I have been living now in Amsterdam for a little over a year with my wife
-      and son.
+      I have been living now in Amsterdam for a little over a year with my wife and son.
     </p>
     <p>
       I am employed as a frontend web developer by <a
@@ -43,9 +40,6 @@ const posts = await Astro.glob("./and-then/posts/*.astro");
         >Kaboom!</a
       >
     </p>
-    <Posts posts={posts} title="Previously..." />
-    <hr />
-    <em><a href="https://nownownow.com/about">About now pages</a></em>
     <Footer />
   </main>
 </Layout>
diff --git a/src/pages/showcase/index.astro b/src/pages/showcase.astro
similarity index 72%
rename from src/pages/showcase/index.astro
rename to src/pages/showcase.astro
index 0a3b79d..d0e915c 100644
--- a/src/pages/showcase/index.astro
+++ b/src/pages/showcase.astro
@@ -1,7 +1,7 @@
 ---
-import Layout from "../../layouts/Layout.astro";
-import Footer from "../../components/Footer.astro";
-import Card from "../../components/Card.astro";
+import Layout from "../layouts/Layout.astro";
+import Footer from "../components/Footer.astro";
+import Card from "../components/Card.astro";
 ---
 
 <Layout
@@ -10,7 +10,14 @@ import Card from "../../components/Card.astro";
 >
   <main>
     <h1>Fun <span class="text-gradient">Side Projects</span></h1>
+    <p>See more of my previous projects at <a href="https://ayos.blog/projects">my blog</a>.</p>
     <ul role="list">
+      <Card
+        newTab
+        href="https://cozy-reader.netlify.app"
+        title="Cozy 🧸"
+        body="Your modern-day reading assistant"
+      />
       <Card
         newTab
         href="https://kaboom.ayco.io"