From 0abbfe90887364f448e9f08cbf46254e792c2e16 Mon Sep 17 00:00:00 2001
From: Henry-Hiles <henry@henryhiles.com>
Date: Tue, 21 Jan 2025 19:52:19 +0000
Subject: [PATCH] Further development or rewrite

---
 src/components/Divider.astro  |  9 ++++
 src/components/Jumbo.astro    | 16 ++++++++
 src/components/Welcome.astro  |  3 --
 src/images/logoLong.svg       | 77 +++++++++++++++++++++++++++++++++++
 src/layouts/Layout.astro      | 13 +++---
 src/pages/index.astro         |  6 +--
 src/styles/divider.module.css | 33 +++++++++++++++
 src/styles/jumbo.module.css   | 14 +++++++
 src/styles/layout.css         |  8 ++++
 9 files changed, 165 insertions(+), 14 deletions(-)
 create mode 100644 src/components/Divider.astro
 create mode 100644 src/components/Jumbo.astro
 delete mode 100644 src/components/Welcome.astro
 create mode 100644 src/images/logoLong.svg
 create mode 100644 src/styles/divider.module.css
 create mode 100644 src/styles/jumbo.module.css

diff --git a/src/components/Divider.astro b/src/components/Divider.astro
new file mode 100644
index 0000000..18011d6
--- /dev/null
+++ b/src/components/Divider.astro
@@ -0,0 +1,9 @@
+---
+import styles from "../styles/divider.module.css"
+---
+
+<div class={styles.container}>
+    <span class={styles.dividerIcon}>
+        <mdui-icon name="star"></mdui-icon>
+    </span>
+</div>
diff --git a/src/components/Jumbo.astro b/src/components/Jumbo.astro
new file mode 100644
index 0000000..b85bc04
--- /dev/null
+++ b/src/components/Jumbo.astro
@@ -0,0 +1,16 @@
+---
+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>
diff --git a/src/components/Welcome.astro b/src/components/Welcome.astro
deleted file mode 100644
index f23cd79..0000000
--- a/src/components/Welcome.astro
+++ /dev/null
@@ -1,3 +0,0 @@
-<label>
-    <h1 class="md-typescale-display-medium">Hello Material!</h1>
-</label>
diff --git a/src/images/logoLong.svg b/src/images/logoLong.svg
new file mode 100644
index 0000000..73984d5
--- /dev/null
+++ b/src/images/logoLong.svg
@@ -0,0 +1,77 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+   width="1300"
+   height="300"
+   viewBox="0 0 343.95833 79.375042"
+   version="1.1"
+   id="svg5"
+   inkscape:version="1.2.2 (b0a8486541, 2022-12-01)"
+   sodipodi:docname="logoLong.svg"
+   xml:space="preserve"
+   inkscape:export-filename="logoLong.png"
+   inkscape:export-xdpi="96"
+   inkscape:export-ydpi="96"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:svg="http://www.w3.org/2000/svg"><sodipodi:namedview
+     id="namedview7"
+     pagecolor="#0b0c29"
+     bordercolor="#000000"
+     borderopacity="0.25"
+     inkscape:showpageshadow="2"
+     inkscape:pageopacity="0"
+     inkscape:pagecheckerboard="0"
+     inkscape:deskcolor="#d1d1d1"
+     inkscape:document-units="mm"
+     showgrid="false"
+     inkscape:zoom="0.45254834"
+     inkscape:cx="612.08931"
+     inkscape:cy="265.16504"
+     inkscape:window-width="1904"
+     inkscape:window-height="971"
+     inkscape:window-x="35"
+     inkscape:window-y="32"
+     inkscape:window-maximized="0"
+     inkscape:current-layer="text404"
+     showguides="true" /><defs
+     id="defs2" /><g
+     inkscape:label="Layer 1"
+     inkscape:groupmode="layer"
+     id="layer1"><g
+       aria-label="❯"
+       id="text404"
+       style="font-size:53.9513px;line-height:0;font-family:PowerlineSymbols;-inkscape-font-specification:'PowerlineSymbols, Normal';text-align:center;text-anchor:middle;fill:#4e94e4;fill-opacity:1;stroke-width:0"
+       transform="matrix(0.71513712,0,0,0.71513712,29.930782,11.21462)"><g
+         id="g178"
+         transform="translate(4.2569487)"><g
+           aria-label="Henry Hiles
+"
+           transform="matrix(0.72854624,0,0,0.72854624,-56.283152,1.7186941)"
+           id="text186"
+           style="font-size:96.3615px;line-height:1;font-family:'RobotoMono Nerd Font';-inkscape-font-specification:'RobotoMono Nerd Font, Normal';white-space:pre;inline-size:1848.28;display:inline;fill:#ffffff"><path
+             d="m 141.20869,77.970657 h 7.99801 V 46.845892 h 35.75011 v 31.124765 h 7.99801 V 11.095774 h -7.99801 V 39.907863 H 149.2067 V 11.095774 h -7.99801 z"
+             id="path11" /><path
+             d="m 230.72859,78.934272 c 5.29989,0 11.08158,-1.252699 15.22512,-3.469014 l -1.73451,-5.588967 c -3.56537,1.734507 -8.09436,2.794484 -12.14155,2.794484 -10.88885,0 -17.34507,-7.227113 -17.34507,-19.272301 0,-10.503404 4.72172,-16.285094 13.20153,-16.285094 7.90164,0 12.52699,5.10716 12.52699,13.972418 h -27.07758 v 5.78169 h 33.91925 c 0.19272,-1.445422 0.38545,-4.818075 0.38545,-6.648944 0,-11.659742 -7.70892,-19.657746 -19.17594,-19.657746 -12.91244,0 -21.68134,10.117957 -21.68134,24.37946 0,14.839672 9.15434,23.994014 23.89765,23.994014 z"
+             id="path13" /><path
+             d="m 292.39994,77.970657 h 7.70892 V 47.520422 c 0,-10.310681 -6.84167,-16.959624 -17.24871,-16.959624 -6.7453,0 -13.39425,2.890845 -18.30868,7.998004 l 1.83087,4.914437 c 3.85446,-3.950822 8.96162,-6.167136 14.35786,-6.167136 7.5162,0 11.65974,4.239906 11.65974,11.756103 z m -31.70293,0 h 7.70892 v -41.05 l -2.31268,-5.396244 h -5.39624 z"
+             id="path15" /><path
+             d="m 315.33393,77.970657 h 7.70892 V 42.316901 l -1.34906,-10.792488 h -6.35986 z m 5.97441,-30.16115 c 2.69813,-5.878052 8.28709,-9.443428 14.64695,-9.443428 1.83087,0 3.56538,0.289085 5.10716,0.867254 l 1.92723,-7.130751 c -2.02359,-0.674531 -4.04718,-1.059977 -6.16713,-1.059977 -6.2635,0 -12.04519,3.372653 -15.51421,8.96162 z"
+             id="path17" /><path
+             d="m 354.74585,98.881104 h 8.19073 l 7.70892,-20.910447 18.11596,-46.446244 h -7.70892 l -15.03239,41.820892 h 2.02359 L 353.39679,31.524413 h -8.57617 l 18.30868,46.446244 z"
+             id="path19" /><path
+             d="m 419.9825,77.970657 h 7.998 V 46.845892 h 35.75012 v 31.124765 h 7.998 V 11.095774 h -7.998 V 39.907863 H 427.9805 V 11.095774 h -7.998 z"
+             id="path21" /><path
+             d="m 488.59193,77.970657 h 7.70892 V 31.524413 h -7.70892 z m 3.95082,-57.335094 c 3.46901,0 5.4926,-2.023592 5.4926,-5.492606 0,-3.469014 -2.02359,-5.4926057 -5.4926,-5.4926057 -3.46902,0 -5.49261,2.0235917 -5.49261,5.4926057 0,3.469014 2.02359,5.492606 5.49261,5.492606 z"
+             id="path23" /><path
+             d="m 522.80029,78.548826 c 2.5054,0 5.4926,-0.578169 7.32347,-1.541784 l -1.73451,-5.396244 c -1.15633,0.481808 -2.21631,0.770892 -3.37265,0.770892 -3.27629,0 -5.0108,-2.216314 -5.0108,-5.78169 V 6.7595062 h -7.70892 V 67.563615 c 0,6.648944 4.14355,10.985211 10.50341,10.985211 z"
+             id="path25" /><path
+             d="m 559.99584,78.934272 c 5.29989,0 11.08158,-1.252699 15.22512,-3.469014 l -1.73451,-5.588967 c -3.56537,1.734507 -8.09436,2.794484 -12.14155,2.794484 -10.88885,0 -17.34507,-7.227113 -17.34507,-19.272301 0,-10.503404 4.72172,-16.285094 13.20153,-16.285094 7.90164,0 12.52699,5.10716 12.52699,13.972418 h -27.07758 v 5.78169 h 33.91925 c 0.19272,-1.445422 0.38545,-4.818075 0.38545,-6.648944 0,-11.659742 -7.70892,-19.657746 -19.17594,-19.657746 -12.91244,0 -21.68134,10.117957 -21.68134,24.37946 0,14.839672 9.15434,23.994014 23.89765,23.994014 z"
+             id="path27" /><path
+             d="m 604.03302,78.934272 c 11.46702,0 18.50141,-5.396244 18.50141,-13.972418 0,-17.055986 -27.75211,-10.696127 -27.75211,-21.19953 0,-4.047184 4.33626,-6.648944 11.27429,-6.648944 3.95082,0 8.57618,0.867253 12.527,2.216314 l 1.83087,-6.263497 c -3.95082,-1.638146 -8.67254,-2.505399 -13.58698,-2.505399 -12.04518,0 -19.7541,5.299882 -19.7541,14.068779 0,16.67054 27.65575,9.732512 27.65575,21.103169 0,4.239907 -3.7581,6.648944 -10.11796,6.648944 -4.91444,0 -11.46702,-1.349061 -16.38146,-3.469014 l -1.83086,6.263498 c 5.29988,2.409037 11.7561,3.758098 17.63415,3.758098 z"
+             id="path29" /></g><path
+           d="M -8.51391,59.822301 9.1888605,32.84665 -8.51391,5.870999 H 3.3933105 L 20.779961,32.84665 3.3933105,59.822301 Z"
+           id="path1347"
+           style="fill:#4e94e4;fill-opacity:1" /></g></g></g></svg>
diff --git a/src/layouts/Layout.astro b/src/layouts/Layout.astro
index d68e267..c7912d2 100644
--- a/src/layouts/Layout.astro
+++ b/src/layouts/Layout.astro
@@ -1,6 +1,5 @@
 ---
 import "mdui/mdui.css"
-import { Image } from "astro:assets"
 import "../styles/layout.css"
 import logo from "../images/logo.svg"
 ---
@@ -16,18 +15,18 @@ import logo from "../images/logo.svg"
             rel="stylesheet"
         />
         <meta name="generator" content={Astro.generator} />
-        <title>Henry Hiles</title>
+        <title>Henry Hiles - Home</title>
     </head>
     <body>
-        <mdui-top-app-bar>
+        <mdui-top-app-bar scroll-behavior="elevate">
             <mdui-icon src={logo.src}></mdui-icon>
-            <mdui-top-app-bar-title>Title</mdui-top-app-bar-title>
-            <div style="flex-grow: 1"></div>
+            <mdui-top-app-bar-title>Henry Hiles</mdui-top-app-bar-title>
+            <spacer></spacer>
             <mdui-button-icon icon="more_vert"></mdui-button-icon>
         </mdui-top-app-bar>
         <slot />
-        <mdui-navigation-bar value={Astro.url.pathname.split("/").at(-1)}>
-            <mdui-navigation-bar-item icon="home" value="">
+        <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">
diff --git a/src/pages/index.astro b/src/pages/index.astro
index f0bdbf8..966d237 100644
--- a/src/pages/index.astro
+++ b/src/pages/index.astro
@@ -1,8 +1,6 @@
 ---
