Compare commits

..

No commits in common. "28455cc0d70e4ff639e18ee047436a57989611f0" and "0bffc2092e8c50d0adff2c0238bd840d6b20b169" have entirely different histories.

12 changed files with 64 additions and 137 deletions

View file

@ -1,8 +0,0 @@
{
"m.homeserver": {
"base_url": "https://matrix.henryhiles.com",
"org.matrix.msc3575.proxy": {
"url": "https://matrix.henryhiles.com"
}
}
}

View file

@ -1,3 +0,0 @@
{
"m.server": "matrix.henryhiles.com:443"
}

View file

@ -1,9 +0,0 @@
{
"contacts": [
{
"matrix_id": "@quadradical:henryhiles.com",
"email_address": "henry@henryhiles.com",
"role": "m.role.admin"
}
]
}

View file

@ -24,10 +24,11 @@ const sections: Array<Page> = [
<script is:inline define:vars={{ sections }}> <script is:inline define:vars={{ sections }}>
document.addEventListener("scroll", () => document.addEventListener("scroll", () =>
sections.forEach(({ id }) => { sections.forEach(
const rect = document.getElementById(id).getBoundingClientRect() ({ id }) =>
if (rect.bottom < window.innerHeight || rect.top < 200) document.getElementById(id).getBoundingClientRect().bottom <
document.querySelector("mdui-navigation-bar").value = id window.innerHeight &&
}) (document.querySelector("mdui-navigation-bar").value = id)
)
) )
</script> </script>

View file

@ -1,17 +1,12 @@
--- ---
import "mdui/mdui.css" import "mdui/mdui.css"
import TopBar from "../components/TopBar.astro" import TopBar from "../components/TopBar.astro"
import BottomBar from "../components/BottomBar.astro"
import "../styles/global.css" import "../styles/global.css"
interface Props {
title: string
}
const { title } = Astro.props
--- ---
<!doctype html> <!doctype html>
<html lang="en" class="mdui-theme-dark" data-scroll="0"> <html lang="en" class="mdui-theme-auto" data-scroll="0">
<head> <head>
<meta charset="UTF-8" /> <meta charset="UTF-8" />
<meta name="viewport" content="width=device-width" /> <meta name="viewport" content="width=device-width" />
@ -21,12 +16,12 @@ const { title } = Astro.props
rel="stylesheet" rel="stylesheet"
/> />
<meta name="generator" content={Astro.generator} /> <meta name="generator" content={Astro.generator} />
<title>Henry Hiles - {title}</title> <title>Henry Hiles - Home</title>
</head> </head>
<body> <body>
<TopBar /> <TopBar />
<main><slot /></main> <main><slot /></main>
<slot name="navbar" /> <BottomBar />
</body> </body>
</html> </html>

View file

@ -1,18 +0,0 @@
---
import Layout from "../layouts/Layout.astro"
import "../styles/404.css"
---
<Layout title="Not Found">
<mdui-card variant="outlined">
<section>
<h2>404 - Not Found</h2>
<mdui-divider></mdui-divider>
<p>
We couldn't find that page. Please return to our <a href="/"
>home page</a
>.
</p>
</section>
</mdui-card>
</Layout>

View file

@ -12,13 +12,12 @@ import helpdesk from "../images/projects/helpdesk.jpg"
import googleCS from "../images/certificates/googleCS.png" import googleCS from "../images/certificates/googleCS.png"
import metaFrontEnd from "../images/certificates/metaFrontEnd.png" import metaFrontEnd from "../images/certificates/metaFrontEnd.png"
import ButtonLink from "../components/ButtonLink.astro" import ButtonLink from "../components/ButtonLink.astro"
import BottomBar from "../components/BottomBar.astro"
--- ---
<Layout title="Home"> <Layout>
<header id="home"> <header id="home">
<Image src={logoLong} alt="Henry Hiles" /> <Image src={logoLong} alt="Henry Hiles" />
<span>Multiplatform Flutter Developer & Front-End Web Developer</span> <span>Multiplatform Flutter Developer and Front-End Web Developer</span>
</header> </header>
<mdui-card variant="outlined"> <mdui-card variant="outlined">
<section id="about"> <section id="about">
@ -26,23 +25,14 @@ import BottomBar from "../components/BottomBar.astro"
<mdui-divider></mdui-divider> <mdui-divider></mdui-divider>
<article> <article>
<p> <p>
Hello, I'm Henry Hiles, a developer specialising in Flutter Hello, my name is Henry Hiles, a developer specializing in
and Web development. I'm proficient with Dart, Astro, Flutter, Astro, TypeScript, and Node.js. I build
Node.JS, and TypeScript. high-performance, intuitive applications with clean,
</p> efficient code and modern design principles. Always eager to
<p> learn, Ive earned certifications from Microsoft, Google,
I build high-performance, intuitive applications with clean, and Meta in cloud computing, AI, and cybersecurity. Whether
efficient code and modern design principles. I'm optimizing mobile apps or designing websites, Im
</p> passionate about delivering innovative digital solutions.
<p>
Always eager to learn, Ive earned certifications from
Microsoft, Google, and Meta in cloud computing, AI, and
cybersecurity.
</p>
<p>
Whether I'm optimising mobile apps or designing websites,
Im passionate about delivering innovative digital
solutions.
</p> </p>
</article> </article>
@ -79,7 +69,7 @@ import BottomBar from "../components/BottomBar.astro"
<h3>The new Quantarc website</h3> <h3>The new Quantarc website</h3>
<p> <p>
I developed the new website for Quantarc, a I developed the new website for Quantarc, a
UK firm that specialises in providing UK firm that specializes in providing
management solutions to both private and management solutions to both private and
public entities. public entities.
</p> </p>
@ -107,7 +97,7 @@ import BottomBar from "../components/BottomBar.astro"
development. development.
</p> </p>
</article> </article>
<aside class="double"> <aside>
<Image <Image
src={jobProcessor} src={jobProcessor}
alt="The QJobProcessor mobile app" alt="The QJobProcessor mobile app"
@ -132,7 +122,7 @@ import BottomBar from "../components/BottomBar.astro"
<article> <article>
<p> <p>
I have obtained certifications from renowned organisations I have obtained certifications from renowned organizations
such as Google, Meta, and Microsoft, spanning various such as Google, Meta, and Microsoft, spanning various
fields, including cybersecurity, artificial intelligence, fields, including cybersecurity, artificial intelligence,
Microsoft Azure cloud services, and front-end development: Microsoft Azure cloud services, and front-end development:
@ -188,17 +178,18 @@ import BottomBar from "../components/BottomBar.astro"
<article> <article>
<p> <p>
Hire me to design and develop high-performance static I am available for hire to design and develop
websites and versatile multiplatform applications. With a high-performance static websites and versatile multiplatform
focus on clean, efficient code and intuitive user applications. With a focus on clean, efficient code and
experiences, I create solutions that are not only visually intuitive user experiences, I create solutions that are not
appealing but also optimized for speed, accessibility, and only visually appealing but also optimized for speed,
seamless functionality across all devices. accessibility, and seamless functionality across all
devices.
</p> </p>
</article> </article>
<ButtonLink <ButtonLink
href={"mai" + "lto:" + "contact@henr" + "yhiles." + "com"} href={"mai" + "lto:" + "henry@henr" + "yhiles." + "com"}
> >
<mdui-icon> <mdui-icon>
<svg <svg
@ -216,9 +207,8 @@ import BottomBar from "../components/BottomBar.astro"
></path></svg ></path></svg
></mdui-icon ></mdui-icon
> >
Contact me for a quote Contact me to receive a quote
</ButtonLink> </ButtonLink>
</section> </section>
</mdui-card> </mdui-card>
<BottomBar slot="navbar" />
</Layout> </Layout>

View file

@ -1,5 +0,0 @@
body {
display: flex;
justify-content: center;
align-items: center;
}

View file

@ -3,7 +3,7 @@ button,
display: flex; display: flex;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
gap: 0.6em; gap: 0.3em;
border: 2px solid rgb(var(--primary)); border: 2px solid rgb(var(--primary));
color: white; color: white;
border-radius: 50px; border-radius: 50px;

View file

@ -31,7 +31,7 @@ body {
margin: 0; margin: 0;
background: radial-gradient( background: radial-gradient(
circle 80vw at -25vw -20vh, circle 75vw at -25vw -20vh,
var(--circle-color), var(--circle-color),
transparent transparent
), ),
@ -43,7 +43,7 @@ body {
} }
mdui-navigation-bar { mdui-navigation-bar {
background: rgba(0, 0, 0, 60%); background: transparent;
backdrop-filter: blur(5px); backdrop-filter: blur(5px);
} }
@ -54,30 +54,6 @@ main {
gap: 2em; gap: 2em;
padding: 1em; padding: 1em;
& > * > section {
display: flex;
flex-direction: column;
scroll-margin-top: 1em;
& div,
mdui-card {
display: flex;
justify-content: center;
gap: 1em;
}
gap: 0.5em;
padding: 1em 2em;
& h2 {
font-size: 2em;
}
& p {
font-size: 1.3em;
}
}
} }
mdui-divider { mdui-divider {

View file

@ -23,14 +23,31 @@ mdui-card {
} }
main > * > section { main > * > section {
display: flex;
flex-direction: column;
& div,
mdui-card {
display: flex;
justify-content: center;
gap: 1em;
}
gap: 0.5em;
padding: 1em 2em;
& h2 {
font-size: 2em;
}
& p {
font-size: 1.3em;
}
&#certificates mdui-card { &#certificates mdui-card {
padding: 1em; padding: 1em;
flex-wrap: wrap; flex-wrap: wrap;
@media (max-width: 500px) {
border: none;
}
& a { & a {
min-width: 150px; min-width: 150px;
width: 15%; width: 15%;
@ -42,14 +59,6 @@ main > * > section {
flex-direction: column; flex-direction: column;
gap: 1em; gap: 1em;
& mdui-card { & mdui-card {
@media (max-width: 500px) {
border: none;
& section {
padding: 0;
}
}
& section { & section {
margin: 1em; margin: 1em;
padding: 1em; padding: 1em;
@ -75,16 +84,20 @@ main > * > section {
& img { & img {
border-radius: var(--mdui-shape-corner-medium); border-radius: var(--mdui-shape-corner-medium);
border: 2px solid rgb(var(--primary)); border: 2px solid rgb(var(--primary));
.double > & {
width: 45%;
}
} }
} }
:nth-child(2) > & { :nth-child(2) > & {
flex-direction: row-reverse; flex-direction: row-reverse;
} }
} }
@media (max-width: 500px) {
border: none;
& section {
padding: 0;
}
}
} }
} }
@ -95,8 +108,4 @@ main > * > section {
min-width: 300px; min-width: 300px;
} }
} }
@media (max-width: 1500px) {
scroll-margin-top: 5em;
}
} }

View file

@ -6,7 +6,6 @@ mdui-top-app-bar {
box-shadow: none; box-shadow: none;
@media (max-width: 1500px) { @media (max-width: 1500px) {
background: rgba(0, 0, 0, 60%);
backdrop-filter: blur(5px); backdrop-filter: blur(5px);
} }