New styling

.vscode/launch.json

@@ -2,7 +2,7 @@
     "version": "0.2.0",
     "configurations": [
         {
-            "command": "./node_modules/.bin/astro dev",
+            "command": "deno task dev",
             "name": "Development server",
             "request": "launch",
             "type": "node-terminal"

astro.config.ts

@@ -1,5 +1,6 @@
-import { defineConfig } from "astro/config"
+import { defineConfig, passthroughImageService } from "astro/config"
 export default defineConfig({
     trailingSlash: "never",
     build: { format: "directory" },
+    image: { service: passthroughImageService() },
 })

deno.lock

@@ -2,7 +2,8 @@
   "version": "4",
   "specifiers": {
     "npm:astro@^5.1.8": "5.1.8_vite@6.0.11_zod@3.24.1",
-    "npm:mdui@^2.1.3": "2.1.3"
+    "npm:mdui@^2.1.3": "2.1.3",
+    "npm:sharp@~0.33.5": "0.33.5"
   },
   "npm": {
     "@astrojs/compiler@2.10.3": {
@@ -2175,7 +2176,8 @@
     "packageJson": {
       "dependencies": [
         "npm:astro@^5.1.8",
-        "npm:mdui@^2.1.3"
+        "npm:mdui@^2.1.3",
+        "npm:sharp@~0.33.5"
       ]
     }
   }

package.json

@@ -10,6 +10,7 @@
     },
     "dependencies": {
         "astro": "^5.1.8",
-        "mdui": "^2.1.3"
+        "mdui": "^2.1.3",
+        "sharp": "^0.33.5"
     }
 }

public/background.svg

@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:svgjs="http://svgjs.dev/svgjs" viewBox="0 0 1422 800" width="1422" height="800"><defs><pattern id="mmmotif-pattern" width="40" height="40" patternUnits="userSpaceOnUse" patternTransform="translate(-100 -100) scale(0.4) rotate(57) skewX(10) skewY(-50)">
+    <rect width="64.4123" height="124.995" transform="matrix(0.24201 0.970274 0 1 4.41162 -64.7517)" fill="hsl(0, 0%, 10%)"></rect>
+    <rect width="64.4123" height="124.995" transform="matrix(0.24201 -0.970274 0 1 19.9995 -2.25317)" fill="#000000"></rect>
+</pattern></defs><rect width="1422" height="800" fill="url(#mmmotif-pattern)"></rect></svg>

src/components/BottomBar.astro

@@ -0,0 +1,24 @@
+---
+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" },
+]
+---
+
+<mdui-navigation-bar value="home" label-visibility="labeled">
+    {
+        sections.map((section) => (
+            <mdui-navigation-bar-item
+                icon={section.icon}
+                value={section.id}
+                href={`#${section.id}`}
+            >
+                {section.title}
+            </mdui-navigation-bar-item>
+        ))
+    }
+</mdui-navigation-bar>

src/components/Divider.astro

@@ -1,9 +0,0 @@
----
-import styles from "../styles/divider.module.css"
----
-
-<div class={styles.container}>
-    <span class={styles.dividerIcon}>
-        <mdui-icon name="star"></mdui-icon>
-    </span>
-</div>

src/components/Jumbo.astro

@@ -1,16 +0,0 @@
----
-import styles from "../styles/jumbo.module.css"
-import Divider from "./Divider.astro"
-import logoLong from "../images/logoLong.svg"
-import { Image } from "astro:assets"
----
-
-<header>
-    <section id={styles.jumbo}>
-        <Image id={styles.logoLong} src={logoLong} alt="Henry Hiles" />
-        <Divider />
-        <span id={styles.shortAbout}>
-            Full Stack Web Developer and Discord Bot Developer
-        </span>
-    </section>
-</header>

src/components/TopBar.astro

