From cd5104bedd24641b1aa4acea3b0c412ea817362d Mon Sep 17 00:00:00 2001
From: Troy <hello@troylusty.com>
Date: Mon, 13 Jan 2025 13:35:15 +0000
Subject: [PATCH] start matching theme on cv to index page

---
 src/components/Accordion.astro      | 23 +++++----
 src/components/Skills.astro         |  4 +-
 src/components/Work.astro           | 21 +++++---
 src/content/skills/driving.md       |  5 ++
 src/content/work/must-find-beans.md | 11 ----
 src/pages/cv.astro                  | 78 +++++++++++++++--------------
 6 files changed, 74 insertions(+), 68 deletions(-)
 create mode 100644 src/content/skills/driving.md
 delete mode 100644 src/content/work/must-find-beans.md

diff --git a/src/components/Accordion.astro b/src/components/Accordion.astro
index 44b517a..9708e81 100644
--- a/src/components/Accordion.astro
+++ b/src/components/Accordion.astro
@@ -16,19 +16,22 @@ const { institution, qualification, grades, isOpen = false } = Astro.props;
     <summary
       class="flex cursor-pointer items-center justify-between py-3 font-bold"
     >
-      <p class="m-0">
-        {institution}
-      </p>
-      <span class="transition group-open:rotate-180">
-        <Icon name="mdi:chevron-down" class="h-6 w-auto text-tertiary" />
-      </span>
-    </summary>
-    <div class="p-4 text-sm text-neutral-600 dark:text-neutral-400">
-      <p class="my-0">
+      <p class="m-0 text-balance text-xl font-semibold text-secondary">
         {qualification}
       </p>
+      <span class="transition group-open:rotate-180">
+        <Icon
+          name="mdi:chevron-down"
+          class="h-6 w-auto text-secondary transition-colors group-open:text-tertiary"
+        />
+      </span>
+    </summary>
+    <div class="p-4 text-lg">
+      <p class="my-0 mb-2 font-semibold text-tertiary">
+        {institution}
+      </p>
       <ul>
-        {grades.map((grade) => <li>{grade}</li>)}
+        {grades.map((grade) => <li class="font-light">{grade}</li>)}
       </ul>
     </div>
   </details>
