feat: finish homepage design

src/pages/index.astro

@@ -1,11 +1,77 @@
 ---
-import BaseLayout from '../layouts/BaseLayout.astro';
+import { getCollection } from 'astro:content';
+
+import { formatPosts } from '../utils';
+
+import GridLayout from '../layouts/GridLayout.astro';
+
+import MoreLink from '../components/MoreLink.astro';
+import PageTitle from '../components/PageTitle.astro';
+import Picture from '../components/Picture.astro';
+import JournalList from '../components/JournalList.astro';
+
 import { Headline } from '../components';
 
-const title = 'Homepage';
+import { Content as AboutMe } from '../text/homepage/about-me.mdx';
+import { Content as WhatIDo } from '../text/homepage/what-i-do.mdx';
+import { Content as Journal } from '../text/homepage/journal.mdx';
+
+import { mapping } from '../mdx-components';
+
+const allPosts = await getCollection('journal');
+const formattedLatest = formatPosts(allPosts, { limit: 6 });
+
+const title = 'Home';
 const description = '…';
 ---
 
-<BaseLayout title={title} description={description}>
-	<Headline>Homepage</Headline>
-</BaseLayout>
+<GridLayout title={title} description={description} grid="fullsize" class="grid" innerGrid>
+	<PageTitle class="!text-6 sm:!text-7">
+		Stefan Imhoff
+		<small class="block text-[0.235em] font-light tracking-normal dark:text-[0.23em]"
+			>Front-End Web Developer • Designer • Minimalist • Japanophile</small
+		>
+	</PageTitle>
+	<div
+		class="col-start-1 col-end-19 md:col-start-1 md:col-end-11 xl:col-end-11 [&_div]:!border-x-0 [&_div]:!mbe-0 [&_div]:md:!border-s-0"
+	>
+		<Picture
+			alt=""
+			aspect={1.5}
+			breakpoints={[300, 512, 768, 1024, 1280, 1536, 1700, 2000]}
+			src="/assets/images/cover/bonsai.jpg"
+		/>
+	</div>
+
+	<article
+		class="col-start-2 col-end-18 row-start-3 self-center md:col-start-12 md:row-start-2 xl:col-start-13 xl:col-end-17"
+	>
+		<Headline>About Me</Headline>
+		<AboutMe components={mapping} />
+		<MoreLink href="/about/" text="Read more about me" />
+	</article>
+
+	<article
+		class="col-start-2 col-end-18 row-start-4 md:col-start-3 md:col-end-17 md:row-start-3 xl:col-start-5 xl:col-end-15"
+	>
+		<Headline>What I Do</Headline>
+		<div class="columns-1 gap-[2.775vw] mbe-10 md:columns-2 [&_p:last-of-type]:mbe-0">
+			<WhatIDo components={mapping} />
+		</div>
+		<MoreLink href="/projects/" text="See what I do" />
+	</article>
+
+	<article
+		class="col-start-2 col-end-18 md:col-start-6 md:col-end-14 xl:col-start-7 xl:col-end-13"
+	>
+		<Headline>Journal</Headline>
+		<Journal components={mapping} />
+		<MoreLink href="/journal/" text="See all Journal Entries" />
+	</article>
+
+	<article
+		class="min-[1794px]:[&_li:block col-start-2 col-end-18 grid w-full grid-cols-18 gap-y-gap mbe-12 min-[1097px]:[&_li:nth-child(n+5)]:hidden min-[1410px]:[&_li:nth-child(n+5)]:block min-[1411px]:[&_li:nth-child(n+6)]:hidden min-[1793px]:[&_li:nth-child(n+6)]:block"
+	>
+		<JournalList entries={formattedLatest} />
+	</article>
+</GridLayout>

src/text/homepage/about-me.mdx

@@ -0,0 +1 @@
+I’m a Front-End Web Developer and Designer from Hamburg, Germany. I love design and art, reading books, listening to podcasts, creating Sketchnotes, taking photos, and writing Haiku.

src/text/homepage/journal.mdx

@@ -0,0 +1 @@
+I am writing essays about topics including programming, design, self-improvement, philosophy, productivity, books, and films in this journal.

src/text/homepage/what-i-do.mdx

@@ -0,0 +1,7 @@
+For nearly two decades, I have been creating user-centric layouts for web-based devices of all sizes, and I take pride in bringing simplicity and minimalism to each of my projects.
+
+I am passionate about providing excellent user experiences, which includes crafting well-written content, selecting appropriate photography, typography, and colors, programming efficient and maintainable code, and creating captivating animations.
+
+Currently, I am employed at [NEW WORK SE](https://www.new-work.se/) and working on the Design System of [XING](https://www.xing.com/), Europe's leading business network.
+
+I am an avid innovator and have contributed to a number of projects, including a job platform for freelancers during one of the company's _Hackweeks_, and am a three-time winner of the _Prototyping Days_, a two-day company-wide prototyping event.