-import Welcome from "../components/Welcome.astro"
+import Jumbo from "../components/Jumbo.astro"
 import Layout from "../layouts/Layout.astro"
 ---
 
-<Layout title="Home">
-    <Welcome />
-</Layout>
+<Layout><Jumbo /></Layout>
diff --git a/src/styles/divider.module.css b/src/styles/divider.module.css
new file mode 100644
index 0000000..18e84fd
--- /dev/null
+++ b/src/styles/divider.module.css
@@ -0,0 +1,33 @@
+.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%;
+}
diff --git a/src/styles/jumbo.module.css b/src/styles/jumbo.module.css
new file mode 100644
index 0000000..46a09d3
--- /dev/null
+++ b/src/styles/jumbo.module.css
@@ -0,0 +1,14 @@
+#jumbo {
+    font-size: 2em;
+    text-align: center;
+
+    & #logoLong {
+        width: 35rem;
+        height: min-content;
+    }
+
+    & #shortAbout {
+        display: block;
+        padding: 2rem 1rem;
+    }
+}
diff --git a/src/styles/layout.css b/src/styles/layout.css
index 2507137..c3d04f7 100644
--- a/src/styles/layout.css
+++ b/src/styles/layout.css
@@ -10,11 +10,19 @@ mdui-top-app-bar {
     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;
 }