add animated hero text to index page (#13)
This commit is contained in:
GitHub
parent
fe60d3846f
commit
4079f9e872
12 changed files with 141 additions and 87 deletions
15
package-lock.json
generated
15
package-lock.json
generated
|
|
@ -13,7 +13,8 @@
|
|||
"@astrojs/rss": "^4.0.10",
|
||||
"@astrojs/sitemap": "3.2.1",
|
||||
"@astrojs/tailwind": "^5.1.4",
|
||||
"@fontsource-variable/inter": "^5.1.0",
|
||||
"@fontsource-variable/outfit": "^5.1.1",
|
||||
"@fontsource-variable/playwrite-ca": "^5.1.1",
|
||||
"@fontsource-variable/red-hat-mono": "^5.1.0",
|
||||
"astro": "^5.1.1",
|
||||
"astro-icon": "^1.1.4",
|
||||
|
|
@ -776,10 +777,16 @@
|
|||
"node": ">=12"
|
||||
}
|
||||
},
|
||||
"node_modules/@fontsource-variable/inter": {
|
||||
"node_modules/@fontsource-variable/outfit": {
|
||||
"version": "5.1.1",
|
||||
"resolved": "https://registry.npmjs.org/@fontsource-variable/inter/-/inter-5.1.1.tgz",
|
||||
"integrity": "sha512-OpXFTmiH6tHkYijMvQTycFKBLK4X+SRV6tet1m4YOUH7SzIIlMqDja+ocDtiCA72UthBH/vF+3ZtlMr2rN/wIw==",
|
||||
"resolved": "https://registry.npmjs.org/@fontsource-variable/outfit/-/outfit-5.1.1.tgz",
|
||||
"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": {
|
||||
|
|
|
|||
|
|
@ -16,7 +16,8 @@
|
|||
"@astrojs/rss": "^4.0.10",
|
||||
"@astrojs/sitemap": "3.2.1",
|
||||
"@astrojs/tailwind": "^5.1.4",
|
||||
"@fontsource-variable/inter": "^5.1.0",
|
||||
"@fontsource-variable/outfit": "^5.1.1",
|
||||
"@fontsource-variable/playwrite-ca": "^5.1.1",
|
||||
"@fontsource-variable/red-hat-mono": "^5.1.0",
|
||||
"astro": "^5.1.1",
|
||||
"astro-icon": "^1.1.4",
|
||||
|
|
|
|||
|
|
@ -20,7 +20,7 @@ if (typeof tags !== "undefined") {
|
|||
tags = SITE.KEYWORDS.concat(tags);
|
||||
}
|
||||
|
||||
import inter from "@fontsource-variable/inter/files/inter-latin-wght-normal.woff2?url";
|
||||
import outfit from "@fontsource-variable/outfit/files/outfit-latin-wght-normal.woff2?url";
|
||||
import redhatmono from "@fontsource-variable/red-hat-mono/files/red-hat-mono-latin-wght-normal.woff2?url";
|
||||
---
|
||||
|
||||
|
|
@ -103,7 +103,7 @@ import redhatmono from "@fontsource-variable/red-hat-mono/files/red-hat-mono-lat
|
|||
rel="preload"
|
||||
as="font"
|
||||
type="font/woff2"
|
||||
href={inter}
|
||||
href={outfit}
|
||||
crossorigin="anonymous"
|
||||
/>
|
||||
<link
|
||||
|
|
|
|||
14
src/components/Hero.astro
Normal file
14
src/components/Hero.astro
Normal file
|
|
@ -0,0 +1,14 @@
|
|||
---
|
||||
|
||||
---
|
||||
|
||||
<section class="mb-32">
|
||||
<h1
|
||||
class="text-pretty font-['Outfit_Variable'] 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-light text-transparent md:text-8xl"
|
||||
>United Kingdom</span
|
||||
>.
|
||||
</h1>
|
||||
</section>
|
||||
|
|
@ -1,5 +1,5 @@
|
|||
<div
|
||||
class="prose max-w-full prose-headings:text-secondary prose-h1:text-xl prose-h1:font-bold prose-p:max-w-full prose-p:text-pretty prose-p:break-words prose-p:text-lg prose-p:text-secondary prose-a:text-secondary prose-a:underline prose-a:decoration-tertiary prose-a:decoration-wavy prose-blockquote:border-secondary prose-strong:text-secondary prose-code:whitespace-pre-wrap prose-code:font-semibold prose-code:text-accent prose-code:before:content-none prose-code:after:content-none prose-pre:w-fit prose-pre:max-w-full prose-pre:border prose-pre:border-accent prose-pre:bg-primary prose-li:text-secondary prose-li:marker:text-secondary prose-img:max-h-[90vh] prose-img:w-auto prose-img:max-w-full prose-img:rounded prose-video:max-h-[90vh] prose-video:w-auto prose-video:max-w-full prose-video:rounded"
|
||||
class="prose max-w-full prose-headings:text-secondary prose-h1:text-xl prose-h1:font-bold prose-p:max-w-full prose-p:text-pretty prose-p:break-words prose-p:text-lg prose-p:text-secondary prose-a:text-secondary prose-a:underline prose-a:decoration-tertiary prose-a:decoration-wavy prose-blockquote:border-secondary prose-strong:text-secondary prose-code:whitespace-pre-wrap prose-code:font-medium prose-code:text-secondary prose-code:before:content-none prose-code:after:content-none prose-pre:w-fit prose-pre:max-w-full prose-pre:border prose-pre:border-tertiary prose-pre:bg-primary prose-li:text-secondary prose-li:marker:text-secondary prose-img:max-h-[90vh] prose-img:w-auto prose-img:max-w-full prose-img:rounded prose-video:max-h-[90vh] prose-video:w-auto prose-video:max-w-full prose-video:rounded"
|
||||
>
|
||||
<slot />
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -18,43 +18,43 @@ const prev = items[(index - 1 + items.length) % items.length];
|
|||
const next = items[(index + 1) % items.length];
|
||||
---
|
||||
|
||||
<div
|
||||
class="mx-auto mt-8 flex max-w-prose flex-col justify-between gap-4 md:flex-row md:gap-0"
|
||||
>
|
||||
<div class="group flex w-fit flex-row items-center justify-between gap-6">
|
||||
<a
|
||||
href={`/${prev.collection}/${prev.slug}`}
|
||||
class="animate-reveal rounded-full bg-secondary p-1 opacity-0 transition-colors group-hover:bg-tertiary"
|
||||
>
|
||||
<Icon
|
||||
name="mdi:arrow-left"
|
||||
title="All projects"
|
||||
class="h-4 w-auto text-primary"
|
||||
/>
|
||||
</a>
|
||||
<a href={`/${prev.collection}/${prev.slug}`}>
|
||||
<p class="animate-reveal break-words text-xl font-medium opacity-0">
|
||||
{prev.data.title}
|
||||
</p>
|
||||
</a>
|
||||
</div>
|
||||
<div
|
||||
class="group flex w-fit flex-row items-center justify-between gap-6 self-end"
|
||||
>
|
||||
<a href={`/${next.collection}/${next.slug}`}>
|
||||
<p class="animate-reveal break-words text-xl font-medium opacity-0">
|
||||
{next.data.title}
|
||||
</p>
|
||||
</a>
|
||||
<a
|
||||
href={`/${next.collection}/${next.slug}`}
|
||||
class="animate-reveal rounded-full bg-secondary p-1 opacity-0 transition-colors group-hover:bg-tertiary"
|
||||
>
|
||||
<Icon
|
||||
name="mdi:arrow-right"
|
||||
title="All projects"
|
||||
class="h-4 w-auto text-primary"
|
||||
/>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
{
|
||||
items.length > 1 ? (
|
||||
<div class="mx-auto mt-8 flex max-w-prose justify-between gap-4 md:gap-0">
|
||||
<div class="group flex w-fit flex-row items-center justify-between gap-2">
|
||||
<a
|
||||
href={`/${prev.collection}/${prev.slug}`}
|
||||
class="animate-reveal opacity-0"
|
||||
>
|
||||
<Icon
|
||||
name="mdi:arrow-left"
|
||||
title="All projects"
|
||||
class="h-4 w-auto text-tertiary transition-colors duration-300 group-hover:text-accent"
|
||||
/>
|
||||
</a>
|
||||
<a href={`/${prev.collection}/${prev.slug}`}>
|
||||
<p class="animate-reveal break-words text-xl font-medium text-tertiary opacity-0 transition-colors duration-300 group-hover:text-accent">
|
||||
{prev.data.title}
|
||||
</p>
|
||||
</a>
|
||||
</div>
|
||||
<div class="group flex w-fit flex-row items-center justify-between gap-2 self-end">
|
||||
<a href={`/${next.collection}/${next.slug}`}>
|
||||
<p class="animate-reveal break-words text-xl font-medium text-tertiary opacity-0 transition-colors duration-300 group-hover:text-accent">
|
||||
{next.data.title}
|
||||
</p>
|
||||
</a>
|
||||
<a
|
||||
href={`/${next.collection}/${next.slug}`}
|
||||
class="animate-reveal opacity-0"
|
||||
>
|
||||
<Icon
|
||||
name="mdi:arrow-right"
|
||||
title="All projects"
|
||||
class="h-4 w-auto text-tertiary transition-colors duration-300 group-hover:text-accent"
|
||||
/>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
) : null
|
||||
}
|
||||
|
|
|
|||
|
|
@ -11,31 +11,28 @@ const { collection } = Astro.props;
|
|||
|
||||
<li>
|
||||
<article
|
||||
class="group relative isolate mx-auto flex h-full w-full flex-col justify-end overflow-hidden rounded-lg px-8 pb-8 pt-40"
|
||||
class="group relative isolate mx-auto flex h-full w-full flex-col justify-end overflow-hidden rounded px-8 pb-8 pt-40"
|
||||
>
|
||||
<Image
|
||||
src={collection.data.image.url}
|
||||
alt={collection.data.image.alt}
|
||||
title={collection.data.title}
|
||||
loading="eager"
|
||||
class="absolute inset-0 h-full w-full object-cover transition-transform duration-300 group-hover:scale-105"
|
||||
class="absolute inset-0 h-full w-full object-cover transition-all duration-300 group-hover:brightness-50"
|
||||
fit="cover"
|
||||
/>
|
||||
<div
|
||||
class="absolute inset-0 bg-gradient-to-t from-black via-transparent to-transparent"
|
||||
>
|
||||
</div>
|
||||
|
||||
<a
|
||||
class="absolute inset-0 z-20"
|
||||
href={`/${collection.collection}/${collection.slug}`}
|
||||
aria-label={collection.data.title}></a>
|
||||
<h3
|
||||
class="z-10 mt-3 w-fit text-xl font-semibold text-primary dark:text-secondary"
|
||||
class="z-10 mt-3 w-fit text-xl font-semibold text-primary opacity-0 transition-opacity duration-300 group-hover:opacity-100 dark:text-secondary"
|
||||
>
|
||||
{collection.data.title}
|
||||
</h3>
|
||||
<div
|
||||
class="z-10 w-fit gap-y-1 overflow-hidden text-sm leading-6 text-accent"
|
||||
class="z-10 w-fit gap-y-1 overflow-hidden text-sm leading-6 text-accent opacity-0 transition-opacity duration-500 group-hover:opacity-100"
|
||||
>
|
||||
{
|
||||
collection.data.collection ? (
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
---
|
||||
title: "A Long Way Down (Demo)"
|
||||
description: "A Long Way Down is a short, atmospheric linear adventure created alongside my friend and teammate Sam as a project for our FdA Games and Interactive Design degree."
|
||||
description: "A short, atmospheric linear adventure created for my FdA Games and Interactive Design degree."
|
||||
date: 2023-05-11
|
||||
updated: 2023-05-11
|
||||
featured: true
|
||||
|
|
|
|||
|
|
@ -45,7 +45,7 @@ _Previous design_
|
|||
|
||||
Along with the switch of platform, we came to the decision that the domain and overall branding would need to be updated to to go along with the rest of the work being done. I felt it was important however that the original red colour of `#dd3e3e` was kept as it was a key part of the brand from all the way back in 2007.
|
||||
|
||||
For the domain, we have gone with [camouflagestore.uk](https://camouflagestore.uk) (and its equavalent .co.uk tld). This was chosen as the location of the store is a key factor in its identity, and having this represented from the geto go meant a lot to the client. The legacy domain of [camouflage-store.com](https://camouflage-store.com) has also been kept since it has also been with Steve since 2007 and holds significant personal value.
|
||||
For the domain, we have gone with [camouflagestore.uk](https://camouflagestore.uk) (and its equavalent .co.uk tld). This was chosen as the location of the store is a key factor in its identity, and having this represented from the get-go meant a lot to the client. The legacy domain of [camouflage-store.com](https://camouflage-store.com) has also been kept since it has also been with Steve since 2007 and holds significant personal value.
|
||||
|
||||
## VPS
|
||||
|
||||
|
|
|
|||
|
|
@ -2,9 +2,9 @@
|
|||
import Layout from "@layouts/Layout.astro";
|
||||
import { HOME } from "@consts";
|
||||
import { getCollection } from "astro:content";
|
||||
import { Icon } from "astro-icon/components";
|
||||
import ShowcaseProject from "@components/ShowcaseProject.astro";
|
||||
import ShowcasePost from "@components/ShowcasePost.astro";
|
||||
import Hero from "@components/Hero.astro";
|
||||
|
||||
const posts = (await getCollection("posts"))
|
||||
.filter((post) => !post.data.draft)
|
||||
|
|
@ -18,58 +18,59 @@ const projects = (await getCollection("projects"))
|
|||
---
|
||||
|
||||
<Layout title={HOME.TITLE} description={HOME.DESCRIPTION}>
|
||||
<section class="mb-32" id="postHero" aria-labelledby="featured-projects">
|
||||
<div class="group flex flex-row items-center justify-between gap-6">
|
||||
<Hero />
|
||||
<section class="mb-32" aria-labelledby="featured-projects">
|
||||
<div class="group flex w-fit flex-row items-center justify-between gap-6">
|
||||
<a href="/projects">
|
||||
<h2
|
||||
class="animate-reveal break-words text-4xl font-semibold opacity-0"
|
||||
class="animate-reveal break-words text-4xl font-semibold capitalize opacity-0 transition-colors duration-500 group-hover:text-tertiary"
|
||||
id="featured-projects"
|
||||
>
|
||||
Featured projects
|
||||
</h2>
|
||||
</a>
|
||||
<a
|
||||
href="/projects"
|
||||
class="animate-reveal rounded-full bg-secondary p-1 opacity-0 transition-colors group-hover:bg-tertiary"
|
||||
>
|
||||
<Icon
|
||||
name="mdi:arrow-right"
|
||||
title="All projects"
|
||||
class="h-4 w-auto text-primary"
|
||||
/>
|
||||
</a>
|
||||
</div>
|
||||
<ol
|
||||
class="mt-16 grid animate-reveal grid-cols-1 gap-6 opacity-0 [animation-delay:0.1s] md:grid-cols-3 md:[&>*:nth-child(4n+2)]:col-span-2 md:[&>*:nth-child(4n+3)]:col-span-2 md:[&>*:only-child]:col-span-3"
|
||||
>
|
||||
{projects.map((project) => <ShowcaseProject collection={project} />)}
|
||||
</ol>
|
||||
{
|
||||
projects.length > 1 ? (
|
||||
<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">
|
||||
View all
|
||||
</div>
|
||||
</a>
|
||||
) : null
|
||||
}
|
||||
</section>
|
||||
<section aria-labelledby="recent-posts">
|
||||
<div class="group flex flex-row items-center justify-between gap-6">
|
||||
<div class="group flex w-fit flex-row items-center justify-between gap-6">
|
||||
<a href="/posts">
|
||||
<h2
|
||||
class="animate-reveal break-words text-4xl font-semibold opacity-0 [animation-delay:0.2s]"
|
||||
id="recent-posts"
|
||||
class="animate-reveal break-words text-4xl font-semibold capitalize opacity-0 transition-colors duration-500 [animation-delay:0.2s] group-hover:text-tertiary"
|
||||
id="featured-projects"
|
||||
>
|
||||
Recent posts
|
||||
</h2>
|
||||
</a>
|
||||
<a
|
||||
href="/posts"
|
||||
class="animate-reveal rounded-full bg-secondary p-1 opacity-0 transition-colors [animation-delay:0.2s] group-hover:bg-tertiary"
|
||||
>
|
||||
<Icon
|
||||
name="mdi:arrow-right"
|
||||
title="All posts"
|
||||
class="h-4 w-auto text-primary"
|
||||
/>
|
||||
</a>
|
||||
</div>
|
||||
<ol
|
||||
class="mt-16 grid animate-reveal grid-cols-1 gap-6 opacity-0 [animation-delay:0.3s]"
|
||||
>
|
||||
{posts.map((post) => <ShowcasePost collection={post} />)}
|
||||
</ol>
|
||||
{
|
||||
posts.length > 1 ? (
|
||||
<a href="/posts">
|
||||
{" "}
|
||||
<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">
|
||||
View all
|
||||
</div>
|
||||
</a>
|
||||
) : null
|
||||
}
|
||||
</section>
|
||||
</Layout>
|
||||
|
|
|
|||
|
|
@ -1,5 +1,6 @@
|
|||
@import "@fontsource-variable/inter";
|
||||
@import "@fontsource-variable/red-hat-mono";
|
||||
@import "@fontsource-variable/outfit";
|
||||
@import "@fontsource-variable/playwrite-ca";
|
||||
|
||||
@tailwind base;
|
||||
@tailwind components;
|
||||
|
|
|
|||
|
|
@ -6,7 +6,7 @@ export default {
|
|||
theme: {
|
||||
extend: {
|
||||
fontFamily: {
|
||||
sans: ["'Inter Variable'", ...defaultTheme.fontFamily.sans],
|
||||
sans: ["'Outfit Variable'", ...defaultTheme.fontFamily.sans],
|
||||
serif: [...defaultTheme.fontFamily.serif],
|
||||
mono: ["'Red Hat Mono Variable'", ...defaultTheme.fontFamily.mono],
|
||||
},
|
||||
|
|
@ -20,6 +20,9 @@ export default {
|
|||
animation: {
|
||||
reveal: "reveal 0.3s forwards ease-in-out",
|
||||
logo: "logo 1s forwards ease-out",
|
||||
"gradient-x": "gradient-x 6s ease infinite",
|
||||
"gradient-y": "gradient-y 6s ease infinite",
|
||||
"gradient-xy": "gradient-xy 6s ease infinite",
|
||||
},
|
||||
keyframes: {
|
||||
reveal: {
|
||||
|
|
@ -44,6 +47,36 @@ export default {
|
|||
color: "hsl(var(--secondary))",
|
||||
},
|
||||
},
|
||||
"gradient-y": {
|
||||
"0%, 100%": {
|
||||
"background-size": "400% 400%",
|
||||
"background-position": "center top",
|
||||
},
|
||||
"50%": {
|
||||
"background-size": "200% 200%",
|
||||
"background-position": "center center",
|
||||
},
|
||||
},
|
||||
"gradient-x": {
|
||||
"0%, 100%": {
|
||||
"background-size": "200% 200%",
|
||||
"background-position": "left center",
|
||||
},
|
||||
"50%": {
|
||||
"background-size": "200% 200%",
|
||||
"background-position": "right center",
|
||||
},
|
||||
},
|
||||
"gradient-xy": {
|
||||
"0%, 100%": {
|
||||
"background-size": "400% 400%",
|
||||
"background-position": "left center",
|
||||
},
|
||||
"50%": {
|
||||
"background-size": "200% 200%",
|
||||
"background-position": "right center",
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
plugins: [require("@tailwindcss/typography")],
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue