The network for creativity
Join 1.25M professional creatives like you
Connect with clients, get discovered, and run your business 100% commission-free
Creatives on Contra have earned over $150M and we are just getting started
Back to feedPost
Interactive Themed Developer Portfolio & Web Showcase | React, Framer Motion & Tailwind CSS
Key Features & Highlights:
Custom Vector Artwork & Layered Visuals:
Implemented an intricate, responsive fixed SVG backdrop showcasing a night cricket oval under floodlights, illuminated mountain peaks, starry sky, and subtle ambient glows.
Preserved full content readability and contrast using layered dark vignettes and custom opacity masks.
Fluid Framer Motion Animations:
Designed staggered entry transitions, conic orbit rings, continuous pulse indicators, and interactive micro-animations.
Added smooth hover states, reactive button effects, and dynamic drawer transitions.
Modern Glassmorphism UI:
Applied frosted glass design patterns (backdrop-blur, semi-transparent RGBA palettes, and soft glowing border outlines) across all cards, timelines, forms, and navigation elements to allow the themed backdrop to show through elegantly.
Clean Architecture & Iconography:
Streamlined visual consistency by adopting modern vector icon sets via react-icons across navigation, badges, timeline bullets, and interactive controls.
Purged unnecessary toggles and redundant state to enforce a refined, distraction-free aesthetic.
Full-Stack Form Integration:
Configured asynchronous contact messaging using EmailJS with client-side validation, error handling, status banners, and loading indicators.
Optimized & Responsive:
100% mobile, tablet, and desktop responsive layout with a custom slide-out navigation drawer.
Built using Vite for optimized bundle sizes, fast hot module replacement (HMR), and clean production builds.
Tech Stack:
Frontend: React 18, React Router, JavaScript (ES6+)
Styling & Design: Tailwind CSS, PostCSS, Custom CSS Variables, Glassmorphism
Animation & Interactivity: Framer Motion
Icons & Assets: React Icons (react-icons), Custom Vector SVG
Third-Party Services: EmailJS
Build Tooling: Vite
The network for creativity
Join 1.25M professional creatives like you
Connect with clients, get discovered, and run your business 100% commission-free
Creatives on Contra have earned over $150M and we are just getting started
Related posts
Startfrom 2.0 is live. It's our template library: finished websites designed at Apollo Studio, available as a Framer project, an Astro theme or a Next.js app.
Each template page shows what you get and runs the live demo in the page. Some templates are free.
Keeping content separate from layout would make the Astro and Next.js versions easier to customise. Do they share a content schema, or does each template have its own setup?
Open Shop: a 3D storefront ad that opens itself.🏪
I read through SVGator's template gallery and found plenty of cards, carousels and logo reveals, but nothing a local shop, café or online store could use to say "we're open" or "new drop". So I built it.
In 10 seconds an empty lot gets a location pin, a shop in your brand colour rises from the ground, the awning unrolls, your logo sign goes up, the lights come on, your products appear in the window, and your headline lands with fireworks and a delivery van pulling up.
To make it yours you change 1 colour, 3 images and 6 lines of text. Every label is live text and every layer is named (logo, headline, product-image-1 and so on). The video shows it as a café, then as a record shop: same animation, no keyframes touched.
Built with the SVGator MCP from Claude. All artwork is original.
Love that you went through the gallery first and built for what was missing 💜 Small shops and cafés really are underserved. Such a cool concept. Nice to see you here too Mayank, good luck!
The design feels clean and inviting. Love the direction for Hint!