@@ -0,0 +1,25 @@
+---
+import "../styles/topBar.css"
+import logo from "../images/logo.svg"
+---
+
+<mdui-top-app-bar scroll-behavior="elevate">
+    <mdui-icon src={logo.src}></mdui-icon>
+    <mdui-top-app-bar-title><h1>Henry Hiles</h1></mdui-top-app-bar-title>
+    <spacer></spacer>
+    <mdui-button-icon
+        href="https://github.com/Henry-Hiles"
+        referrerpolicy="no-referrer"
+        target="_blank"
+    >
+        <svg
+            fill="currentColor"
+            viewBox="0 0 24 24"
+            xmlns="http://www.w3.org/2000/svg"
+        >
+            <path
+                d="M16.24 22a1 1 0 0 1-1-1v-2.6a2.15 2.15 0 0 0-.54-1.66 1 1 0 0 1 .61-1.67C17.75 14.78 20 14 20 9.77a4 4 0 0 0-.67-2.22 2.75 2.75 0 0 1-.41-2.06 3.71 3.71 0 0 0 0-1.41 7.65 7.65 0 0 0-2.09 1.09 1 1 0 0 1-.84.15 10.15 10.15 0 0 0-5.52 0 1 1 0 0 1-.84-.15 7.4 7.4 0 0 0-2.11-1.09 3.52 3.52 0 0 0 0 1.41 2.84 2.84 0 0 1-.43 2.08 4.07 4.07 0 0 0-.67 2.23c0 3.89 1.88 4.93 4.7 5.29a1 1 0 0 1 .82.66 1 1 0 0 1-.21 1 2.06 2.06 0 0 0-.55 1.56V21a1 1 0 0 1-2 0v-.57a6 6 0 0 1-5.27-2.09 3.9 3.9 0 0 0-1.16-.88 1 1 0 1 1 .5-1.94 4.93 4.93 0 0 1 2 1.36c1 1 2 1.88 3.9 1.52a3.89 3.89 0 0 1 .23-1.58c-2.06-.52-5-2-5-7a6 6 0 0 1 1-3.33.85.85 0 0 0 .13-.62 5.69 5.69 0 0 1 .33-3.21 1 1 0 0 1 .63-.57c.34-.1 1.56-.3 3.87 1.2a12.16 12.16 0 0 1 5.69 0c2.31-1.5 3.53-1.31 3.86-1.2a1 1 0 0 1 .63.57 5.71 5.71 0 0 1 .33 3.22.75.75 0 0 0 .11.57 6 6 0 0 1 1 3.34c0 5.07-2.92 6.54-5 7a4.28 4.28 0 0 1 .22 1.67V21a1 1 0 0 1-.94 1z"
+            ></path>
+        </svg>
+    </mdui-button-icon>
+</mdui-top-app-bar>

src/layouts/Layout.astro

@@ -1,11 +1,12 @@
 ---
 import "mdui/mdui.css"
-import "../styles/layout.css"
+import TopBar from "../components/TopBar.astro"
-import logo from "../images/logo.svg"
+import BottomBar from "../components/BottomBar.astro"
+import "../styles/global.css"
 ---
 
 <!doctype html>
-<html lang="en" class="mdui-theme-auto">
+<html lang="en" class="mdui-theme-auto" data-scroll="0">
     <head>
         <meta charset="UTF-8" />
         <meta name="viewport" content="width=device-width" />
@@ -18,27 +19,18 @@ import logo from "../images/logo.svg"
         <title>Henry Hiles - Home</title>
     </head>
     <body>
-        <mdui-top-app-bar scroll-behavior="elevate">
+        <TopBar />
-            <mdui-icon src={logo.src}></mdui-icon>
+        <main><slot /></main>
-            <mdui-top-app-bar-title>Henry Hiles</mdui-top-app-bar-title>
+        <BottomBar />
-            <spacer></spacer>
-            <mdui-button-icon icon="more_vert"></mdui-button-icon>
-        </mdui-top-app-bar>
-        <slot />
-        <mdui-navigation-bar value="home">
-            <mdui-navigation-bar-item icon="home" value="home">
-                Home
-            </mdui-navigation-bar-item>
-            <mdui-navigation-bar-item icon="commute" value="item-2">
-                Item 2
-            </mdui-navigation-bar-item>
-            <mdui-navigation-bar-item icon="person" value="item-3">
-                Contact
-            </mdui-navigation-bar-item>
-        </mdui-navigation-bar>
     </body>
 </html>
 
 <script>
