Refresh homepage Recent Work and Professional sections

[dansbands]

Summary

• refresh the homepage Recent Work section to use the same project imagery as the portfolio page
• replace the old Professional bar-chart demo with a layered motion-driven UI composition
• tighten the homepage presentation so it feels closer to the current portfolio structure and senior/staff-level positioning

What changed

• moved the portfolio item shape into a typed shared data model in app/util/const.ts
• rewired the homepage Recent Work section to render from portfolioItems instead of hardcoded image imports
• upgraded Recent Work into a responsive horizontal carousel with scroll-snap cards, desktop controls, and intentional image cropping
• redesigned Professional as a premium interface composition with staggered reveal, layered panels, subtle glow, and restrained depth
• added reduced-motion handling and desktop-only pointer tilt/parallax behavior for the Professional scene

Recent Work image sourcing

• the homepage now maps directly over portfolioItems from app/util/const.ts
• the same image field powers both the homepage cards and the portfolio page items
• this removes duplicate homepage-only image definitions and keeps the two surfaces from drifting over time

How the Professional animation works

• the section reveals once it enters the viewport via IntersectionObserver
• layered panels animate in with staggered opacity and transform transitions
• the scene applies subtle pointer-based rotation on devices with fine hover input only
• floating panel motion and glow effects are disabled for users who prefer reduced motion
• mobile keeps the same composition but simplifies interaction to preserve smoothness

Tradeoffs and follow-ups

• I kept the implementation dependency-free and used CSS plus lightweight React effects instead of adding a motion library
• the new CSS is intentionally appended as section overrides to minimize churn in the existing stylesheet
• there is still a pre-existing next/no-img-element warning in app/resume/footer-subsection.tsx, unrelated to this PR

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Actions	Updated (UTC)
dansbands-github-io	Ready	Preview, Comment	Apr 8, 2026 5:30pm

[chatgpt-codex-connector]

💡 Codex Review

Here are some automated review suggestions for this pull request.

Reviewed commit: d054bdfd56

ℹ️ About Codex in GitHub

Your team has set up Codex to review pull requests in this repo. Reviews are triggered when you

• Open a pull request for review
• Mark a draft as ready
• Comment "@codex review".

If Codex has suggestions, it will comment; otherwise it will react with 👍.

Codex can also answer questions or update the PR. Try commenting "@codex address that feedback".

[chatgpt-codex-connector]

Cancel pending animation frame on pointer leave

If the pointer leaves the scene before the queued requestAnimationFrame callback runs, resetPointerPosition sets both CSS vars to 0 and then the pending callback immediately writes stale non-zero values back. In that sequence, the panel can remain tilted even when the pointer is no longer over it, until another pointer event happens. Canceling rafRef.current in resetPointerPosition (before resetting vars) avoids this visual state bug.

Useful? React with 👍 / 👎.

[chatgpt-codex-connector]

Remove aria-hidden from interactive carousel controls

aria-hidden="true" on the controls container removes its subtree from the accessibility tree while it still contains clickable <button> elements. Screen-reader users won’t be able to discover/use these desktop carousel controls, and focusable elements inside an aria-hidden subtree are an accessibility violation. The container should not be aria-hidden if the buttons are intended to be interactive.

Useful? React with 👍 / 👎.