site: faster, clearer portfolio with real project schematics

.github/copilot-instructions.md

@@ -3,7 +3,7 @@
 ## Reality Check
 
 - This repo is a root-static GitHub Pages site.
-- The maintained pages are `index.html`, `photo.html`, `thank-you.html`, and `cv.html`.
+- The maintained pages are `index.html`, `photo.html`, and `cv.html`. `404.html` is served by GitHub Pages for missing routes and must use root-absolute asset paths.
 - `dev` is the working/source branch convention.
 - Do not assume `main` is the source branch.
 - Do not assume Jekyll templates or GitHub Actions are part of the active runtime unless the repo is changed to make that true.
@@ -13,7 +13,7 @@
 - Shared shell and navigation logic: `assets/js/site-shell.js`
 - Homepage behavior: `assets/js/index-page.js`
 - Photography page behavior: `assets/js/photo-page.js`
-- Legacy helper script: `assets/js/scripts.js`
+- Lab loader and navigation: `assets/js/portfolio-labs.js` (lazy-imports `path-playground.js` and `lab-experiments.js`, which pull in three.js)
 
 ## CSS Layout
 
@@ -28,4 +28,4 @@
 
 ## Legacy Routes
 
-`about.html`, `projects.html`, and `vision.html` are compatibility-only routes. Keep them low-risk and avoid treating them as primary product surfaces unless the repo is intentionally reoriented. Local harness pages belong under `tests/fixtures/`.
+`about.html`, `projects.html`, `vision.html`, and `thank-you.html` are `noindex` meta-refresh redirects into homepage sections. Keep them that way. Local harness pages belong under `tests/fixtures/`.

.github/workflows/site-checks.yml

@@ -0,0 +1,42 @@
+name: Site checks
+
+on:
+  push:
+    branches: [dev]
+  pull_request:
+
+permissions:
+  contents: read
+
+jobs:
+  checks:
+    # Pinned: Playwright 1.59 cannot install browsers on ubuntu-latest (26.04).
+    runs-on: ubuntu-24.04
+    timeout-minutes: 20
+    steps:
+      - uses: actions/checkout@v4
+
+      - uses: actions/setup-node@v4
+        with:
+          node-version: 22
+          cache: npm
+
+      # The Playwright web server runs scripts/serve.py.
+      - uses: actions/setup-python@v5
+        with:
+          python-version: '3.12'
+
+      - run: npm ci
+
+      - name: Committed CSS matches the Tailwind source
+        run: |
+          npm run build
+          git diff --exit-code assets/css/output.css
+
+      - run: npx playwright install --with-deps chromium
+
+      - run: npm run lint
+
+      - run: npm run test:models
+
+      - run: npm test -- --reporter=line

404.html