-    import "mdui"
+    import { setColorScheme } from "mdui"
+    setColorScheme("#4e94e4")
+
+    const setScroll = () =>
+        (document.documentElement.dataset.scroll = window.scrollY.toString())
+    document.addEventListener("scroll", setScroll)
+    document.addEventListener("DOMContentLoaded", setScroll)
 </script>

src/pages/index.astro

@@ -1,6 +1,106 @@
 ---
-import Jumbo from "../components/Jumbo.astro"
+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"
+import dp900 from "../images/certificates/dp900.png"
+import googleCS from "../images/certificates/googleCS.png"
+import metaFrontEnd from "../images/certificates/metaFrontEnd.png"
 ---
 
-<Layout><Jumbo /></Layout>
+<Layout>
+    <header>
+        <section id="home">
+            <Image src={logoLong} alt="Henry Hiles" />
+            <span>Full Stack Web Developer and Discord Bot Developer</span>
+        </section>
+    </header>
+    <mdui-card variant="outlined">
+        <section id="about">
+            <h2>About Me</h2>
+            <mdui-divider></mdui-divider>
+            <article>
+                <p>
+                    Hello, my name is Henry Hiles, Full Stack Developer. I have
+                    extensive experience with React, SolidJS, Node.js, and
+                    ASP.NET Razor Pages. I have used my Node.js knowledge to
+                    create{" "}
+                    <a href="/projects/quadraticbot2.0">QuadraticBot 2.0</a>, a
+                    giveaway bot for discord. For more projects, check out{" "}
+                    <a
+                        href="https://github.com/Henry-Hiles"
+                        target="_blank"
+                        rel="noreferrer"
+                    >
+                        my GitHub profile.
+                    </a>
+                </p>
+            </article>
+
+            <a
+                href="https://github.com/Henry-Hiles"
+                target="_blank"
+                rel="noreferrer"
+                id="stats"
+            >
+                <div>
+                    <img
+                        src={`https://raw.githubusercontent.com/Henry-Hiles/github-stats/master/generated/overview.svg#gh-dark-mode-only`}
+                        alt="My Github Stats"
+                    />
+                    <img
+                        src={`https://raw.githubusercontent.com/Henry-Hiles/github-stats/master/generated/languages.svg${
+                            false ? "#gh-light-mode-only" : "#gh-dark-mode-only"
+                        }`}
+                        alt="My Github Stats"
+                    />
+                </div>
+            </a>
+
+            <!-- <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> -->
+        </section>
+    </mdui-card>
+</Layout>

src/styles/divider.module.css

@@ -1,33 +0,0 @@
-.container {
-    width: 100%;
-    display: flex;
-    justify-content: center;
-}
-
-.dividerIcon {
-    margin: 10px 0 15px;
-    position: relative;
-
-    & mdui-icon {
-        font-size: 48px;
-    }
-}
-
-.dividerIcon::before,
-.dividerIcon::after {
-    border-bottom: 0.5rem solid;
-    border-radius: 5em;
-    content: "";
-    margin: 0 1em;
-    position: absolute;
-    top: 50%;
-    width: 6rem;
-}
-
-.dividerIcon::before {
-    right: 100%;
-}
-
-.dividerIcon::after {
-    left: 100%;
-}

src/styles/global.css

