Feature/hometweaks

.pages.yml

@@ -251,6 +251,18 @@ components:
         required: true
         description: Markdown content for this section
 
+  callout_section:
+    type: object
+    fields:
+      - name: background
+        label: Section Background
+        component: background_select
+      - name: content
+        label: Content
+        type: rich-text
+        required: true
+        description: Markdown content rendered inside a corner-bracket frame.
+
   button_section:
     type: object
     fields:
@@ -581,6 +593,9 @@ components:
       - name: richText
         label: Rich Text Section
         component: richtext_section
+      - name: callout
+        label: Callout Section
+        component: callout_section
       - name: button
         label: Button Section
         component: button_section
@@ -676,6 +691,10 @@ content:
             label: Rich Text Section
             component: richtext_section
 
+          - name: callout
+            label: Callout Section
+            component: callout_section
+
           - name: button
             label: Button Section
             component: button_section
@@ -861,13 +880,13 @@ content:
           label: '{fields.name}'
         description: Types of work involved in this project
 
-      - name: yearStart
-        label: Start Year
-        type: number
+      - name: dateStart
+        label: Start Date
+        type: date
 
-      - name: yearEnd
-        label: End Year
-        type: number
+      - name: dateEnd
+        label: End Date
+        type: date
 
       - name: projectStatus
         label: Project Status

astro.config.mjs

@@ -38,14 +38,6 @@ export default defineConfig({
       subsets: ['latin', 'latin-ext'],
       cssVariable: '--font-fraunces',
     },
-    {
-      provider: fontProviders.bunny(),
-      name: 'Source Serif 4',
-      weights: [400, 500, 700],
-      styles: ['normal'],
-      subsets: ['latin', 'latin-ext'],
-      cssVariable: '--font-source-serif-4',
-    },
     {
       provider: fontProviders.bunny(),
       name: 'JetBrains Mono',

src/components/molecules/ProjectCard.astro

@@ -50,14 +50,14 @@ const gradientStops =
     : orderedActivePhases.length === 1
       ? [phaseLightVar[orderedActivePhases[0]], 'var(--color-white)']
       : orderedActivePhases.map((p) => phaseLightVar[p]);
-const cardGradient = `linear-gradient(to right, ${gradientStops.join(', ')})`;
+const cardGradient = `linear-gradient(var(--phase-gradient-method) var(--phase-gradient-angle), ${gradientStops.join(', ')})`;
 ---
 
 <a
 	href={`/projects/${slug}`}
 	data-base-href={`/projects/${slug}`}
 	class:list={[
-		'group relative flex h-full no-underline shadow-sm transition-colors duration-150 **:no-underline hover:z-10 hover:shadow-md focus-within:z-10',
+		'group relative flex h-full no-underline shadow-sm transition-colors duration-150 **:no-underline focus-within:z-10 hover:z-10 hover:shadow-md',
 		className,
 	]}
 >
@@ -69,8 +69,8 @@ const cardGradient = `linear-gradient(to right, ${gradientStops.join(', ')})`;
 				title="Active project"
 				aria-label="Active project"
 			>
-				<span class="absolute inset-0 animate-ping rounded-full bg-phase-understand opacity-75" />
-				<span class="relative inline-flex h-2 w-2 rounded-full bg-phase-understand" />
+				<span class="absolute inset-0 animate-ping rounded-full bg-phase-define opacity-75" />
+				<span class="relative inline-flex h-2 w-2 rounded-full bg-phase-define" />
 			</span>
 		)
 	}

src/components/organisms/Head.astro