@@ -0,0 +1,63 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Page not found | Yuval Grimberg</title>
+    <meta name="description" content="This route does not exist. The portfolio, CV and projects are one click away.">
+    <meta name="robots" content="noindex">
+    <meta name="referrer" content="no-referrer">
+    <meta http-equiv="Content-Security-Policy"
+        content="default-src 'self'; base-uri 'self'; object-src 'none'; script-src 'self'; style-src 'self'; img-src 'self' data:; form-action 'self'; upgrade-insecure-requests">
+    <meta name="theme-color" content="#05070a">
+    <!-- GitHub Pages serves this file for any missing path, so every URL here is root-absolute. -->
+    <link rel="icon" type="image/svg+xml" href="/favicon.svg">
+    <link rel="stylesheet" href="/assets/css/output.css">
+</head>
+
+<body class="bg-tech-dark text-white font-display overflow-x-hidden">
+    <nav class="border-b border-white/10 bg-tech-dark/95">
+        <div class="max-w-5xl mx-auto px-4 sm:px-6 py-4 flex items-center justify-between gap-3">
+            <a href="/" class="text-2xl font-black gradient-text">YG</a>
+            <a href="/#contact" class="text-sm text-gray-300 hover:text-tech-cyan">Contact</a>
+        </div>
+    </nav>
+
+    <main id="main-content" class="max-w-5xl mx-auto px-4 sm:px-6 py-16 md:py-24">
+        <p class="font-tech text-sm uppercase tracking-[0.18em] text-tech-cyan mb-4">404 · no feasible path</p>
+        <h1 class="text-4xl md:text-6xl font-black leading-tight mb-6 max-w-3xl">
+            The planner searched everywhere. <span class="gradient-text">This page is not on the map.</span>
+        </h1>
+        <p class="text-lg text-gray-300 max-w-2xl mb-10">
+            Either the link is stale or the goose moved it. Both happen. Here are routes that do converge.
+        </p>
+
+        <svg class="w-full max-w-2xl mb-10" viewBox="0 0 640 140" role="img"
+            aria-label="A planned path that ends at a wall of cones">
+            <path d="M20 110 C 140 110, 170 40, 290 50 S 430 104, 500 78" fill="none" stroke="#58c7bc"
+                stroke-width="3" stroke-linecap="round" />
+            <path d="M500 78 L 560 62" fill="none" stroke="#58c7bc" stroke-width="3" stroke-dasharray="6 8"
+                stroke-linecap="round" opacity="0.6" />
+            <circle cx="20" cy="110" r="6" fill="#d8aa4f" />
+            <g fill="#d8aa4f">
+                <path d="M584 30 l8 22 h-16 z" />
+                <path d="M584 64 l8 22 h-16 z" />
+                <path d="M584 98 l8 22 h-16 z" />
+            </g>
+            <text x="20" y="134" fill="#9eafab" font-family="Cascadia Mono, JetBrains Mono, Consolas, monospace"
+                font-size="11" letter-spacing="1">START</text>
+            <text x="520" y="134" fill="#ff766d" font-family="Cascadia Mono, JetBrains Mono, Consolas, monospace"
+                font-size="11" letter-spacing="1">GOAL: UNREACHABLE</text>
+        </svg>
+
+        <ul class="grid sm:grid-cols-2 gap-3 max-w-2xl">
+            <li><a href="/" class="touch-target flex items-center justify-between rounded-lg border border-white/15 px-5 py-4 font-bold hover:border-tech-cyan hover:text-tech-cyan">Back to the portfolio <span aria-hidden="true">→</span></a></li>
+            <li><a href="/#projects" class="touch-target flex items-center justify-between rounded-lg border border-white/15 px-5 py-4 font-bold hover:border-tech-cyan hover:text-tech-cyan">Featured projects <span aria-hidden="true">→</span></a></li>
+            <li><a href="/cv.html" class="touch-target flex items-center justify-between rounded-lg border border-white/15 px-5 py-4 font-bold hover:border-tech-cyan hover:text-tech-cyan">Public CV <span aria-hidden="true">→</span></a></li>
+            <li><a href="mailto:yuval.grimberg@gmail.com" class="touch-target flex items-center justify-between rounded-lg border border-white/15 px-5 py-4 font-bold hover:border-tech-cyan hover:text-tech-cyan">Email Yuval <span aria-hidden="true">↗</span></a></li>
+        </ul>
+    </main>
+</body>
+
+</html>

README.md

