From cd38bf6cc3deed01a57985f2756e053277469bea Mon Sep 17 00:00:00 2001
From: Henry-Hiles <henry@henryhiles.com>
Date: Sun, 26 Jan 2025 12:17:22 +0000
Subject: [PATCH] Certifications

---
 src/components/BottomBar.astro |  1 -
 src/pages/index.astro          | 96 +++++++++++++++++++---------------
 src/styles/global.css          | 19 ++-----
 src/styles/index.css           | 34 +++++++-----
 4 files changed, 81 insertions(+), 69 deletions(-)

diff --git a/src/components/BottomBar.astro b/src/components/BottomBar.astro
index 09a21a7..2c326c1 100644
--- a/src/components/BottomBar.astro
+++ b/src/components/BottomBar.astro
@@ -4,7 +4,6 @@ import type Page from "../types/page.ts"
 const sections: Array<Page> = [
     { title: "Home", id: "home", icon: "home" },
     { title: "Projects", id: "projects", icon: "build" },
-    { title: "About", id: "about", icon: "info" },
     { title: "Hire", id: "hire", icon: "person" },
 ]
 ---
diff --git a/src/pages/index.astro b/src/pages/index.astro
index 306cec1..ca26861 100644
--- a/src/pages/index.astro
+++ b/src/pages/index.astro
@@ -3,7 +3,6 @@ import "../styles/index.css"
 import { Image } from "astro:assets"
 import Layout from "../layouts/Layout.astro"
 import logoLong from "../images/logoLong.svg"
-import logo from "../images/logo.svg"
 
 import ai900 from "../images/certificates/ai900.png"
 import az900 from "../images/certificates/az900.png"
@@ -58,47 +57,62 @@ import metaFrontEnd from "../images/certificates/metaFrontEnd.png"
                     />
                 </div>
             </a>
+        </section>
+    </mdui-card>
+    <mdui-card variant="outlined">
+        <section id="certificates">
+            <h2>Certifications</h2>
+            <mdui-divider></mdui-divider>
 
-            <!-- <div id="certificates">
-            <a
-                href="https://www.credly.com/badges/f85e1445-5fad-4954-90ce-78632749e1a7/public_url"
-                target="_blank"
-                rel="noreferrer"
-            >
-                <Image src={googleCS} alt="Google Cybersecurity Badge" />
-            </a>
-            <a
-                href="https://www.credly.com/badges/bd5a8213-4e3d-4b93-9b7d-4cbce07ef960/public_url"
-                target="_blank"
-                rel="noreferrer"
-            >
-                <Image src={az900} alt="Azure Fundamentals Badge" />
-            </a>
-            <a
-                href="https://www.credly.com/badges/1fd0fc1c-052a-4311-9938-6d38057305ce/public_url"
-                target="_blank"
-                rel="noreferrer"
-            >
-                <Image src={dp900} alt="Azure Data Fundamentals Badge" />
-            </a>
-            <a
-                href="https://www.credly.com/badges/37008ee1-69e0-44aa-82cb-33e4bdf153a8/public_url"
-                target="_blank"
-                rel="noreferrer"
-            >
-                <Image src={ai900} alt="Azure AI Fundamentals Badge" />
-            </a>
-            <a
-                href="https://www.credly.com/badges/acbec46c-7304-4bb5-8784-53fdcdc5544d/public_url"
-                target="_blank"
-                rel="noreferrer"
-            >
-                <Image
-                    src={metaFrontEnd}
-                    alt="Meta Front-End Developer Badge"
-                />
-            </a>
-        </div> -->
+            <article>
+                <p>
+                    I have obtained certifications from renowned organizations
+                    such as Google, Meta, and Microsoft, spanning various
+                    fields, including cybersecurity, artificial intelligence,
+                    Microsoft Azure cloud services, and front-end development:
+                </p>
+            </article>
+
+            <div>
+                <a
+                    href="https://www.credly.com/badges/f85e1445-5fad-4954-90ce-78632749e1a7/public_url"
+                    target="_blank"
+                    rel="noreferrer"
+                >
+                    <Image src={googleCS} alt="Google Cybersecurity Badge" />
+                </a>
+                <a
+                    href="https://www.credly.com/badges/bd5a8213-4e3d-4b93-9b7d-4cbce07ef960/public_url"
+                    target="_blank"
+                    rel="noreferrer"
+                >
+                    <Image src={az900} alt="Azure Fundamentals Badge" />
+                </a>
+                <a
+                    href="https://www.credly.com/badges/1fd0fc1c-052a-4311-9938-6d38057305ce/public_url"
+                    target="_blank"
+                    rel="noreferrer"
+                >
+                    <Image src={dp900} alt="Azure Data Fundamentals Badge" />
+                </a>
+                <a
+                    href="https://www.credly.com/badges/37008ee1-69e0-44aa-82cb-33e4bdf153a8/public_url"
+                    target="_blank"
+                    rel="noreferrer"
+                >
+                    <Image src={ai900} alt="Azure AI Fundamentals Badge" />
+                </a>
+                <a
+                    href="https://www.credly.com/badges/acbec46c-7304-4bb5-8784-53fdcdc5544d/public_url"
+                    target="_blank"
+                    rel="noreferrer"
+                >
+                    <Image
+                        src={metaFrontEnd}
+                        alt="Meta Front-End Developer Badge"
+                    />
+                </a>
+            </div>
         </section>
     </mdui-card>
 </Layout>
