begin switching to tailwind v4
This commit is contained in:
parent
fffc8cb13e
commit
69bc540669
GPG key ID:
DFC06C02ED3B4711
23 changed files with 107 additions and 81 deletions
|
|
@ -2,13 +2,16 @@ import { defineConfig, passthroughImageService } from "astro/config";
|
|||
import sitemap from "@astrojs/sitemap";
|
||||
import rehypeExternalLinks from "rehype-external-links";
|
||||
import mdx from "@astrojs/mdx";
|
||||
import tailwind from "@astrojs/tailwind";
|
||||
import tailwindcss from "@tailwindcss/vite";
|
||||
import icon from "astro-icon";
|
||||
|
||||
// https://astro.build/config
|
||||
export default defineConfig({
|
||||
site: "https://troylusty.com",
|
||||
integrations: [sitemap(), mdx(), tailwind(), icon()],
|
||||
integrations: [sitemap(), mdx(), icon()],
|
||||
vite: {
|
||||
plugins: [tailwindcss()],
|
||||
},
|
||||
output: "static",
|
||||
markdown: {
|
||||
rehypePlugins: [
|
||||
|
|
|
|||
BIN
bun.lockb
BIN
bun.lockb
Binary file not shown.
13
package.json
13
package.json
|
|
@ -12,22 +12,23 @@
|
|||
},
|
||||
"dependencies": {
|
||||
"@astrojs/check": "0.9.4",
|
||||
"@astrojs/mdx": "^4.0.6",
|
||||
"@astrojs/mdx": "^4.0.7",
|
||||
"@astrojs/rss": "^4.0.11",
|
||||
"@astrojs/sitemap": "3.2.1",
|
||||
"@astrojs/tailwind": "^5.1.4",
|
||||
"@astrojs/tailwind": "^5.1.5",
|
||||
"@fontsource-variable/outfit": "^5.1.1",
|
||||
"@fontsource-variable/red-hat-mono": "^5.1.1",
|
||||
"@fontsource/borel": "^5.1.1",
|
||||
"astro": "^5.1.7",
|
||||
"@tailwindcss/vite": "^4.0.0",
|
||||
"astro": "^5.1.8",
|
||||
"astro-icon": "^1.1.5",
|
||||
"rehype-external-links": "^3.0.0",
|
||||
"tailwindcss": "^3.4.17",
|
||||
"tailwindcss": "^4.0.0",
|
||||
"typescript": "^5.7.3"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@iconify-json/mdi": "^1.2.2",
|
||||
"@iconify-json/simple-icons": "^1.2.20",
|
||||
"@iconify-json/mdi": "^1.2.3",
|
||||
"@iconify-json/simple-icons": "^1.2.21",
|
||||
"@tailwindcss/typography": "^0.5.16",
|
||||
"@types/node": "^22.10.7",
|
||||
"prettier": "^3.4.2",
|
||||
|
|
|
|||
|
|
@ -16,18 +16,18 @@ 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 text-balance font-semibold text-secondary">
|
||||
<p class="text-secondary m-0 font-semibold text-balance">
|
||||
{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"
|
||||
class="text-secondary group-open:text-tertiary h-6 w-auto transition-colors"
|
||||
/>
|
||||
</span>
|
||||
</summary>
|
||||
<div class="p-4">
|
||||
<p class="my-0 mb-2 font-semibold text-tertiary">
|
||||
<p class="text-tertiary my-0 mb-2 font-semibold">
|
||||
{institution}
|
||||
</p>
|
||||
<ol class="list-inside list-disc">
|
||||
|
|
|
|||
|
|
@ -30,14 +30,14 @@ const listFormatter = new Intl.ListFormat("en-GB", {
|
|||
>
|
||||
<div class="mx-auto mb-8">
|
||||
<h1
|
||||
class="animate-reveal break-words text-start text-2xl font-semibold opacity-0"
|
||||
class="animate-reveal text-start text-2xl font-semibold break-words opacity-0"
|
||||
>
|
||||
<span class="text-secondary">{article.data.title}</span><span
|
||||
class="ml-2 text-tertiary">{article.data.description}</span
|
||||
class="text-tertiary ml-2">{article.data.description}</span
|
||||
>
|
||||
</h1>
|
||||
<div
|
||||
class="mt-4 flex animate-reveal flex-col flex-wrap items-start gap-2 text-tertiary opacity-0 [animation-delay:0.1s] md:flex-row"
|
||||
class="animate-reveal text-tertiary mt-4 flex flex-col flex-wrap items-start gap-2 opacity-0 [animation-delay:0.1s] md:flex-row"
|
||||
>
|
||||
<div class="flex items-center gap-2">
|
||||
<Icon name="mdi:calendar" />
|
||||
|
|
@ -79,7 +79,7 @@ const listFormatter = new Intl.ListFormat("en-GB", {
|
|||
}
|
||||
</div>
|
||||
</div>
|
||||
<div class="mx-auto animate-reveal opacity-0 [animation-delay:0.2s]">
|
||||
<div class="animate-reveal mx-auto opacity-0 [animation-delay:0.2s]">
|
||||
<Prose>
|
||||
<Content />
|
||||
</Prose>
|
||||
|
|
|
|||
|
|
@ -9,7 +9,7 @@ const { href, link } = Astro.props;
|
|||
|
||||
<a href={`${href}`}>
|
||||
<div
|
||||
class="m-4 flex w-fit animate-reveal flex-row items-center gap-1 justify-self-center rounded-full bg-tertiary px-2 py-1 text-sm font-medium capitalize text-primary opacity-0 transition-colors [animation-delay:0.1s] hover:bg-accent text-center text-nowrap"
|
||||
class="animate-reveal bg-tertiary text-primary hover:bg-accent m-4 flex w-fit flex-row items-center gap-1 justify-self-center rounded-full px-2 py-1 text-center text-sm font-medium text-nowrap capitalize opacity-0 transition-colors [animation-delay:0.1s]"
|
||||
>
|
||||
{link}
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -4,27 +4,31 @@ import Link from "@components/Link.astro";
|
|||
import { Icon } from "astro-icon/components";
|
||||
---
|
||||
|
||||
<footer class="mx-auto mb-8 mt-auto w-full max-w-prose space-y-6 pt-12">
|
||||
<footer class="mx-auto mt-auto mb-8 w-full max-w-prose space-y-6 pt-12">
|
||||
<div class="md:flex md:justify-between">
|
||||
<div class="mb-6 text-secondary md:mb-0">
|
||||
<a class="inline-flex items-center group" href="#top" title="Back to top">
|
||||
<Icon name="icon" title={SITE.TITLE} class="h-8 w-auto ease-in-out transition-colors duration-500 group-hover:text-tertiary" />
|
||||
<div class="text-secondary mb-6 md:mb-0">
|
||||
<a class="group inline-flex items-center" href="#top" title="Back to top">
|
||||
<Icon
|
||||
name="icon"
|
||||
title={SITE.TITLE}
|
||||
class="group-hover:text-tertiary h-8 w-auto transition-colors duration-500 ease-in-out"
|
||||
/>
|
||||
<div
|
||||
class="ml-2 hidden flex-none text-sm font-bold capitalize md:visible lg:block transition-colors duration-500 group-hover:text-tertiary"
|
||||
class="group-hover:text-tertiary ml-2 hidden flex-none text-sm font-bold capitalize transition-colors duration-500 md:visible lg:block"
|
||||
>
|
||||
Troy Lusty
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
<div class="text-left sm:gap-6 md:text-right">
|
||||
<ul class="font-medium text-tertiary">
|
||||
<ul class="text-tertiary font-medium">
|
||||
{
|
||||
SITE.NAVLINKS.map((i) => (
|
||||
<li class="mb-1 last:mb-0">
|
||||
<a
|
||||
data-navlink
|
||||
href={i.href}
|
||||
class="capitalize transition-colors hover:text-secondary"
|
||||
class="hover:text-secondary capitalize transition-colors"
|
||||
>
|
||||
{i.name}
|
||||
</a>
|
||||
|
|
@ -35,9 +39,9 @@ import { Icon } from "astro-icon/components";
|
|||
</div>
|
||||
</div>
|
||||
<div class="mt-12 sm:flex sm:items-center sm:justify-between lg:mt-16">
|
||||
<span class="text-sm text-tertiary sm:text-center"
|
||||
<span class="text-tertiary text-sm sm:text-center"
|
||||
>© {new Date().getFullYear()}
|
||||
<a href="/" class="transition-colors hover:text-secondary">{SITE.TITLE}</a
|
||||
<a href="/" class="hover:text-secondary transition-colors">{SITE.TITLE}</a
|
||||
>. All Rights Reserved.
|
||||
</span>
|
||||
<div class="mt-4 flex gap-2 sm:mt-0 sm:justify-center">
|
||||
|
|
@ -47,7 +51,7 @@ import { Icon } from "astro-icon/components";
|
|||
<Icon
|
||||
name={i.icon}
|
||||
title={i.name}
|
||||
class="h-5 w-5 text-tertiary transition-colors hover:text-secondary"
|
||||
class="text-tertiary hover:text-secondary h-5 w-5 transition-colors"
|
||||
/>
|
||||
</Link>
|
||||
))
|
||||
|
|
|
|||
|
|
@ -5,12 +5,16 @@ import { Icon } from "astro-icon/components";
|
|||
|
||||
<header class="mx-auto mb-8 w-full max-w-prose space-y-6 pt-12">
|
||||
<div
|
||||
class="flex h-12 items-center justify-between leading-[0px] text-secondary group"
|
||||
class="text-secondary group flex h-12 items-center justify-between leading-[0px]"
|
||||
>
|
||||
<a class="inline-flex items-center" href="/" title={SITE.TITLE}>
|
||||
<Icon name="icon" title={SITE.TITLE} class="h-8 w-auto ease-in-out group-hover:text-tertiary transition-colors duration-500" />
|
||||
<Icon
|
||||
name="icon"
|
||||
title={SITE.TITLE}
|
||||
class="group-hover:text-tertiary h-8 w-auto transition-colors duration-500 ease-in-out"
|
||||
/>
|
||||
<div
|
||||
class="ml-2 hidden flex-none text-sm font-bold capitalize md:visible lg:block group-hover:text-tertiary transition-colors duration-500"
|
||||
class="group-hover:text-tertiary ml-2 hidden flex-none text-sm font-bold capitalize transition-colors duration-500 md:visible lg:block"
|
||||
>
|
||||
Troy Lusty
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -12,7 +12,7 @@ import borel from "@fontsource/borel/files/borel-latin-400-normal.woff2?url";
|
|||
|
||||
<section class="mb-32 overflow-clip">
|
||||
<h1
|
||||
class="--translate-y-full animate-logo text-pretty text-4xl font-bold md:text-6xl"
|
||||
class="--translate-y-full animate-logo text-4xl font-bold text-pretty md:text-6xl"
|
||||
>
|
||||
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 px-1 font-['Borel'] text-3xl font-bold text-transparent md:text-5xl"
|
||||
|
|
|
|||
|
|
@ -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-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-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 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-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-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 max-w-full"
|
||||
>
|
||||
<slot />
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -19,15 +19,15 @@ const next = items[(index + 1) % items.length];
|
|||
|
||||
{
|
||||
items.length > 1 ? (
|
||||
<div class="mx-auto mt-8 flex max-w-prose md:flex-row justify-between gap-4 md:gap-0 flex-col-reverse">
|
||||
<Button
|
||||
href={`/${prev.collection}/${prev.slug}`}
|
||||
link={`Previous: ${prev.data.title}`}
|
||||
/>
|
||||
<Button
|
||||
href={`/${next.collection}/${next.slug}`}
|
||||
link={`Next: ${next.data.title}`}
|
||||
/>
|
||||
<div class="mx-auto mt-8 flex max-w-prose flex-col-reverse justify-between gap-4 md:flex-row md:gap-0">
|
||||
<Button
|
||||
href={`/${prev.collection}/${prev.slug}`}
|
||||
link={`Previous: ${prev.data.title}`}
|
||||
/>
|
||||
<Button
|
||||
href={`/${next.collection}/${next.slug}`}
|
||||
link={`Next: ${next.data.title}`}
|
||||
/>
|
||||
</div>
|
||||
) : null
|
||||
}
|
||||
|
|
|
|||
|
|
@ -10,17 +10,17 @@ const { collection } = Astro.props;
|
|||
|
||||
<li>
|
||||
<a
|
||||
class="group bg-none hover:bg-tertiary/30"
|
||||
class="group hover:bg-tertiary/30 bg-none"
|
||||
href={`/${collection.collection}/${collection.slug}`}
|
||||
>
|
||||
<article class="flex flex-col">
|
||||
<h3 class="mb-1 text-balance font-semibold">
|
||||
<h3 class="mb-1 font-semibold text-balance">
|
||||
<span class="text-secondary">{collection.data.title}</span><span
|
||||
class="ml-2 text-tertiary transition-colors group-hover:text-accent"
|
||||
class="text-tertiary group-hover:text-accent ml-2 transition-colors"
|
||||
>{collection.data.description}</span
|
||||
>
|
||||
</h3>
|
||||
<time class="block text-sm text-accent"
|
||||
<time class="text-accent block text-sm"
|
||||
><FormattedDate date={collection.data.date} /></time
|
||||
>
|
||||
</article>
|
||||
|
|
|
|||
|
|
@ -11,7 +11,7 @@ const { collection } = Astro.props;
|
|||
|
||||
<li>
|
||||
<article
|
||||
class="group relative isolate mx-auto flex h-full w-full flex-col justify-end overflow-hidden rounded 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 pt-40 pb-8"
|
||||
>
|
||||
<Image
|
||||
src={collection.data.image.url}
|
||||
|
|
@ -27,12 +27,12 @@ const { collection } = Astro.props;
|
|||
href={`/${collection.collection}/${collection.slug}`}
|
||||
aria-label={collection.data.title}></a>
|
||||
<h3
|
||||
class="z-10 w-fit text-xl font-semibold text-primary opacity-0 transition-opacity duration-300 group-hover:opacity-100 dark:text-secondary"
|
||||
class="text-primary dark:text-secondary z-10 w-fit text-xl font-semibold opacity-0 transition-opacity duration-300 group-hover:opacity-100"
|
||||
>
|
||||
{collection.data.title}
|
||||
</h3>
|
||||
<div
|
||||
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"
|
||||
class="text-accent z-10 w-fit gap-y-1 overflow-hidden text-sm leading-6 opacity-0 transition-opacity duration-500 group-hover:opacity-100"
|
||||
>
|
||||
{
|
||||
collection.data.collection ? (
|
||||
|
|
|
|||
|
|
@ -15,10 +15,10 @@ const skills = await Promise.all(
|
|||
<ul class="flex max-w-full list-none flex-wrap gap-4 px-0">
|
||||
{
|
||||
skills.map((entry) => (
|
||||
<li class="group flex items-center gap-2 rounded border border-tertiary p-2 text-tertiary transition-colors hover:border-accent hover:text-accent">
|
||||
<li class="group border-tertiary text-tertiary hover:border-accent hover:text-accent flex items-center gap-2 rounded border p-2 transition-colors">
|
||||
<Icon
|
||||
name={entry.data.icon}
|
||||
class="h-5 w-auto text-tertiary transition-colors group-hover:text-accent"
|
||||
class="text-tertiary group-hover:text-accent h-5 w-auto transition-colors"
|
||||
/>
|
||||
<p class="m-0 cursor-default">{entry.data.title}</p>
|
||||
</li>
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
<div
|
||||
class="mx-auto mb-8 mt-2 w-full max-w-[60ch] p-4 pb-16 md:mb-32 md:mt-16 md:p-5"
|
||||
class="mx-auto mt-2 mb-8 w-full max-w-[60ch] p-4 pb-16 md:mt-16 md:mb-32 md:p-5"
|
||||
>
|
||||
<slot />
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -20,14 +20,14 @@ const work = await Promise.all(
|
|||
{
|
||||
work.map((entry) => (
|
||||
<li class="pb-4 pl-0 last:pb-0">
|
||||
<h3 class="mb-1 mt-4 text-balance font-semibold text-secondary">
|
||||
<h3 class="text-secondary mt-4 mb-1 font-semibold text-balance">
|
||||
<span class="text-tertiary">{entry.data.role} at</span>
|
||||
{entry.data.company}
|
||||
</h3>
|
||||
<time class="block text-accent">
|
||||
<time class="text-accent block">
|
||||
{dateRange(entry.data.dateStart, entry.data.dateEnd)}
|
||||
</time>
|
||||
<article class="mt-2 text-secondary prose-a:underline prose-a:decoration-tertiary prose-a:decoration-wavy">
|
||||
<article class="text-secondary prose-a:underline prose-a:decoration-tertiary prose-a:decoration-wavy mt-2">
|
||||
<entry.Content />
|
||||
</article>
|
||||
{entry.data.article ? (
|
||||
|
|
|
|||
|
|
@ -27,7 +27,7 @@ const { title, description, image, date, updated, tags } = Astro.props;
|
|||
tags={tags}
|
||||
/>
|
||||
<body
|
||||
class="flex min-h-screen flex-col justify-start bg-primary p-8 pt-0 text-secondary md:pt-8"
|
||||
class="bg-primary text-secondary flex min-h-screen flex-col justify-start p-8 pt-0 md:pt-8"
|
||||
>
|
||||
<Header />
|
||||
<main
|
||||
|
|
|
|||
|
|
@ -11,13 +11,13 @@ import Button from "@components/Button.astro";
|
|||
>
|
||||
<div>
|
||||
<h2
|
||||
class="animate-reveal break-words text-2xl font-semibold opacity-0"
|
||||
class="animate-reveal text-2xl font-semibold break-words opacity-0"
|
||||
id="featured-projects"
|
||||
>
|
||||
404
|
||||
</h2>
|
||||
<h3
|
||||
class="mt-2 animate-reveal font-bold opacity-0 [animation-delay:0.1s]"
|
||||
class="animate-reveal mt-2 font-bold opacity-0 [animation-delay:0.1s]"
|
||||
>
|
||||
Content not found
|
||||
</h3>
|
||||
|
|
|
|||
|
|
@ -13,15 +13,15 @@ import Link from "@components/Link.astro";
|
|||
<div
|
||||
class="flex flex-col items-start justify-between gap-6 md:flex-row md:items-center"
|
||||
>
|
||||
<h1 class="animate-reveal break-words text-2xl font-semibold opacity-0">
|
||||
<h1 class="animate-reveal text-2xl font-semibold break-words opacity-0">
|
||||
Troy Lusty
|
||||
</h1>
|
||||
<div
|
||||
class="mt-4 flex flex-col items-start gap-2 text-tertiary md:flex-row"
|
||||
class="text-tertiary mt-4 flex flex-col items-start gap-2 md:flex-row"
|
||||
>
|
||||
<div class="flex animate-reveal items-center gap-2 opacity-0">
|
||||
<div class="animate-reveal flex items-center gap-2 opacity-0">
|
||||
<div
|
||||
class="flex flex-row items-center gap-2 text-tertiary transition-colors hover:text-accent"
|
||||
class="text-tertiary hover:text-accent flex flex-row items-center gap-2 transition-colors"
|
||||
>
|
||||
<Icon name="mdi:email" />
|
||||
<Link href="mailto:hello@troylusty.com">
|
||||
|
|
@ -29,7 +29,7 @@ import Link from "@components/Link.astro";
|
|||
</Link>
|
||||
</div>
|
||||
<div
|
||||
class="flex flex-row items-center gap-2 text-tertiary transition-colors hover:text-accent"
|
||||
class="text-tertiary hover:text-accent flex flex-row items-center gap-2 transition-colors"
|
||||
>
|
||||
<Icon name="mdi:web" />
|
||||
<Link href="/">
|
||||
|
|
@ -40,8 +40,8 @@ import Link from "@components/Link.astro";
|
|||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<section class="mt-16 animate-reveal opacity-0 [animation-delay:0.1s]">
|
||||
<h2 class="mb-4 break-words text-2xl font-semibold capitalize">About me</h2>
|
||||
<section class="animate-reveal mt-16 opacity-0 [animation-delay:0.1s]">
|
||||
<h2 class="mb-4 text-2xl font-semibold break-words capitalize">About me</h2>
|
||||
<p class="mb-2">
|
||||
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.
|
||||
|
|
@ -57,19 +57,19 @@ import Link from "@components/Link.astro";
|
|||
<p class="mb-2">
|
||||
My current portfolio of work can be found on my website at:
|
||||
<a
|
||||
class="text-secondary underline decoration-tertiary decoration-wavy"
|
||||
class="text-secondary decoration-tertiary underline decoration-wavy"
|
||||
href="/projects">troylusty.com/projects</a
|
||||
>.
|
||||
</p>
|
||||
</section>
|
||||
<section class="mt-16 animate-reveal opacity-0 [animation-delay:0.2s]">
|
||||
<h2 class="mb-4 break-words text-2xl font-semibold capitalize">
|
||||
<section class="animate-reveal mt-16 opacity-0 [animation-delay:0.2s]">
|
||||
<h2 class="mb-4 text-2xl font-semibold break-words capitalize">
|
||||
Education
|
||||
</h2>
|
||||
<Education />
|
||||
</section>
|
||||
<section class="mt-16 animate-reveal opacity-0 [animation-delay:0.3s]">
|
||||
<h2 class="mb-4 break-words text-2xl font-semibold capitalize">Skills</h2>
|
||||
<section class="animate-reveal mt-16 opacity-0 [animation-delay:0.3s]">
|
||||
<h2 class="mb-4 text-2xl font-semibold break-words capitalize">Skills</h2>
|
||||
<p class="mb-2">
|
||||
My specific chosen area of focus is design, lighting, and rendering
|
||||
focusing on 3D environments within software such as Blender and Unreal
|
||||
|
|
@ -78,8 +78,8 @@ import Link from "@components/Link.astro";
|
|||
</p>
|
||||
<Skills />
|
||||
</section>
|
||||
<section class="mt-16 animate-reveal opacity-0 [animation-delay:0.4s]">
|
||||
<h2 class="mb-4 break-words text-2xl font-semibold capitalize">
|
||||
<section class="animate-reveal mt-16 opacity-0 [animation-delay:0.4s]">
|
||||
<h2 class="mb-4 text-2xl font-semibold break-words capitalize">
|
||||
Experience
|
||||
</h2>
|
||||
<Work />
|
||||
|
|
|
|||
|
|
@ -28,7 +28,7 @@ const projects = allProjects
|
|||
<div class="group flex w-fit flex-row items-center justify-between gap-6">
|
||||
<a href="/projects">
|
||||
<h2
|
||||
class="animate-reveal break-words text-2xl font-semibold capitalize opacity-0 transition-colors duration-500 group-hover:text-tertiary"
|
||||
class="animate-reveal group-hover:text-tertiary text-2xl font-semibold break-words capitalize opacity-0 transition-colors duration-500"
|
||||
id="featured-projects"
|
||||
>
|
||||
Featured projects
|
||||
|
|
@ -36,7 +36,7 @@ const projects = allProjects
|
|||
</a>
|
||||
</div>
|
||||
<ol
|
||||
class="mt-8 grid animate-reveal grid-cols-1 gap-4 opacity-0 [animation-delay:0.1s] md:grid-cols-2"
|
||||
class="animate-reveal mt-8 grid grid-cols-1 gap-4 opacity-0 [animation-delay:0.1s] md:grid-cols-2"
|
||||
>
|
||||
{projects.map((project) => <ShowcaseProject collection={project} />)}
|
||||
</ol>
|
||||
|
|
@ -50,7 +50,7 @@ const projects = allProjects
|
|||
<div class="group flex w-fit flex-row items-center justify-between gap-6">
|
||||
<a href="/posts">
|
||||
<h2
|
||||
class="animate-reveal break-words text-2xl font-semibold capitalize opacity-0 transition-colors duration-500 [animation-delay:0.2s] group-hover:text-tertiary"
|
||||
class="animate-reveal group-hover:text-tertiary text-2xl font-semibold break-words capitalize opacity-0 transition-colors duration-500 [animation-delay:0.2s]"
|
||||
id="featured-projects"
|
||||
>
|
||||
Recent posts
|
||||
|
|
@ -58,7 +58,7 @@ const projects = allProjects
|
|||
</a>
|
||||
</div>
|
||||
<ol
|
||||
class="mt-8 grid animate-reveal grid-cols-1 gap-6 opacity-0 [animation-delay:0.3s]"
|
||||
class="animate-reveal mt-8 grid grid-cols-1 gap-6 opacity-0 [animation-delay:0.3s]"
|
||||
>
|
||||
{posts.map((post) => <ShowcasePost collection={post} />)}
|
||||
</ol>
|
||||
|
|
|
|||
|
|
@ -10,11 +10,11 @@ const posts = (await getCollection("posts"))
|
|||
---
|
||||
|
||||
<Layout title={SITE.TITLE} description={POSTS.DESCRIPTION}>
|
||||
<h1 class="animate-reveal break-words text-2xl font-semibold opacity-0">
|
||||
<h1 class="animate-reveal text-2xl font-semibold break-words opacity-0">
|
||||
{POSTS.TITLE}
|
||||
</h1>
|
||||
<ol
|
||||
class="mt-16 grid animate-reveal grid-cols-1 gap-6 opacity-0 [animation-delay:0.1s]"
|
||||
class="animate-reveal mt-16 grid grid-cols-1 gap-6 opacity-0 [animation-delay:0.1s]"
|
||||
>
|
||||
{posts.map((article: any) => <ShowcasePost collection={article} />)}
|
||||
</ol>
|
||||
|
|
|
|||
|
|
@ -10,11 +10,11 @@ const projects = (await getCollection("projects"))
|
|||
---
|
||||
|
||||
<Layout title={SITE.TITLE} description={PROJECTS.DESCRIPTION}>
|
||||
<h1 class="animate-reveal break-words text-2xl font-semibold opacity-0">
|
||||
<h1 class="animate-reveal text-2xl font-semibold break-words opacity-0">
|
||||
{PROJECTS.TITLE}
|
||||
</h1>
|
||||
<ol
|
||||
class="mt-16 grid animate-reveal grid-cols-1 gap-4 opacity-0 [animation-delay:0.1s] md:grid-cols-2"
|
||||
class="animate-reveal mt-16 grid grid-cols-1 gap-4 opacity-0 [animation-delay:0.1s] md:grid-cols-2"
|
||||
>
|
||||
{projects.map((article: any) => <ShowcaseProject collection={article} />)}
|
||||
</ol>
|
||||
|
|
|
|||
|
|
@ -2,9 +2,23 @@
|
|||
@import "@fontsource-variable/outfit";
|
||||
@import "@fontsource/borel";
|
||||
|
||||
@tailwind base;
|
||||
@tailwind components;
|
||||
@tailwind utilities;
|
||||
@import "tailwindcss";
|
||||
@plugin "@tailwindcss/typography";
|
||||
@config "../../tailwind.config.ts";
|
||||
|
||||
@theme {
|
||||
--font-display: "Satoshi", "sans-serif";
|
||||
--breakpoint-3xl: 1920px;
|
||||
--color-avocado-100: oklch(0.99 0 0);
|
||||
--color-avocado-200: oklch(0.98 0.04 113.22);
|
||||
--color-avocado-300: oklch(0.94 0.11 115.03);
|
||||
--color-avocado-400: oklch(0.92 0.19 114.08);
|
||||
--color-avocado-500: oklch(0.84 0.18 117.33);
|
||||
--color-avocado-600: oklch(0.53 0.12 118.34);
|
||||
--ease-fluid: cubic-bezier(0.3, 0, 0, 1);
|
||||
--ease-snappy: cubic-bezier(0.2, 0, 0, 1);
|
||||
/* ... */
|
||||
}
|
||||
|
||||
@layer base {
|
||||
:root {
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue