feat(portfolio): refine Play Lab, mobile wallet, and themes

[ThisIs-Developer]

Improve Play Lab interaction, the mobile wallet, shared navigation, and theme consistency across the portfolio.

Play Lab uses a finite world with a separate pan/zoom camera. Card positions, drag deltas, and limits stay in world units, so zooming out reveals usable space and dragging remains accurate at 65%, 100%, and 165%. Empty-space dragging pans the camera; dragging a card moves only that card, with edge panning to reach distant space. Boundaries include the rotated card footprint, and dragging suppresses accidental text/image selection.

Keep the seven original widgets and add a calendar, calculator, and locally saved daily mood check-in. Ten cards start in shuffled, spaced slots with varied offsets and angles; reset restores that visit's arrangement. The finite workspace includes the area revealed at minimum zoom and retains its dimensions as the camera zooms. List view remains available. Retain the rounded board, floating drag-only pins, six background swatches, aligned reset icon, and zoom/reset controls. Hide instructions on canvas activity and remove the blue board/card focus outlines.

Keep calendar date and navigation controls circular. Provide tinted dark surfaces and readable controls for all ten Canvas widgets, all six canvas palettes, and all six Interactions panels. Pond colours respond to theme changes, including reduced-motion feedback. Slow the Depth animation, simplify Ripple, and remove the visible Physics spring wire.

Refine background dots, glass navigation, top-of-page expansion, slower spring transitions, and the hover-only theme-button circle. Blog artwork and private-work covers have dark palettes with readable labels, dark illustrated sheets, and restrained highlights. Shared home-page writing cards and article covers use the same artwork tokens. All project folders on Home and Work, including the archive, keep the same mint, lavender, blue, peach, orange, and green colours in both themes. Their dark labels, white sheet frames, translucent glass, blur, and highlights also remain consistent. Original project screenshots retain their colours.

Replace the mobile wallet scroller with a compact 192px deck: a readable 124px card over layered pastel cards and five 44px buttons for Work, Me, Study, Notes, and Code. Open with the profile card and retain all original destinations. Switching cards hides inactive links from focus and assistive technology. Keep Quick Ask below the deck, preserve the desktop fan and focus across responsive changes, respect reduced motion, and show all five links in a grid when JavaScript is unavailable.

Apply the saved theme in a small synchronous head script before stylesheets and page content. The deferred navigation code adopts the applied theme and refreshes preferences on back/forward-cache restoration. Include the bootstrap in every generated page and the deployment output. It works with the existing Content Security Policy and falls back to light when storage is unavailable.

Validation:

• Generated-page freshness, JavaScript syntax, and whitespace checks passed.
• npm run test:theme passed against the built site. It checks dark content from the first rendered frame with the main script delayed across home, Blog, Work, article/project details, About, both Play Lab views, and 404. It also covers navigation, reload, back/forward, theme switching, blocked storage, dark artwork, matching folder colours and glass across themes, text contrast, and responsive overflow at 390 and 1440px.
• Blog and Work card accessibility checks passed at 390 and 1440px. Desktop/mobile dark screenshots and the light Blog layout were reviewed. After restoring the pastel folder colours in dark mode, light/dark folder accessibility checks passed again at both widths; the full six-colour grid and normal/hover glass screenshots were reviewed.
• Wallet checks passed for all five cards in light/dark mode at 320, 390, 440, and 767px: no scrolling or clipping, clear controls, original destinations, keyboard/touch switching, reduced motion, desktop resizing and focus, Quick Ask, and the JavaScript-free fallback. Light/dark accessibility checks passed at 320, 440, and 1440px; mobile and desktop screenshots were reviewed. Dot rendering and updated wallet dimensions checks also passed.
• Earlier focused checks in this PR passed for canvas coordinate conversion, independent card/pan movement, fixed world boundaries, newly revealed space, spacing, selection prevention, resets, pins, instruction dismissal, wheel zoom, widget functionality, dark Play Lab surfaces, circular controls, and interaction motion. Shared navigation checks also passed earlier. The full broad suite was not rerun for the final wallet update.

Update generated markup, regression coverage, and design-system documentation to describe the final behaviour.

[vercel]

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

Project	Deployment	Actions	Updated
portfolio	Ready	Preview	Sep 13, 2026 6:53pm UTC

[netlify]

✅ Deploy Preview for baivabsarkar ready!

Name	Link
🔨 Latest commit	9105db7
🔍 Latest deploy log	https://app.netlify.com/projects/baivabsarkar/deploys/6aa6f10fd849ba00083b1e2e
😎 Deploy Preview	https://deploy-preview-2--baivabsarkar.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.
Lighthouse	1 paths audited Performance: 94 Accessibility: 98 Best Practices: 100 SEO: 100 PWA: - View the detailed breakdown and full score reports

---

To edit notification comments on pull requests, go to your Netlify project configuration.

[cloudflare-workers-and-pages]

Deploying baivabsarkar with    Cloudflare Pages

Latest commit:	9105db7
Status:	✅  Deploy successful!
Preview URL:	https://aec40562.baivabsarkar.pages.dev
Branch Preview URL:	https://fix-dots-and-initial-navigat.baivabsarkar.pages.dev

View logs