Compare commits
10 commits
0bffc2092e
...
28455cc0d7
Author | SHA1 | Date | |
---|---|---|---|
28455cc0d7 | |||
07b8d13251 | |||
bff59baa04 | |||
8936dc45be | |||
93ffa4a316 | |||
eb0a5eb8de | |||
9f50bf786c | |||
f4374de263 | |||
fea905dbf3 | |||
e0bb894fb8 |
12 changed files with 137 additions and 64 deletions
8
public/.well-known/matrix/client
Normal file
8
public/.well-known/matrix/client
Normal 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
3
public/.well-known/matrix/server
Normal file
|
@ -0,0 +1,3 @@
|
|||
{
|
||||
"m.server": "matrix.henryhiles.com:443"
|
||||
}
|
9
public/.well-known/matrix/support
Normal file
9
public/.well-known/matrix/support
Normal file
|
@ -0,0 +1,9 @@
|
|||
{
|
||||
"contacts": [
|
||||
{
|
||||
"matrix_id": "@quadradical:henryhiles.com",
|
||||
"email_address": "henry@henryhiles.com",
|
||||
"role": "m.role.admin"
|
||||
}
|
||||
]
|
||||
}
|
|
@ -24,11 +24,10 @@ const sections: Array<Page> = [
|
|||
|
||||
<script is:inline define:vars={{ sections }}>
|
||||
document.addEventListener("scroll", () =>
|
||||
sections.forEach(
|
||||
({ id }) =>
|
||||
document.getElementById(id).getBoundingClientRect().bottom <
|
||||
window.innerHeight &&
|
||||
(document.querySelector("mdui-navigation-bar").value = id)
|
||||
)
|
||||
sections.forEach(({ id }) => {
|
||||
const rect = document.getElementById(id).getBoundingClientRect()
|
||||
if (rect.bottom < window.innerHeight || rect.top < 200)
|
||||
document.querySelector("mdui-navigation-bar").value = id
|
||||
})
|
||||
)
|
||||
</script>
|
||||
|
|
|
@ -1,12 +1,17 @@
|
|||
---
|
||||
import "mdui/mdui.css"
|
||||
import TopBar from "../components/TopBar.astro"
|
||||
import BottomBar from "../components/BottomBar.astro"
|
||||
import "../styles/global.css"
|
||||
|
||||
interface Props {
|
||||
title: string
|
||||
}
|
||||
|
||||
const { title } = Astro.props
|
||||
---
|
||||
|
||||
<!doctype html>
|
||||
<html lang="en" class="mdui-theme-auto" data-scroll="0">
|
||||
<html lang="en" class="mdui-theme-dark" data-scroll="0">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width" />
|
||||
|
@ -16,12 +21,12 @@ import "../styles/global.css"
|
|||
rel="stylesheet"
|
||||
/>
|
||||
<meta name="generator" content={Astro.generator} />
|
||||
<title>Henry Hiles - Home</title>
|
||||
<title>Henry Hiles - {title}</title>
|
||||
</head>
|
||||
<body>
|
||||
<TopBar />
|
||||
<main><slot /></main>
|
||||
<BottomBar />
|
||||
<slot name="navbar" />
|
||||
</body>
|
||||
</html>
|
||||
|
||||
|
|
18
src/pages/404.astro
Normal file
18
src/pages/404.astro
Normal 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>
|
|
@ -12,12 +12,13 @@ import helpdesk from "../images/projects/helpdesk.jpg"
|
|||
import googleCS from "../images/certificates/googleCS.png"
|
||||
import metaFrontEnd from "../images/certificates/metaFrontEnd.png"
|
||||
import ButtonLink from "../components/ButtonLink.astro"
|
||||
import BottomBar from "../components/BottomBar.astro"
|
||||
---
|
||||
|
||||
<Layout>
|
||||
<Layout title="Home">
|
||||
<header id="home">
|
||||
<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>
|
||||
<mdui-card variant="outlined">
|
||||
<section id="about">
|
||||
|
@ -25,14 +26,23 @@ import ButtonLink from "../components/ButtonLink.astro"
|
|||
<mdui-divider></mdui-divider>
|
||||
<article>
|
||||
<p>
|
||||
Hello, my name is Henry Hiles, a developer specializing in
|
||||
Flutter, Astro, TypeScript, and Node.js. I build
|
||||
high-performance, intuitive applications with clean,
|
||||
efficient code and modern design principles. Always eager to
|
||||
learn, I’ve earned certifications from Microsoft, Google,
|
||||
and Meta in cloud computing, AI, and cybersecurity. Whether
|
||||
I'm optimizing mobile apps or designing websites, I’m
|
||||
passionate about delivering innovative digital solutions.
|
||||
Hello, I'm Henry Hiles, a developer specialising in Flutter
|
||||
and Web development. I'm proficient with Dart, Astro,
|
||||
Node.JS, and TypeScript.
|
||||
</p>
|
||||
<p>
|
||||
I build high-performance, intuitive applications with clean,
|
||||
efficient code and modern design principles.
|
||||
</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>
|
||||
</article>
|
||||
|
||||
|
@ -69,7 +79,7 @@ import ButtonLink from "../components/ButtonLink.astro"
|
|||
<h3>The new Quantarc website</h3>
|
||||
<p>
|
||||
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
|
||||
public entities.
|
||||
</p>
|
||||
|
@ -97,7 +107,7 @@ import ButtonLink from "../components/ButtonLink.astro"
|
|||
development.
|
||||
</p>
|
||||
</article>
|
||||
<aside>
|
||||
<aside class="double">
|
||||
<Image
|
||||
src={jobProcessor}
|
||||
alt="The QJobProcessor mobile app"
|
||||
|
@ -122,7 +132,7 @@ import ButtonLink from "../components/ButtonLink.astro"
|
|||
|
||||
<article>
|
||||
<p>
|
||||
I have obtained certifications from renowned organizations
|
||||
I have obtained certifications from renowned organisations
|
||||
such as Google, Meta, and Microsoft, spanning various
|
||||
fields, including cybersecurity, artificial intelligence,
|
||||
Microsoft Azure cloud services, and front-end development:
|
||||
|
@ -178,18 +188,17 @@ import ButtonLink from "../components/ButtonLink.astro"
|
|||
|
||||
<article>
|
||||
<p>
|
||||
I am available for hire to design and develop
|
||||
high-performance static websites and versatile multiplatform
|
||||
applications. With a focus on clean, efficient code and
|
||||
intuitive user experiences, I create solutions that are not
|
||||
only visually appealing but also optimized for speed,
|
||||
accessibility, and seamless functionality across all
|
||||
devices.
|
||||
Hire me to design and develop high-performance static
|
||||
websites and versatile multiplatform applications. With a
|
||||
focus on clean, efficient code and intuitive user
|
||||
experiences, I create solutions that are not only visually
|
||||
appealing but also optimized for speed, accessibility, and
|
||||
seamless functionality across all devices.
|
||||
</p>
|
||||
</article>
|
||||
|
||||
<ButtonLink
|
||||
href={"mai" + "lto:" + "henry@henr" + "yhiles." + "com"}
|
||||
href={"mai" + "lto:" + "contact@henr" + "yhiles." + "com"}
|
||||
>
|
||||
<mdui-icon>
|
||||
<svg
|
||||
|
@ -207,8 +216,9 @@ import ButtonLink from "../components/ButtonLink.astro"
|
|||
></path></svg
|
||||
></mdui-icon
|
||||
>
|
||||
Contact me to receive a quote
|
||||
Contact me for a quote
|
||||
</ButtonLink>
|
||||
</section>
|
||||
</mdui-card>
|
||||
<BottomBar slot="navbar" />
|
||||
</Layout>
|
||||
|
|
5
src/styles/404.css
Normal file
5
src/styles/404.css
Normal file
|
@ -0,0 +1,5 @@
|
|||
body {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
|
@ -3,7 +3,7 @@ button,
|
|||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
gap: 0.3em;
|
||||
gap: 0.6em;
|
||||
border: 2px solid rgb(var(--primary));
|
||||
color: white;
|
||||
border-radius: 50px;
|
||||
|
|
|
@ -31,7 +31,7 @@ body {
|
|||
margin: 0;
|
||||
|
||||
background: radial-gradient(
|
||||
circle 75vw at -25vw -20vh,
|
||||
circle 80vw at -25vw -20vh,
|
||||
var(--circle-color),
|
||||
transparent
|
||||
),
|
||||
|
@ -43,7 +43,7 @@ body {
|
|||
}
|
||||
|
||||
mdui-navigation-bar {
|
||||
background: transparent;
|
||||
background: rgba(0, 0, 0, 60%);
|
||||
backdrop-filter: blur(5px);
|
||||
}
|
||||
|
||||
|
@ -54,6 +54,30 @@ main {
|
|||
gap: 2em;
|
||||
|
||||
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 {
|
||||
|
|
|
@ -23,31 +23,14 @@ mdui-card {
|
|||
}
|
||||
|
||||
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 {
|
||||
padding: 1em;
|
||||
flex-wrap: wrap;
|
||||
|
||||
@media (max-width: 500px) {
|
||||
border: none;
|
||||
}
|
||||
|
||||
& a {
|
||||
min-width: 150px;
|
||||
width: 15%;
|
||||
|
@ -59,6 +42,14 @@ main > * > section {
|
|||
flex-direction: column;
|
||||
gap: 1em;
|
||||
& mdui-card {
|
||||
@media (max-width: 500px) {
|
||||
border: none;
|
||||
|
||||
& section {
|
||||
padding: 0;
|
||||
}
|
||||
}
|
||||
|
||||
& section {
|
||||
margin: 1em;
|
||||
padding: 1em;
|
||||
|
@ -84,20 +75,16 @@ main > * > section {
|
|||
& img {
|
||||
border-radius: var(--mdui-shape-corner-medium);
|
||||
border: 2px solid rgb(var(--primary));
|
||||
|
||||
.double > & {
|
||||
width: 45%;
|
||||
}
|
||||
}
|
||||
}
|
||||
:nth-child(2) > & {
|
||||
flex-direction: row-reverse;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 500px) {
|
||||
border: none;
|
||||
|
||||
& section {
|
||||
padding: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
@ -108,4 +95,8 @@ main > * > section {
|
|||
min-width: 300px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 1500px) {
|
||||
scroll-margin-top: 5em;
|
||||
}
|
||||
}
|
||||
|
|
|
@ -6,6 +6,7 @@ mdui-top-app-bar {
|
|||
box-shadow: none;
|
||||
|
||||
@media (max-width: 1500px) {
|
||||
background: rgba(0, 0, 0, 60%);
|
||||
backdrop-filter: blur(5px);
|
||||
}
|
||||
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue