switch hero font to borel (#15)

package-lock.json

@@ -14,8 +14,8 @@
         "@astrojs/sitemap": "3.2.1",
         "@astrojs/tailwind": "^5.1.4",
         "@fontsource-variable/outfit": "^5.1.1",
-        "@fontsource-variable/playwrite-ca": "^5.1.1",
         "@fontsource-variable/red-hat-mono": "^5.1.0",
+        "@fontsource/borel": "^5.1.1",
         "astro": "^5.1.1",
         "astro-icon": "^1.1.4",
         "rehype-external-links": "^3.0.0",
@@ -783,18 +783,18 @@
       "integrity": "sha512-XuzmITw6zWt3nUINJVAk99f0TgXJ9ZCt3qERAr0t89Em6RbqQ4x6skmxsIgjzkLHVzmoqf3AzCbxvpk/kNnu5A==",
       "license": "OFL-1.1"
     },
-    "node_modules/@fontsource-variable/playwrite-ca": {
-      "version": "5.1.1",
-      "resolved": "https://registry.npmjs.org/@fontsource-variable/playwrite-ca/-/playwrite-ca-5.1.1.tgz",
-      "integrity": "sha512-982bgK4zGM3KjjXvrBo5virq2jLHJHbQw3gFG9krR5PoFqq00tcNNSAa4ns6gf7wNKjQFk6Pz2OAPj/KPoEJAQ==",
-      "license": "OFL-1.1"
-    },
     "node_modules/@fontsource-variable/red-hat-mono": {
       "version": "5.1.1",
       "resolved": "https://registry.npmjs.org/@fontsource-variable/red-hat-mono/-/red-hat-mono-5.1.1.tgz",
       "integrity": "sha512-yeZTpCFFU+fJwlhDrMdQROva42Kuaj1KjCp2HSHziT0FE+BPEL90oS0yAAdDZqwjgI77wDp2I6kgnZoHFV95AQ==",
       "license": "OFL-1.1"
     },
+    "node_modules/@fontsource/borel": {
+      "version": "5.1.1",
+      "resolved": "https://registry.npmjs.org/@fontsource/borel/-/borel-5.1.1.tgz",
+      "integrity": "sha512-FkQy7EqFdnDuDXIekP3bYLu/UhoCxhrJ+3cg71OgR3M4AgInLgPUKcsOI+OLuQ24GlThLVtEXWnEkgf/0apJEA==",
+      "license": "OFL-1.1"
+    },
     "node_modules/@iconify-json/mdi": {
       "version": "1.2.2",
       "resolved": "https://registry.npmjs.org/@iconify-json/mdi/-/mdi-1.2.2.tgz",

package.json

@@ -17,8 +17,8 @@
     "@astrojs/sitemap": "3.2.1",
     "@astrojs/tailwind": "^5.1.4",
     "@fontsource-variable/outfit": "^5.1.1",
-    "@fontsource-variable/playwrite-ca": "^5.1.1",
     "@fontsource-variable/red-hat-mono": "^5.1.0",
+    "@fontsource/borel": "^5.1.1",
     "astro": "^5.1.1",
     "astro-icon": "^1.1.4",
     "rehype-external-links": "^3.0.0",

src/components/Hero.astro

@@ -1,13 +1,21 @@
 ---
+import borel from "@fontsource/borel/files/borel-latin-400-normal.woff2?url";
+---
 
----
+<link
+  rel="preload"
+  as="font"
+  type="font/woff2"
+  href={borel}
+  crossorigin="anonymous"
+/>
 
-<section class="mb-32">
+<section class="mb-32 overflow-clip">
   <h1
-    class="text-pretty font-['Outfit_Variable'] text-8xl font-bold md:text-9xl"
+    class="--translate-y-[100%] animate-logo text-pretty text-8xl font-bold md:text-9xl"
   >
     Digital designer based in the <span
-      class="animate-gradient-x bg-gradient-to-r from-indigo-500 from-10% via-sky-500 via-30% to-emerald-500 to-90% bg-clip-text font-['Playwrite_CA_Variable'] text-7xl font-medium text-transparent md:text-8xl"
+      class="animate-gradient-x bg-gradient-to-r from-indigo-500 from-10% via-sky-500 via-30% to-emerald-500 to-90% bg-clip-text font-['Borel'] text-7xl font-medium text-transparent md:text-8xl"
       >United Kingdom</span
     >.
   </h1>

src/pages/cv.astro

@@ -10,6 +10,7 @@ import Prose from "@components/Prose.astro";
 ---
 
 <Layout title={CV.TITLE} description={CV.DESCRIPTION}>
+  <div class="mx-auto max-w-full md:max-w-prose">
     <section>
       <div
         class="flex flex-col items-start justify-between gap-6 md:flex-row md:items-center"
@@ -37,16 +38,16 @@ import Prose from "@components/Prose.astro";
       <Prose>
         <h2>About me</h2>
         <p>
-        Hi, my name is Troy and I’m a student 3D artist studying on a BA (Hons)
+          Hi, my name is Troy and I’m a student 3D artist studying on a BA
-        Game Arts and Design course in the UK.
+          (Hons) Game Arts and Design course in the UK.
         </p>
         <p>
-        In 2019 I began experimenting with Blender after having used various 2D
+          In 2019 I began experimenting with Blender after having used various
-        art applications such as Adobe Photoshop for over 5 years. After making
+          2D art applications such as Adobe Photoshop for over 5 years. After
-        this change, I realised that I have a huge interest in creating 3D
+          making this change, I realised that I have a huge interest in creating
-        graphics for video games and TV. At the moment I am working on expanding
+          3D graphics for video games and TV. At the moment I am working on
-        my skillset to encompass other areas with a focus on lighting and
+          expanding my skillset to encompass other areas with a focus on
-        rendering techniques in relation to environment art.
+          lighting and rendering techniques in relation to environment art.
         </p>
         <p>
           My current portfolio of work can be found on my website at:
@@ -79,4 +80,5 @@ import Prose from "@components/Prose.astro";
         <Work />
       </Prose>
     </section>
+  </div>
 </Layout>

src/styles/global.css

@@ -1,6 +1,6 @@
 @import "@fontsource-variable/red-hat-mono";
 @import "@fontsource-variable/outfit";
-@import "@fontsource-variable/playwrite-ca";
+@import "@fontsource/borel";
 
 @tailwind base;
 @tailwind components;

tailwind.config.ts

@@ -39,7 +39,7 @@ export default {
       },
       logo: {
         "0%": {
-          transform: "translateY(200px)",
+          transform: "translateY(512px)",
           color: "hsl(var(--primary))",
         },
         "100%": {