Should be done for now

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() },
 })

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"

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"
 <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
+                    Hello, my name is Henry Hiles, a developer specializing in
-                    extensive experience with React, SolidJS, Node.js, and
+                    Flutter, Astro, TypeScript, and Node.js. I build
-                    ASP.NET Razor Pages. I have used my Node.js knowledge to
+                    high-performance, intuitive applications with clean,
-                    create{" "}
+                    efficient code and modern design principles. Always eager to
-                    <a href="/projects/quadraticbot2.0">QuadraticBot 2.0</a>, a
+                    learn, I’ve earned certifications from Microsoft, Google,
-                    giveaway bot for discord. For more projects, check out{" "}
+                    and Meta in cloud computing, AI, and cybersecurity. Whether
-                    <a
+                    I'm optimizing mobile apps or designing websites, I’m
-                        href="https://github.com/Henry-Hiles"
+                    passionate about delivering innovative digital solutions.
-                        target="_blank"
-                        rel="noreferrer"
-                    >
-                        my GitHub profile.
-                    </a>
                 </p>
             </article>
 
@@ -64,55 +61,57 @@ import ButtonLink from "../components/ButtonLink.astro"
         <section id="projects">
             <h2>My Projects</h2>
             <mdui-divider></mdui-divider>
-
-            <article>
-                <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:
-                </p>
-            </article>
-
             <div>
-                <a
+                {
-                    href="https://www.credly.com/badges/bd5a8213-4e3d-4b93-9b7d-4cbce07ef960/public_url"
+                    [
-                    target="_blank"
+                        <section>
-                    rel="noreferrer"
+                            <article>
-                >
+                                <h3>The new Quantarc website</h3>
-                    <Image src={az900} alt="Azure Fundamentals Badge" />
+                                <p>
-                </a>
+                                    I developed the new website for Quantarc, a
-                <a
+                                    UK firm that specializes in providing
-                    href="https://www.credly.com/badges/1fd0fc1c-052a-4311-9938-6d38057305ce/public_url"
+                                    management solutions to both private and
-                    target="_blank"
+                                    public entities.
-                    rel="noreferrer"
+                                </p>
-                >
+                            </article>
-                    <Image src={dp900} alt="Azure Data Fundamentals Badge" />
+                            <aside>
-                </a>
+                                <Image
-                <a
+                                    src={quantarcSite}
-                    href="https://www.credly.com/badges/37008ee1-69e0-44aa-82cb-33e4bdf153a8/public_url"
+                                    alt="The new quantarc.co.uk website"
-                    target="_blank"
+                                />
-                    rel="noreferrer"
+                            </aside>
-                >
+                        </section>,
-                    <Image src={ai900} alt="Azure AI Fundamentals Badge" />
+                        <section>
-                </a>
+                            <article>
-                <a
+                                <h3>Quantarc Mobile Apps</h3>
-                    href="https://www.credly.com/badges/acbec46c-7304-4bb5-8784-53fdcdc5544d/public_url"
+                                <p>
-                    target="_blank"
+                                    I designed, and developed, and distributed
-                    rel="noreferrer"
+                                    two mobile apps for Quantarc, QHelpdesk and
-                >
+                                    QJobProcessor. QHelpdesk streamlines
-                    <Image
+                                    customer support by enabling users to
-                        src={metaFrontEnd}
+                                    submit, track, and manage requests
-                        alt="Meta Front-End Developer Badge"
+                                    efficiently, while QJobProcessor allows
-                    />
+                                    contractors to see, complete, and update
-                </a>
+                                    jobs. My responsibilities included UI/UX
-                <a
+                                    design, multiplatform support, and app
-                    href="https://www.credly.com/badges/f85e1445-5fad-4954-90ce-78632749e1a7/public_url"
+                                    development.
-                    target="_blank"
+                                </p>
-                    rel="noreferrer"
+                            </article>
-                >
+                            <aside>
-                    <Image src={googleCS} alt="Google Cybersecurity Badge" />
+                                <Image
-                </a>
+                                    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"}
             >
-                <Icon name="akar-icons:paper-airplane" size="1em" />
+                <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 to receive a quote
             </ButtonLink>
         </section>

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));
     }
 

src/styles/global.css

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

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;
+            min-width: 150px;
-            width: 25%;
+            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;
+                }
+            }
         }
     }
 

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);
     }