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

Some UX improvements
Some checks are pending
Deploy to Pages / Build (push) Waiting to run
Details
Deploy to Pages / Deploy (push) Blocked by required conditions
Details

Browse source
This commit is contained in:
Henry Hiles 2025-08-15 12:40:25 -04:00
commit 6b68290e48
No known key found for this signature in database
4 changed files with 128 additions and 138 deletions
Download patch file Download diff file Expand all files Collapse all files

23
src/components/CallToAction.astro Normal file
View file

@ -0,0 +1,23 @@
---
import ButtonLink from "./ButtonLink.astro"
---
<ButtonLink href={"mai" + "lto:" + "contact@henr" + "yhiles." + "com"}>
<mdui-icon>
<svg
xmlns="http://www.w3.org/2000/svg"
width="24"
height="24"
viewBox="0 0 24 24"
><path
fill="none"
stroke="currentColor"
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="m9.474 16l9.181 3.284a1.1 1.1 0 0 0 1.462-.887L21.99 4.239c.114-.862-.779-1.505-1.567-1.13L2.624 11.605c-.88.42-.814 1.69.106 2.017l2.44.868l1.33.467M13 17.26l-1.99 3.326c-.65.808-1.959.351-1.959-.683V17.24a2 2 0 0 1 .53-1.356l3.871-4.2"
></path></svg
></mdui-icon
>
Contact me for a quote
</ButtonLink>

153
src/pages/index.astro
View file

@ -14,12 +14,14 @@ 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" import BottomBar from "../components/BottomBar.astro"
import CallToAction from "../components/CallToAction.astro"
--- ---
<Layout title="Home"> <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 & Front-End Web Developer</span> <span>Multiplatform Flutter Developer & Front-End Web Developer</span>
<CallToAction />
</header> </header>
<mdui-card variant="outlined"> <mdui-card variant="outlined">
<section id="about"> <section id="about">
@ -73,71 +75,65 @@ import BottomBar from "../components/BottomBar.astro"
<h2>My Projects</h2> <h2>My Projects</h2>
<mdui-divider></mdui-divider> <mdui-divider></mdui-divider>
<div> <div>
{ <section>
[ <article>
<section> <h3>Federated Nexus</h3>
<article> <p>
<h3>Federated Nexus</h3> I run <a href="https://federated.nexus"
<p> >Federated Nexus</a
I run{" "} >, a community resource hosting multiple FOSS
<a href="https://federated.nexus">Federated Nexus</a>, a community resource hosting multiple FOSS (especially federated) services, including Matrix and Forgejo. (especially federated) services, including Matrix
</p> and Forgejo.
</article> </p>
<aside> </article>
<Image <aside>
src={federatedNexus} <Image
alt="The new federated.nexus website" src={federatedNexus}
/> alt="The new federated.nexus website"
</aside> />
</section>, </aside>
<section> </section>
<article> <section>
<h3>The new Quantarc website</h3> <article>
<p> <h3>The new Quantarc website</h3>
I developed the{" "} <p>
<a href="https://quantarc.co.uk">new website for Quantarc</a>, a UK firm that specialises in providing I developed the{" "}
management solutions to both private and <a href="https://quantarc.co.uk"
public entities. >new website for Quantarc</a
</p> >, a UK firm that specialises in providing
</article> management solutions to both private and public
<aside> entities.
<Image </p>
src={quantarcSite} </article>
alt="The new quantarc.co.uk website" <aside>
/> <Image
</aside> src={quantarcSite}
</section>, alt="The new quantarc.co.uk website"
<section> />
<article> </aside>
<h3>Quantarc Mobile Apps</h3> </section>
<p> <section>
I designed, developed, and distributed <article>
two mobile apps for Quantarc, QHelpdesk and <h3>Quantarc Mobile Apps</h3>
QJobProcessor. QHelpdesk streamlines <p>
customer support by enabling users to I designed, developed, and distributed two mobile
submit, track, and manage requests apps for Quantarc, QHelpdesk and QJobProcessor.
efficiently, while QJobProcessor allows QHelpdesk streamlines customer support by enabling
contractors to see, complete, and update users to submit, track, and manage requests
jobs. My responsibilities included UI/UX efficiently, while QJobProcessor allows contractors
design, multiplatform support, and app to see, complete, and update jobs. My
development. responsibilities included UI/UX design,
</p> multiplatform support, and app development.
</article> </p>
<aside class="double"> </article>
<Image <aside class="double">
src={jobProcessor} <Image
alt="The QJobProcessor mobile app" src={jobProcessor}
/> alt="The QJobProcessor mobile app"
<Image />
src={helpdesk} <Image src={helpdesk} alt="The QHelpdesk mobile app" />
alt="The QHelpdesk mobile app" </aside>
/> </section>
</aside>
</section>,
].map((elem) => (
<mdui-card variant="outlined">{elem}</mdui-card>
))
}
</div> </div>
</section> </section>
</mdui-card> </mdui-card>
@ -154,8 +150,7 @@ import BottomBar from "../components/BottomBar.astro"
Microsoft Azure cloud services, and front-end development: Microsoft Azure cloud services, and front-end development:
</p> </p>
</article> </article>
<div>
<mdui-card variant="outlined">
<a <a
href="https://www.credly.com/badges/bd5a8213-4e3d-4b93-9b7d-4cbce07ef960/public_url" href="https://www.credly.com/badges/bd5a8213-4e3d-4b93-9b7d-4cbce07ef960/public_url"
target="_blank" target="_blank"
@ -194,7 +189,7 @@ import BottomBar from "../components/BottomBar.astro"
> >
<Image src={googleCS} alt="Google Cybersecurity Badge" /> <Image src={googleCS} alt="Google Cybersecurity Badge" />
</a> </a>
</mdui-card> </div>
</section> </section>
</mdui-card> </mdui-card>
<mdui-card variant="outlined"> <mdui-card variant="outlined">
@ -213,27 +208,7 @@ import BottomBar from "../components/BottomBar.astro"
</p> </p>
</article> </article>
<ButtonLink <CallToAction />
href={"mai" + "lto:" + "contact@henr" + "yhiles." + "com"}
>
<mdui-icon>
<svg
xmlns="http://www.w3.org/2000/svg"
width="24"
height="24"
viewBox="0 0 24 24"
><path
fill="none"
stroke="currentColor"
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="m9.474 16l9.181 3.284a1.1 1.1 0 0 0 1.462-.887L21.99 4.239c.114-.862-.779-1.505-1.567-1.13L2.624 11.605c-.88.42-.814 1.69.106 2.017l2.44.868l1.33.467M13 17.26l-1.99 3.326c-.65.808-1.959.351-1.959-.683V17.24a2 2 0 0 1 .53-1.356l3.871-4.2"
></path></svg
></mdui-icon
>
Contact me for a quote
</ButtonLink>
</section> </section>
</mdui-card> </mdui-card>
<BottomBar slot="navbar" /> <BottomBar slot="navbar" />

