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
Hey engineering friends, I designed and built a dynamic CSS clamp generator tool out of frustration. Covers values for padding, gaps, font sizes, and border radius. Perfect tool to write less CSS with media queries. Generates ready to use css for Tailwind 3 &4, Panda CSS, vanilla CSS and SASS.
Hopefully you find it helpful
https://kayhan.me/css-clamp-generator/
kayhan.me
CSS Clamp Generator for Fluid Typography
Turn a min and max size into a fluid CSS clamp() value, or build a whole fluid type and spacing scale and export it for Tailwind, Panda CSS, CSS variables or SCSS.
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
Designing a fragrance website with 2 sections that feels as premium as the product.
Built a fragrance experience where the product takes center stage.
I wanted the website to feel as refined as the fragrances themselves minimal layout, strong typography, immersive product visuals, and subtle interactions that make exploring each scent feel premium.
The goal wasn’t to fill the page with elements, but to give every product enough space to create its own presence.
Built with Next.js, with a focus on responsive design, smooth interactions, and a polished browsing experience.
The product imagery is doing most of the work here. Did you use art-directed mobile crops, or keep one image with a different object position? That can preserve label detail without loading the full desktop asset.
Building a Modern Restaurant Management Dashboard with Lovable (Light ☀️ vs. Dark 🌙)
I’ve been working on the dashboard interface for ReserveTable (Eat Pro Japan), focusing on giving restaurant managers and users a clean, modern, and intuitive interface to manage bookings, tables, and analytics.
Using Lovable, I was able to rapidly prototype and construct a modern UI system complete with smooth component transitions and native theme switching.
✨ Key Design & Tech Highlights:
⚡ Built with Lovable: Leveraged AI-powered design-to-code workflows to assemble clean component hierarchies, responsive search/filter bars, and sleek cards rapidly.
🌗 Seamless Light & Dark Mode: Designed a flexible color system using modern CSS variables / Tailwind tokens so the entire interface gracefully shifts between an elegant light aesthetic and a moody, dark dining ambience.
🎯 Contextual UI Elements: Styled input controls, select menus, and primary CTA buttons to maintain legibility and contrast across both light and dark themes.
For reservation and table states, the same semantic color tokens need to stay clear in light and dark mode. Did you define status tokens once and map both themes to them, or tune those colors per component?
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
Impressive attention to detail. The themed visuals and smooth animations give the portfolio a distinctive identity.