New styling
This commit is contained in:
parent
0abbfe9088
commit
b26079146c
23 changed files with 341 additions and 129 deletions
2
.vscode/launch.json
vendored
2
.vscode/launch.json
vendored
|
|
@ -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"
|
||||
|
|
|
|||
|
|
@ -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() },
|
||||
})
|
||||
|
|
|
|||
6
deno.lock
generated
6
deno.lock
generated
|
|
@ -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"
|
||||
]
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -10,6 +10,7 @@
|
|||
},
|
||||
"dependencies": {
|
||||
"astro": "^5.1.8",
|
||||
"mdui": "^2.1.3"
|
||||
"mdui": "^2.1.3",
|
||||
"sharp": "^0.33.5"
|
||||
}
|
||||
}
|
||||
|
|
|
|||
4
public/background.svg
Normal file
4
public/background.svg
Normal file
|
|
@ -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>
|
||||
|
After Width: | Height: | Size: 704 B |
24
src/components/BottomBar.astro
Normal file
24
src/components/BottomBar.astro
Normal file
|
|
@ -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>
|
||||
|
|
@ -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>
|
||||
|
|
@ -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>
|
||||
25
src/components/TopBar.astro
Normal file
25
src/components/TopBar.astro
Normal file
|
|
@ -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>
|
||||
BIN
src/images/certificates/ai900.png
Normal file
BIN
src/images/certificates/ai900.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 29 KiB |
BIN
src/images/certificates/az900.png
Normal file
BIN
src/images/certificates/az900.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 28 KiB |
BIN
src/images/certificates/dp900.png
Normal file
BIN
src/images/certificates/dp900.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 31 KiB |
BIN
src/images/certificates/googleCS.png
Normal file
BIN
src/images/certificates/googleCS.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 423 KiB |
BIN
src/images/certificates/metaFrontEnd.png
Normal file
BIN
src/images/certificates/metaFrontEnd.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 27 KiB |
|
|
@ -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"
|
||||
---
|
||||
|
||||
<!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">
|
||||
<mdui-icon src={logo.src}></mdui-icon>
|
||||
<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="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>
|
||||
<TopBar />
|
||||
<main><slot /></main>
|
||||
<BottomBar />
|
||||
</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>
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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%;
|
||||
}
|
||||
79
src/styles/global.css
Normal file
79
src/styles/global.css
Normal file
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
57
src/styles/index.css
Normal file
57
src/styles/index.css
Normal file
|
|
@ -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%;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -1,14 +0,0 @@
|
|||
#jumbo {
|
||||
font-size: 2em;
|
||||
text-align: center;
|
||||
|
||||
& #logoLong {
|
||||
width: 35rem;
|
||||
height: min-content;
|
||||
}
|
||||
|
||||
& #shortAbout {
|
||||
display: block;
|
||||
padding: 2rem 1rem;
|
||||
}
|
||||
}
|
||||
|
|
@ -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;
|
||||
}
|
||||
22
src/styles/topBar.css
Normal file
22
src/styles/topBar.css
Normal file
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
5
src/types/page.ts
Normal file
5
src/types/page.ts
Normal file
|
|
@ -0,0 +1,5 @@
|
|||
export default interface Page {
|
||||
title: string
|
||||
id: string
|
||||
icon: string
|
||||
}
|
||||
Loading…
Add table
Reference in a new issue