switch hero font to borel (#15)
This commit is contained in:
GitHub
parent
5752069ee6
commit
0cc2a7a04e
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/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",
|
||||
|
|
|
|||
|
|
@ -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",
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -10,73 +10,75 @@ import Prose from "@components/Prose.astro";
|
|||
---
|
||||
|
||||
<Layout title={CV.TITLE} description={CV.DESCRIPTION}>
|
||||
<section>
|
||||
<div
|
||||
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 class="mx-auto max-w-full md:max-w-prose">
|
||||
<section>
|
||||
<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">
|
||||
<Icon name="mdi:email" />
|
||||
<Link href="mailto:hello@troylusty.com">
|
||||
<p>hello@troylusty.com</p>
|
||||
</Link>
|
||||
<Icon name="mdi:web" />
|
||||
<Link href="/">
|
||||
<p>troylusty.com</p>
|
||||
</Link>
|
||||
<h1 class="animate-reveal break-words text-4xl font-semibold opacity-0">
|
||||
Troy Lusty
|
||||
</h1>
|
||||
<div
|
||||
class="mt-4 flex flex-col items-start gap-2 text-lg text-tertiary md:flex-row"
|
||||
>
|
||||
<div class="flex animate-reveal items-center gap-2 opacity-0">
|
||||
<Icon name="mdi:email" />
|
||||
<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>
|
||||
</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>
|
||||
</section>
|
||||
<section class="mt-16 animate-reveal opacity-0 [animation-delay:0.2s]">
|
||||
<Prose>
|
||||
<h2>Education</h2>
|
||||
<Education />
|
||||
</Prose>
|
||||
</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>
|
||||
</section>
|
||||
<section class="mt-16 animate-reveal opacity-0 [animation-delay:0.4s]">
|
||||
<Prose>
|
||||
<h2>Experience</h2>
|
||||
<Work />
|
||||
</Prose>
|
||||
</section>
|
||||
</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>
|
||||
</section>
|
||||
<section class="mt-16 animate-reveal opacity-0 [animation-delay:0.2s]">
|
||||
<Prose>
|
||||
<h2>Education</h2>
|
||||
<Education />
|
||||
</Prose>
|
||||
</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>
|
||||
</section>
|
||||
<section class="mt-16 animate-reveal opacity-0 [animation-delay:0.4s]">
|
||||
<Prose>
|
||||
<h2>Experience</h2>
|
||||
<Work />
|
||||
</Prose>
|
||||
</section>
|
||||
</div>
|
||||
</Layout>
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -39,7 +39,7 @@ export default {
|
|||
},
|
||||
logo: {
|
||||
"0%": {
|
||||
transform: "translateY(200px)",
|
||||
transform: "translateY(512px)",
|
||||
color: "hsl(var(--primary))",
|
||||
},
|
||||
"100%": {
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue