From e9b2894992468bf0e96f0de52294fdca8c8ddbe6 Mon Sep 17 00:00:00 2001 From: Tin Geber Date: Thu, 7 May 2026 10:17:13 +0200 Subject: [PATCH 1/6] tweak to homepage hero, spacing for sections, and a different gradient transition --- README.md | 32 ++++++++++++ src/components/molecules/ProjectCard.astro | 2 +- src/components/sections/Header.astro | 5 +- .../sections/LatestUpdatesSection.astro | 2 +- .../sections/SkillsCloudSection.astro | 12 +++-- src/components/sections/UxdCtaSection.astro | 2 +- src/content/pages/home.yaml | 13 +++-- src/styles/colors.css | 50 +++++++++++++------ src/styles/components.css | 46 +++++------------ 9 files changed, 100 insertions(+), 64 deletions(-) diff --git a/README.md b/README.md index 135766c..a26e059 100644 --- a/README.md +++ b/README.md @@ -298,6 +298,38 @@ Tailwind CSS v4 uses @theme definitions in the style files. Update `src/styles/c BaseLayout handles document-level concerns while PageLayout adds header, footer, and content structure. Create specialized layouts by extending these base layouts. +### Phase gradient system + +The site identity uses a four-stop gradient across the four phase colours (`understand`, `define`, `deliver`, `sustain`). The gradient appears in many places — the nav bottom bar, the hero band, full-bleed section backgrounds, dividers (`gradient-rule`), input underlines (`gradient-underline`), card frames (`gradient-frame`), and per-project card backgrounds. + +All of those utilities read from a single source of truth in `src/styles/colors.css`: + +```css +--phase-gradient-method: in oklch longer hue; /* interpolation; (empty) = default oklab */ +--phase-gradient-angle: 100deg; /* 90deg = "to right"; +10° clockwise tilt */ +--phase-gradient-stops: var(--color-phase-understand), …, var(--color-phase-sustain); +--phase-gradient-stops-light: /* light tints */ +--phase-gradient-stops-dark: /* dark tints */ +``` + +Change any of these once and every gradient in the system updates — including the dynamic per-project card gradient in `ProjectCard.astro` (which has its own per-card stop list but routes through the shared method + angle). The vertical-rule utility (`gradient-rule-vertical`) keeps `to bottom` since tilting a 2px-wide line doesn't read. + +**Available interpolation methods:** + +| Value | Effect | +|---|---| +| *(empty)* | CSS Color 4 default — `oklab`. Perceptually uniform, no hue rotation. Crossing distant hues passes through desaturated midpoints. | +| `in oklab` / `in lab` | Explicit perceptually-uniform rectangular spaces. | +| `in srgb` / `in srgb-linear` / `in display-p3` | RGB-family. `srgb` muddies hard through grey on complements; `display-p3` is punchier on wide-gamut displays. | +| `in oklch shorter hue` | Short way around the OKLCH hue wheel. Avoids grey midpoints, stays perceptually uniform. | +| `in oklch longer hue` | Long way around. Vibrant rainbow paths through whatever hues lie on the far arc. | +| `in oklch increasing hue` / `decreasing hue` | Always rotates one direction (clockwise / counter-clockwise). | +| `in lch hue` | CIE LCH variant — slightly less perceptually uniform than OKLCH, often a touch more saturated. | +| `in hsl hue` | Old-school HSL. Lightness peaks/dips at primaries — mids can spike unexpectedly. | +| `in hwb hue` | Hue + whiteness + blackness. Tends to produce flatter, paler transitions. | + +To preview a method, edit the value in `src/styles/colors.css` and hard-refresh — every gradient updates simultaneously. + ## Learn More - [Astro Documentation](https://docs.astro.build) diff --git a/src/components/molecules/ProjectCard.astro b/src/components/molecules/ProjectCard.astro index 7f55ca1..3864714 100644 --- a/src/components/molecules/ProjectCard.astro +++ b/src/components/molecules/ProjectCard.astro @@ -50,7 +50,7 @@ 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(', ')})`; --- -
-
+
diff --git a/src/components/sections/LatestUpdatesSection.astro b/src/components/sections/LatestUpdatesSection.astro index 37f809a..0a8023a 100644 --- a/src/components/sections/LatestUpdatesSection.astro +++ b/src/components/sections/LatestUpdatesSection.astro @@ -63,7 +63,7 @@ const resolved: Resolved[] = projects { resolved.length > 0 && ( -
+
diff --git a/src/components/sections/SkillsCloudSection.astro b/src/components/sections/SkillsCloudSection.astro index 8911e5e..749d48e 100644 --- a/src/components/sections/SkillsCloudSection.astro +++ b/src/components/sections/SkillsCloudSection.astro @@ -56,7 +56,7 @@ const cloudSkills: SkillsCloudSkill[] = skills.map((s) => ({ cloud on desktop and the mousemove-driven 3D effect dies. */}
@@ -68,20 +68,20 @@ const cloudSkills: SkillsCloudSkill[] = skills.map((s) => ({ > { eyebrow && ( -

+

{eyebrow}

) } {heading} { body && ( - + {body} ) @@ -94,6 +94,10 @@ const cloudSkills: SkillsCloudSkill[] = skills.map((s) => ({