Some content fixes, some layout fixes

This commit is contained in:
2025-08-11 08:48:14 +09:30
parent f8ab08d76a
commit 057b88437c
2 changed files with 35 additions and 34 deletions

View File

@@ -17,15 +17,17 @@ import MainLayout from "../layouts/MainLayout.astro";
<Image
src={aboutImage}
alt="A photo of Nathan conducting the Woodville Concert Band"
class="mx-auto mt-8 size-96 rounded-full object-cover drop-shadow-lg/75 transition ease-in-out hover:scale-150 hover:shadow-xl/50"
class="mx-auto mt-8 size-96 rounded-full object-cover drop-shadow-lg/75 transition ease-in-out md:hover:scale-150 md:hover:shadow-xl/50"
transition:name="aboutImage"
/>
<a
href="/contact/"
class="bg-primary text-md font-header hover:text-primary repeat hover:ring-primary mx-auto mt-8 inline-block rounded object-center px-6 py-3 font-light text-white uppercase drop-shadow-lg/75 transition hover:bg-white hover:ring-2"
<span class="block w-full text-center"
><a
href="/contact/"
class="bg-primary text-md font-header hover:text-primary repeat hover:ring-primary mx-auto mt-8 inline-block rounded object-center px-6 py-3 font-light text-white uppercase drop-shadow-lg/75 transition hover:bg-white hover:ring-2"
>
Get in touch!
</a></span
>
Get in touch!
</a>
</div>
</section>
</div>

View File

@@ -1,25 +1,22 @@
---
import { getCollection } from "astro:content";
import ProjectCard from "@/components/ProjectCard.astro";
import TrackCard from "@/components/TrackCard.astro";
import { Content } from "@assets/bios/short.mdx";
import aboutImage from "@assets/img/about.jpg";
import AwardCard from "@components/AwardCard.astro";
import ImageCarousel from "@components/ImageCarousel.astro";
import Link from "@components/Link.astro";
import Paragraph from "@components/Paragraph.astro";
import SectionTitle from "@components/SectionTitle.astro";
import person from "@data/person";
import site from "@data/site";
import MainLayout from "@layouts/MainLayout.astro";
import { Image } from "astro:assets";
import {
Content as AboutContent,
components as aboutComponents
} from "../assets/bios/short.mdx";
import aboutImage from "../assets/img/about.jpg";
import AwardCard from "../components/AwardCard.astro";
import ImageCarousel from "../components/ImageCarousel.astro";
import Link from "../components/Link.astro";
import Paragraph from "../components/Paragraph.astro";
import ProjectCard from "../components/ProjectCard.astro";
import SectionTitle from "../components/SectionTitle.astro";
import person from "../data/person";
import site from "../data/site";
import MainLayout from "../layouts/MainLayout.astro";
import { Icon } from "astro-icon/components";
import TrackCard from "@/components/TrackCard.astro";
import { convertEagerImagesImportGlobToArray } from "@lib/utils";
const heroImages = import.meta.glob<{ default: ImageMetadata; eager: true }>(
@@ -56,13 +53,17 @@ const tracks = (
---
<MainLayout navbarDisplay="transparent">
<div class="flex h-screen w-full items-center justify-center">
<ImageCarousel
images={heroImagesArray}
className="absolute z-10 h-full w-full"
foreground={true}
/>
<div class="z-20 px-8 py-36 text-center">
<div class="h-screen w-full flex-row">
<div class="absolute inset-0 h-full w-full bg-black">
<ImageCarousel
images={heroImagesArray}
className="h-full w-full"
foreground={true}
/>
</div>
<div
class="absolute inset-0 flex h-full w-full flex-col justify-center px-8 py-36 text-center"
>
<h1
class="font-header pb-8 text-5xl font-medium text-white uppercase text-shadow-lg/75 md:text-7xl lg:text-9xl"
>
@@ -87,13 +88,11 @@ const tracks = (
<section id="about" class="bg-white dark:bg-gray-950">
<div class="mx-auto max-w-4xl px-8 py-16 text-justify sm:text-center">
<SectionTitle>About</SectionTitle>
<AboutContent
components={{ ...aboutComponents, p: Paragraph, a: Link }}
/>
<Content components={{ p: Paragraph, a: Link }} />
<Image
src={aboutImage}
alt="Nathan conducting the Woodville Concert Band"
class="mx-auto mt-8 size-96 rounded-full object-cover drop-shadow-lg/75 transition ease-in-out hover:scale-150 hover:shadow-xl/50"
class="mx-auto mt-8 size-96 rounded-full object-cover drop-shadow-lg/75 transition ease-in-out md:hover:scale-150 md:hover:shadow-xl/50"
transition:name="aboutImage"
/>
<span class="block w-full text-center"
@@ -128,7 +127,7 @@ const tracks = (
</a>
</div>
</section>
<section id="projects" class="bg-white dark:bg-gray-950">
<section id="projects" class="overflow-hidden bg-white dark:bg-gray-950">
<div class="mx-auto max-w-4xl px-8 py-16 text-center">
<SectionTitle>What I've been working on</SectionTitle>
<Paragraph>
@@ -156,7 +155,7 @@ const tracks = (
</div>
</section>
<section id="listen" class="bg-primary text-white dark:bg-gray-800">
<div class="w-full">
<div class="w-full overflow-hidden">
<div class="pt-16 text-center">
<SectionTitle lineColour="text-white">Listen</SectionTitle>