01 / Website
CloudX
End-to-end UX Engineering for CloudX's public website. From stack selection and interaction design to component development, accessibility compliance, and performance optimization.
Role
Title
UX Engineer
Sector
Software / AI
Scope
Design & Development
Contributions
Stack Selection
Led the technology decisions for the project. The stack Next.js, Tailwind CSS, and shadcn/ui was chosen for its performance baseline, design flexibility, and developer experience.
Interaction Design
Defined the visual language, component behavior, and motion principles across the site. Focused on clarity, hierarchy, and purposeful animation that reinforces the brand.
Web Vitals
Worked directly on Core Web Vitals optimization LCP, CLS, and INP. Audited and resolved layout shifts, improved loading strategies, and ensured consistent performance across devices.
Accessibility
Applied WCAG standards throughout the component layer semantic HTML, keyboard navigation, focus management, color contrast, and screen reader support.
Featured Component
Magic Button
An animated CTA button with a rotating gradient border and synchronized glow layer. Built with multiple stacked layers a blurred outer glow, a conic-gradient border via the padding-box / border-box masking technique, and a @property CSS custom property to animate the gradient angle smoothly. The challenge was getting all three layers to stay in sync while remaining performant and theme-aware.