feat: fluid viewport canvas scaling and responsive hero margins

src/routes/+page.svelte

@@ -74,6 +74,7 @@
 
 			let cx = w / 2;
 			let cy = h / 2 + 10;
+			let scaleFactor = Math.min(1, w / 1024);
 			const color = '#e8654a';
 
 			// ── VIS: Bar Chart ──
@@ -170,14 +171,20 @@
 				for (let b = 0; b < bars.length; b++) {
 					const bar = bars[b];
 					const bh = -bar.dTopY;
-					const barX = cx + bar.dx;
+					const barX = cx + bar.dx * scaleFactor;
 					const barTopY = cy + bar.dTopY;
 					const breathe = organicNoise(idleTime * bar.speed, bar.phaseOffset) * 0.5 + 0.5;
 					const targetAlpha = 0.4 + breathe * 0.25;
 					const drift = organicNoise(idleTime * bar.speed * 0.8, bar.phaseOffset) * 10;
 					ctx.globalAlpha = targetAlpha * barsProgress;
 					ctx.fillStyle = color;
-					drawRoundedBar(barX - barW / 2, barTopY + drift, barW, bh - drift, 5);
+					drawRoundedBar(
+						barX - (barW * scaleFactor) / 2,
+						barTopY + drift,
+						barW * scaleFactor,
+						bh - drift,
+						5 * scaleFactor
+					);
 				}
 
 				if (nodes.length > 0) {
@@ -192,10 +199,10 @@
 						const driftX = organicNoise(idleTime * node.speed * 0.5, node.phaseOffset) * 5;
 						const driftY = organicNoise(idleTime * node.speed * 0.6, node.phaseOffset * 1.3) * 5;
 
-						cNode.x = cx + node.dx + driftX;
+						cNode.x = cx + node.dx * scaleFactor + driftX;
 						cNode.y = cy + node.dy + driftY;
 						cNode.alpha = nAlpha;
-						cNode.radius = 5 + nBreathe * 1.5;
+						cNode.radius = (5 + nBreathe * 1.5) * Math.max(0.6, scaleFactor);
 					}
 
 					for (const edge of netEdges) {
@@ -243,6 +250,7 @@
 				h = rect.height;
 				cx = w / 2;
 				cy = h / 2 + 10;
+				scaleFactor = Math.min(1, w / 1024);
 			});
 			resizeObserver.observe(canvas);
 		}
@@ -267,7 +275,7 @@
 	></canvas>
 
 	<!-- Text layer — minimal, below the vis -->
-	<div class="relative z-[1] flex flex-col items-center" style="margin-top: 12rem;">
+	<div class="relative z-[1] flex flex-col items-center mt-16 sm:mt-24 md:mt-36 lg:mt-48">
 		<!-- Focus phrase -->
 		<h1
 			class="font-serif text-[clamp(1.6rem,4vw,2.8rem)] font-normal leading-[1.2] tracking-[-0.01em] text-text transition-[opacity,transform] duration-[1800ms] ease-[cubic-bezier(0.16,1,0.3,1)] {phase >=

src/routes/page.spec.ts

@@ -0,0 +1,30 @@
+import { describe, it, expect } from 'vitest';
+import * as fs from 'fs';
+import * as path from 'path';
+
+describe('Landing Page Hero scaling and responsive spacing', () => {
+	it('calculates scaleFactor correctly for different viewport widths', () => {
+		const getScaleFactor = (w: number) => Math.min(1, w / 1024);
+
+		expect(getScaleFactor(1024)).toBe(1.0);
+		expect(getScaleFactor(1440)).toBe(1.0);
+		expect(getScaleFactor(768)).toBe(768 / 1024);
+		expect(getScaleFactor(480)).toBe(480 / 1024);
+		expect(getScaleFactor(320)).toBe(320 / 1024);
+	});
+
+	it('uses responsive margin utility classes instead of fixed inline style in +page.svelte', () => {
+		const pageContent = fs.readFileSync(path.resolve(__dirname, './+page.svelte'), 'utf-8');
+
+		// Fixed inline margin-top style should be removed
+		expect(pageContent).not.toContain('style="margin-top: 12rem;"');
+
+		// Responsive tailwind top margin utility classes should be present
+		expect(pageContent).toContain('mt-16 sm:mt-24 md:mt-36 lg:mt-48');
+
+		// Scale factor calculation and application should be present
+		expect(pageContent).toContain('scaleFactor = Math.min(1, w / 1024)');
+		expect(pageContent).toContain('bar.dx * scaleFactor');
+		expect(pageContent).toContain('node.dx * scaleFactor');
+	});
+});