start matching theme on cv to index page

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">
+      <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>
+      <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>

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>

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">
+      <li class="pb-8 pl-0 last:pb-0">
-        <h3>
+        <h3 class="mb-3 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
+            class="text-tertiary transition-colors hover:text-accent"
+            href={entry.data.article}
+          >
+            See related project
+          </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/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/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>