Initial design based off original website, some things still to do
This commit is contained in:
@@ -1,11 +1,236 @@
|
||||
---
|
||||
import Welcome from '../components/Welcome.astro';
|
||||
import Layout from '../layouts/Layout.astro';
|
||||
import { getCollection } from "astro:content";
|
||||
|
||||
// Welcome to Astro! Wondering what to do next? Check out the Astro documentation at https://docs.astro.build
|
||||
// Don't want to use any of this? Delete everything in this file, the `assets`, `components`, and `layouts` directories, and start fresh.
|
||||
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 }>(
|
||||
"../assets/img/hero/*"
|
||||
);
|
||||
const heroImagesArray = await convertEagerImagesImportGlobToArray(heroImages);
|
||||
|
||||
const imagesForCTA = import.meta.glob<{ default: ImageMetadata; eager: true }>([
|
||||
"../assets/img/hero/*",
|
||||
"../assets/img/project-heros/*",
|
||||
"../assets/img/projects/*"
|
||||
]);
|
||||
|
||||
const imagesForCTAArray =
|
||||
await convertEagerImagesImportGlobToArray(imagesForCTA);
|
||||
|
||||
const projects = (
|
||||
await getCollection("projects", ({ data }) => data.frontPage)
|
||||
).sort(
|
||||
(a, b) => (a.data.frontPage?.order || 0) - (b.data.frontPage?.order || 1)
|
||||
);
|
||||
|
||||
const awards = (await getCollection("awards")).sort(
|
||||
(a, b) => b.data.date.valueOf() - a.data.date.valueOf()
|
||||
);
|
||||
|
||||
const awardsDoubled = [...awards, ...awards];
|
||||
|
||||
const tracks = (
|
||||
await getCollection("tracks", ({ data }) => data.autoQueue)
|
||||
).sort(
|
||||
(a, b) => (a.data.autoQueue?.order || 0) - (b.data.autoQueue?.order || 1)
|
||||
);
|
||||
---
|
||||
|
||||
<Layout>
|
||||
<Welcome />
|
||||
</Layout>
|
||||
<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">
|
||||
<h1
|
||||
class="font-header pb-8 text-5xl font-medium text-white uppercase text-shadow-lg/75 md:text-7xl lg:text-9xl"
|
||||
>
|
||||
{person.names.first}
|
||||
{person.names.last}
|
||||
</h1>
|
||||
<h2
|
||||
class="font-header text-2xl font-medium text-gray-300 uppercase text-shadow-lg/75 md:text-2xl lg:text-4xl"
|
||||
>
|
||||
{site.tagline}
|
||||
</h2>
|
||||
|
||||
<a
|
||||
href="/contact/"
|
||||
class="bg-primary text-md font-header hover:text-primary repeat hover:ring-primary mx-auto mt-8 inline-block rounded 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>
|
||||
</div>
|
||||
<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="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"
|
||||
/>
|
||||
<span class="block w-full text-center"
|
||||
><a
|
||||
href="/about/"
|
||||
class="bg-primary text-md font-header hover:text-primary repeat hover:ring-primary mx-auto mt-8 inline-block rounded px-6 py-3 font-light text-white uppercase drop-shadow-lg/75 transition hover:bg-white hover:ring-2"
|
||||
>
|
||||
Find out more
|
||||
</a></span
|
||||
>
|
||||
</div>
|
||||
</section>
|
||||
<section id="cta" class="text-white">
|
||||
<div class="flex h-48 w-full items-center justify-center">
|
||||
<ImageCarousel
|
||||
images={imagesForCTAArray}
|
||||
className="absolute -z-40 h-full w-full"
|
||||
foreground={true}
|
||||
foregroundColour="bg-primary"
|
||||
foregroundOpacity="opacity-75 dark:opacity-25"
|
||||
interval={1000}
|
||||
transitionDuration="duration-500"
|
||||
quality={5}
|
||||
height={192}
|
||||
shuffle={true}
|
||||
/>
|
||||
<a
|
||||
href="/contact/"
|
||||
class="text-md font-header repeat text-primary hover:bg-primary mx-auto inline-block rounded bg-white px-6 py-3 font-light uppercase drop-shadow-lg/75 transition hover:text-white hover:ring-2 hover:ring-white"
|
||||
>
|
||||
Get in touch!
|
||||
</a>
|
||||
</div>
|
||||
</section>
|
||||
<section id="projects" class="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>
|
||||
I've recently been working on a few different projects.</Paragraph
|
||||
>
|
||||
<div class="space-y-8">
|
||||
{
|
||||
projects.map((project, index) => {
|
||||
return (
|
||||
<ProjectCard
|
||||
project={project}
|
||||
textOn={index % 2 === 0 ? "left" : "right"}
|
||||
quality={60}
|
||||
/>
|
||||
);
|
||||
})
|
||||
}
|
||||
</div>
|
||||
<a
|
||||
href="/projects/"
|
||||
class="bg-primary text-md font-header hover:text-primary repeat hover:ring-primary mx-auto mt-8 inline-block rounded px-6 py-3 font-light text-white uppercase drop-shadow-lg/75 transition hover:bg-white hover:ring-2"
|
||||
>
|
||||
Explore more projects
|
||||
</a>
|
||||
</div>
|
||||
</section>
|
||||
<section id="listen" class="bg-primary text-white dark:bg-gray-800">
|
||||
<div class="w-full">
|
||||
<div class="pt-16 text-center">
|
||||
<SectionTitle lineColour="text-white">Listen</SectionTitle>
|
||||
|
||||
<Paragraph
|
||||
>Click or tap on an image below to listen to the work.</Paragraph
|
||||
>
|
||||
<div class="flex h-fit w-full flex-wrap gap-0">
|
||||
{tracks.map((track, index) => <TrackCard {track} {index} />)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<section id="recognition" class="bg-white dark:bg-gray-950">
|
||||
<div class="mx-auto max-w-4xl px-8 py-16 text-center">
|
||||
<SectionTitle>Recognition</SectionTitle>
|
||||
<div class="grid grid-cols-1 md:grid-cols-2">
|
||||
<div
|
||||
class="col-span-1 flex h-48 w-full flex-col items-center justify-center"
|
||||
>
|
||||
<Paragraph
|
||||
>I am very grateful to have been recognised and awarded for my
|
||||
work.</Paragraph
|
||||
>
|
||||
<a
|
||||
href="/recognition/"
|
||||
class="bg-primary text-md font-header hover:text-primary repeat hover:ring-primary mx-auto inline-block rounded px-6 py-3 font-light text-white uppercase drop-shadow-lg/75 transition hover:bg-white hover:ring-2"
|
||||
>
|
||||
Click here for more information
|
||||
</a>
|
||||
</div>
|
||||
<div
|
||||
class="md-8 col-span-1 h-48 overflow-hidden scroll-smooth p-0 md:mt-0"
|
||||
>
|
||||
<div
|
||||
class="animate-scrolling-awards m-0 mx-auto flex max-w-3xs flex-col space-y-8 p-0"
|
||||
>
|
||||
{
|
||||
awardsDoubled.map((award, index) => {
|
||||
return <AwardCard award={award} />;
|
||||
})
|
||||
}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<section id="services" class="bg-primary text-white dark:bg-gray-800">
|
||||
<div class="mx-auto max-w-4xl px-8 py-16 text-center">
|
||||
<SectionTitle lineColour="text-white">Services</SectionTitle>
|
||||
<Paragraph>
|
||||
This is where I will put a list of services I offer, such as web
|
||||
development, music composition, etc. Each service can link to a more
|
||||
detailed page.
|
||||
</Paragraph>
|
||||
</div>
|
||||
</section>
|
||||
<section id="contact" class="bg-white dark:bg-gray-950">
|
||||
<div class="mx-auto max-w-4xl px-8 py-16 text-center">
|
||||
<SectionTitle>Let's get in touch!</SectionTitle>
|
||||
<div class="grid grid-cols-1 text-lg md:grid-cols-2">
|
||||
<div class="col-span-1 flex flex-col items-center justify-center p-4">
|
||||
<Icon name="fa7-solid:at" class="text-4xl" />
|
||||
<Link href="mailto:nathan@nathancummins.com.au" className="mt-4"
|
||||
>nathan@nathancummins.com.au</Link
|
||||
>
|
||||
</div>
|
||||
<div class="col-span-1 flex flex-col items-center justify-center p-4">
|
||||
<Icon name="fa7-solid:envelope" class="text-4xl" />
|
||||
<Paragraph className="my-0 mt-4"
|
||||
>PO Box 2112 Regency Park SA 5942</Paragraph
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
</MainLayout>
|
||||
|
||||
Reference in New Issue
Block a user