switch hero font to borel
This commit is contained in:
parent
5752069ee6
commit
6a7d22a8c4
GPG key ID:
DFC06C02ED3B4711
6 changed files with 89 additions and 79 deletions
14
package-lock.json
generated
14
package-lock.json
generated
|
|
@ -14,8 +14,8 @@
|
||||||
"@astrojs/sitemap": "3.2.1",
|
"@astrojs/sitemap": "3.2.1",
|
||||||
"@astrojs/tailwind": "^5.1.4",
|
"@astrojs/tailwind": "^5.1.4",
|
||||||
"@fontsource-variable/outfit": "^5.1.1",
|
"@fontsource-variable/outfit": "^5.1.1",
|
||||||
"@fontsource-variable/playwrite-ca": "^5.1.1",
|
|
||||||
"@fontsource-variable/red-hat-mono": "^5.1.0",
|
"@fontsource-variable/red-hat-mono": "^5.1.0",
|
||||||
|
"@fontsource/borel": "^5.1.1",
|
||||||
"astro": "^5.1.1",
|
"astro": "^5.1.1",
|
||||||
"astro-icon": "^1.1.4",
|
"astro-icon": "^1.1.4",
|
||||||
"rehype-external-links": "^3.0.0",
|
"rehype-external-links": "^3.0.0",
|
||||||
|
|
@ -783,18 +783,18 @@
|
||||||
"integrity": "sha512-XuzmITw6zWt3nUINJVAk99f0TgXJ9ZCt3qERAr0t89Em6RbqQ4x6skmxsIgjzkLHVzmoqf3AzCbxvpk/kNnu5A==",
|
"integrity": "sha512-XuzmITw6zWt3nUINJVAk99f0TgXJ9ZCt3qERAr0t89Em6RbqQ4x6skmxsIgjzkLHVzmoqf3AzCbxvpk/kNnu5A==",
|
||||||
"license": "OFL-1.1"
|
"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": {
|
"node_modules/@fontsource-variable/red-hat-mono": {
|
||||||
"version": "5.1.1",
|
"version": "5.1.1",
|
||||||
"resolved": "https://registry.npmjs.org/@fontsource-variable/red-hat-mono/-/red-hat-mono-5.1.1.tgz",
|
"resolved": "https://registry.npmjs.org/@fontsource-variable/red-hat-mono/-/red-hat-mono-5.1.1.tgz",
|
||||||
"integrity": "sha512-yeZTpCFFU+fJwlhDrMdQROva42Kuaj1KjCp2HSHziT0FE+BPEL90oS0yAAdDZqwjgI77wDp2I6kgnZoHFV95AQ==",
|
"integrity": "sha512-yeZTpCFFU+fJwlhDrMdQROva42Kuaj1KjCp2HSHziT0FE+BPEL90oS0yAAdDZqwjgI77wDp2I6kgnZoHFV95AQ==",
|
||||||
"license": "OFL-1.1"
|
"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": {
|
"node_modules/@iconify-json/mdi": {
|
||||||
"version": "1.2.2",
|
"version": "1.2.2",
|
||||||
"resolved": "https://registry.npmjs.org/@iconify-json/mdi/-/mdi-1.2.2.tgz",
|
"resolved": "https://registry.npmjs.org/@iconify-json/mdi/-/mdi-1.2.2.tgz",
|
||||||
|
|
|
||||||
|
|
@ -17,8 +17,8 @@
|
||||||
"@astrojs/sitemap": "3.2.1",
|
"@astrojs/sitemap": "3.2.1",
|
||||||
"@astrojs/tailwind": "^5.1.4",
|
"@astrojs/tailwind": "^5.1.4",
|
||||||
"@fontsource-variable/outfit": "^5.1.1",
|
"@fontsource-variable/outfit": "^5.1.1",
|
||||||
"@fontsource-variable/playwrite-ca": "^5.1.1",
|
|
||||||
"@fontsource-variable/red-hat-mono": "^5.1.0",
|
"@fontsource-variable/red-hat-mono": "^5.1.0",
|
||||||
|
"@fontsource/borel": "^5.1.1",
|
||||||
"astro": "^5.1.1",
|
"astro": "^5.1.1",
|
||||||
"astro-icon": "^1.1.4",
|
"astro-icon": "^1.1.4",
|
||||||
"rehype-external-links": "^3.0.0",
|
"rehype-external-links": "^3.0.0",
|
||||||
|
|
|
||||||
|
|
@ -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
|
<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
|
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
|
>United Kingdom</span
|
||||||
>.
|
>.
|
||||||
</h1>
|
</h1>
|
||||||
|
|
|
||||||
|
|
@ -10,73 +10,75 @@ import Prose from "@components/Prose.astro";
|
||||||
---
|
---
|
||||||
|
|
||||||
<Layout title={CV.TITLE} description={CV.DESCRIPTION}>
|
<Layout title={CV.TITLE} description={CV.DESCRIPTION}>
|
||||||
<section>
|
<div class="mx-auto max-w-full md:max-w-prose">
|
||||||
<div
|
<section>
|
||||||
class="flex flex-col items-start justify-between gap-6 md:flex-row md:items-center"
|
|
||||||
>
|
|
||||||
<h1 class="animate-reveal break-words text-4xl font-semibold opacity-0">
|
|
||||||
Troy Lusty
|
|
||||||
</h1>
|
|
||||||
<div
|
<div
|
||||||
class="mt-4 flex flex-col items-start gap-2 text-lg text-tertiary md:flex-row"
|
class="flex flex-col items-start justify-between gap-6 md:flex-row md:items-center"
|
||||||
>
|
>
|
||||||
<div class="flex animate-reveal items-center gap-2 opacity-0">
|
<h1 class="animate-reveal break-words text-4xl font-semibold opacity-0">
|
||||||
<Icon name="mdi:email" />
|
Troy Lusty
|
||||||
<Link href="mailto:hello@troylusty.com">
|
</h1>
|
||||||
<p>hello@troylusty.com</p>
|
<div
|
||||||
</Link>
|
class="mt-4 flex flex-col items-start gap-2 text-lg text-tertiary md:flex-row"
|
||||||
<Icon name="mdi:web" />
|
>
|
||||||
<Link href="/">
|
<div class="flex animate-reveal items-center gap-2 opacity-0">
|
||||||
<p>troylusty.com</p>
|
<Icon name="mdi:email" />
|
||||||
</Link>
|
<Link href="mailto:hello@troylusty.com">
|
||||||
|
<p>hello@troylusty.com</p>
|
||||||
|
</Link>
|
||||||
|
<Icon name="mdi:web" />
|
||||||
|
<Link href="/">
|
||||||
|
<p>troylusty.com</p>
|
||||||
|
</Link>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</section>
|
||||||
</section>
|
<section class="mt-16 animate-reveal opacity-0 [animation-delay:0.1s]">
|
||||||
<section class="mt-16 animate-reveal opacity-0 [animation-delay:0.1s]">
|
<Prose>
|
||||||
<Prose>
|
<h2>About me</h2>
|
||||||
<h2>About me</h2>
|
<p>
|
||||||
<p>
|
Hi, my name is Troy and I’m a student 3D artist studying on a BA
|
||||||
Hi, my name is Troy and I’m a student 3D artist studying on a BA (Hons)
|
(Hons) Game Arts and Design course in the UK.
|
||||||
Game Arts and Design course in the UK.
|
</p>
|
||||||
</p>
|
<p>
|
||||||
<p>
|
In 2019 I began experimenting with Blender after having used various
|
||||||
In 2019 I began experimenting with Blender after having used various 2D
|
2D art applications such as Adobe Photoshop for over 5 years. After
|
||||||
art applications such as Adobe Photoshop for over 5 years. After making
|
making this change, I realised that I have a huge interest in creating
|
||||||
this change, I realised that I have a huge interest in creating 3D
|
3D graphics for video games and TV. At the moment I am working on
|
||||||
graphics for video games and TV. At the moment I am working on expanding
|
expanding my skillset to encompass other areas with a focus on
|
||||||
my skillset to encompass other areas with a focus on lighting and
|
lighting and rendering techniques in relation to environment art.
|
||||||
rendering techniques in relation to environment art.
|
</p>
|
||||||
</p>
|
<p>
|
||||||
<p>
|
My current portfolio of work can be found on my website at:
|
||||||
My current portfolio of work can be found on my website at:
|
<a href="/projects">troylusty.com/projects</a>.
|
||||||
<a href="/projects">troylusty.com/projects</a>.
|
</p>
|
||||||
</p>
|
</Prose>
|
||||||
</Prose>
|
</section>
|
||||||
</section>
|
<section class="mt-16 animate-reveal opacity-0 [animation-delay:0.2s]">
|
||||||
<section class="mt-16 animate-reveal opacity-0 [animation-delay:0.2s]">
|
<Prose>
|
||||||
<Prose>
|
<h2>Education</h2>
|
||||||
<h2>Education</h2>
|
<Education />
|
||||||
<Education />
|
</Prose>
|
||||||
</Prose>
|
</section>
|
||||||
</section>
|
<section class="mt-16 animate-reveal opacity-0 [animation-delay:0.3s]">
|
||||||
<section class="mt-16 animate-reveal opacity-0 [animation-delay:0.3s]">
|
<Prose>
|
||||||
<Prose>
|
<h2>Skills</h2>
|
||||||
<h2>Skills</h2>
|
<p>
|
||||||
<p>
|
My specific chosen area of focus is design, lighting, and rendering
|
||||||
My specific chosen area of focus is design, lighting, and rendering
|
focusing on 3D environments within software such as Blender and Unreal
|
||||||
focusing on 3D environments within software such as Blender and Unreal
|
Engine. Using either real-time or offline rendering techniques. In
|
||||||
Engine. Using either real-time or offline rendering techniques. In
|
addition to this, I am also very interested in web development.
|
||||||
addition to this, I am also very interested in web development.
|
</p>
|
||||||
</p>
|
<Skills />
|
||||||
<Skills />
|
<ul><li>Full drivers licence for cars and motorbikes</li></ul>
|
||||||
<ul><li>Full drivers licence for cars and motorbikes</li></ul>
|
</Prose>
|
||||||
</Prose>
|
</section>
|
||||||
</section>
|
<section class="mt-16 animate-reveal opacity-0 [animation-delay:0.4s]">
|
||||||
<section class="mt-16 animate-reveal opacity-0 [animation-delay:0.4s]">
|
<Prose>
|
||||||
<Prose>
|
<h2>Experience</h2>
|
||||||
<h2>Experience</h2>
|
<Work />
|
||||||
<Work />
|
</Prose>
|
||||||
</Prose>
|
</section>
|
||||||
</section>
|
</div>
|
||||||
</Layout>
|
</Layout>
|
||||||
|
|
|
||||||
|
|
@ -1,6 +1,6 @@
|
||||||
@import "@fontsource-variable/red-hat-mono";
|
@import "@fontsource-variable/red-hat-mono";
|
||||||
@import "@fontsource-variable/outfit";
|
@import "@fontsource-variable/outfit";
|
||||||
@import "@fontsource-variable/playwrite-ca";
|
@import "@fontsource/borel";
|
||||||
|
|
||||||
@tailwind base;
|
@tailwind base;
|
||||||
@tailwind components;
|
@tailwind components;
|
||||||
|
|
|
||||||
|
|
@ -39,7 +39,7 @@ export default {
|
||||||
},
|
},
|
||||||
logo: {
|
logo: {
|
||||||
"0%": {
|
"0%": {
|
||||||
transform: "translateY(200px)",
|
transform: "translateY(512px)",
|
||||||
color: "hsl(var(--primary))",
|
color: "hsl(var(--primary))",
|
||||||
},
|
},
|
||||||
"100%": {
|
"100%": {
|
||||||
|
|
|
||||||
Loading…
Add table
Reference in a new issue