feat: make all underlines thicker

src/components/Hero.astro

@@ -12,7 +12,7 @@
     and on the side I manage online operations for a family run
     <a
       href="/projects/camouflage-store"
-      class="text-secondary underline decoration-2 underline-offset-2 hover:no-underline"
+      class="text-secondary underline hover:no-underline"
       >outdoor apparel business</a
     >.
   </p>

src/pages/about/index.astro

@@ -15,6 +15,7 @@ import webbossicon from "./webboss.png";
 import uopicon from "./uop.png";
 import ucsdicon from "./ucsd.png";
 import sdcicon from "./sdc.png";
+import keviccicon from "./kevicc.png";
 
 const projects = [
   {
@@ -77,23 +78,20 @@ const experience = [
     image: nisaicon,
     role: "Promotional graphic design",
     date: "2022",
-    link: "https://www.nisalocally.co.uk",
   },
   {
     id: 3,
-    name: "WebBoss",
-    image: webbossicon,
-    role: "Website mock-up templates (Work experience)",
-    date: "2019",
-    link: "https://webboss.io",
-  },
-  {
-    id: 4,
     name: "Paignton Picture House Trust",
     image: pphicon,
     role: "Photogrammetrist (Volunteering)",
     date: "2023",
-    link: "https://paigntonpicturehouse.org",
+  },
+  {
+    id: 4,
+    name: "WebBoss",
+    image: webbossicon,
+    role: "Website mock-up templates (Work experience)",
+    date: "2019",
   },
 ];
 const sortedExperience = [...experience].sort((a, b) => a.id - b.id);
@@ -121,6 +119,14 @@ const education = [
       "UAL Level 3 Extended Diploma in Creative Media Production and Technology",
     date: "2020 - 2022",
   },
+  {
+    id: 4,
+    name: "King Edward VI Community College",
+    image: keviccicon,
+    course:
+      "Art & Design BTEC, Comp Sci A-level, 10 GCSEs, Creative iMedia Level 2",
+    date: "2014 - 2020",
+  },
 ];
 const sortedEducation = [...education].sort((a, b) => a.id - b.id);
 ---
@@ -185,7 +191,7 @@ const sortedEducation = [...education].sort((a, b) => a.id - b.id);
     >
       <Image
         src={me}
-        alt="Troy Lusty"
+        alt={SITE.AUTHOR}
         class="aspect-square h-full w-full"
         loading="eager"
       />
@@ -196,16 +202,17 @@ const sortedEducation = [...education].sort((a, b) => a.id - b.id);
     <p class="text-secondary/70 text-lg font-medium">
       I’m a <a
         href="#education"
-        class="text-secondary underline decoration-2 underline-offset-2 hover:no-underline"
+        class="text-secondary underline hover:no-underline"
         >Game Arts and Design</a
       > degree student with a chosen area of focus on the design, lighting, and rendering
       of 3D environments. Using either real-time or offline rendering techniques
-      in software packages such as Blender and Unreal Engine. In addition to this
+      in software packages such as Blender, Unreal Engine, and more recently: Godot.
-      I also have an interest in web development, graphic design, and cyber security
+      In addition to this I also have an interest in web development, graphic design,
-      which all make up a large part of my hobbies not including motorbikes. If you're
+      and cyber security which all make up a large part of my hobbies not including
-      reading this offline, my portfolio of work can be found on my website at <a
+      motorbikes. If you're reading this offline, my portfolio of work can be found
+      on my website at <a
         href="/projects"
-        class="text-secondary underline decoration-2 underline-offset-2 hover:no-underline"
+        class="text-secondary underline hover:no-underline"
         >troylusty.com/projects</a
       >.
     </p>
@@ -213,7 +220,7 @@ const sortedEducation = [...education].sort((a, b) => a.id - b.id);
 
   <section class="animate-reveal opacity-0 [animation-delay:0.2s]">
     <div
-      class="flex flex-col-reverse justify-between gap-5 rounded-sm bg-orange-200/20 p-6 transition-transform duration-300 hover:scale-101 md:flex-row dark:bg-orange-900/20"
+      class="flex flex-col-reverse justify-between gap-5 rounded-sm bg-yellow-200/20 p-6 transition-transform duration-300 hover:scale-102 md:flex-row dark:bg-yellow-900/20"
     >
       <div class="flex flex-col gap-4">
         <h3 class="text-secondary text-3xl font-medium">
@@ -223,7 +230,7 @@ const sortedEducation = [...education].sort((a, b) => a.id - b.id);
           Do you think I'd be a good fit to help out on a project you're working
           on, or maybe just want to chat? <Link
             href="mailto:hello@troylusty.com"
-            class="underline decoration-2 underline-offset-2 hover:no-underline"
+            class="underline hover:no-underline"
           >
             Send me an email!</Link
           >
@@ -232,7 +239,7 @@ const sortedEducation = [...education].sort((a, b) => a.id - b.id);
       <div class="flex items-center">
         <Icon
           name="mdi:handshake"
