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

Should be done for now

Browse source
This commit is contained in:
Henry Hiles 2025-03-30 20:54:01 -04:00
parent 1610e3b23c
commit 3e81bd59b5
Signed by: Henry-Hiles
SSH key fingerprint: SHA256:VKQUdS31Q90KvX7EkKMHMBpUspcmItAh86a+v7PGiIs
10 changed files with 140 additions and 78 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
astro.config.ts
View file

@ -1,9 +1,7 @@
import { defineConfig, passthroughImageService } from "astro/config"
import icon from "astro-icon"
export default defineConfig({
trailingSlash: "never",
integrations: [icon()],
build: { format: "directory" },
image: { service: passthroughImageService() },
})

2
package.json
View file

@ -9,8 +9,6 @@
"astro": "astro"
},
"dependencies": {
"@iconify-json/akar-icons": "^1.2.2",
"astro-icon": "^1.1.5",
"astro": "^5.1.8",
"mdui": "^2.1.3",
"sharp": "^0.33.5"

BIN
src/images/projects/helpdesk.jpg Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 356 KiB

BIN
src/images/projects/jobProcessor.jpg Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 24 KiB

BIN
src/images/projects/quantarcSite.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 240 KiB

138
src/pages/index.astro
View file

@ -3,10 +3,12 @@ import "../styles/index.css"
import { Image } from "astro:assets"
import Layout from "../layouts/Layout.astro"
import logoLong from "../images/logoLong.svg"
import { Icon } from "astro-icon/components"
import ai900 from "../images/certificates/ai900.png"
import az900 from "../images/certificates/az900.png"
import dp900 from "../images/certificates/dp900.png"
import quantarcSite from "../images/projects/quantarcSite.png"
import jobProcessor from "../images/projects/jobProcessor.jpg"
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"
@ -15,7 +17,7 @@ import ButtonLink from "../components/ButtonLink.astro"
<Layout>
<header id="home">
<Image src={logoLong} alt="Henry Hiles" />
<span>Full Stack Web Developer and Discord Bot Developer</span>
<span>Multiplatform Flutter Developer and Front-End Web Developer</span>
</header>
<mdui-card variant="outlined">
<section id="about">
@ -23,19 +25,14 @@ import ButtonLink from "../components/ButtonLink.astro"
<mdui-divider></mdui-divider>
<article>
<p>
Hello, my name is Henry Hiles, Full Stack Developer. I have
extensive experience with React, SolidJS, Node.js, and
ASP.NET Razor Pages. I have used my Node.js knowledge to
create{" "}
<a href="/projects/quadraticbot2.0">QuadraticBot 2.0</a>, a
giveaway bot for discord. For more projects, check out{" "}
<a
href="https://github.com/Henry-Hiles"
target="_blank"
rel="noreferrer"
>
my GitHub profile.
</a>
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.
</p>
</article>
@ -64,55 +61,57 @@ import ButtonLink from "../components/ButtonLink.astro"
<section id="projects">
<h2>My Projects</h2>
<mdui-divider></mdui-divider>
<div>
{
[
<section>
<article>
<h3>The new Quantarc website</h3>
<p>
I have obtained certifications from renowned organizations
such as Google, Meta, and Microsoft, spanning various
fields, including cybersecurity, artificial intelligence,
Microsoft Azure cloud services, and front-end development:
I developed the new website for Quantarc, a
UK firm that specializes in providing
management solutions to both private and
public entities.
</p>
</article>
<div>
<a
href="https://www.credly.com/badges/bd5a8213-4e3d-4b93-9b7d-4cbce07ef960/public_url"
target="_blank"
rel="noreferrer"
>
<Image src={az900} alt="Azure Fundamentals Badge" />
</a>
<a
href="https://www.credly.com/badges/1fd0fc1c-052a-4311-9938-6d38057305ce/public_url"
target="_blank"
rel="noreferrer"
>
<Image src={dp900} alt="Azure Data Fundamentals Badge" />
</a>
<a
href="https://www.credly.com/badges/37008ee1-69e0-44aa-82cb-33e4bdf153a8/public_url"
target="_blank"
rel="noreferrer"
>
<Image src={ai900} alt="Azure AI Fundamentals Badge" />
</a>
<a
href="https://www.credly.com/badges/acbec46c-7304-4bb5-8784-53fdcdc5544d/public_url"
target="_blank"
rel="noreferrer"
>
<aside>
<Image
src={metaFrontEnd}
alt="Meta Front-End Developer Badge"
src={quantarcSite}
alt="The new quantarc.co.uk website"
/>
</a>
<a
href="https://www.credly.com/badges/f85e1445-5fad-4954-90ce-78632749e1a7/public_url"
target="_blank"
rel="noreferrer"
>
<Image src={googleCS} alt="Google Cybersecurity Badge" />
</a>
</aside>
</section>,
<section>
<article>
<h3>Quantarc Mobile Apps</h3>
<p>
I designed, and developed, and distributed
two mobile apps for Quantarc, QHelpdesk and
QJobProcessor. QHelpdesk streamlines
customer support by enabling users to
submit, track, and manage requests
efficiently, while QJobProcessor allows
contractors to see, complete, and update
jobs. My responsibilities included UI/UX
design, multiplatform support, and app
development.
</p>
</article>
<aside>
<Image
src={jobProcessor}
alt="The QJobProcessor mobile app"
/>
<Image
src={helpdesk}
alt="The QHelpdesk mobile app"
/>
</aside>
</section>,
].map((elem) => (
<mdui-card variant="outlined">{elem}</mdui-card>
))
}
</div>
</section>
</mdui-card>
@ -130,7 +129,7 @@ import ButtonLink from "../components/ButtonLink.astro"
</p>
</article>
<div>
<mdui-card variant="outlined">
<a
href="https://www.credly.com/badges/bd5a8213-4e3d-4b93-9b7d-4cbce07ef960/public_url"
target="_blank"
@ -169,7 +168,7 @@ import ButtonLink from "../components/ButtonLink.astro"
>
<Image src={googleCS} alt="Google Cybersecurity Badge" />
</a>
</div>
</mdui-card>
</section>
</mdui-card>
<mdui-card variant="outlined">
@ -190,9 +189,24 @@ import ButtonLink from "../components/ButtonLink.astro"
</article>
<ButtonLink
href={"mail" + "to:" + "henry@henr" + "yhiles." + "com"}
href={"mai" + "lto:" + "henry@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
>
<Icon name="akar-icons:paper-airplane" size="1em" />
Contact me to receive a quote
</ButtonLink>
</section>

4
src/styles/button.css
View file

@ -11,7 +11,9 @@ button,
padding: 1rem 2rem;
text-decoration: none;
svg {
& mdui-icon {
height: 1em;
width: 1em;
color: rgb(var(--primary));
}

1
src/styles/global.css
View file

@ -1,5 +1,6 @@
* {
box-sizing: border-box;
max-width: 100%;
}
:root {

59
src/styles/index.css
View file

@ -22,11 +22,12 @@ mdui-card {
width: 100%;
}
section {
main > * > section {
display: flex;
flex-direction: column;
& div {
& div,
mdui-card {
display: flex;
justify-content: center;
gap: 1em;
@ -43,12 +44,60 @@ section {
font-size: 1.3em;
}
&#certificates div {
&#certificates mdui-card {
padding: 1em;
flex-wrap: wrap;
& a {
min-width: 200px;
width: 25%;
min-width: 150px;
width: 15%;
}
}
&#projects div {
display: flex;
flex-direction: column;
gap: 1em;
& mdui-card {
& section {
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));
}
}
:nth-child(2) > & {
flex-direction: row-reverse;
}
}
@media (max-width: 500px) {
border: none;
& section {
padding: 0;
}
}
}
}

2
src/styles/topBar.css
View file

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