@@ -0,0 +1,79 @@
+:root {
+    --primary: 78, 148, 228;
+    background-image: url(background.svg);
+    background-size: cover;
+    background-position: center;
+}
+
+[variant="outlined"] {
+    border: 3px solid rgb(var(--primary));
+}
+
+body {
+    --circle-color: rgba(var(--primary), 0.8);
+    --bg-color: rgb(var(--mdui-color-background));
+
+    background-repeat: no-repeat;
+    margin: 0;
+
+    background: radial-gradient(
+            circle 1200px at -25vw -20vh,
+            var(--circle-color),
+            transparent
+        ),
+        radial-gradient(
+            circle 1000px at 130vw 130vh,
+            var(--circle-color),
+            transparent
+        );
+}
+
+mdui-navigation-bar {
+    background: transparent;
+    :root:not([data-scroll="0"]) & {
+        backdrop-filter: blur(5px);
+    }
+}
+
+main {
+    flex-direction: column;
+    display: flex;
+    align-items: center;
+    gap: 2em;
+}
+
+mdui-divider {
+    width: 100%;
+}
+
+mdui-icon {
+    display: flex;
+}
+
+spacer {
+    flex-grow: 1;
+}
+
+img,
+mdui-icon {
+    width: 100%;
+    height: auto;
+}
+
+:not(:defined) {
+    visibility: hidden;
+}
+
+#dark {
+    display: none;
+}
+
+@media (prefers-color-scheme: dark) {
+    & #light {
+        display: none;
+    }
+
+    & #dark {
+        display: block;
+    }
+}

src/styles/index.css

@@ -0,0 +1,57 @@
+section {
+    width: 100%;
+    max-width: 1000px;
+    display: flex;
+    flex-direction: column;
+
+    & div {
+        display: flex;
+        justify-content: center;
+        gap: 1.5em;
+        flex-wrap: wrap;
+    }
+
+    gap: 0.5em;
+    padding: 1em 2em;
+
+    & h2 {
+        font-size: 2em;
+    }
+
+    & p {
+        font-size: 1.3em;
+    }
+
+    &#home {
+        font-size: 2em;
+        justify-content: center;
+        align-items: center;
+        padding-bottom: 1em;
+
+        & img {
+            max-width: 35rem;
+            height: min-content;
+        }
+
+        & span {
+            display: flex;
+            text-align: center;
+            padding: 0 0.5rem;
+        }
+    }
+
+    &#about {
+        & #stats img {
+            width: 45%;
+            min-width: 400px;
+        }
+
+        & #certificates {
+            padding-top: 1em;
+            & a {
+                min-width: 150px;
+                width: 15%;
+            }
+        }
+    }
+}

src/styles/jumbo.module.css

@@ -1,14 +0,0 @@
-#jumbo {
-    font-size: 2em;
-    text-align: center;
-
-    & #logoLong {
-        width: 35rem;
-        height: min-content;
-    }
-
-    & #shortAbout {
-        display: block;
-        padding: 2rem 1rem;
-    }
-}

src/styles/layout.css

@@ -1,28 +0,0 @@
-html,
-body {
-    margin: 0;
-    width: 100%;
-    height: 100%;
-}
-
-mdui-top-app-bar {
-    align-items: center;
-    padding-left: 1em;
-    gap: 0.2em;
-
-    & mdui-top-app-bar-title {
-        font-weight: bold;
-    }
-
-    & mdui-icon {
-        font-size: 32px;
-    }
-}
-
-spacer {
-    flex-grow: 1;
-}
-
-:not(:defined) {
-    visibility: hidden;
-}

src/styles/topBar.css

@@ -0,0 +1,22 @@
+mdui-top-app-bar {
+    align-items: center;
+    padding: 0 1em;
+    gap: 0.2em;
+    background: transparent;
+    box-shadow: none;
+
+    & mdui-icon {
+        border: 2px solid rgb(var(--primary));
+        width: 1.5em;
+        border-radius: 100%;
+    }
+
+    & mdui-button-icon {
+        width: 1.3em;
+        color: rgb(var(--primary)) !important;
+    }
+
+    & h1 {
+        font-size: inherit;
+    }
+}

src/types/page.ts

@@ -0,0 +1,5 @@
+export default interface Page {
+    title: string
+    id: string
+    icon: string
+}