My profiles
My Profiles is a modern project showcase platform that allows developers, designers, and creators to share and review side projects, startups, and open-source builds. Built with React, Vite, Clerk Authentication (Google SSO), and a Supabase backend, it features a fluid landing page with dynamic hero animations and a featured projects showcase. Users can log in securely to manage their profiles, submit detail-rich project previews with media assets, and connect with other builders.

The Challenge
The Challenge
The objective was to transform a basic hackathon prototype into a premium, production-ready showcase hub called My Profiles. The implementation faced several critical technical and design challenges:
- Authentication Re-engineering & Migration: The legacy system relied on basic local storage mocks and standard Supabase inputs, which lacked robust security and seamless OAuth flows. The challenge lay in integrating the enterprise-grade Clerk Authentication SDK (specifically Google SSO) inside a single-page React Router structure without causing full-page refreshes or breaking state synchronization.
- Layout and Alignment Clipping: Implementing a modern, dynamic hero section with text cycling animations using Framer Motion. The varying character lengths of rotating words (such as transitioning from "Builds" to "Masterpieces") caused text clipping on the horizontal axis and severe layout reflow on desktop viewports.
- Aesthetic and Style Alignment: The project required a full upgrade to support TypeScript compilation and Tailwind CSS v4 styling rules. The engineering team had to deploy these tools concurrently while strictly preserving the client's custom brand color palette (cream-white background
#FCFBF8and warm orange accents#F97316) without relying on default Tailwind color resets. - Access Gating and Render Loops: Restricting views of featured projects to users who had already contributed a submission, while ensuring that redirect logic did not trigger infinite rendering loops or spam toast notifications.
The Solution
The Solution
To resolve these challenges, a complete system upgrade and layout redesign were executed:
- Full TypeScript, Tailwind CSS, & shadcn CLI Setup:
- Installed the TypeScript runtime and configurations alongside PostCSS and Tailwind CSS v4.
- Created a custom
tailwind.config.jsmapping standard color properties to our existing CSS custom variables (--bg-primary,--primary, , etc.) to maintain the brand’s custom cream-white and warm orange identity.