XRX Technologies Redesign
Unsolicited frontend rebuild of the XRX Technologies website — built proactively to anchor a job application. Glassmorphism UI, GSAP Canvas, mobile-first responsive, motion design throughout.
What it is
A complete frontend rebuild of the XRX Technologies website — built proactively as part of a job application, not commissioned. Glassmorphism UI, GSAP Canvas animations, mobile-first responsive design, motion treatments throughout. Live at xrxtechnologies.vercel.app.
The problem
Walking into a frontend interview saying 'I really like your product' is fine. Walking in with a working redesign of their site is a different conversation. I built this to anchor an XRX application around evidence rather than enthusiasm.
What I built
Glassmorphism UI system
Background-blur cards with translucent borders, layered against a moving gradient. Same component primitives across hero, services, and case-study sections so the visual language reads as a system, not a bag of tricks.
GSAP Canvas hero
A WebGL-adjacent canvas hero with particle drift and scroll-triggered camera shifts. Performance-tuned to keep 60fps on mid-tier mobile by capping particle count and using `requestAnimationFrame` throttling on `prefers-reduced-motion`.
Mobile-first responsive
Designed at 375px first, then progressively enhanced. Every animation has a reduced-motion fallback that holds the final state instead of removing the element.
React 18 + TypeScript + Framer Motion
Standard stack chosen for review-friendliness — anyone reading the source can follow the patterns without learning a bespoke framework.
Engineering decisions
Why GSAP Canvas over WebGL / Three.js
GSAP Canvas hits a sweet spot for hero animations — declarative timeline, smaller bundle than Three, no shader cognitive overhead. The hero needed motion, not a 3D scene.
Why ship it as a job application, not a pitch
Sending an unsolicited redesign as a 'pitch' reads pushy. Anchoring it in the application — 'here's the work, here's how I think about your product, would love to talk' — keeps the framing about the role, not about me trying to sell a contract.
Why glassmorphism, not flat design
XRX's existing site was very flat / corporate. Glassmorphism is the opposite end of the visual spectrum, which made the redesign feel like a clear design statement rather than a small refresh.
What I'd do differently
Cut the GSAP Canvas in half. The hero is beautiful but it's the heaviest part of the bundle and on flaky networks the first paint takes longer than I'd like. A v2 would lazy-load the canvas after first paint, falling back to a static gradient until the JS arrives.