@@ -182,17 +182,16 @@ const fediverseCreator = (() => {
 
 <!-- Local Font Declaration.
      `preload` is granular: preload only the variants needed to paint above-the-fold
-     content. Fraunces 700 latin = the hero headline (LCP on `/`) and the logo.
-     Source Serif 4 400 latin = the nav menu items and body text. The other
-     declared weights/subsets still load on demand via the injected @font-face rules.
+     content. Fraunces 700 latin = the hero headline (LCP on `/`) and the logo;
+     Fraunces 400 latin = nav menu items and body text. The other declared
+     weights/subsets still load on demand via the injected @font-face rules.
      JetBrains Mono is below the fold everywhere — no preload. -->
 <Font
 	cssVariable="--font-fraunces"
-	preload={[{ weight: 700, style: 'normal', subset: 'latin' }]}
-/>
-<Font
-	cssVariable="--font-source-serif-4"
-	preload={[{ weight: 400, style: 'normal', subset: 'latin' }]}
+	preload={[
+		{ weight: 400, style: 'normal', subset: 'latin' },
+		{ weight: 700, style: 'normal', subset: 'latin' },
+	]}
 />
 <Font cssVariable="--font-jetbrains-mono" />
 

src/components/sections/CalloutSection.astro

@@ -0,0 +1,20 @@
+---
+import renderMarkdownWithImages from '@utils/renderMarkdown';
+
+export interface Props {
+  content: string;
+}
+
+const { content } = Astro.props;
+const { html } = await renderMarkdownWithImages(content, false);
+---
+
+<div class="mx-auto max-w-3xl">
+	<div class="corner-brackets p-8 text-ink md:p-12 lg:p-16">
+		<div
+			class="prose max-w-none text-ink prose-p:my-0 prose-p:font-serif prose-p:text-lg prose-p:leading-relaxed md:prose-p:leading-normal"
+		>
+			<Fragment set:html={html} />
+		</div>
+	</div>
+</div>

src/components/sections/Header.astro

@@ -34,8 +34,5 @@ const transparentClass = transparent ? 'bg-transparent border-transparent' : '';
 	>
 		<slot name="actions" slot="actions" />
 	</Navigation>
-	<div
-		class="flex h-1.5 bg-linear-to-r/longer from-phase-understand via-phase-define via-phase-deliver to-phase-sustain"
-	>
-	</div>
+	<div class="flex h-1.5 gradient-phase"></div>
 </header>

src/components/sections/HowWeWorkSection.astro

@@ -92,7 +92,7 @@ const modalities = modalityEntries
 							{col.name}
 						</span>
 						{col.tagline && (
-							<p class="font-mono text-[0.65rem] tracking-[0.18em] text-ink-muted uppercase">
+							<p class="font-serif text-sm leading-relaxed text-ink-soft">
 								{col.tagline}
 							</p>
 						)}
@@ -137,7 +137,7 @@ const modalities = modalityEntries
 					</div>
 
 					{col.tagline && (
-						<p class="mt-3 font-mono text-[0.65rem] tracking-[0.18em] text-ink-muted uppercase">
+						<p class="mt-3 font-serif text-sm leading-relaxed text-ink-soft md:text-base">
 							{col.tagline}
 						</p>
 					)}

src/components/sections/OrganisationsRollSection.astro

@@ -21,7 +21,7 @@ if (limit) {
 }
 ---
 
-<div class="py-4">
+<div>
 	{
 		title && (
 			<div class="mb-10 flex max-w-2xl flex-col gap-3">

src/components/sections/ProjectsRollSection.astro

@@ -48,7 +48,7 @@ const orgs = await getOrganisations();
 const orgById = new Map(orgs.map((o) => [o.data.id, o.data]));
 ---
 
-<div class="py-4">
+<div>
 	{
 		title && (
 			<div class="mb-8 flex max-w-2xl flex-col gap-3">
@@ -64,33 +64,56 @@ const orgById = new Map(orgs.map((o) => [o.data.id, o.data]));
 
 	{
 		projects.length > 0 ? (
-			<div class:list={['grid gap-4', gridCols]}>
-				{projects.map((project) => (
-					<ProjectCard
-						name={project.data.name}
-						slug={project.data.slug}
-						description={project.data.description}
-						client={
-							project.data.client
-								? orgById.get(project.data.client)?.name
-								: undefined
-						}
-						clientLogo={
-							project.data.client
-								? orgById.get(project.data.client)?.image
-								: undefined
-						}
-						phases={project.data.phases}
-						skills={project.data.skills}
-						projectStatus={project.data.projectStatus}
-						image={hideImages ? undefined : project.data.image}
-						class:list={[
-							!hideImages && project.data.image ? 'sm:col-span-2' : '',
-							cardAspect,
-						]}
-					/>
-				))}
-			</div>
+			<>
+				<div class:list={['grid gap-4', gridCols]}>
+					{projects.map((project) => (
+						<ProjectCard
+							name={project.data.name}
+							slug={project.data.slug}
+							description={project.data.description}
+							client={
+								project.data.client
+									? orgById.get(project.data.client)?.name
+									: undefined
+							}
+							clientLogo={
+								project.data.client
+									? orgById.get(project.data.client)?.image
+									: undefined
+							}
+							phases={project.data.phases}
+							skills={project.data.skills}
+							projectStatus={project.data.projectStatus}
+							image={hideImages ? undefined : project.data.image}
+							class:list={[
+								!hideImages && project.data.image ? 'sm:col-span-2' : '',
+								cardAspect,
+							]}
+						/>
+					))}
+				</div>
+
+				<div class="mt-14 flex justify-end pt-4 md:mt-16">
+					<a
+						href="/projects"
+						class="group inline-flex items-center gap-4 no-underline"
+					>
+						<span class="font-mono text-sm tracking-[0.22em] text-ink uppercase md:text-[0.95rem]">
+							See all projects
+						</span>
+						<span
+							aria-hidden="true"
+							class="block h-px w-12 bg-ink-muted/60 transition-[width,background-color] duration-300 group-hover:w-20 group-hover:bg-ink"
+						/>
+						<span
+							aria-hidden="true"
+							class="font-mono text-base text-ink transition-transform duration-300 group-hover:translate-x-1 md:text-lg"
+						>
+							→
+						</span>
+					</a>
+				</div>
+			</>
 		) : (
 			<p class="text-ink-muted italic">No projects to show.</p>
 		)