38 lines
1.4 KiB
Plaintext
38 lines
1.4 KiB
Plaintext
---
|
|
import { Image } from "astro:assets";
|
|
import {
|
|
Content as AboutContent,
|
|
components as aboutComponents
|
|
} from "../assets/bios/about.mdx";
|
|
import aboutImage from "../assets/img/about.jpg";
|
|
import Link from "../components/Link.astro";
|
|
import Paragraph from "../components/Paragraph.astro";
|
|
import SectionTitle from "../components/SectionTitle.astro";
|
|
import MainLayout from "../layouts/MainLayout.astro";
|
|
---
|
|
|
|
<MainLayout title="About">
|
|
<div class="w-full">
|
|
<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 }}
|
|
/>
|
|
<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"
|
|
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"
|
|
>
|
|
Get in touch!
|
|
</a>
|
|
</div>
|
|
</section>
|
|
</div>
|
|
</MainLayout>
|