diff --git a/.vscode/launch.json b/.vscode/launch.json index e368c54..b1ae944 100644 --- a/.vscode/launch.json +++ b/.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" diff --git a/astro.config.ts b/astro.config.ts index 808d0da..8e977b2 100644 --- a/astro.config.ts +++ b/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() }, }) diff --git a/deno.lock b/deno.lock index 9bac32f..b60baed 100644 --- a/deno.lock +++ b/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" ] } } diff --git a/package.json b/package.json index f4efc51..93ec3c8 100644 --- a/package.json +++ b/package.json @@ -10,6 +10,7 @@ }, "dependencies": { "astro": "^5.1.8", - "mdui": "^2.1.3" + "mdui": "^2.1.3", + "sharp": "^0.33.5" } } diff --git a/public/background.svg b/public/background.svg new file mode 100644 index 0000000..d417433 --- /dev/null +++ b/public/background.svg @@ -0,0 +1,4 @@ + + + + \ No newline at end of file diff --git a/src/components/BottomBar.astro b/src/components/BottomBar.astro new file mode 100644 index 0000000..09a21a7 --- /dev/null +++ b/src/components/BottomBar.astro @@ -0,0 +1,24 @@ +--- +import type Page from "../types/page.ts" + +const sections: Array = [ + { title: "Home", id: "home", icon: "home" }, + { title: "Projects", id: "projects", icon: "build" }, + { title: "About", id: "about", icon: "info" }, + { title: "Hire", id: "hire", icon: "person" }, +] +--- + + + { + sections.map((section) => ( + + {section.title} + + )) + } + diff --git a/src/components/Divider.astro b/src/components/Divider.astro deleted file mode 100644 index 18011d6..0000000 --- a/src/components/Divider.astro +++ /dev/null @@ -1,9 +0,0 @@ ---- -import styles from "../styles/divider.module.css" ---- - -
- - - -
diff --git a/src/components/Jumbo.astro b/src/components/Jumbo.astro deleted file mode 100644 index b85bc04..0000000 --- a/src/components/Jumbo.astro +++ /dev/null @@ -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" ---- - -
-
- Henry Hiles - - - Full Stack Web Developer and Discord Bot Developer - -
-
diff --git a/src/components/TopBar.astro b/src/components/TopBar.astro new file mode 100644 index 0000000..a81f673 --- /dev/null +++ b/src/components/TopBar.astro @@ -0,0 +1,25 @@ +--- +import "../styles/topBar.css" +import logo from "../images/logo.svg" +--- + + + +

Henry Hiles

 + + + + + + + diff --git a/src/images/certificates/ai900.png b/src/images/certificates/ai900.png new file mode 100644 index 0000000..43570d6 Binary files /dev/null and b/src/images/certificates/ai900.png differ diff --git a/src/images/certificates/az900.png b/src/images/certificates/az900.png new file mode 100644 index 0000000..91ef661 Binary files /dev/null and b/src/images/certificates/az900.png differ diff --git a/src/images/certificates/dp900.png b/src/images/certificates/dp900.png new file mode 100644 index 0000000..b75bdbd Binary files /dev/null and b/src/images/certificates/dp900.png differ diff --git a/src/images/certificates/googleCS.png b/src/images/certificates/googleCS.png new file mode 100644 index 0000000..9070480 Binary files /dev/null and b/src/images/certificates/googleCS.png differ diff --git a/src/images/certificates/metaFrontEnd.png b/src/images/certificates/metaFrontEnd.png new file mode 100644 index 0000000..a458d85 Binary files /dev/null and b/src/images/certificates/metaFrontEnd.png differ diff --git a/src/layouts/Layout.astro b/src/layouts/Layout.astro index c7912d2..ad57178 100644 --- a/src/layouts/Layout.astro +++ b/src/layouts/Layout.astro @@ -1,11 +1,12 @@ --- import "mdui/mdui.css" -import "../styles/layout.css" -import logo from "../images/logo.svg" +import TopBar from "../components/TopBar.astro" +import BottomBar from "../components/BottomBar.astro" +import "../styles/global.css" --- - + @@ -18,27 +19,18 @@ import logo from "../images/logo.svg" Henry Hiles - Home - - - Henry Hiles - - - - - - - Home - - - Item 2 - - - Contact - - + +
+ diff --git a/src/pages/index.astro b/src/pages/index.astro index 966d237..22d8da0 100644 --- a/src/pages/index.astro +++ b/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" --- - + +
+
+ Henry Hiles + Full Stack Web Developer and Discord Bot Developer +
+
+ +
+

About Me

+ +
+

+ 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{" "} + QuadraticBot 2.0, a + giveaway bot for discord. For more projects, check out{" "} + + my GitHub profile. + +

+
+ + +
+ My Github Stats + My Github Stats +
+ + + +
+ + diff --git a/src/styles/divider.module.css b/src/styles/divider.module.css deleted file mode 100644 index 18e84fd..0000000 --- a/src/styles/divider.module.css +++ /dev/null @@ -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%; -} diff --git a/src/styles/global.css b/src/styles/global.css new file mode 100644 index 0000000..5d3117b --- /dev/null +++ b/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; + } +} diff --git a/src/styles/index.css b/src/styles/index.css new file mode 100644 index 0000000..3853d60 --- /dev/null +++ b/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%; + } + } + } +} diff --git a/src/styles/jumbo.module.css b/src/styles/jumbo.module.css deleted file mode 100644 index 46a09d3..0000000 --- a/src/styles/jumbo.module.css +++ /dev/null @@ -1,14 +0,0 @@ -#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 deleted file mode 100644 index c3d04f7..0000000 --- a/src/styles/layout.css +++ /dev/null @@ -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; -} diff --git a/src/styles/topBar.css b/src/styles/topBar.css new file mode 100644 index 0000000..fa52077 --- /dev/null +++ b/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; + } +} diff --git a/src/types/page.ts b/src/types/page.ts new file mode 100644 index 0000000..1fd3b15 --- /dev/null +++ b/src/types/page.ts @@ -0,0 +1,5 @@ +export default interface Page { + title: string + id: string + icon: string +}