feat: visual redesign — split-screen layout, glass-morphism & aurora#45
Closed
feat: visual redesign — split-screen layout, glass-morphism & aurora#45
Conversation
Subject Line: What Happened:
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
Install and configure ESLint 9 (flat config) with typescript-eslint, react-hooks, react-refresh, and eslint-config-prettier. Add Prettier with project-matching style. Install Storybook 10 with react-vite framework and addon suite. Add typecheck, lint, format, and storybook scripts. Remove package-lock.json to standardize on pnpm (resolves #27). Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
Move ref assignment in useActiveSection into useEffect to satisfy react-hooks/refs rule. Remove unnecessary regex escape in xray.ts. Apply Prettier formatting to Hero.tsx, confetti.ts, and main.tsx. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
Replace npm ci with pnpm install --frozen-lockfile using pnpm/action-setup@v4. Add format:check, lint, and typecheck steps before the build step. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
Configure Storybook with @tailwindcss/vite plugin via viteFinal so Tailwind classes render in stories. Add dark mode toolbar toggle via decorator that toggles .dark class on <html>. Create Header stories: Default, WithScrollSections (mock scroll targets), and DarkMode. Include vitest addon integration for story-based testing. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
The component was a 9-line wrapper around a single <span>. Inline the element directly and delete CursiveRob.tsx. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
Replace 9 standalone gradient classes and keyframes (~207 lines) with a shared base rule and CSS custom properties (~68 lines). Each variant now only sets --prism-stops, --prism-size, --prism-speed, and --prism-timing. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
The identical heading className (~130 chars) was copy-pasted across About, Experience, and Projects. Extract into a shared SectionHeading component that takes children. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
Every RevealSection consumer wrapped children in an identical <div className="mx-auto max-w-4xl px-6">. Move this container into RevealSection itself and remove the wrapper from About, Experience, and Projects. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
The identical social link className (~200 chars) was repeated 3 times in Hero.tsx. Extract into a local SocialLink component that takes href, label, and SVG children as props. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
…Linux, TDD, A/B Testing Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
…nents Replace the monolithic xray.ts (imperative DOM creation, manual pub/sub, module globals) with idiomatic React: hooks for state (useXRay, useMousePosition) and a component (XRayOverlay) that mounts/unmounts via conditional rendering. 60fps animations stay imperative via refs. CursorGlow now receives props instead of subscribing to a custom event system. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
Document the current state of testing (1 Storybook story, no unit/integration/e2e tests, CI not running tests) and propose a phased plan covering pure function tests, hook tests, component stories, and E2E smoke tests. https://claude.ai/code/session_01R1f3Cb55HfJHSwXi6hck6U
Phase 1 — Foundation: - Add `test`, `test:watch`, and `test:coverage` scripts to package.json - Add Vitest unit test project (jsdom) alongside existing Storybook project - Add `pnpm run test` step to CI workflow - Install @testing-library/react, @testing-library/jest-dom, jsdom Phase 2 — Pure function tests (26 tests): - src/xray/highlight.test.ts: esc(), highlight(), color constants, JS_RULES Phase 3 — Hook tests (44 tests): - src/hooks/useTypewriter.test.ts: typing animation, cursor lifecycle, cleanup - src/hooks/useTheme.test.ts: localStorage, system preference, toggle - src/hooks/useActiveSection.test.ts: scroll-based section detection - src/hooks/usePrismFlip.test.tsx: flip count, quip cycling, confetti/coin triggers - src/hooks/useRevealOnScroll.test.tsx: IntersectionObserver integration - src/hooks/useMagneticTilt.test.ts: tilt math, attract range, disabled state - src/xray/useXRay.test.ts: keyboard toggle, modifier/input filtering Phase 4 — Component Storybook stories: - Hero, About, Experience, Projects, Footer, SectionHeading (Default + DarkMode) https://claude.ai/code/session_01R1f3Cb55HfJHSwXi6hck6U
- highlight.test.ts: verify escaping with empty rules, add string/keyword precedence test - useXRay.test.ts: add SELECT element, sourceHTML loading, ensureFont, and non-x key tests - useActiveSection.test.ts: add "last section wins" test, threshold boundary test - usePrismFlip.test.tsx: add auto-rotate timer and faceBg assertions - useMagneticTilt.test.ts: validate transform format with regex instead of loose string contains - useRevealOnScroll.test.tsx: replace `as any` casts with typed MockIO interface - useTypewriter.test.ts: assert cursor stays visible during typing 77 tests, all passing. https://claude.ai/code/session_01R1f3Cb55HfJHSwXi6hck6U
pnpm/action-setup@v4 requires an explicit pnpm version. Add `packageManager` to package.json so the action picks it up automatically. https://claude.ai/code/session_01R1f3Cb55HfJHSwXi6hck6U
`vitest run` without --project runs all projects including the storybook browser project, which requires Playwright's Chromium to be installed. CI doesn't have that. Scope test/test:watch/test:coverage to --project unit and add a separate test:storybook script. https://claude.ai/code/session_01R1f3Cb55HfJHSwXi6hck6U
Replace Inter with Instrument Sans (Google Fonts) for body text and self-hosted Satoshi (Fontshare) for headings. Adds font-heading class to SectionHeading, Hero h1, and Header nav links. Includes unit tests for SectionHeading and a tasks.md tracking file for the full redesign. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
…font swap - Split-screen sticky sidebar (lg:flex) with typewriter name, section nav, social links, and theme toggle; main content scrolls independently - Satoshi headings + Instrument Sans body via self-hosted WOFF2 fonts - Dark mode aurora: animated radial glows with CSS @Property color cycling - Glass-card components for Experience and Projects sections - Redesigned Experience with category emojis, colour borders, stagger animations - Projects section with typed data and external link cards - Personality-forward About copy - Prism nav easter egg preserved as compact floating widget on desktop - Max-width container (max-w-screen-xl) for large screen layouts - Footer moved inside flex container to fix sidebar sticky scroll behaviour - 93 tests passing Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
✅ Deploy Preview for symphonious-blancmange-7aafce ready!
To edit notification comments on pull requests, go to your Netlify project configuration. |
![cubic-dev-ai[bot]](https://avatars.githubusercontent.com/in/1082092?s=60&v=4){kind=small}
There was a problem hiding this comment.
1 issue found across 24 files
Prompt for AI agents (all issues)
Check if these issues are valid — if so, understand the root cause of each and fix them. If appropriate, use sub-agents to investigate and fix each issue separately.
<file name="tasks.md">
<violation number="1" location="tasks.md:5">
P3: Avoid committing machine-specific absolute paths in documentation; they leak local directory structure and are not portable for other contributors.</violation>
</file>
Reply with feedback, questions, or to request a fix. Tag @cubic-dev-ai to re-run a review.
|
|
||
| **Branch**: `feat/visual-redesign` | ||
| **Aesthetic**: "Arcade Cabinet Meets Editorial" | ||
| **Plan**: `.claude/projects/-Users-robblakey-src-andimrob-github-io/0d3559b2-1e72-41a5-bdea-6b871d3c8bd3.jsonl` |
There was a problem hiding this comment.
P3: Avoid committing machine-specific absolute paths in documentation; they leak local directory structure and are not portable for other contributors.
Prompt for AI agents
Check if this issue is valid — if so, understand the root cause and fix it. At tasks.md, line 5:
<comment>Avoid committing machine-specific absolute paths in documentation; they leak local directory structure and are not portable for other contributors.</comment>
<file context>
@@ -0,0 +1,109 @@
+
+**Branch**: `feat/visual-redesign`
+**Aesthetic**: "Arcade Cabinet Meets Editorial"
+**Plan**: `.claude/projects/-Users-robblakey-src-andimrob-github-io/0d3559b2-1e72-41a5-bdea-6b871d3c8bd3.jsonl`
+
+---
</file context>
andimrob
force-pushed
the
feat/visual-redesign
branch
from
c676ded to
85db695
Compare
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
1 participant
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
@propertyfor smooth color cycling (salmon → turquoise → amber → violet), noise texture overlay, glass-morphism cardsmax-w-screen-xlcap for large screens; footer moved inside flex container to prevent sidebar losing sticky position at scroll end; first section top-padding removed to align "About Me" with the nameScreenshots
Desktop
Mobile
Test plan
pnpm lintclean (warnings only, no errors)pnpm typecheckcleanpnpm buildsucceeds🤖 Generated with Claude Code
Summary by cubic
Redesigned the site with a split-screen desktop layout, glass cards, and an animated dark‑mode aurora. Improves readability and navigation with cleaner typography and smoother section reveals.
New Features
Refactors
Written for commit 85db695. Summary will update on new commits.