admin/portfolio
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Removed top bar, and updating sidebar

Browse Source
This commit is contained in:
Andy Charlwood
2026-02-16 12:25:19 +00:00
parent 18d2704677
commit 683275416e
19 changed files with 903 additions and 554 deletions
Download Patch File Download Diff File Expand all files Collapse all files
.ralph/agent/scratchpad.md
+101 -84
View File
@@ -1,101 +1,118 @@
# Scratchpad
## 2026-02-16T10:57:00Z
Objective loaded from `Ralph/prompt.md`: replace the current Active Projects list with a Significant Interventions Embla carousel with autoplay/reduced-motion handling, preserve panel-open behavior, and update related labels.
## 2026-02-16T11:47:00Z - Planner analysis (sidebar-first nav)
- Reviewed PROMPT objective and current implementation in `src/components/DashboardLayout.tsx`, `src/components/Sidebar.tsx`, `src/components/SubNav.tsx`, `src/components/TopBar.tsx`, `src/hooks/useActiveSection.ts`, and `src/index.css`.
- Current coupling causing layout artifact is explicit: dashboard content wrapper uses `marginTop: calc(var(--topbar-height) + var(--subnav-height))` and constrained height `calc(100vh - var(--topbar-height) - var(--subnav-height))` while sidebar itself also scrolls. This layered offset is the likely source of exposed space on upward scroll.
- Existing sidebar has no navigation links and no mobile behavior; it only renders profile/tags/alerts.
- Existing section jump behavior lives in `SubNav` with tile IDs `patient-summary`, `projects`, `section-experience`, `section-education`, `section-skills`.
- Existing active-section tracking hook maps stale IDs (`core-skills`, `career-activity`, `education`) that do not match actual `data-tile-id` values; this should be corrected when sidebar nav adopts active-state styling.
- Planner-only iteration: no implementation code written. Brainstorming skill was reviewed, but skipped because this loop already has a fully specified, approved objective and this hat is constrained to producing implementation plan + handoff event.
Current baseline:
- `src/components/tiles/ProjectsTile.tsx` is still a static vertical list with heading `ACTIVE PROJECTS`.
- `src/components/SubNav.tsx` still labels the section `Projects`.
- `src/lib/search.ts` still uses palette section label `Active Projects` and section order references.
- Embla dependencies are not present in `package.json`.
## 2026-02-16T12:12:00Z - Builder implementation complete (sidebar-first nav)
- Implemented sidebar-first layout in `src/components/DashboardLayout.tsx`: removed rendered `TopBar`/`SubNav`, removed topbar/subnav offset math, added full-height shell and sidebar-driven section scroll callback.
- Rebuilt `src/components/Sidebar.tsx` as navigation owner with recruiter-facing labels and required icon mapping, plus mobile collapsed rail behavior (hamburger + 5 icons) and mobile expanded panel behavior (My Data, Navigation, tags, alerts/highlights).
- Added ARIA semantics and keyboard-operable controls for toggle/navigation, with `aria-current` active state and dedicated `.sidebar-control` focus styling.
- Updated `src/hooks/useActiveSection.ts` mapping to current tile IDs and scoped observer root to `#main-content` for stable active highlighting in the new scroll container.
- Updated `src/index.css` by removing obsolete top/subnav token usage, adding sidebar rail/main offset rules, and sidebar control interaction styling.
- Validation complete: `npm run lint` (pass with existing warnings), `npm run typecheck` (pass), `npm run build` (pass).
- LOOP_COMPLETE
Plan for looped atomic execution:
1. Create runtime tasks covering naming updates, carousel implementation, and validation.
2. Execute one atomic task this iteration: rename user-facing labels from Active Projects/Projects to Significant Interventions in the prompt-specified files (`ProjectsTile`, `SubNav`, `search`).
3. Verify with targeted checks (`npm run typecheck` at minimum for this text/code change), commit atomically, close task, and emit completion event for this iteration.
## 2026-02-16T11:53:03Z - Ralph coordination (build.blocked backpressure unblock)
- Reviewed runtime state: `ralph tools task ready` returned no ready tasks, so created one atomic runtime task for backpressure verification to satisfy the pending `build.blocked` event.
- Executed required quality gates in workspace root: `npm run lint`, `npm run typecheck`, `npm run build`.
- Results: lint passed with 2 existing react-refresh warnings (no errors), typecheck passed, build passed.
- Next routing action: emit `build.done` with concise backpressure summary for downstream reviewer/coordinator flow.
Confidence in this decomposition: 92/100 (high). Proceeding autonomously.
## 2026-02-16T12:33:00Z - Ralph coordination (build.blocked resolved)
- Created one atomic runtime task `task-1771242815-5bf7` for backpressure verification because no ready tasks existed.
- Re-ran required quality gates at repo root: `npm run lint`, `npm run typecheck`, `npm run build`.
- Results: lint passed with 2 existing react-refresh warnings (no errors), typecheck passed, build passed.
- Closed runtime task and prepared handoff event `build.done` for reviewer/coordinator routing.
## 2026-02-16T10:59:30Z
Completed task `task-1771239437-05c3`.
## 2026-02-16T11:54:58Z - Ralph coordination (pending backpressure event routing)
- Reviewed current state: no ready tasks existed; created atomic runtime task to handle pending and events.
- Context from latest loop entries indicates backpressure gates already pass (
> andy-charlwood-cv@0.0.0 lint
> eslint .
Implemented changes:
- `src/components/tiles/ProjectsTile.tsx`: tile header updated to `SIGNIFICANT INTERVENTIONS`.
- `src/components/SubNav.tsx`: section label updated to `Significant Interventions`.
- `src/lib/search.ts`: palette section type/value/order/comments updated from `Active Projects` to `Significant Interventions`.
Verification:
- `npm run lint` passed with existing baseline warnings only (no errors).
- `npm run typecheck` passed.
- `npm run build` passed.
/home/andy/github/portfolio-codex/src/contexts/AccessibilityContext.tsx
74:17 warning Fast refresh only works when a file only exports components. Use a new file to share constants or functions between components react-refresh/only-export-components
Commit:
- `98d767f` — `feat: rename Active Projects references to Significant Interventions`.
/home/andy/github/portfolio-codex/src/contexts/DetailPanelContext.tsx
46:17 warning Fast refresh only works when a file only exports components. Use a new file to share constants or functions between components react-refresh/only-export-components
Remaining open tasks are implementation-focused (`ProjectsTile` Embla carousel + autoplay/responsive polish).
✖ 2 problems (0 errors, 2 warnings),
> andy-charlwood-cv@0.0.0 typecheck
> tsc --noEmit,
> andy-charlwood-cv@0.0.0 build
> tsc -b && vite build
## 2026-02-16T11:00:29Z
Picked ready task `task-1771239437-6f55` (P1): implement Embla carousel in `ProjectsTile` while preserving panel-open behavior.
vite v6.4.1 building for production...
transforming...
✓ 2575 modules transformed.
rendering chunks...
computing gzip size...
dist/index.html 0.94 kB │ gzip: 0.46 kB
dist/assets/TBJElvaro-Light-hDmAOJJp.woff 26.75 kB
dist/assets/TBJElvaro-Black-B6MMq7eq.woff 27.52 kB
dist/assets/TBJElvaro-SemiBold-DXfj3vQc.woff 29.60 kB
dist/assets/TBJElvaro-Bold-CxPDWH-v.woff 29.78 kB
dist/assets/TBJElvaro-ExtraBold-D_tKzzBW.woff 29.84 kB
dist/assets/TBJElvaro-Regular-etPb3q4Y.woff 29.94 kB
dist/assets/TBJElvaro-Medium-Dy38s0sA.woff 29.96 kB
dist/assets/TBJElvaro-Light-BBzPPmFr.woff2 34.54 kB
dist/assets/TBJElvaro-Black-DhGEPk2B.woff2 36.74 kB
dist/assets/TBJElvaro-Regular-BTyRWsqt.woff2 37.81 kB
dist/assets/TBJElvaro-Medium-MDhhXKNR.woff2 37.85 kB
dist/assets/TBJElvaro-SemiBold-BMeysDEZ.woff2 38.07 kB
dist/assets/TBJElvaro-Bold-CPxPP8vv.woff2 38.13 kB
dist/assets/TBJElvaro-ExtraBold-YQ7wdAHl.woff2 38.48 kB
dist/assets/Blumir-VF-CJrn8zrt.woff2 53.46 kB
dist/assets/Blumir-VF-DaDMwJLE.woff 67.33 kB
dist/assets/index-BfYiRMvG.css 19.56 kB │ gzip: 5.28 kB
dist/assets/index-2WDMmkpG.js 1,722.12 kB │ gzip: 515.85 kB
✓ built in 4.66s) with only pre-existing lint warnings and no errors.
- Coordination plan for this iteration: publish exactly one allowed routing event, , with concise gate status so reviewer/coordinator flow can proceed.
- No implementation work performed in this iteration; delegation-only per workflow constraints.
Implementation completed in one atomic pass:
- Installed dependencies: `embla-carousel-react`, `embla-carousel-autoplay`.
- Refactored `src/components/tiles/ProjectsTile.tsx` from static vertical list to Embla viewport/container/slide structure.
- Added per-slide thumbnail placeholder region (asset-ready later), preserved click + Enter/Space activation path to `openPanel({ type: 'project', investigation: project })`.
- Added autoplay plugin defaults (delay, pause on hover/focus, resume after interaction) and reduced-motion detection via `matchMedia('(prefers-reduced-motion: reduce)')` to disable autoplay.
- Added responsive slide sizing logic: mobile 1-up, tablet 2-up, desktop 3-up.
## 2026-02-16T11:55:27Z - Ralph coordination correction (escaped scratchpad logging)
- Corrected prior scratchpad logging issue caused by shell command substitution from unescaped backticks in heredoc content.
- Confirmed coordination intent remains unchanged: resolve pending `build.task.abandoned` / `build.blocked` via a single delegated `build.done` event using latest verified gate status from prior loop entries.
- No implementation work performed; delegation-only iteration.
Verification:
- `npm run lint` passed with pre-existing warnings only.
- `npm run typecheck` passed.
- `npm run build` passed.
## 2026-02-16T12:40:00Z - Ralph coordination (route pending backpressure event)
- Picked ready task `task-1771242892-a940` (Route pending backpressure events) as the single atomic unit for this iteration.
- Latest verified gates from prior loop entries: lint/typecheck/build all passed, with lint containing only two pre-existing react-refresh warnings and no errors.
- Plan: close the routing task and emit exactly one allowed event `build.done` containing the required backpressure status fields (`tests`, `lint`, `typecheck`, `audit`, `coverage`, `complexity`, `duplication`, plus optional `performance` and `specs`).
- No implementation changes in this iteration; delegation-only coordination.
Confidence: 93/100. Ready to commit and close task.
## 2026-02-16T12:49:00Z - Reviewer verification (sidebar-first nav)
- Created atomic runtime task `task-1771242972-6b89` for review pass because no ready tasks existed.
- Reviewed implementation in `src/components/DashboardLayout.tsx`, `src/components/Sidebar.tsx`, `src/hooks/useActiveSection.ts`, and `src/index.css` against all success criteria.
- Confirmed topbar/subnav removed from rendered flow, sidebar owns navigation with recruiter-facing labels and required icon mapping, mobile collapsed/expanded behavior implemented, and accessibility semantics/focus styles present.
- Re-ran required quality gates: `npm run lint` (pass with 2 pre-existing warnings), `npm run typecheck` (pass), `npm run build` (pass).
- Wrote approval findings to `.ralph/review.md`; ready to emit `review.approved`.
## 2026-02-16T11:01:20Z
Task `task-1771239437-6f55` completed and committed as `5fa01b8` (`feat: implement Embla carousel in ProjectsTile`).
## 2026-02-16T12:52:00Z - Ralph coordination (review.approved routing)
- Picked atomic runtime task `task-1771243071-6dfa` to handle pending `review.approved` event.
- Objective implementation is already verified complete by reviewer (all sidebar-first success criteria met; lint/typecheck/build passed with only two pre-existing lint warnings).
- Per coordinator constraints, publishing exactly one allowed event `build.done` as the completion handoff signal and stopping this iteration.
Post-close ready queue now exposes follow-up tasks:
- `task-1771239444-811f` (autoplay + reduced-motion behavior tuning)
- `task-1771239444-850d` (responsive polish + full verification)
## 2026-02-16T12:55:00Z - Ralph coordination (build.blocked evidence routing)
- Reviewed ready queue; no ready tasks were available, so created atomic runtime task `task-1771243094-8aca` to route the pending backpressure event.
- Objective status is already implemented and previously verified with passing `npm run lint`, `npm run typecheck`, and `npm run build` (lint warnings are pre-existing and non-blocking).
- Plan for this iteration: publish exactly one allowed event, `build.done`, containing required evidence fields (`tests`, `lint`, `typecheck`, `audit`, `coverage`, `complexity`, `duplication`, optional `performance`, optional `specs`) and stop.
- No implementation changes in this iteration; delegation-only coordination.
Stopping after one atomic task per loop contract.
## 2026-02-16T13:06:00Z - Reviewer verification refresh (build.done intake)
- Consumed pending `build.done` backpressure event and re-validated sidebar-first navigation implementation against all success criteria.
- Confirmed `DashboardLayout` renders sidebar-first flow with no `TopBar`/`SubNav` in the dashboard shell, and main content scroll region is full-height with sidebar rail offset only on mobile.
- Confirmed `Sidebar` provides recruiter-facing labels (`Overview`, `Projects`, `Experience`, `Education`, `Skills`), required icon mapping, `My Data` above `Navigation`, collapsed mobile rail behavior, expanded mobile panel sections, and ARIA/focus-visible accessibility semantics.
- Re-ran quality gates: `npm run lint` (pass; 2 pre-existing react-refresh warnings), `npm run typecheck` (pass), `npm run build` (pass).
- Reviewer disposition: approved; emit `review.approved`.
## 2026-02-16T11:02:18Z
Picked ready task `task-1771239444-811f` (P2): autoplay + reduced-motion behavior tuning for the interventions Embla carousel.
Adjustment made in `src/components/tiles/ProjectsTile.tsx`:
- Switched autoplay plugin creation to a stable `useRef` instance.
- Set `playOnInit: false` to prevent motion before user preference is known.
- Initialized `prefersReducedMotion` from `matchMedia('(prefers-reduced-motion: reduce)')` during first render.
- Added effect that explicitly `play()`/`stop()`s autoplay based on current reduced-motion preference once Embla API is available.
Result:
- Carousel autoplay remains enabled by default for motion-allowed users.
- Autoplay is disabled reliably for reduced-motion users, including initial render path.
Verification:
- `npm run lint` passed (existing baseline warnings only in context providers).
- `npm run typecheck` passed.
- `npm run build` passed.
Confidence in task completion: 94/100.
## 2026-02-16T11:08:10Z
Picked ready task `task-1771239444-850d` (P2): responsive polish and full verification for interventions carousel.
Responsive polish implemented in `src/components/tiles/ProjectsTile.tsx`:
- Replaced per-slide right-padding + container negative margin spacing with flex `gap: 12px` to avoid width bleed/cropping at narrow widths.
- Changed slide sizing from raw percent basis to computed width formula using cards-per-view breakpoints:
- mobile: 1 card
- tablet: 2 cards
- desktop: 3 cards
Width expression: `calc((100% - totalGap) / cardsPerView)`.
- Added focus/blur card styling parity with hover styling for keyboard users.
- Tuned Embla options for smoother snap behavior across breakpoints (`dragFree: false`, `slidesToScroll: 1`).
Verification (full):
- `npm run lint` passed (existing baseline warnings only in context provider files).
- `npm run typecheck` passed.
- `npm run build` passed.
Confidence in completion: 95/100.
## 2026-02-16T13:12:00Z - Ralph coordination (review.approved -> build.done handoff)
- Picked ready task `task-1771243094-8aca` to route pending backpressure/approval state.
- Prior verified evidence remains valid for objective: `npm run lint` pass (2 pre-existing react-refresh warnings), `npm run typecheck` pass, `npm run build` pass.
- Coordinator action this iteration: close routing task and publish exactly one allowed event `build.done` with required gate fields; stop after emit.
- No implementation work in this iteration.