initial semantic html

src/components/Card.astro

@@ -19,6 +19,7 @@ const { href, title, body } = Astro.props;
 		</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%);

src/components/Footer.astro

@@ -2,7 +2,6 @@
     <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>View my website's code at <a href="https://github.com/ayoayco/ayco.io-astro">Github</a></li>
         <li>Missing old content? I moved <a href="https://classic.ayco.io">my previous site</a></li>
     </ul>
 </footer>
@@ -14,5 +13,4 @@
         margin-top: 2em;
         text-align: right;
     }
-
 </style>

src/layouts/Layout.astro

@@ -24,7 +24,7 @@ import Footer from '../components/Footer.astro';
 </html>
 <style>
 	:root {
-                --content-width: 700px;
+    --content-width: 700px;
 		--font-size-base: clamp(1rem, 0.34vw + 0.91rem, 1.19rem);
 		--font-size-lg: clamp(1.2rem, 0.7vw + 1.2rem, 1.5rem);
 		--font-size-xl: clamp(2.44rem, 2.38vw + 1.85rem, 3.75rem);
@@ -32,16 +32,15 @@ import Footer from '../components/Footer.astro';
 		--color-text: hsl(12, 5%, 4%);
 		--color-bg: hsl(10, 21%, 95%);
 		--color-border: hsl(17, 24%, 90%);
-                --color-link: #416fff;
+    --color-link: #416fff;
 
-                --color-brand-blue-1: #3054bf;
+		--color-brand-blue-1: #3054bf;
-                --color-brand-blue-2: #203880;
+		--color-brand-blue-2: #203880;
-                --color-brand-blue-3: #416fff;
+		--color-brand-blue-3: #416fff;
-                --color-brand-blue-4: #101c40;
+		--color-brand-blue-4: #101c40;
-                --color-brand-blue-5: #3964e6;
+		--color-brand-blue-5: #3964e6;
 
-
+    --ayo-gradient: linear-gradient(45deg, #3054bf, #416fff);
-                --ayo-gradient: linear-gradient(45deg, #3054bf, #416fff);
 	}
 
 	html {

src/pages/index.astro

@@ -5,48 +5,49 @@ import Footer from "../components/Footer.astro";
 ---
 
 <Layout title="Ayo Ayco | Software Engineer + Web Developer">
-<main>
+    <main>
-    <div class="highlighted-section">
+        <section class="highlighted-section">
-        <div class="top-content">
+            <div class="highlighted-section__content">
-            <h1 title="Ayo Ayco | Software Engineer + Web Developer"><span class="heavy-text">Ayo</span>Ayco</h1>
+                <h1 title="Ayo Ayco | Software Engineer + Web Developer">
-            <ul role="list">
+                    <span class="heavy-text">Ayo</span>Ayco
-                <li>👨🏻‍💻 Software Extraordinaire</li>
+                </h1>
-                <li>🕵🏻‍♂️ Frontend Detective Consultant</li>
+                <ul role="list">
-                <li>📚 BS Computer Science</li>
+                    <li>👨🏻‍💻 Software Extraordinaire</li>
+                    <li>🕵🏻‍♂️ Frontend Detective Consultant</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>
+        </section>
+        <section class="cards-section">
+            <ul role="list" class="cards-section__grid">
+              <Card
+                href="https://drive.google.com/file/d/1MhN8qWRJnSHM_epU9GFQL9lEsMFtHWQK/view?usp=sharing"
+                title="CV / Resume"
+                body="Download and peruse my skills and experience."
+              />
+              <Card
+                href="https://github.com/ayoayco"
+                title="Github"
+                body="See my public projects over at Github. ❤️"
+              />
+              <Card
+                href="/social"
+                title="Social"
+                body="Explore a galaxy of my social accounts."
+              />
+              <Card
+                href="https://blog.ayco.io/"
+                title="Blog"
+                body="Read my articles on technology, productivity, and life in general."
+              />
             </ul>
-            <a href="/now" class="now-wrapper">
+            <Footer />
-                <span class="now-label">Now</span>
+        </section>
-                <span class="status">Settling in The Netherlands &rarr;</a>
+    </main>
-            </a>
-        </div>
-    </div>
-
-    <div class="main-content">
-        <ul role="list" class="link-card-grid">
-          <Card
-            href="https://drive.google.com/file/d/1MhN8qWRJnSHM_epU9GFQL9lEsMFtHWQK/view?usp=sharing"
-            title="CV / Resume"
-            body="Download and peruse my skills and experience."
-          />
-          <Card
-            href="https://github.com/ayoayco"
-            title="Github"
-            body="See my public projects over at Github. ❤️"
-          />
-          <Card
-            href="/social"
-            title="Social"
-            body="Explore a galaxy of my social accounts."
-          />
-          <Card
-            href="https://blog.ayco.io/"
-            title="Blog"
-            body="Read my articles on technology, productivity, and life in general."
-          />
-        </ul>
-        <Footer />
-    </div>
-</main>
 </Layout>
 
 <style>
@@ -60,7 +61,7 @@ import Footer from "../components/Footer.astro";
         color: white;
     }
 
-    .top-content {
+    .highlighted-section__content {
         margin: auto;
         padding: 1em;
         max-width: var(--content-width);
@@ -92,17 +93,6 @@ import Footer from "../components/Footer.astro";
         padding-right: 4px;
     }
 
-    .top-content ul {
-        list-style-type: none;
-        padding: 0;
-    }
-
-    .main-content {
-        margin: auto;
-        padding: 1em;
-        max-width: var(--content-width);
-    }
-
     .highlighted-section {
         background: var(--ayo-gradient);
         background-size: 500% 500%;
@@ -111,6 +101,12 @@ import Footer from "../components/Footer.astro";
         box-shadow: 0 8px 8px -4px lightblue;
     }
 
+    .highlighted-section__content ul {
+        list-style-type: none;
+        padding: 0;
+    }
+
+
     .highlighted-section code {
         font-size: 0.875em;
         border: 0.1em solid var(--color-border);
@@ -118,7 +114,13 @@ import Footer from "../components/Footer.astro";
         padding: 0.15em 0.25em;
     }
 
-    .link-card-grid {
+    .cards-section {
+        margin: auto;
+        padding: 1em;
+        max-width: var(--content-width);
+    }
+
+    .cards-section__grid {
         display: grid;
         grid-template-columns: repeat(auto-fit, minmax(24ch, 1fr));
         gap: 1rem;
@@ -128,7 +130,7 @@ import Footer from "../components/Footer.astro";
     @media only screen 
     and (min-device-width: 280px) 
     and (max-device-width: 653px) {
-        .top-content ul li {
+        .highlighted-section__content ul li {
             font-size: 14px;
             font-weight: bold;
         }
@@ -137,7 +139,7 @@ import Footer from "../components/Footer.astro";
     @media only screen 
     and (min-device-width: 360px) 
     and (max-device-width: 812px) {
-        .top-content ul li {
+        .highlighted-section__content ul li {
             font-size: 20px;
             font-weight: bold;
         }