From 9db394d5f647247a090fee06cbaf285c582f890e Mon Sep 17 00:00:00 2001
From: Troy <hello@troylusty.com>
Date: Mon, 13 Jan 2025 14:48:14 +0000
Subject: [PATCH] start matching cv theme to index page (#24)

* start matching theme on cv to index page

* remove references from cv experience
---
 src/components/Accordion.astro             | 27 ++++----
 src/components/Skills.astro                |  6 +-
 src/components/Work.astro                  | 20 ++++--
 src/content/skills/driving.md              |  5 ++
 src/content/work/camouflage-store.md       |  3 +-
 src/content/work/dialled-in-bikes.md       |  3 +-
 src/content/work/must-find-beans.md        | 11 ---
 src/content/work/paignton-picture-house.md |  2 +-
 src/content/work/sdc-radiant-rumble.md     |  1 -
 src/content/work/service-station.md        |  1 -
 src/content/work/webboss.md                |  4 +-
 src/pages/cv.astro                         | 78 +++++++++++-----------
 src/pages/index.astro                      |  2 +-
 13 files changed, 82 insertions(+), 81 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..53de57f 100644
--- a/src/components/Accordion.astro
+++ b/src/components/Accordion.astro
@@ -16,20 +16,23 @@ 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>
-      <ul>
-        {grades.map((grade) => <li>{grade}</li>)}
-      </ul>
+      <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>
+      <ol class="list-inside list-disc">
+        {grades.map((grade) => <li class="text-tertiary">{grade}</li>)}
+      </ol>
     </div>
   </details>
 </div>
diff --git a/src/components/Skills.astro b/src/components/Skills.astro
index 52e1681..7ff03ce 100644
--- a/src/components/Skills.astro
+++ b/src/components/Skills.astro
@@ -15,13 +15,13 @@ 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>
+        <p class="m-0 cursor-default">{entry.data.title}</p>
       </li>
     ))
   }
diff --git a/src/components/Work.astro b/src/components/Work.astro
index 165d7ea..51cfed1 100644
--- a/src/components/Work.astro
+++ b/src/components/Work.astro
@@ -18,17 +18,23 @@ 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-1 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 href={entry.data.article}>
+            <div class="mt-2 flex flex-row items-center gap-1 justify-self-center rounded-full bg-tertiary px-2 py-1 text-sm font-medium capitalize text-primary transition-colors hover:bg-accent">
+              View project
+            </div>
+          </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/camouflage-store.md b/src/content/work/camouflage-store.md
index b36014c..1a5ca7a 100644
--- a/src/content/work/camouflage-store.md
+++ b/src/content/work/camouflage-store.md
@@ -10,5 +10,4 @@ Setup and ongoing management of an
 [online e-commerce store](https://camouflagestore.uk) in addition to creating,
 editing, and publishing informational
 [YouTube](https://www.youtube.com/@camouflagestoreuk) and social media content
-for a family run [outdoors store](/projects/camouflage-store). _Reference:
-[Steve Passmore](mailto:sales@camouflagestore.uk)._
+for a family run outdoors store.
diff --git a/src/content/work/dialled-in-bikes.md b/src/content/work/dialled-in-bikes.md
index 892cbc1..a70a435 100644
--- a/src/content/work/dialled-in-bikes.md
+++ b/src/content/work/dialled-in-bikes.md
@@ -7,5 +7,4 @@ dateEnd: "2022"
 
 Product management of an [online store](https://dialledinbikes.com) using
 WordPress. Additionally, various visual design changes were made to the layout
-of the site and its content through the use of custom plugins. _Reference:
-[Simon Pedrick](tel:01803551001)._
+of the site and its content through the use of custom plugins.
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/content/work/paignton-picture-house.md b/src/content/work/paignton-picture-house.md
index b58b00a..2925d71 100644
--- a/src/content/work/paignton-picture-house.md
+++ b/src/content/work/paignton-picture-house.md
@@ -8,4 +8,4 @@ dateEnd: "2023"
 Digital capture of the [historic building](https://paigntonpicturehouse.org) and
 its artefacts using photogrammetry and 3D laser scanning techniques. Carried out
 with a University tutor during the restoration of the building as a means of
-preservation. _Reference: [Joseph Cook](mailto:josephcook@southdevon.ac.uk)._
+preservation.
diff --git a/src/content/work/sdc-radiant-rumble.md b/src/content/work/sdc-radiant-rumble.md
index b653857..0b97867 100644
--- a/src/content/work/sdc-radiant-rumble.md
+++ b/src/content/work/sdc-radiant-rumble.md
@@ -11,4 +11,3 @@ by controlling related media being displayed onto
 [The Market Hall](https://real-immersive.realideas.org/market-hall/)’s
 ‘Immersive Dome’. In addition, technical support was also provided to diagnose
 and fix an item of broadcast hardware which was failing to output any signal.
-Reference: [Joseph Cook](mailto:josephcook@southdevon.ac.uk).
diff --git a/src/content/work/service-station.md b/src/content/work/service-station.md
index df78608..2dd3df5 100644
--- a/src/content/work/service-station.md
+++ b/src/content/work/service-station.md
@@ -9,4 +9,3 @@ Whilst in secondary school I worked in two fuel stations, gaining experience in
 working with others and communicating with customers. Initially my job was to
 unload deliveries, keep products stocked up, and server customers. Later, once I
 was older, this progressed to assisting in opening and closing up the shop.
-_Reference: [James Prescott](tel:01803328400)._
diff --git a/src/content/work/webboss.md b/src/content/work/webboss.md
index 87c8460..4761d88 100644
--- a/src/content/work/webboss.md
+++ b/src/content/work/webboss.md
@@ -11,7 +11,7 @@ time there I sat with the designers and developers observing the work they did
 before going off to create my own designs. These designs were then later turned
 into [templates](https://webboss.uk/ryman) that customers could use as a
 launchpad when creating their own site. I used Adobe XD and Photoshop to create
-the [designs](/projects/webboss) which turned out to be different to what the
+the designs which turned out to be different to what the
 rest of the team were using, however I was still able to fit into their team.
 Upon completion of the week I was invited back to work further over the coming
-holiday. _Reference: [Jake Smith](tel:01803467678)._
+holiday.
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>
diff --git a/src/pages/index.astro b/src/pages/index.astro
index 0250aa1..7630dbd 100644
--- a/src/pages/index.astro
+++ b/src/pages/index.astro
@@ -42,7 +42,7 @@ const projects = allProjects
     {
       allProjects.length > HOME.HOMESETTINGS!.NUM_PROJECTS_ON_HOMEPAGE ? (
         <a href="/projects">
-          <div class="mt-8 flex animate-reveal flex-row items-center gap-1 justify-self-center rounded-full bg-tertiary px-3 py-2 font-medium capitalize text-primary opacity-0 transition-colors duration-300 [animation-delay:0.1s] hover:bg-accent">
+          <div class="mt-8 flex animate-reveal flex-row items-center gap-1 justify-self-center rounded-full bg-tertiary px-3 py-2 font-medium capitalize text-primary opacity-0 transition-colors [animation-delay:0.1s] hover:bg-accent">
             View all
           </div>
         </a>