2
src/styles/global.css
View file

@ -51,7 +51,7 @@ main {
flex-direction: column; flex-direction: column;
display: flex; display: flex;
align-items: center; align-items: center;
gap: 2em; gap: 3em;
padding: 1em; padding: 1em;

88
src/styles/index.css
View file

@ -1,7 +1,6 @@
header { header {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
font-size: 2em;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
@ -11,9 +10,15 @@ header {
} }
& span { & span {
font-size: 2em;
display: flex; display: flex;
text-align: center; text-align: center;
padding: 0 0.5rem; padding: 2rem 0.5rem;
padding-top: 0;
}
& a {
font-size: 0.5rem;
} }
} }
@ -23,14 +28,10 @@ mdui-card {
} }
main > * > section { main > * > section {
&#certificates mdui-card { &#certificates div {
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%;
@ -39,51 +40,42 @@ main > * > section {
&#projects div { &#projects div {
display: flex; display: flex;
gap: 0;
flex-direction: column; flex-direction: column;
gap: 1em;
& mdui-card {
@media (max-width: 500px) {
border: none;
& section { & section {
padding: 0; margin: 0.5em;
padding: 1em;
display: flex;
gap: 2rem;
justify-content: center;
flex-wrap: wrap;
& article {
& h3 {
font-size: 2em;
margin: 0.5em 0;
}
& p {
margin: 0;
}
width: 420px;
}
& aside {
display: flex;
justify-content: center;
width: 380px;
gap: 1em;
& img {
border-radius: var(--mdui-shape-corner-medium);
border: 2px solid rgb(var(--primary));
.double > & {
width: 45%;
}
} }
} }
:nth-child(even) > & {
& section { flex-direction: row-reverse;
margin: 1em;
padding: 1em;
display: flex;
gap: 2rem;
justify-content: center;
flex-wrap: wrap;
& article {
& h3 {
font-size: 2em;
margin: 0.5em 0;
}
& p {
margin: 0;
}
width: 420px;
}
& aside {
display: flex;
justify-content: center;
width: 380px;
gap: 1em;
& img {
border-radius: var(--mdui-shape-corner-medium);
border: 2px solid rgb(var(--primary));
.double > & {
width: 45%;
}
}
}
:nth-child(even) > & {
flex-direction: row-reverse;
}
} }
} }
} }