diff --git a/src/components/Skills.astro b/src/components/Skills.astro
index 52e1681..b8385f3 100644
--- a/src/components/Skills.astro
+++ b/src/components/Skills.astro
@@ -15,11 +15,11 @@ const skills = await Promise.all(
 <ul class="flex max-w-full list-none flex-wrap gap-4 px-0">
   {
     skills.map((entry) => (
-      <li class="flex items-center gap-2 rounded border border-tertiary p-2">
+      <li class="group flex items-center gap-2 rounded border border-tertiary p-2 text-tertiary transition-colors hover:border-accent hover:text-accent">
         <Icon
           name={entry.data.icon}
           title={entry.data.title}
-          class="h-6 w-auto text-secondary"
+          class="h-6 w-auto text-tertiary transition-colors group-hover:text-accent"
         />
         <p class="m-0">{entry.data.title}</p>
       </li>
diff --git a/src/components/Work.astro b/src/components/Work.astro
index 165d7ea..05a000d 100644
--- a/src/components/Work.astro
+++ b/src/components/Work.astro
@@ -18,17 +18,24 @@ const work = await Promise.all(
 <ul class="list-none pl-0">
   {
     work.map((entry) => (
-      <li class="pl-0">
-        <h3>
-          <span>{entry.data.company}</span>
-          <span>({dateRange(entry.data.dateStart, entry.data.dateEnd)})</span>
+      <li class="pb-8 pl-0 last:pb-0">
+        <h3 class="mb-3 mt-4 text-balance text-xl font-semibold text-secondary">
+          <span class="text-tertiary">{entry.data.role} at</span>{" "}
+          {entry.data.company}
         </h3>
-        <p>{entry.data.role}</p>
-        <article>
+        <time class="block text-sm text-accent">
+          {dateRange(entry.data.dateStart, entry.data.dateEnd)}
+        </time>
+        <article class="mt-4 text-lg text-secondary prose-a:underline prose-a:decoration-tertiary prose-a:decoration-wavy">
           <entry.Content />
         </article>
         {entry.data.article ? (
-          <a href={entry.data.article}>See related project</a>
+          <a
+            class="text-tertiary transition-colors hover:text-accent"
+            href={entry.data.article}
+          >
+            See related project
+          </a>
         ) : null}
       </li>
     ))
diff --git a/src/content/skills/driving.md b/src/content/skills/driving.md
new file mode 100644
index 0000000..ef31fa8
--- /dev/null
+++ b/src/content/skills/driving.md
@@ -0,0 +1,5 @@
+---
+type: "driving"
+title: "Full drivers licence (A & B)"
+icon: "mdi:card-account-details-star"
+---
diff --git a/src/content/work/must-find-beans.md b/src/content/work/must-find-beans.md
deleted file mode 100644
index 8d9a87f..0000000
--- a/src/content/work/must-find-beans.md
+++ /dev/null
@@ -1,11 +0,0 @@
----
-company: "MUST FIND BEANS"
-role: "Developer"
-dateStart: "2023"
-dateEnd: "Current"
----
-
-Demonstrate your culinary combat skills in
-[MUST FIND BEANS](https://store.steampowered.com/app/3012740/MUST_FIND_BEANS), a
-chaos driven FPS set in an endless arena full of enemies in an eat or be eaten
-situation.
diff --git a/src/pages/cv.astro b/src/pages/cv.astro
index ae70cf6..6d8dc41 100644
--- a/src/pages/cv.astro
+++ b/src/pages/cv.astro
@@ -43,50 +43,52 @@ import Prose from "@components/Prose.astro";
       </div>
     </section>
     <section class="mt-16 animate-reveal opacity-0 [animation-delay:0.1s]">
-      <Prose>
-        <h2>About me</h2>
-        <p>
-          Hi, my name is Troy and I’m a student 3D artist studying on a BA
-          (Hons) Game Arts and Design course in the UK.
-        </p>
-        <p>
-          In 2019 I began experimenting with Blender after having used various
-          2D art applications such as Adobe Photoshop for over 5 years. After
-          making this change, I realised that I have a huge interest in creating
-          3D graphics for video games and TV. At the moment I am working on
-          expanding my skillset to encompass other areas with a focus on
-          lighting and rendering techniques in relation to environment art.
-        </p>
-        <p>
-          My current portfolio of work can be found on my website at:
-          <a href="/projects">troylusty.com/projects</a>.
-        </p>
-      </Prose>
+      <h2 class="mb-16 break-words text-4xl font-semibold capitalize">
+        About me
+      </h2>
+      <p class="mb-8 text-lg">
+        Hi, my name is Troy and I’m a student 3D artist studying on a BA (Hons)
+        Game Arts and Design course in the UK.
+      </p>
+      <p class="mb-8 text-lg">
+        In 2019 I began experimenting with Blender after having used various 2D
+        art applications such as Adobe Photoshop for over 5 years. After making
+        this change, I realised that I have a huge interest in creating 3D
+        graphics for video games and TV. At the moment I am working on expanding
+        my skillset to encompass other areas with a focus on lighting and
+        rendering techniques in relation to environment art.
+      </p>
+      <p class="mb-8 text-lg">
+        My current portfolio of work can be found on my website at:
+        <a
+          class="text-secondary underline decoration-tertiary decoration-wavy"
+          href="/projects">troylusty.com/projects</a
+        >.
+      </p>
     </section>
     <section class="mt-16 animate-reveal opacity-0 [animation-delay:0.2s]">
-      <Prose>
-        <h2>Education</h2>
-        <Education />
-      </Prose>
+      <h2 class="mb-16 break-words text-4xl font-semibold capitalize">
+        Education
+      </h2>
+      <Education />
     </section>
     <section class="mt-16 animate-reveal opacity-0 [animation-delay:0.3s]">
-      <Prose>
-        <h2>Skills</h2>
-        <p>
-          My specific chosen area of focus is design, lighting, and rendering
-          focusing on 3D environments within software such as Blender and Unreal
-          Engine. Using either real-time or offline rendering techniques. In
-          addition to this, I am also very interested in web development.
-        </p>
-        <Skills />
-        <ul><li>Full drivers licence for cars and motorbikes</li></ul>
-      </Prose>
+      <h2 class="mb-16 break-words text-4xl font-semibold capitalize">
+        Skills
+      </h2>
+      <p class="mb-8 text-lg">
+        My specific chosen area of focus is design, lighting, and rendering
+        focusing on 3D environments within software such as Blender and Unreal
+        Engine. Using either real-time or offline rendering techniques. In
+        addition to this, I am also very interested in web development.
+      </p>
+      <Skills />
     </section>
     <section class="mt-16 animate-reveal opacity-0 [animation-delay:0.4s]">
-      <Prose>
-        <h2>Experience</h2>
-        <Work />
-      </Prose>
+      <h2 class="mb-16 break-words text-4xl font-semibold capitalize">
+        Experience
+      </h2>
+      <Work />
     </section>
   </div>
 </Layout>