troy/troylusty.com
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages 1 Wiki Activity Actions

feat: only show hero and carousel on index

Browse source
This commit is contained in:
Troy 2025-02-13 16:55:09 +00:00
parent 0edd672a70
commit 81538a6fdf
Signed by: troy
GPG key ID: DFC06C02ED3B4711
18 changed files with 104 additions and 225 deletions
Download patch file Download diff file Expand all files Collapse all files

4
src/components/Article.astro
View file

@ -79,9 +79,7 @@ const listFormatter = new Intl.ListFormat("en-GB", {
}
</div>
</div>
<div
class="animate-reveal mx-auto opacity-0 [animation-delay:0.2s]"
>
<div class="animate-reveal mx-auto opacity-0 [animation-delay:0.2s]">
<Prose>
<Content />
</Prose>

11
src/components/Button.astro
View file

@ -2,18 +2,15 @@
type Props = {
href: String;
link: String;
class?: string;
};
const { href, link, class: additionalClasses } = Astro.props;
const baseClasses =
"bg-tertiary text-primary hover:bg-accent flex w-fit flex-row items-center gap-1 justify-self-center rounded-sm px-2 py-1 text-center text-sm font-medium text-nowrap capitalize";
const combinedClasses = `${baseClasses} ${additionalClasses || ""}`;
const { href, link } = Astro.props;
---
<a href={`${href}`}>
<div class={combinedClasses}>
<div
class="bg-button text-secondary hover:bg-button-active flex w-fit flex-row items-center gap-1 justify-self-center rounded-full px-3 py-1.5 text-center text-sm font-medium text-nowrap capitalize transition-colors duration-300"
>
{link}
</div>
</a>

10
src/components/Footer.astro
View file

@ -4,22 +4,22 @@ import Link from "@components/Link.astro";
import { Icon } from "astro-icon/components";
---
<footer class="mx-auto mt-auto mb-6 w-full max-w-[65ch] pt-12">
<div class="flex flex-col items-center justify-between md:flex-row">
<span class="text-tertiary text-center text-sm font-medium"
<footer class="mx-auto mt-auto mb-6 w-full max-w-[65ch] pt-24">
<div class="flex flex-col items-center justify-between gap-2 md:gap-4">
<span class="text-tertiary text-center text-sm"
>&copy; {new Date().getFullYear()}
<a href="/" class="hover:text-secondary transition-colors duration-300"
>{SITE.TITLE}</a
>. All rights reserved.
</span>
<div class="mt-4 flex gap-3 sm:mt-0 sm:justify-center">
<div class="flex gap-3 sm:justify-center">
{
SITE.LINKS.map((i) => (
<Link href={i.href}>
<Icon
name={i.icon}
title={i.name}
class="text-tertiary hover:text-secondary h-5 w-auto transition-colors duration-300"
class="text-tertiary hover:text-secondary h-4 w-auto transition-colors duration-300"
/>
</Link>
))

8
src/components/Head.astro
View file

@ -23,6 +23,7 @@ if (typeof tags !== "undefined") {
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";
import instrument from "@fontsource/instrument-serif/files/instrument-serif-latin-400-normal.woff2?url";
---
<head>
@ -110,4 +111,11 @@ import redhatmono from "@fontsource-variable/red-hat-mono/files/red-hat-mono-lat
href={redhatmono}
crossorigin="anonymous"
/>
<link
rel="preload"
as="font"
type="font/woff2"
href={instrument}
crossorigin="anonymous"
/>
</head>

126
src/components/Header.astro
View file

@ -1,86 +1,68 @@
---
import { SITE } from "@consts";
import { Icon } from "astro-icon/components";
const pathname = new URL(Astro.request.url).pathname;
const currentPath = pathname.replace(/\/$/, "");
---
<header class="mx-auto mb-8 w-full max-w-[65ch] space-y-6 pt-4">
<header class="mx-auto mb-8 w-full max-w-[65ch] space-y-6 md:pt-4">
<nav
x-data="{ mobileMenuIsOpen: false }"
x-on:click.away="mobileMenuIsOpen = false"
class="flex h-12 items-center justify-between"
class="md:flex-no-wrap flex w-full flex-wrap justify-between"
x-data="{ open: false }"
>
<a href="/" title={SITE.TITLE}>
<Icon
name="icon"
title={SITE.TITLE}
class="hover:text-tertiary h-8 w-auto transition-colors duration-500 ease-in-out"
/>
</a>
<ul class="hidden items-center gap-4 sm:flex">
{
SITE.NAVLINKS.map((i) => (
<li>
<a
data-navlink
href={i.href}
class="text-tertiary hover:text-secondary focus:text-secondary font-medium capitalize transition-colors duration-300 focus:outline-hidden"
aria-current="page"
>
{i.name}
</a>
</li>
))
}
</ul>
<button
x-on:click="mobileMenuIsOpen = !mobileMenuIsOpen"
x-bind:aria-expanded="mobileMenuIsOpen"
x-bind:class="mobileMenuIsOpen ? 'fixed top-6 right-6 z-99' : null"
type="button"
class="text-secondary flex sm:hidden"
aria-label="mobile menu"
aria-controls="mobileMenu"
>
<Icon
name="mdi:menu"
aria-hidden="true"
class="size-6"
x-cloak
x-show="!mobileMenuIsOpen"
/>
<Icon
name="mdi:window-close"
aria-hidden="true"
class="size-6"
x-cloak
x-show="mobileMenuIsOpen"
/>
</button>
<div class="flex w-full items-center justify-between md:w-fit">
<a href="/" title={SITE.TITLE}>
<Icon
name="icon"
title={SITE.TITLE}
class="hover:text-tertiary h-8 w-auto transition-colors duration-500 ease-in-out"
/>
</a>
<button
x-on:click="open = !open"
x-bind:aria-expanded="open"
type="button"
class="text-secondary flex md:hidden"
aria-label="mobile menu"
aria-controls="mobileMenu"
>
<Icon
name="mdi:menu"
aria-hidden="true"
class="size-6"
x-cloak
x-show="!open"
/>
<Icon
name="mdi:window-close"
aria-hidden="true"
class="size-6"
x-cloak
x-show="open"
/>
</button>
</div>
<ul
class="w-full items-center gap-4 text-right md:flex md:w-fit md:text-left"
x-bind:class="{ 'hidden': !open }"
x-cloak
x-show="mobileMenuIsOpen"
x-transition:enter="transition motion-reduce:transition-none ease-out duration-300"
x-transition:enter-start="-translate-y-full"
x-transition:enter-end="translate-y-0"
x-transition:leave="transition motion-reduce:transition-none ease-out duration-300"
x-transition:leave-start="translate-y-0"
x-transition:leave-end="-translate-y-full"
id="mobileMenu"
class="bg-primary fixed inset-x-0 top-0 z-98 flex max-h-svh flex-col overflow-y-auto px-6 pt-6 pb-6 sm:hidden"
>
{
SITE.NAVLINKS.map((i) => (
<li class="py-4">
<a
data-navlink
href={i.href}
class="text-secondary w-full text-lg font-medium capitalize focus:underline"
aria-current="page"
>
{i.name}
</a>
</li>
))
SITE.NAVLINKS.map((link) => {
let linkHref = link.href.replace(/\/$/, "");
const isActive = currentPath.startsWith(linkHref);
return (
<li class="text-tertiary hover:text-secondary focus:text-secondary font-medium capitalize transition-colors duration-300 focus:outline-hidden">
<a
href={link.href}
class:list={[isActive ? "text-secondary" : ""]}
>
{link.name}
</a>
</li>
);
})
}
</ul>
</nav>

19
src/components/Hero.astro
View file

@ -1,18 +1,8 @@
---
import instrument from "@fontsource/instrument-serif/files/instrument-serif-latin-400-normal.woff2?url";
import { Icon } from "astro-icon/components";
import { Image } from "astro:assets";
import icon from "public/assets/icon.png";
---
<link
rel="preload"
as="font"
type="font/woff2"
href={instrument}
crossorigin="anonymous"
/>
<section class="animate-reveal opacity-0">
<div class="mx-auto flex h-full self-center px-8 py-32">
<div
@ -32,15 +22,6 @@ import icon from "public/assets/icon.png";
<div class="text-tertiary font-serif font-light tracking-wide italic">
digital designer.
</div>
<div class="group absolute right-0 left-0 mx-auto mt-8 w-fit">
<a href="#featured-projects">
<Icon
name="mdi:chevron-up"
class="text-tertiary group-hover:text-secondary h-8 w-auto rotate-180 animate-bounce transition-all duration-300 ease-in-out"
title="Move down"
/>
</a>
</div>
</div>
</div>
</section>

2
src/components/Prose.astro
View file

@ -1,5 +1,5 @@
<div
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"
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-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>

14
src/components/ShowcasePost.astro
View file

@ -13,14 +13,14 @@ const { collection } = Astro.props;
class="group hover:bg-tertiary/30 bg-none"
href={`/${collection.collection}/${collection.slug}`}
>
<article class="flex flex-col">
<h3 class="mb-1 font-semibold text-balance">
<span class="text-secondary">{collection.data.title}</span><span
class="text-tertiary group-hover:text-accent ml-2 transition-colors"
>{collection.data.description}</span
>
<article class="flex flex-row items-center justify-between">
<h3 class="text-secondary mb-1 font-semibold text-nowrap">
{collection.data.title}
</h3>
<time class="text-accent block text-sm"
<hr
class="text-tertiary group-hover:text-secondary mx-6 w-full border-dotted transition-colors duration-300"
/>
<time class="text-accent block text-nowrap"
><FormattedDate date={collection.data.date} /></time
>
</article>

2
src/components/ShowcaseProject.astro
View file

@ -17,7 +17,7 @@ const { collection } = Astro.props;
alt={collection.data.image.alt}
title={collection.data.title}
loading="eager"
class="aspect-square object-cover transition-transform duration-300 ease-in-out group-hover:scale-102"
class="aspect-[2/1] object-cover transition-all duration-300 ease-in-out group-hover:brightness-50"
fit="cover"
/>
</div>

10
src/consts.ts
View file

@ -44,16 +44,6 @@ export const SITE: Site = {
href: "/cv",
icon: "mdi:certificate",
},
{
name: "itch.io",
href: "https://troylusty.itch.io",
icon: "simple-icons:itchdotio",
},
{
name: "LinkedIn",
href: "https://linkedin.com/in/troylusty",
icon: "mdi:linkedin",
},
{
name: "GitHub",
href: "https://github.com/troylusty",

14
src/icons/logo.svg
View file

@ -1,14 +0,0 @@
<svg
data-name="Layer 1"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 900 300"
><path
fill="currentColor"
d="M900 5v290a5 5 0 0 1-5 5h-40a5 5 0 0 1-5-5V129.9a5 5 0 0 0-4.83-5A125.16 125.16 0 0 1 725.11 5.16a5 5 0 0 1 5-5.17h40.05a5 5 0 0 1 5 4.64 75.12 75.12 0 0 0 69.5 70.17 5 5 0 0 0 5.36-5V5a5 5 0 0 1 5-5h40A5 5 0 0 1 900 5zM575 300c-82.71 0-150-67.29-150-150S492.29 0 575 0s150 67.29 150 150-67.29 150-150 150zm0-250a100 100 0 1 0 100 100A100.11 100.11 0 0 0 575 50zM275 5v40a5 5 0 0 1-5 5h-65a5 5 0 0 0-5 5v240a5 5 0 0 1-5 5h-40a5 5 0 0 1-5-5V55a5 5 0 0 0-5-5H5a5 5 0 0 1-5-5V5a5 5 0 0 1 5-5h265a5 5 0 0 1 5 5z"
></path
><path
fill="currentColor"
d="M422.83 299.55h-56.57a5 5 0 0 1-3.53-1.46l-79.19-79.19a5 5 0 0 0-8.54 3.53V245a5 5 0 0 1-5 5h-40a5 5 0 0 1-5-5V80a5 5 0 0 1 5-5h40a5 5 0 0 1 5 5v39.82a5 5 0 0 0 5.36 5 75.12 75.12 0 0 0 69.45-69.45 5 5 0 0 0-5-5.36H305a5 5 0 0 1-5-5v-40a5 5 0 0 1 5-5h90a5 5 0 0 1 5 5v45a125.21 125.21 0 0 1-85.69 118.67 5 5 0 0 0-2 8.28l87.24 87.24 26.82 26.82a5 5 0 0 1-3.54 8.53z"
></path
></svg
>
Side by side

Before

Width:  |  Height:  |  Size: 1.2 KiB

2
src/layouts/Layout.astro
View file

@ -27,7 +27,7 @@ const { title, description, image, date, updated, tags } = Astro.props;
tags={tags}
/>
<body
class="bg-primary text-secondary flex min-h-screen flex-col justify-start p-4 pt-0 md:pt-4"
class="bg-primary text-secondary flex min-h-screen flex-col justify-start p-4"
>
<Header />
<main

13
src/pages/cv.astro
View file

@ -164,9 +164,11 @@ import icon from "public/assets/icon.png";
<p class="mb-2 italic lg:inline-block lg:w-3/12 lg:align-top">
Task:
</p>
<p class="w-full lg:inline-block lg:w-8/12">
CMS Migration and Rebrand
</p>
<div class="w-full lg:inline-block lg:w-8/12">
<Link href="/projects/camouflage-store"
>CMS Migration and Rebrand
</Link>
</div>
</section>
<section class="mb-6">
<p class="mb-2 italic lg:inline-block lg:w-3/12 lg:align-top">
@ -215,9 +217,8 @@ import icon from "public/assets/icon.png";
Personal blog:
</p>
<p class="w-full lg:inline-block lg:w-8/12">
My blog is the center of my online presence. Here, I share
posts about what I've learnt, tutorials and my thoughts on
web development in general.
My personal portfolio website made using Astro. A place for
me to share my work and anything else I've learnt.
</p>
</section>
<section class="mb-6">

74
src/pages/index.astro
View file

@ -2,89 +2,23 @@
import Layout from "@layouts/Layout.astro";
import { HOME } from "@consts";
import { getCollection } from "astro:content";
import ShowcasePost from "@components/ShowcasePost.astro";
import Hero from "@components/Hero.astro";
import Button from "@components/Button.astro";
import { Icon } from "astro-icon/components";
import Carousel from "@components/Carousel.astro";
const allPosts = await getCollection("posts");
const posts = allPosts
.filter((post) => !post.data.draft)
.sort((a, b) => b.data.date.valueOf() - a.data.date.valueOf())
.slice(0, HOME.HOMESETTINGS?.NUM_POSTS_ON_HOMEPAGE);
const allProjects = await getCollection("projects");
const projects = allProjects
.filter((project) => !project.data.draft && project.data.featured)
.sort((a, b) => b.data.date.valueOf() - a.data.date.valueOf())
.slice(0, HOME.HOMESETTINGS?.NUM_PROJECTS_ON_HOMEPAGE);
const projectsJSON = JSON.stringify(projects);
---
<Layout title={HOME.TITLE} description={HOME.DESCRIPTION}>
<Hero />
<section aria-labelledby="featured-projects" class="animate-reveal opacity-0 [animation-delay:0.1s]">
<div
class="mx-auto flex flex-col items-start justify-between sm:flex-row sm:items-center"
>
<h2
class=" text-2xl font-semibold break-words capitalize "
id="featured-projects"
>
Featured projects
</h2>
{
allProjects.length > HOME.HOMESETTINGS!.NUM_PROJECTS_ON_HOMEPAGE ? (
<div class="group">
<a
href="/projects"
class="group text-tertiary group-hover:text-secondary flex items-center justify-center gap-1 transition-colors duration-300"
>
View all
<Icon
name="mdi:chevron-right"
class="group-hover:text-secondary transition-all duration-300 group-hover:translate-x-2"
/>
</a>
</div>
) : null
}
</div>
<section
id="featured-projects"
class="animate-reveal opacity-0 [animation-delay:0.1s]"
>
<Carousel data={projectsJSON} />
</section>
<section aria-labelledby="recent-posts" class="mt-24 animate-reveal opacity-0 [animation-delay:0.2s]">
<div class="group flex w-fit flex-row items-center">
<h2
class="text-2xl font-semibold break-words capitalize"
>
Recent posts
</h2>
</div>
<ol
class="mt-8 grid grid-cols-1 gap-6"
>
{posts.map((post) => <ShowcasePost collection={post} />)}
</ol>
{
allPosts.length > HOME.HOMESETTINGS!.NUM_POSTS_ON_HOMEPAGE ? (
<div class="group">
<a
href="/posts"
class="group text-tertiary group-hover:text-secondary flex items-center justify-center gap-1 transition-colors duration-300"
>
View all
<Icon
name="mdi:chevron-right"
class="group-hover:text-secondary transition-all duration-300 group-hover:translate-x-2"
/>
</a>
</div>
) : null
}
</section>
</Layout>

2
src/pages/projects/index.astro
View file

@ -15,7 +15,7 @@ const projects = (await getCollection("projects"))
{PROJECTS.TITLE}
</h1>
<ol
class="animate-reveal mt-8 grid grid-cols-2 gap-2 opacity-0 [animation-delay:0.1s] md:grid-cols-3"
class="animate-reveal mt-8 grid grid-cols-1 gap-4 opacity-0 [animation-delay:0.1s] md:grid-cols-2"
>
{projects.map((article: any) => <ShowcaseProject collection={article} />)}
</ol>

6
src/styles/global.css
View file

@ -10,6 +10,9 @@
--color-secondary: var(--secondary);
--color-tertiary: var(--tertiary);
--color-accent: var(--accent);
--color-button: var(--button);
--color-button-active: var(--button-active);
}
@theme {
@ -39,6 +42,9 @@
--secondary: light-dark(var(--color-neutral-950), var(--color-neutral-50));
--tertiary: light-dark(var(--color-neutral-500), var(--color-neutral-500));
--accent: light-dark(var(--color-neutral-700), var(--color-neutral-300));
--button: light-dark(#f3f4f6, #1f1f1f);
--button-active: light-dark(#e5e7eb, #2f2f2f);
}
@media (prefers-color-scheme: dark) {