From c10dacfb5f588075f469670e64e007ccc832a50a Mon Sep 17 00:00:00 2001
From: Ayo <ramon.aycojr@gmail.com>
Date: Mon, 26 Sep 2022 10:49:41 +0200
Subject: [PATCH] chore: code formatting clean up

---
 src/components/Back.astro   |   5 +-
 src/components/Card.astro   | 125 ++++++++++++++++++------------------
 src/components/Footer.astro |  25 ++++----
 src/pages/now.astro         | 119 ++++++++++++++++++----------------
 src/pages/social.astro      |  95 ++++++++++++++-------------
 5 files changed, 192 insertions(+), 177 deletions(-)

diff --git a/src/components/Back.astro b/src/components/Back.astro
index 363e9ef..3aaf66a 100644
--- a/src/components/Back.astro
+++ b/src/components/Back.astro
@@ -1,11 +1,12 @@
 ---
-const {url}= Astro.props;
+const { url } = Astro.props;
 ---
+
 <nav><a href={url}>&larr; Back</a></nav>
 
 <style>
   nav {
-      margin-bottom: -1rem;
+    margin-bottom: -1rem;
   }
 
   nav a {
diff --git a/src/components/Card.astro b/src/components/Card.astro
index 34a2aa2..33a0497 100644
--- a/src/components/Card.astro
+++ b/src/components/Card.astro
@@ -1,83 +1,86 @@
 ---
 export interface Props {
-	title: string;
-	body: string;
-	href: string;
+  title: string;
+  body: string;
+  href: string;
 }
 
 const { href, title, body } = Astro.props;
 ---
 
 <li class="link-card">
-	<a href={href}>
-		<h2>
-			{title}
-			<span>&rarr;</span>
-		</h2>
-		<p>
-			{body}
-		</p>
-	</a>
+  <a href={href}>
+    <h2>
+      {title}
+      <span>&rarr;</span>
+    </h2>
+    <p>
+      {body}
+    </p>
+  </a>
 </li>
 
 <style>
-	:root {
-		--link-gradient: linear-gradient(45deg, var(--color-brand-blue-1), var(--color-brand-blue-3) 30%, var(--color-border) 60%);
-	}
+  :root {
+    --link-gradient: linear-gradient(
+      45deg,
+      var(--color-brand-blue-1),
+      var(--color-brand-blue-3) 30%,
+      var(--color-border) 60%
+    );
+  }
 
-	.link-card {
-		list-style: none;
-		display: flex;
-		padding: 0.15rem;
-		background-image: var(--link-gradient);
-		background-size: 400%;
-		border-radius: 0.5rem;
-		background-position: 100%;
-		transition: background-position 0.6s cubic-bezier(0.22, 1, 0.36, 1);
-	}
+  .link-card {
+    list-style: none;
+    display: flex;
+    padding: 0.15rem;
+    background-image: var(--link-gradient);
+    background-size: 400%;
+    border-radius: 0.5rem;
+    background-position: 100%;
+    transition: background-position 0.6s cubic-bezier(0.22, 1, 0.36, 1);
+  }
 
-	.link-card > a {
-		width: 100%;
-		text-decoration: none;
-		line-height: 1.4;
-		padding: 1em 1.3em;
-		border-radius: 0.35rem;
-		color: var(--text-color);
-		background-color: white;
-		opacity: 0.8;
-	}
+  .link-card > a {
+    width: 100%;
+    text-decoration: none;
+    line-height: 1.4;
+    padding: 1em 1.3em;
+    border-radius: 0.35rem;
+    color: var(--text-color);
+    background-color: white;
+    opacity: 0.8;
+  }
 
-	h2 {
-		margin: 0;
-		transition: color 0.6s cubic-bezier(0.22, 1, 0.36, 1);
-	}
+  h2 {
+    margin: 0;
+    transition: color 0.6s cubic-bezier(0.22, 1, 0.36, 1);
+  }
 
-	p {
-                font-weight: normal;
-		margin-top: 0.75rem;
-		margin-bottom: 0;
-	}
+  p {
+    font-weight: normal;
+    margin-top: 0.75rem;
+    margin-bottom: 0;
+  }
 
-	h2 span {
-		display: inline-block;
-		transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1);
-	}
+  h2 span {
+    display: inline-block;
+    transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1);
+  }
 
-	.link-card:is(:hover, :focus-within) {
-		background-position: 0;
-	}
+  .link-card:is(:hover, :focus-within) {
+    background-position: 0;
+  }
 
-	.link-card:is(:hover, :focus-within) h2 {
-/*
+  .link-card:is(:hover, :focus-within) h2 {
+    /*
 		color: #4f39fa;
 */
-		color: var(--color-brand-blue-2);
-	}
-
-	.link-card:is(:hover, :focus-within) h2 span {
-		will-change: transform;
-		transform: translateX(2px);
-	}
-
+    color: var(--color-brand-blue-2);
+  }
 
+  .link-card:is(:hover, :focus-within) h2 span {
+    will-change: transform;
+    transform: translateX(2px);
+  }
 </style>
diff --git a/src/components/Footer.astro b/src/components/Footer.astro
index 5491ebe..8ca72e9 100644
--- a/src/components/Footer.astro
+++ b/src/components/Footer.astro
@@ -1,16 +1,19 @@
 <footer>
-    <ul role="list" style="list-style:none">
-        <li>2022 &#169; <strong>Ayo Ayco</strong>. All Rights Reserved</li>
-        <li><strong>Ayo Ayco</strong> | Software Engineer + Web Developer</li>
-        <li>Missing old content? I moved <a href="https://classic.ayco.io">my previous site</a></li>
-    </ul>
+  <ul role="list" style="list-style:none">
+    <li>2022 &#169; <strong>Ayo Ayco</strong>. All Rights Reserved</li>
+    <li><strong>Ayo Ayco</strong> | Software Engineer + Web Developer</li>
+    <li>
+      Missing old content? I moved <a href="https://classic.ayco.io"
+        >my previous site</a>
+    </li>
+  </ul>
 </footer>
 
 <style>
-    footer {
-        color: #888;
-        font-size: small;
-        margin-top: 2em;
-        text-align: right;
-    }
+  footer {
+    color: #888;
+    font-size: small;
+    margin-top: 2em;
+    text-align: right;
+  }
 </style>
diff --git a/src/pages/now.astro b/src/pages/now.astro
index d245ce7..fa35b23 100644
--- a/src/pages/now.astro
+++ b/src/pages/now.astro
@@ -1,68 +1,77 @@
 ---
-import Layout from '../layouts/Layout.astro';
-import Card from '../components/Card.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";
 ---
 
 <Layout title="Ayo Ayco | Software Engineer + Web Developer">
-	<main>
-		<Back url="/" />
-            <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 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>
-						<hr />
-						<em><a href="https://nownownow.com/about">About now pages</a></em>
-						<Footer />
-        </main>
+  <main>
+    <Back url="/" />
+    <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 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>
+    <hr />
+    <em><a href="https://nownownow.com/about">About now pages</a></em>
+    <Footer />
+  </main>
 </Layout>
 
 <style>
-	h1 {
-		margin: 2rem 0;
-	}
+  h1 {
+    margin: 2rem 0;
+  }
 
-	main {
-		margin: auto;
-		padding: 1em;
-		max-width: var(--content-width);
-	}
+  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;
-	}
+  .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 {
+    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;
-	}
+  .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/social.astro b/src/pages/social.astro
index a3b4f00..5ba5061 100644
--- a/src/pages/social.astro
+++ b/src/pages/social.astro
@@ -1,60 +1,59 @@
 ---
-import Layout from '../layouts/Layout.astro';
-import Card from '../components/Card.astro';
-import Footer from '../components/Footer.astro';
-import Back from '../components/Back.astro';
+import Layout from "../layouts/Layout.astro";
+import Card from "../components/Card.astro";
+import Footer from "../components/Footer.astro";
+import Back from "../components/Back.astro";
 ---
 
 <Layout title="Ayo Ayco | Software Engineer + Web Developer">
-	<main>
+  <main>
     <Back url="/" />
-			<h1>Social <span class="text-gradient">Links</span></h1>
-			<ul role="list" class="link-card-grid">
-					<Card
-									href="https://twitter.com/ayoayco/"
-									title="Twitter"
-									body="Tweets about my takes on technology and current events"
-					/>
-					<Card
-									href="https://www.linkedin.com/in/ayoayco/"
-									title="LinkedIn"
-									body="Connect with me and my professional network"
-					/>
-					<Card
-									href="https://soundcloud.com/ayoayco/"
-									title="SoundCloud"
-									body="Some music I made as a hobby"
-					/>
-			</ul>
-			<Footer />
-	</main>
+    <h1>Social <span class="text-gradient">Links</span></h1>
+    <ul role="list" class="link-card-grid">
+      <Card
+        href="https://twitter.com/ayoayco/"
+        title="Twitter"
+        body="Tweets about my takes on technology and current events"
+      />
+      <Card
+        href="https://www.linkedin.com/in/ayoayco/"
+        title="LinkedIn"
+        body="Connect with me and my professional network"
+      />
+      <Card
+        href="https://soundcloud.com/ayoayco/"
+        title="SoundCloud"
+        body="Some music I made as a hobby"
+      />
+    </ul>
+    <Footer />
+  </main>
 </Layout>
 
 <style>
-	h1 {
-		margin: 2rem 0;
-	}
+  h1 {
+    margin: 2rem 0;
+  }
 
-	.highlighted-content {
-		line-height: 1.6;
-		margin: 1rem 0;
-		background: #4f39fa;
-		padding: 1rem;
-		border-radius: 0.4rem;
-		color: var(--color-bg);
-	}
+  .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;
-	}
+  .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>