content: now page; closes #6

src/pages/index.astro

@@ -10,10 +10,14 @@ import Footer from "../components/Footer.astro";
         <div class="top-content">
             <h1 title="Ayo Ayco | Software Engineer + Web Developer"><span class="heavy-text">Ayo</span>Ayco</h1>
             <ul role="list">
-              <li>👨🏻‍💻 Software Extraordinaire</li>
+                <li>👨🏻‍💻 Software Extraordinaire</li>
-              <li>🕵🏻‍♂️ Frontend Detective Consultant</li>
+                <li>🕵🏻‍♂️ Frontend Detective Consultant</li>
-              <li>📚 BS Computer Science</li>
+                <li>📚 BS Computer Science</li>
             </ul>
+            <a href="/now" class="now-wrapper">
+                <span class="now-label">Now</span>
+                <span class="status">Settling in The Netherlands &rarr;</a>
+            </a>
         </div>
     </div>
 
@@ -66,6 +70,28 @@ import Footer from "../components/Footer.astro";
         line-height: 1.6;
     }
 
+    .now-wrapper {
+        border: 1px solid rgba(255,255,255,0.2);
+        border-radius: 40px;
+        padding: 8px 4px;
+        font-weight: normal;
+        color: white;
+        font-size: small;
+        text-decoration: none;
+    }
+
+    .now-label {
+        border-radius: 40px;
+        background-color: rgba(0,0,0,0.3);
+        padding: 4px 8px;
+        text-transform: uppercase;
+        font-weight: bold;
+    }
+
+    .status {
+        padding-right: 4px;
+    }
+
     .top-content ul {
         list-style-type: none;
         padding: 0;

src/pages/now.astro

@@ -0,0 +1,71 @@
+---
+import Layout from '../layouts/Layout.astro';
+import Card from '../components/Card.astro';
+import Footer from '../components/Footer.astro';
+---
+
+<Layout title="Ayo Ayco | Software Engineer + Web Developer">
+	<main>
+            <nav><a href="/">Back</a></nav>
+            <h1><span class="text-gradient">Now</span></h1>
+						<em>What am I currently up to?</em>
+						<p>This year (2022) I have moved to The Netherlands with my family; specifically the north 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>
+						<p>So far, I'm really liking <a href="https://astro.build">astro</a></p>
+						<hr />
+						<em><a href="https://nownownow.com/about">About now pages</a></em>
+						<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;
+	}
+
+        nav {
+            margin-bottom: -1rem;
+        }
+</style>