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

@@ -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">
+      <p class="m-0 text-balance text-xl font-semibold text-secondary">
-        {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">
         {qualification}
       </p>
-      <ul>
+      <span class="transition group-open:rotate-180">
-        {grades.map((grade) => <li>{grade}</li>)}
+        <Icon
-      </ul>
+          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>

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

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">
+      <li class="pb-8 pl-0 last:pb-0">
-        <h3>
+        <h3 class="mb-1 mt-4 text-balance text-xl font-semibold text-secondary">
-          <span>{entry.data.company}</span>
+          <span class="text-tertiary">{entry.data.role} at</span>{" "}
-          <span>({dateRange(entry.data.dateStart, entry.data.dateEnd)})</span>
+          {entry.data.company}
         </h3>
-        <p>{entry.data.role}</p>
+        <time class="block text-sm text-accent">
-        <article>
+          {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>
     ))

src/content/skills/driving.md

@@ -0,0 +1,5 @@
+---
+type: "driving"
+title: "Full drivers licence (A & B)"
+icon: "mdi:card-account-details-star"
+---

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:
+for a family run outdoors store.
-[Steve Passmore](mailto:sales@camouflagestore.uk)._

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:
+of the site and its content through the use of custom plugins.
-[Simon Pedrick](tel:01803551001)._

src/content/work/must-find-beans.md

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

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.

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).

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)._

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.

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 class="mb-16 break-words text-4xl font-semibold capitalize">
-        <h2>About me</h2>
+        About me
-        <p>
+      </h2>
-          Hi, my name is Troy and I’m a student 3D artist studying on a BA
+      <p class="mb-8 text-lg">
-          (Hons) Game Arts and Design course in the UK.
+        Hi, my name is Troy and I’m a student 3D artist studying on a BA (Hons)
-        </p>
+        Game Arts and Design course in the UK.
-        <p>
+      </p>
-          In 2019 I began experimenting with Blender after having used various
+      <p class="mb-8 text-lg">
-          2D art applications such as Adobe Photoshop for over 5 years. After
+        In 2019 I began experimenting with Blender after having used various 2D
-          making this change, I realised that I have a huge interest in creating
+        art applications such as Adobe Photoshop for over 5 years. After making
-          3D graphics for video games and TV. At the moment I am working on
+        this change, I realised that I have a huge interest in creating 3D
-          expanding my skillset to encompass other areas with a focus on
+        graphics for video games and TV. At the moment I am working on expanding
-          lighting and rendering techniques in relation to environment art.
+        my skillset to encompass other areas with a focus on lighting and
-        </p>
+        rendering techniques in relation to environment art.
-        <p>
+      </p>
-          My current portfolio of work can be found on my website at:
+      <p class="mb-8 text-lg">
-          <a href="/projects">troylusty.com/projects</a>.
+        My current portfolio of work can be found on my website at:
-        </p>
+        <a
-      </Prose>
+          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 class="mb-16 break-words text-4xl font-semibold capitalize">
-        <h2>Education</h2>
+        Education
-        <Education />
+      </h2>
-      </Prose>
+      <Education />
     </section>
     <section class="mt-16 animate-reveal opacity-0 [animation-delay:0.3s]">
-      <Prose>
+      <h2 class="mb-16 break-words text-4xl font-semibold capitalize">
-        <h2>Skills</h2>
+        Skills
-        <p>
+      </h2>
-          My specific chosen area of focus is design, lighting, and rendering
+      <p class="mb-8 text-lg">
-          focusing on 3D environments within software such as Blender and Unreal
+        My specific chosen area of focus is design, lighting, and rendering
-          Engine. Using either real-time or offline rendering techniques. In
+        focusing on 3D environments within software such as Blender and Unreal
-          addition to this, I am also very interested in web development.
+        Engine. Using either real-time or offline rendering techniques. In
-        </p>
+        addition to this, I am also very interested in web development.
-        <Skills />
+      </p>
-        <ul><li>Full drivers licence for cars and motorbikes</li></ul>
+      <Skills />
-      </Prose>
     </section>
     <section class="mt-16 animate-reveal opacity-0 [animation-delay:0.4s]">
-      <Prose>
+      <h2 class="mb-16 break-words text-4xl font-semibold capitalize">
-        <h2>Experience</h2>
+        Experience
-        <Work />
+      </h2>
-      </Prose>
+      <Work />
     </section>
   </div>
 </Layout>

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>