@@ -8,12 +8,12 @@ Static personal site for [grimgrimberg.github.io](https://grimgrimberg.github.io
 - Primary maintained pages:
   - `index.html`
   - `photo.html`
-  - `thank-you.html`
   - `cv.html`
-- Legacy compatibility pages:
-  - `about.html`
-  - `projects.html`
-  - `vision.html`
+  - `fly101.html` (project notes; the Fly101 repo is private, so never link to it or copy private paths)
+  - `404.html` (served by GitHub Pages for any missing path, so it uses root-absolute URLs)
+- Legacy URLs kept as `noindex` redirects into homepage sections:
+  - `about.html`, `projects.html`, `vision.html`, `thank-you.html`
+- Crawl and sharing files: `robots.txt`, `sitemap.xml`, `apple-touch-icon.png`, `assets/images/og-card.png`
 
 This repo is not React and is not driven by Jekyll templates in its current maintained flow.
 
@@ -30,12 +30,18 @@ This repo is not React and is not driven by Jekyll templates in its current main
 - Page-specific behavior lives in:
   - `assets/js/index-page.js`
   - `assets/js/photo-page.js`
-- Legacy standalone pages still use `assets/js/scripts.js`.
+- The interactive labs live in:
+  - `assets/js/portfolio-labs.js`: lab switching, plus a lazy loader that imports the scenes when a lab nears the viewport or the page goes idle
+  - `assets/js/path-playground.js` and `assets/js/lab-experiments.js`: the three.js scenes
+  - `assets/js/lab-models.mjs`: the pure simulation models, tested by `npm run test:models`
+  - `assets/js/fly-brain.js`: the connectome point cloud, shared by the `Connectome` lab and `fly101.html`
+- Clippy (jQuery + clippy.js, about 1.5 MB with the sprite sheet) is injected on demand: after page load on desktop, on the first Guide click on phones.
 
 ## CSS Story
 
 - `assets/css/styles.css` is the Tailwind v4 source-of-truth stylesheet.
-- `npm run build` produces the committed `assets/css/output.css` used by the maintained pages and legacy compatibility pages.
+- `npm run build` produces the committed `assets/css/output.css` used by every page. CI fails if it is stale.
+- `assets/css/original-plus-3d.css` holds hand-written overrides for the hero, nav, labs and goose, loaded after `output.css` on the homepage.
 - Primary pages no longer depend on the Tailwind CDN runtime.
 
 ## Local Development
@@ -56,12 +62,13 @@ npm run serve
 
 - [http://127.0.0.1:8000/](http://127.0.0.1:8000/)
 - [http://127.0.0.1:8000/photo.html](http://127.0.0.1:8000/photo.html)
-- [http://127.0.0.1:8000/thank-you.html](http://127.0.0.1:8000/thank-you.html)
+- [http://127.0.0.1:8000/cv.html](http://127.0.0.1:8000/cv.html)
 
 ## Commands
 
 ```bash
 npm run lint
+npm run test:models
 npm test
 npm run test:headed
 npm run build
@@ -70,7 +77,9 @@ npm run serve
 ```
 
 - `npm run lint` runs the repo-specific static and runtime hygiene checks.
+- `npm run test:models` checks the lab simulation models in plain Node.
 - `npm test` runs the maintained Playwright smoke suite.
+- `.github/workflows/site-checks.yml` runs the build check, lint, model tests and smoke suite on pushes to `dev` and on pull requests.
 - Use `npm run lint` and `npm test -- --reporter=line` as the default acceptance gates before pushing portfolio changes.
 - `npm run build` rebuilds the committed Tailwind CSS used by the site pages.
 - `npm run serve` launches the same local static server shape the smoke suite uses.
@@ -82,11 +91,25 @@ assets/
   css/
     styles.css
     output.css
+    original-plus-3d.css
+  data/
+    github-repos.json
+  images/
+    fly101/          # renders of the connectome, fly and arm
+    projects/        # line-art schematics for the project cards
+    icons/           # inline-ready skill icons
   js/
     index-page.js
     photo-page.js
     site-shell.js
-    scripts.js
+    portfolio-labs.js
+    path-playground.js
+    lab-experiments.js
+    lab-models.mjs
+    fly-brain.js
+  vendor/
+    clippyjs/
+    three/
 scripts/
   lint-site.mjs
   optimize-images.ps1
@@ -108,8 +131,11 @@ docs/
     REFACTORING_SUMMARY.md
 index.html
 photo.html
-thank-you.html
 cv.html
+fly101.html
+404.html
+robots.txt
+sitemap.xml
 ```
 
 ## Notes

about.html

@@ -1,62 +1,22 @@
 <!DOCTYPE html>
 <html lang="en">
+
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>About | Yuval Grimberg</title>
-    <meta name="robots" content="noindex,follow">
+    <title>About moved | Yuval Grimberg</title>
+    <!-- Legacy URL kept so old links still land somewhere useful. -->
+    <meta name="robots" content="noindex">
+    <meta http-equiv="refresh" content="0; url=index.html#about">
+    <link rel="canonical" href="https://grimgrimberg.github.io/#about">
+    <link rel="icon" type="image/svg+xml" href="favicon.svg">
     <link rel="stylesheet" href="assets/css/output.css">
 </head>
 
-    <body class="font-roboto text-gray-800">
-        <header>
-            <nav class="flex justify-center space-x-4">
-                <a href="index.html" class="text-blue-500 hover:underline">Home</a>
-                <a href="about.html" class="text-blue-500 hover:underline">About Me</a>
-                <a href="projects.html" class="text-blue-500 hover:underline">Projects</a>
-                <a href="vision.html" class="text-blue-500 hover:underline">Vision</a>
-            </nav>
-        </header>
-        <div style="max-width: 960px; margin: 16px auto 0; padding: 0 16px;">
-            <p style="background: #fff7ed; border: 1px solid #fdba74; border-radius: 12px; padding: 12px 16px; color: #9a3412;">
-                Legacy page: this standalone route is kept for compatibility. Start from
-                <a href="index.html" style="color: #1d4ed8; font-weight: 600;">the homepage</a>
-                for the maintained experience.
-            </p>
-        </div>
-
-        <section class="bg-gradient-to-r from-gray-800 to-gray-500 text-white py-20">
-            <div class="container mx-auto text-center px-4">
-                <h1 class="text-6xl font-bold mb-6">About Me</h1>
-                <p class="text-xl mb-8 max-w-3xl mx-auto">As a Mechanical Engineer specializing in control theory and autonomous vehicles, I bring together technical expertise and innovative thinking to solve complex engineering challenges.</p>
-                <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8 max-w-5xl mx-auto mt-12">
-                    <div class="bg-gray-700 bg-opacity-50 p-6 rounded-lg">
-                        <h3 class="text-xl font-bold mb-3">Education</h3>
-                        <p>Mechanical Engineering with focus on Control Theory and Autonomous Systems</p>
-                    </div>
-                    <div class="bg-gray-700 bg-opacity-50 p-6 rounded-lg">
-                        <h3 class="text-xl font-bold mb-3">Skills</h3>
-                        <p>Control Systems, Robotics, Machine Learning, System Design</p>
-                    </div>
-                    <div class="bg-gray-700 bg-opacity-50 p-6 rounded-lg">
-                        <h3 class="text-xl font-bold mb-3">Interests</h3>
-                        <p>Autonomous Vehicles, AI in Engineering, Advanced Control Systems</p>
-                    </div>
-                </div>
-                <div class="mt-12">
-                    <a href="projects.html" class="bg-blue-500 hover:bg-blue-600 text-white py-3 px-8 rounded-lg shadow-md transition duration-300">View My Projects</a>
-                </div>
-            </div>
-        </section>
+<body class="bg-tech-dark text-white font-display">
+    <main id="main-content" class="max-w-xl mx-auto px-6 py-24">
+        <p class="text-lg text-gray-300">This page moved. <a href="index.html#about" class="text-tech-cyan underline">Go to the About section</a>.</p>
+    </main>
+</body>
 
-        <footer class="bg-gray-800 text-white py-6 mt-20">
-            <div class="container mx-auto text-center">
-                <p class="mb-4">&copy; 2025 Yuval Grimberg. All rights reserved.</p>
-                <div class="flex justify-center space-x-6">
-                    <a href="https://github.com/grimgrimberg" target="_blank" rel="noopener noreferrer" aria-label="Open GitHub profile" class="text-white hover:text-blue-400 font-bold text-xl">GH</a>
-                    <a href="https://www.linkedin.com/in/yuval-grimberg-933215173" target="_blank" rel="noopener noreferrer" aria-label="Open LinkedIn profile" class="text-white hover:text-blue-400 font-bold text-xl">in</a>
-                </div>
-            </div>        </footer>
-        <script src="assets/js/scripts.js"></script>
-    </body>
 </html>