Restyle Kushagra OS as a macOS-style desktop, add live GitHub contributions widget

[kushagra486]

Summary

Restyles the whole desktop portfolio in an Apple/macOS design language and adds a live GitHub contribution graph widget. The OS concept, apps and window mechanics stay the same.

Shell

• System font stack (SF Pro on Apple devices, Inter elsewhere), Apple system-blue accent (remapped once in the Tailwind theme), frosted "vibrancy" glass materials
• Menu bar with working menus (logo, app, Go, Window, Help), plus Spotlight and Notification Center triggers and status icons
• Dock with cursor-driven spring magnification, hover name labels, running-app dots, bounce on launch, and a new Launchpad full-screen app grid
• Squircle app icons (lucide glyphs on gradients) used on the desktop, dock, Launchpad and Spotlight
• Animated mesh-gradient wallpapers with flowing ribbons; macOS-style boot with a stroke-drawn monogram

Windows

• Traffic lights on the left with hover glyphs, dimmed when unfocused; centered title
• New windows cascade instead of stacking; spring open, close and minimize animations
• Scroll progress bar and a toolbar hairline that appears once content scrolls under it

Motion inside apps

• Scroll-reveal (fade and lift, staggered) in About Me, Projects, Certifications and Live Apps; expertise bars fill as they scroll into view; case studies expand with a spring

Overlays

• Spotlight-style ⌘K search with grouped results, notification banners that auto-dismiss, Notification Center that slides in from the right, Sonoma-style widgets, and a Siri-style assistant orb

Live GitHub contribution graph

• A native widget replaces the external streak image, which was rendering as a broken image
• Data comes from a public, CORS-enabled mirror of the GitHub contribution calendar, so no token is needed. One shared, cached fetch serves every instance and refreshes every 30 minutes and whenever the tab becomes visible again
• Shows the last-year total and current/best streaks, fits as many recent weeks as its width allows, animates in column by column, and reports the hovered day. Has a loading skeleton and an error state with Retry
• Pinned on the desktop and in Notification Center. The Live GitHub Feed app gets a wider version with a legend and busiest-day stat
• The News preview moves off the pinned desktop column (it's still in Notification Center) so the column clears the dock; the column scrolls on shorter screens

Reduced motion is honored, both from the OS setting and from the in-app toggle.

Notes

• Drag, resize and maximize logic is unchanged. The traffic lights now stop pointer propagation, so a double-click on them can't call dragControls.start twice, which is the case that broke dragging before.
• Found and fixed a pre-existing bug: the CSS minifier kept only -webkit-backdrop-filter, so Chromium never blurred anything. The prefixed declaration now comes first.
• Adds the lucide-react dependency.

Test plan

• tsc --noEmit, npm run lint, npm run build all clean
• Playwright at 1440×900: window drag gives +200/+100 before and −120/−60 after a maximize→restore cycle
• Screenshots checked: desktop, dock magnification, menus, cascaded windows, scrolled Projects, Spotlight, Launchpad, Notification Center, mobile (390×844) desktop and About window
• Computed backdrop-filter on windows is now blur(50px) saturate(1.9), not none
• Contribution widget loads live data (297 in the last year, 149 day cells at widget width), hover readout works, and the pinned widget column ends at y=643, above the dock's top at y=784

🤖 Generated with Claude Code

https://claude.ai/code/session_0143ovLZCWrfDGUX1ogXFKnY

[vercel]

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

Project	Deployment	Actions	Updated
kushagra486-github-io	Ready	Preview	Sep 28, 2026 5:49pm UTC