federated-nexus/website
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Compare commits

base: federated-nexus:0bffc2092e8c50d0adff2c0238bd840d6b20b169
Branches Tags
federated-nexus:main
...
compare: federated-nexus:28455cc0d70e4ff639e18ee047436a57989611f0
Branches Tags
federated-nexus:main

10 commits
0bffc2092e ... 28455cc0d7

Author SHA1 Message Date
Henry-Hiles
28455cc0d7
404 page
Some checks are pending
Deploy to Pages / Build (push) Waiting to run
Details
Deploy to Pages / Deploy (push) Blocked by required conditions
Details
2025-03-31 17:44:05 -04:00
Henry-Hiles
07b8d13251
Add well known back 2025-03-31 13:15:54 -04:00
Henry-Hiles
bff59baa04
Fix active issue 2025-03-30 22:21:11 -04:00
Henry-Hiles
8936dc45be
Fix scroll issue 2025-03-30 22:18:50 -04:00
Henry-Hiles
93ffa4a316
Fix spelling 2025-03-30 22:10:47 -04:00
Henry-Hiles
eb0a5eb8de
Make bars darker 2025-03-30 22:06:28 -04:00
Henry-Hiles
9f50bf786c
Add a background, to enhance readability 2025-03-30 22:01:29 -04:00
Henry-Hiles
f4374de263
Fix ui/ux issues 2025-03-30 21:55:33 -04:00
Henry-Hiles
fea905dbf3
Various fixes 2025-03-30 21:44:28 -04:00
Henry-Hiles
e0bb894fb8
Remove light mode 2025-03-30 21:40:03 -04:00
12 changed files with 137 additions and 64 deletions
Download patch file Download diff file Expand all files Collapse all files

8
public/.well-known/matrix/client Normal file
View file

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

3
public/.well-known/matrix/server Normal file
View file

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

9
public/.well-known/matrix/support Normal file
View file

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

11
src/components/BottomBar.astro
View file

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

13
src/layouts/Layout.astro
View file

@ -1,12 +1,17 @@
--- ---
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-auto" data-scroll="0"> <html lang="en" class="mdui-theme-dark" 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" />
@ -16,12 +21,12 @@ import "../styles/global.css"
rel="stylesheet" rel="stylesheet"
/> />
<meta name="generator" content={Astro.generator} /> <meta name="generator" content={Astro.generator} />
<title>Henry Hiles - Home</title> <title>Henry Hiles - {title}</title>
</head> </head>
<body> <body>
<TopBar /> <TopBar />
<main><slot /></main> <main><slot /></main>
<BottomBar /> <slot name="navbar" />
</body> </body>
</html> </html>

18
src/pages/404.astro Normal file
View file

@ -0,0 +1,18 @@
---
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>

54
src/pages/index.astro
View file

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

5
src/styles/404.css Normal file
View file

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

2
src/styles/button.css
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.3em; gap: 0.6em;
border: 2px solid rgb(var(--primary)); border: 2px solid rgb(var(--primary));
color: white; color: white;
border-radius: 50px; border-radius: 50px;

28
src/styles/global.css
View file

@ -31,7 +31,7 @@ body {
margin: 0; margin: 0;
background: radial-gradient( background: radial-gradient(
circle 75vw at -25vw -20vh, circle 80vw at -25vw -20vh,
var(--circle-color), var(--circle-color),
transparent transparent
), ),
@ -43,7 +43,7 @@ body {
} }
mdui-navigation-bar { mdui-navigation-bar {
background: transparent; background: rgba(0, 0, 0, 60%);
backdrop-filter: blur(5px); backdrop-filter: blur(5px);
} }
@ -54,6 +54,30 @@ 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 {

49
src/styles/index.css
View file

@ -23,31 +23,14 @@ 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%;
@ -59,6 +42,14 @@ 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;
@ -84,20 +75,16 @@ 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;
}
}
} }
} }
@ -108,4 +95,8 @@ main > * > section {
min-width: 300px; min-width: 300px;
} }
} }
@media (max-width: 1500px) {
scroll-margin-top: 5em;
}
} }

1
src/styles/topBar.css
View file

@ -6,6 +6,7 @@ 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);
} }