diff --git a/astro.config.ts b/astro.config.ts index af9f2c2..cccb614 100644 --- a/astro.config.ts +++ b/astro.config.ts @@ -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() }, }) diff --git a/package.json b/package.json index f2f513f..93ec3c8 100644 --- a/package.json +++ b/package.json @@ -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" diff --git a/src/images/projects/helpdesk.jpg b/src/images/projects/helpdesk.jpg new file mode 100644 index 0000000..e3b454d Binary files /dev/null and b/src/images/projects/helpdesk.jpg differ diff --git a/src/images/projects/jobProcessor.jpg b/src/images/projects/jobProcessor.jpg new file mode 100644 index 0000000..e92bb12 Binary files /dev/null and b/src/images/projects/jobProcessor.jpg differ diff --git a/src/images/projects/quantarcSite.png b/src/images/projects/quantarcSite.png new file mode 100644 index 0000000..5c36df0 Binary files /dev/null and b/src/images/projects/quantarcSite.png differ diff --git a/src/pages/index.astro b/src/pages/index.astro index ec77bc7..a07fd6f 100644 --- a/src/pages/index.astro +++ b/src/pages/index.astro @@ -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"
Henry Hiles - Full Stack Web Developer and Discord Bot Developer + Multiplatform Flutter Developer and Front-End Web Developer
@@ -23,19 +25,14 @@ import ButtonLink from "../components/ButtonLink.astro"

- 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{" "} - QuadraticBot 2.0, a - giveaway bot for discord. For more projects, check out{" "} - - my GitHub profile. - + 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.

@@ -64,55 +61,57 @@ import ButtonLink from "../components/ButtonLink.astro"

My Projects

- -
-

- 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: -

-
-
- - Azure Fundamentals Badge - - - Azure Data Fundamentals Badge - - - Azure AI Fundamentals Badge - - - Meta Front-End Developer Badge - - - Google Cybersecurity Badge - + { + [ +
+
+

The new Quantarc website

+

+ I developed the new website for Quantarc, a + UK firm that specializes in providing + management solutions to both private and + public entities. +

+
+ +
, +
+
+

Quantarc Mobile Apps

+

+ 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. +

+
+ +
, + ].map((elem) => ( + {elem} + )) + }
@@ -130,7 +129,7 @@ import ButtonLink from "../components/ButtonLink.astro"

-
+ Google Cybersecurity Badge -
+
@@ -190,9 +189,24 @@ import ButtonLink from "../components/ButtonLink.astro" - + + Contact me to receive a quote diff --git a/src/styles/button.css b/src/styles/button.css index dba9cf4..b1bc2cc 100644 --- a/src/styles/button.css +++ b/src/styles/button.css @@ -11,7 +11,9 @@ button, padding: 1rem 2rem; text-decoration: none; - svg { + & mdui-icon { + height: 1em; + width: 1em; color: rgb(var(--primary)); } diff --git a/src/styles/global.css b/src/styles/global.css index e0bc150..17d9494 100644 --- a/src/styles/global.css +++ b/src/styles/global.css @@ -1,5 +1,6 @@ * { box-sizing: border-box; + max-width: 100%; } :root { diff --git a/src/styles/index.css b/src/styles/index.css index 389a4f5..a570a07 100644 --- a/src/styles/index.css +++ b/src/styles/index.css @@ -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; + } + } } } diff --git a/src/styles/topBar.css b/src/styles/topBar.css index a16e9d2..6b684eb 100644 --- a/src/styles/topBar.css +++ b/src/styles/topBar.css @@ -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); }