Certifications

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" },
 ]
 ---

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,8 +57,23 @@ 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">
+            <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"
@@ -98,7 +112,7 @@ import metaFrontEnd from "../images/certificates/metaFrontEnd.png"
                         alt="Meta Front-End Developer Badge"
                     />
                 </a>
-        </div> -->
+            </div>
         </section>
     </mdui-card>
 </Layout>

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,10 +36,8 @@ body {
 
 mdui-navigation-bar {
     background: transparent;
-    :root:not([data-scroll="0"]) & {
     backdrop-filter: blur(5px);
 }
-}
 
 main {
     flex-direction: column;
@@ -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));
 }

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 {
-            width: 45%;
-            min-width: 300px;
+    &#certificates {
+        & div {
+            padding-top: 1em;
+            width: 100%;
+            overflow: scroll;
+            justify-content: start;
         }
 
-        & #certificates {
-            padding-top: 1em;
         & a {
-                min-width: 150px;
+            min-width: 200px;
             width: 15%;
         }
     }
+
+    &#about #stats {
+        flex-wrap: wrap;
+        & img {
+            width: 45%;
+            min-width: 300px;
+        }
     }
 }