Some UX improvements

src/components/CallToAction.astro

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

src/pages/index.astro

@@ -14,12 +14,14 @@ import googleCS from "../images/certificates/googleCS.png"
 import metaFrontEnd from "../images/certificates/metaFrontEnd.png"
 import ButtonLink from "../components/ButtonLink.astro"
 import BottomBar from "../components/BottomBar.astro"
+import CallToAction from "../components/CallToAction.astro"
 ---
 
 <Layout title="Home">
     <header id="home">
         <Image src={logoLong} alt="Henry Hiles" />
         <span>Multiplatform Flutter Developer & Front-End Web Developer</span>
+        <CallToAction />
     </header>
     <mdui-card variant="outlined">
         <section id="about">
@@ -73,14 +75,15 @@ import BottomBar from "../components/BottomBar.astro"
             <h2>My Projects</h2>
             <mdui-divider></mdui-divider>
             <div>
-                {
-                    [
                 <section>
                     <article>
                         <h3>Federated Nexus</h3>
                         <p>
-                                    I run{" "}
+                            I run <a href="https://federated.nexus"
-                                    <a href="https://federated.nexus">Federated Nexus</a>, a community resource hosting multiple FOSS (especially federated) services, including Matrix and Forgejo.
+                                >Federated Nexus</a
+                            >, a community resource hosting multiple FOSS
+                            (especially federated) services, including Matrix
+                            and Forgejo.
                         </p>
                     </article>
                     <aside>
@@ -89,15 +92,17 @@ import BottomBar from "../components/BottomBar.astro"
                             alt="The new federated.nexus website"
                         />
                     </aside>
-                        </section>,
+                </section>
                 <section>
                     <article>
                         <h3>The new Quantarc website</h3>
                         <p>
                             I developed the{" "}
-                                    <a href="https://quantarc.co.uk">new website for Quantarc</a>, a UK firm that specialises in providing
+                            <a href="https://quantarc.co.uk"
-                                    management solutions to both private and
+                                >new website for Quantarc</a
-                                    public entities.
+                            >, a UK firm that specialises in providing
+                            management solutions to both private and public
+                            entities.
                         </p>
                     </article>
                     <aside>
@@ -106,21 +111,19 @@ import BottomBar from "../components/BottomBar.astro"
                             alt="The new quantarc.co.uk website"
                         />
                     </aside>
-                        </section>,
+                </section>
                 <section>
                     <article>
                         <h3>Quantarc Mobile Apps</h3>
                         <p>
-                                    I designed, developed, and distributed
+                            I designed, developed, and distributed two mobile
-                                    two mobile apps for Quantarc, QHelpdesk and
+                            apps for Quantarc, QHelpdesk and QJobProcessor.
-                                    QJobProcessor. QHelpdesk streamlines
+                            QHelpdesk streamlines customer support by enabling
-                                    customer support by enabling users to
+                            users to submit, track, and manage requests
-                                    submit, track, and manage requests
+                            efficiently, while QJobProcessor allows contractors
-                                    efficiently, while QJobProcessor allows
+                            to see, complete, and update jobs. My
-                                    contractors to see, complete, and update
+                            responsibilities included UI/UX design,
-                                    jobs. My responsibilities included UI/UX
+                            multiplatform support, and app development.
-                                    design, multiplatform support, and app
-                                    development.
                         </p>
                     </article>
                     <aside class="double">
@@ -128,16 +131,9 @@ import BottomBar from "../components/BottomBar.astro"
                             src={jobProcessor}
                             alt="The QJobProcessor mobile app"
                         />
-                                <Image
+                        <Image src={helpdesk} alt="The QHelpdesk mobile app" />
-                                    src={helpdesk}
-                                    alt="The QHelpdesk mobile app"
-                                />
                     </aside>
-                        </section>,
+                </section>
-                    ].map((elem) => (
-                        <mdui-card variant="outlined">{elem}</mdui-card>
-                    ))
-                }
             </div>
         </section>
     </mdui-card>
@@ -154,8 +150,7 @@ import BottomBar from "../components/BottomBar.astro"
                     Microsoft Azure cloud services, and front-end development:
                 </p>
             </article>
-
+            <div>
-            <mdui-card variant="outlined">
                 <a
                     href="https://www.credly.com/badges/bd5a8213-4e3d-4b93-9b7d-4cbce07ef960/public_url"
                     target="_blank"
@@ -194,7 +189,7 @@ import BottomBar from "../components/BottomBar.astro"
                 >
                     <Image src={googleCS} alt="Google Cybersecurity Badge" />
                 </a>
-            </mdui-card>
+            </div>
         </section>
     </mdui-card>
     <mdui-card variant="outlined">
@@ -213,27 +208,7 @@ import BottomBar from "../components/BottomBar.astro"
                 </p>
             </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>
     </mdui-card>
     <BottomBar slot="navbar" />

src/styles/global.css

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

src/styles/index.css

@@ -1,7 +1,6 @@
 header {
     display: flex;
     flex-direction: column;
-    font-size: 2em;
     justify-content: center;
     align-items: center;
 
@@ -11,9 +10,15 @@ header {
     }
 
     & span {
+        font-size: 2em;
         display: flex;
         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 {
-    &#certificates mdui-card {
+    &#certificates div {
         padding: 1em;
         flex-wrap: wrap;
 
-        @media (max-width: 500px) {
-            border: none;
-        }
-
         & a {
             min-width: 150px;
             width: 15%;
@@ -39,19 +40,11 @@ main > * > section {
 
     &#projects div {
         display: flex;
+        gap: 0;
         flex-direction: column;
-        gap: 1em;
-        & mdui-card {
-            @media (max-width: 500px) {
-                border: none;
 
         & section {
-                    padding: 0;
+            margin: 0.5em;
-                }
-            }
-
-            & section {
-                margin: 1em;
             padding: 1em;
             display: flex;
             gap: 2rem;
@@ -86,7 +79,6 @@ main > * > section {
             }
         }
     }
-    }
 
     &#about #stats div {
         flex-wrap: wrap;