Compare commits
No commits in common. "28455cc0d70e4ff639e18ee047436a57989611f0" and "0bffc2092e8c50d0adff2c0238bd840d6b20b169" have entirely different histories.
28455cc0d7
...
0bffc2092e
12 changed files with 64 additions and 137 deletions
|
@ -1,8 +0,0 @@
|
||||||
{
|
|
||||||
"m.homeserver": {
|
|
||||||
"base_url": "https://matrix.henryhiles.com",
|
|
||||||
"org.matrix.msc3575.proxy": {
|
|
||||||
"url": "https://matrix.henryhiles.com"
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
|
@ -1,3 +0,0 @@
|
||||||
{
|
|
||||||
"m.server": "matrix.henryhiles.com:443"
|
|
||||||
}
|
|
|
@ -1,9 +0,0 @@
|
||||||
{
|
|
||||||
"contacts": [
|
|
||||||
{
|
|
||||||
"matrix_id": "@quadradical:henryhiles.com",
|
|
||||||
"email_address": "henry@henryhiles.com",
|
|
||||||
"role": "m.role.admin"
|
|
||||||
}
|
|
||||||
]
|
|
||||||
}
|
|
|
@ -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>
|
||||||
|
|
|
@ -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>
|
||||||
|
|
||||||
|
|
|
@ -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>
|
|
|
@ -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, I’ve 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, I’m
|
||||||
</p>
|
passionate about delivering innovative digital solutions.
|
||||||
<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>
|
||||||
|
|
||||||
|
@ -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>
|
||||||
|
|
|
@ -1,5 +0,0 @@
|
||||||
body {
|
|
||||||
display: flex;
|
|
||||||
justify-content: center;
|
|
||||||
align-items: center;
|
|
||||||
}
|
|
|
@ -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;
|
||||||
|
|
|
@ -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 {
|
||||||
|
|
|
@ -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;
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
|
@ -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);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
Loading…
Add table
Add a link
Reference in a new issue