feat: contour elevation shading and project card thumbnails

src/app/design/page.tsx

@@ -69,7 +69,12 @@ import { projectEntries, projectEntriesByCategory } from '@/constants/projects'
 import { appdata } from '@/constants/system'
 import { techtalkEntries } from '@/constants/techtalks'
 import { testimonialEntries } from '@/constants/testimonials'
-import { getCareerYears, getJobGroups, getProjectMainAsset } from '@/utils/career'
+import {
+  getCareerYears,
+  getJobGroups,
+  getProjectMainAsset,
+  getProjectMainThumb
+} from '@/utils/career'
 import { createMetadata } from '@/utils/system'
 
 const metadata = createMetadata({
@@ -153,8 +158,9 @@ const DesignPage = () => {
   const specimenStory = specimenProject.media?.stories?.[0]
   const specimenVisual = specimenProject.media?.visuals?.[0]
   const mainAsset = getProjectMainAsset(specimenProject)
+  const mainThumb = getProjectMainThumb(specimenProject)
   const tileAssets = projectEntries
-    .map((projectEntry) => getProjectMainAsset(projectEntry))
+    .map((projectEntry) => getProjectMainThumb(projectEntry))
     .filter((asset) => asset.src !== placeholderAsset.src)
     .slice(0, 10)
 
@@ -551,7 +557,7 @@ const DesignPage = () => {
                 <p className="text-e4 font-expressive text-muted-foreground absolute top-3 left-3 z-10 uppercase">
                   Tile
                 </p>
-                <Tile asset={mainAsset} />
+                <Tile asset={mainThumb} />
               </div>
               <div className="relative h-56 overflow-hidden rounded-sm border">
                 <p className="text-e4 font-expressive text-muted-foreground absolute top-3 left-3 z-10 uppercase">

src/app/works/page.tsx

@@ -10,7 +10,7 @@ import { personEntryById } from '@/constants/profile'
 import { projectEntries, projectEntriesByCategory } from '@/constants/projects'
 import { appdata } from '@/constants/system'
 import { shuffle } from '@/utils/array'
-import { getProjectMainAsset } from '@/utils/career'
+import { getProjectMainThumb } from '@/utils/career'
 import { createMetadata } from '@/utils/system'
 
 const metadata = createMetadata({
@@ -29,7 +29,7 @@ const WorksPage = () => {
   )
   const tileAssets = shuffle(
     projectEntries
-      .map((projectEntry) => getProjectMainAsset(projectEntry))
+      .map((projectEntry) => getProjectMainThumb(projectEntry))
       .filter((asset) => asset.src !== placeholderAsset.src)
   ).slice(0, 21)
 

src/components/atoms/contour.tsx

@@ -17,6 +17,8 @@ const styles = {
 // Tuning
 const baseAlpha = 0.1 // faint lines
 const indexAlpha = 0.15 // index lines
+const fillAlphaMin = 0 // elevation tint at the lowest tracked terrain value
+const fillAlphaMax = 0.025 // elevation tint at the highest tracked terrain value; stays faint so lines still read as the focal layer
 const fps = 12 // render cap; GPU-side now, so a smooth rate is cheap
 const timeScale = 0.025 // how fast the terrain evolves (per second)
 const noiseFreq = 0.005 // spatial scale: higher = zoomed further out = far more lines on screen
@@ -127,7 +129,12 @@ void main() {
   float alpha = mix(${f(baseAlpha)}, ${f(indexAlpha)}, isIndex);
   float line = (1.0 - smoothstep(0.0, halfWidth * g + 1e-6, di)) * alpha * inRange;
 
-  outColor = vec4(uStroke, line);
+  // elevation tint: a faint fill under the lines, rising with terrain height so higher ground reads
+  // slightly denser, same monochrome stroke color as the lines.
+  float fill = mix(${f(fillAlphaMin)}, ${f(fillAlphaMax)}, clamp(t / float(${levels - 1}), 0.0, 1.0)) * inRange;
+  float shade = line + fill * (1.0 - line);
+
+  outColor = vec4(uStroke, shade);
 }`
 
 type ContourRef = HTMLCanvasElement

src/components/molecules/project.tsx

@@ -7,7 +7,7 @@ import { Ticker } from '@/components/atoms/ticker'
 import { clientById } from '@/constants/client'
 import { appTimeZone } from '@/constants/date'
 import { ProjectEntry } from '@/types/career'
-import { getProjectMainAsset } from '@/utils/career'
+import { getProjectMainThumb } from '@/utils/career'
 import { formatAttribution } from '@/utils/string'
 import { cn, cva, type VariantProps } from '@/utils/theme'
 import { Badge } from '../atoms/badge'
@@ -62,7 +62,7 @@ const Project = forwardRef<ProjectRef, ProjectProps>((props, ref) => {
   const { basic, extended, parents } = project
 
   // render vars
-  const asset = getProjectMainAsset(project)
+  const asset = getProjectMainThumb(project)
   const client = clientById[parents.clientId] ?? undefined
   const clientLogo = client?.media?.dark
   const agency = parents?.agencyId ? clientById[parents?.agencyId] : undefined