updates to now page and highlighted links

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

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% {

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>
+          <li>🧙‍♂️ <a href="https://ayco.io/gh">Opensourcerer</a> Wannabe</li>
-            🚀 Building <a href="https://astro-reactive.dev">Astro Reactive</a>
+          <li>🧸 <a href="https://ayco.io/gh/cozy">Cozy</a> Dev Avocado</li>
-          </li>
-          <li>🦌 Contributing to <a href="https://elk.zone">Elk</a></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);
     }

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>

src/pages/now/and-then/posts/01-19-2023.astro

@@ -1,18 +1,15 @@
 ---
-import Layout from "../../layouts/Layout.astro";
+import Layout from "../../../../layouts/Layout.astro";
-import Footer from "../../components/Footer.astro";
+import Footer from "../../../../components/Footer.astro";
-import Posts from "../../components/Posts.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."
-const posts = await Astro.glob("./and-then/posts/*.astro");
 ---
 
-<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>
+    <h1><span class="text-gradient">The Fediverse and Other Passion Projects</span></h1>
-    <em>What am I currently up to?</em>
     <p>
-      I have been living now in Amsterdam for a little over a year with my wife
+      I have been living now in Amsterdam for a little over a year with my wife and son.
-      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>

src/pages/showcase.astro

@@ -1,7 +1,7 @@
 ---
-import Layout from "../../layouts/Layout.astro";
+import Layout from "../layouts/Layout.astro";
-import Footer from "../../components/Footer.astro";
+import Footer from "../components/Footer.astro";
-import Card from "../../components/Card.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"