-          class="h-26 w-auto rounded-full bg-orange-200/70 p-1 text-orange-600 dark:bg-orange-900/70 dark:text-orange-400"
+          class="h-26 w-auto rounded-full bg-yellow-200/70 p-1 text-yellow-600 dark:bg-yellow-900/70 dark:text-yellow-400"
         />
       </div>
     </div>
@@ -246,7 +253,7 @@ const sortedEducation = [...education].sort((a, b) => a.id - b.id);
     <div class="mt-3 flex flex-col gap-3">
       {
         sortedEducation.map((education) => (
-          <div class="bg-tertiary/20 flex items-center justify-between gap-2 rounded-sm p-3 transition-transform duration-300 hover:-translate-y-1">
+          <div class="bg-tertiary/10 flex items-center justify-between gap-2 rounded-sm p-3 transition-transform duration-300 hover:-translate-y-1">
             <div class="flex items-center gap-2">
               <Image
                 src={education.image}
@@ -266,14 +273,25 @@ const sortedEducation = [...education].sort((a, b) => a.id - b.id);
         ))
       }
     </div>
-    <div
+    <div class="flex flex-wrap gap-2">
-      class="mt-3 flex w-fit items-center gap-2 rounded-full bg-green-200/20 px-3 py-1.5 dark:bg-green-900/20"
+      <div
-    >
+        class="mt-3 flex w-fit items-center gap-2 rounded-full bg-green-200/20 px-3 py-1.5 transition-transform duration-300 hover:scale-102 hover:-rotate-2 dark:bg-green-900/20"
-      <Icon
+      >
-        name="mdi:check-decagram-outline"
+        <Icon
-        class="h-auto w-6 rounded-full bg-green-200/70 p-0.5 text-green-600 dark:bg-green-900/70 dark:text-green-400"
+          name="mdi:check-decagram-outline"
-      />
+          class="h-auto w-8 rounded-full bg-green-200/70 p-0.5 text-green-600 dark:bg-green-900/70 dark:text-green-400"
-      <p class="text-sm">Full drivers licence (A & B)</p>
+        />
+        <p>Full drivers licence (A & B)</p>
+      </div>
+      <div
+        class="mt-3 flex w-fit items-center gap-2 rounded-full bg-cyan-200/20 px-3 py-1.5 transition-transform duration-300 hover:scale-102 hover:-rotate-2 dark:bg-cyan-900/20"
+      >
+        <Icon
+          name="mdi:water"
+          class="h-auto w-8 rounded-full bg-cyan-200/70 p-0.5 text-cyan-600 dark:bg-cyan-900/70 dark:text-cyan-400"
+        />
+        <p>Lifesaving certification</p>
+      </div>
     </div>
   </section>
 
@@ -285,24 +303,26 @@ const sortedEducation = [...education].sort((a, b) => a.id - b.id);
     <div class="mt-3 flex flex-col gap-3">
       {
         sortedExperience.map((experience) => (
-          <div class="bg-tertiary/20 flex items-center justify-between gap-2 rounded-sm p-3 transition-transform duration-300 hover:-translate-y-1">
+          <div class="bg-tertiary/10 flex items-center justify-between gap-2 rounded-sm p-3 transition-transform duration-300 hover:-translate-y-1">
             <div class="flex items-center gap-2">
-              <Link href={experience.link}>
+              <Image
-                <Image
+                src={experience.image}
-                  src={experience.image}
+                alt={experience.name}
-                  alt={experience.name}
+                class="h-auto max-w-12 rounded-sm"
-                  class="h-auto max-w-12 rounded-sm"
+                loading="eager"
-                  loading="eager"
+              />
-                />
-              </Link>
               <p class="font-medium">
                 {experience.role},
-                <Link
+                {experience.link ? (
-                  href={experience.link}
+                  <Link
-                  class="text-secondary/70 underline hover:no-underline"
+                    href={experience.link}
-                >
+                    class="text-secondary/70 underline hover:no-underline"
-                  {experience.name}
+                  >
-                </Link>
+                    {experience.name}
+                  </Link>
+                ) : (
+                  <span class="text-secondary/70">{experience.name}</span>
+                )}
               </p>
             </div>
             <p class="font-mono text-sm font-light text-nowrap">
@@ -322,7 +342,7 @@ const sortedEducation = [...education].sort((a, b) => a.id - b.id);
     <ol class="mt-3 grid grid-cols-1 gap-3 md:grid-cols-2 print:grid-cols-2">
       {
         sortedProjects.map((project) => (
-          <li class="bg-tertiary/20 flex flex-col overflow-hidden rounded-sm p-3">
+          <li class="bg-tertiary/10 flex flex-col overflow-hidden rounded-sm p-3 transition-transform duration-300 hover:scale-102">
             <div class="flex flex-col space-y-1.5">
               <div class="space-y-1">
                 <>

src/styles/global.css

@@ -53,3 +53,9 @@
     text-decoration: var(--shiki-dark-text-decoration) !important;
   }
 }
+
+@layer utilities {
+  .underline {
+    @apply underline decoration-2 underline-offset-2;
+  }
+}