diff --git a/src/styles/global.css b/src/styles/global.css
index 6fe3f6c..9d87816 100644
--- a/src/styles/global.css
+++ b/src/styles/global.css
@@ -18,6 +18,7 @@ body {
     --circle-color: rgba(var(--primary), 0.8);
     --bg-color: rgb(var(--mdui-color-background));
 
+    min-height: 100vh;
     background-repeat: no-repeat;
     margin: 0;
 
@@ -35,9 +36,7 @@ body {
 
 mdui-navigation-bar {
     background: transparent;
-    :root:not([data-scroll="0"]) & {
-        backdrop-filter: blur(5px);
-    }
+    backdrop-filter: blur(5px);
 }
 
 main {
@@ -71,16 +70,6 @@ mdui-icon {
     visibility: hidden;
 }
 
-#dark {
-    display: none;
-}
-
-@media (prefers-color-scheme: dark) {
-    & #light {
-        display: none;
-    }
-
-    & #dark {
-        display: block;
-    }
+a {
+    color: rgb(var(--primary));
 }
diff --git a/src/styles/index.css b/src/styles/index.css
index fe7898f..32e1fa9 100644
--- a/src/styles/index.css
+++ b/src/styles/index.css
@@ -17,8 +17,12 @@ header {
     }
 }
 
-section {
+mdui-card {
     max-width: 1000px;
+    width: 100%;
+}
+
+section {
     display: flex;
     flex-direction: column;
 
@@ -26,7 +30,6 @@ section {
         display: flex;
         justify-content: center;
         gap: 1em;
-        flex-wrap: wrap;
     }
 
     gap: 0.5em;
@@ -40,18 +43,25 @@ section {
         font-size: 1.3em;
     }
 
-    &#about {
-        & #stats img {
+    &#certificates {
+        & div {
+            padding-top: 1em;
+            width: 100%;
+            overflow: scroll;
+            justify-content: start;
+        }
+
+        & a {
+            min-width: 200px;
+            width: 15%;
+        }
+    }
+
+    &#about #stats {
+        flex-wrap: wrap;
+        & img {
             width: 45%;
             min-width: 300px;
         }
-
-        & #certificates {
-            padding-top: 1em;
-            & a {
-                min-width: 150px;
-                width: 15%;
-            }
-        }
     }
 }