Reorganise the homepage with Three.js scenes and a stack story; fix CI - #3
Merged
Merged
Conversation
Adds a second Three.js piece below the hero: a four-act, scroll-driven diagram of how one of our builds fits together — a Blazor web app on a monitor, the same app on a phone, and the ASP.NET Core API and PostgreSQL database underneath them, with the data flowing between them. Every device except the phone is drawn as an outline, so the section reads as a diagram of the parts working together rather than a product shot. - src/scripts/shapes.ts: 2D shape helpers shared by both scenes. Outlines are ring geometry (a shape with a smaller copy punched out) rather than THREE.Line, because WebGL ignores LineBasicMaterial.linewidth. - src/scripts/stackStory.ts: the scene. Orthographic camera over a fixed design space 1000 units tall, so geometry is written once and only the frustum changes on resize. Device poses come from keyframe tracks sampled by scroll position; screens and labels are canvas textures, since text in raw Three.js would otherwise need a font loader. - src/components/StackStory.astro: the section — a sticky stage inside a tall runway, with four captions that cross-fade with the acts. The stage is sticky rather than fixed so it never competes with the hero's fixed canvas, and it sits outside .yas-page-canvas because that element's overflow-x makes it a scroll container, which would stop the stage sticking. The hero canvas now fades out as the story scrolls in. The hero's local roundedSquareGeometry is replaced by the shared helper so there is one implementation of the shape rather than two. The loop only runs while the stage is on screen, and prefers-reduced-motion drops the drifting backdrop, travelling packets and ticking numbers while keeping the diagram itself. Co-Authored-By: Claude Opus 5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01HQauSUJBoizYmd62J95vDx
Gives each of the colour-washed homepage sections a small Three.js diagram in the same outline style as the stack story, each using that section's accent colour: - How We Work: discovery → build → review → ship as four outlined nodes joined by dashed links with travelling packets. - Talks & Presentations: a slide on a stand with a live bar chart and a laser pointer, a speaker, and three rows of audience. - Why Y-A-S: you, linked straight to the developers, with the account manager crossed out underneath — the section's own "no hand-offs". - Blog: a stack of post cards, the front one still typing itself out. Each scene reveals as its section scrolls into view, idles with a little ambient motion, and only renders while on screen. Reduced motion shows the settled diagram with the motion off. Scenes sit beside the text at large widths using the same row/column pattern as the intro section and are hidden below that, as the intro's image already is. The materials, canvas-backed labels, dashed links and render-loop scaffolding the stack story carried are moved into src/scripts/sceneKit.ts so the two scene modules draw from one implementation; the stack story is refactored onto it with no visual change. Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01HQauSUJBoizYmd62J95vDx
Every run of "Deploy to GitHub Pages" has failed since 2025, on every push to main, at the deploy step: GitHub Pages is not enabled for the repository, and the site is hosted on Cloudflare Pages anyway, which builds from main by itself. The build step in those runs has always passed, so the red runs were noise rather than a real break. Drop the deploy job and the Pages permissions, and run the build on pull requests as well as pushes to main, so the workflow reports something true: whether the site builds. Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01HQauSUJBoizYmd62J95vDx
The homepage ran to ~11.5 screens on a 1440x900 desktop and its order
buried the strongest proof of work: five colour-washed sections were
each forced to min-height: 100vh, the Talks list sat above Why Y-A-S,
and the projects collection was fetched but never shown.
New order, top to bottom:
1. Hero (unchanged)
2. Intro "We build software." (neutral) - the only full-height band,
via the new .reveal-section--tall modifier; keeps the canonical
tech badges and both CTAs
3. Why Y-A-S "Small team, real ownership." (green)
4. How We Work "From idea to shipped." (blue) with its process badges
5. Selected Work "Things we've shipped." (red) - new: the three most
recent projects as cards plus a "View all projects" link
6. Blog "Read our Blog" (navy) - slimmed to label, heading, one line
and the Explore Blog button
7. Stack story, 8. Footer (unchanged)
Sections 3-6 now size to their content (min-height: 0; padding: 4rem 0)
instead of a screen each. The DOM still holds exactly five
.reveal-section elements in the neutral/green/blue/red/navy order the
hero's Three.js squares are paired with, so the hero script and its
computeRemoval() slots are untouched; the ownership and workflow scene
accents follow their bands' new colours (green and blue).
Removed: the Talks & Presentations section together with its .talk-*
styles and the `talks` scene builder; the tech badges on Why Y-A-S and
Blog, which duplicated the intro's list; the unused .blog-cta-section
rule. The project card markup and styles move out of the projects page
into a shared ProjectCard component so both pages render the same card.
The stack story runway shrinks from 420vh to 300vh (380vh to 280vh on
mobile) and its lede is a single line inviting the scroll. Measured
with Bootstrap served locally the page goes from 11.5 to 8.8 screens;
hero, full-height intro and the 300vh runway alone account for five of
those.
Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01HQauSUJBoizYmd62J95vDx
Deploying y-a-s with
|
| Latest commit: |
12a7fc9
|
| Status: | ✅ Deploy successful! |
| Preview URL: | https://3529fb2c.y-a-s.pages.dev |
| Branch Preview URL: | https://claude-threejs-device-animat.y-a-s.pages.dev |
MatejMa2ur
changed the title
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
Reorganises the homepage so its order is clear and it is no longer ~11 screens long, adds scroll-driven Three.js visuals in one outline style, and fixes the always-red GitHub workflow.
New homepage order
projectsand never rendering them. Replaces the Talks & Presentations section, which was sample content.The five brand squares in the hero still map one-to-one onto five
.reveal-sectionblocks in the same colour order, so the hover tooltips and click-to-scroll keep working with no change to the hero script.Measured at 1440×900 with Bootstrap served: 11.5 screens before, 8.8 after. Hero + full-height intro + the story runway are 5 of those; the rest is four content bands, the story intro and the footer.
Stack story
A four-act, scroll-driven diagram of how a Y-A-S build fits together. Every device except the phone is drawn as an outline, so it reads as a system diagram rather than a product shot.
live sync · SignalRlink and travelling packets.HTTPSandEF Core.The stage is
position: stickyinside a tall runway rather thanfixedlike the hero, so the two canvases never compete. It sits outside.yas-page-canvason purpose: that element'soverflow-x: hiddenmakes it a scroll container, which silently breaks sticky descendants. The hero squares fade out as the story scrolls in.Section scenes
Three of the colour-washed sections get a small outline diagram in their own accent colour, beside the text at large widths (same
row/col-lg-6pattern as the intro, hidden belowlglike the intro's image):Shared code
src/scripts/shapes.ts— 2D shape helpers. Outlines are ring geometry because WebGL ignoresLineBasicMaterial.linewidth.src/scripts/sceneKit.ts— materials, canvas-backed labels, dashed links, and the render-loop scaffolding (orthographic camera over a fixed design space,IntersectionObserver-gated loop).src/components/ProjectCard.astro— the project card extracted from the projects page so the homepage and/projects/render identical cards from one place.roundedSquareGeometryis replaced by the shared helper, so there is one implementation of the shape.All scenes respect
prefers-reduced-motion(settled diagram, ambient motion off) and only render while on screen.CI
The "Deploy to GitHub Pages" workflow had failed on every push since 2025 at the deploy step, because GitHub Pages is not enabled and the site is on Cloudflare Pages. The build step always passed. The workflow is now a plain build check (
npm ci+npm run buildon Node 22) that also runs on pull requests.Test plan
npm ci && npm run buildpasses on the branch head.reveal-sectionblocks confirmed in DOM order neutral, green, blue, red, navy; hero tooltips follow that order🤖 Generated with Claude Code
https://claude.ai/code/session_01HQauSUJBoizYmd62J95vDx