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
When I first saw this website design, I knew I wasn't going to recreate it manually in a design tool. I'm not a UI designer—I build products by combining AI with development.
I started by studying the layout, typography, spacing, and overall user experience. Then I wrote detailed prompts in Replit AI, describing each section of the website and refining the output until it matched the vision.
Instead of dragging elements around in a visual editor, I generated, reviewed, and improved the code through iterative prompting. Whenever something wasn't quite right, I adjusted the prompts, edited the React components, and refined the styling until every section felt polished.
The result is a fully responsive sports training platform featuring a bold hero section, camp listings, embedded videos, testimonials, strong call-to-actions, and a clean navigation experience. The site is optimized for performance, mobile devices, and future scalability.
This project reflects how I work today: using AI as a development partner—not to replace coding, but to accelerate it. I combine prompt engineering with hands-on coding to deliver production-ready web applications much faster than traditional workflows.
Built with: Replit AI, React, Next.js, TypeScript, Tailwind CSS, GitHub, and Vercel.
This project demonstrates how modern AI-assisted development can turn an existing design into a fast, scalable, and production-ready web application.
visit: https://basicsrefereeschool.com/basics/
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
Challenges
View all
Related posts
Custom liquid interaction built in Framer.
Turning a static hero into a responsive visual surface through cursor-driven distortion.
How do you adapt the cursor-driven effect for touch screens?
I desired to learn Framer deeply, with infusion of AI and this is my first live Project.
MacBook inspired Retro Portfolio Piece.
Congrats on your first live Framer project! Fun concept to explore.
The 404 was treated as a proper page rather than a fallback state.
The number is constructed as an architectural drawing. The 4 and the 0 are formed from walls at true thickness, with furniture laid out inside the resulting rooms and dimension strings running along both edges. It sits inside the same drafting system as the rest of the site rather than borrowing a display typeface.
The error message then repeats. Instead of a single dialog, identical windows cascade back across the canvas, each one carrying the same 404 notice. It reads as a system throwing an unresolved warning over and over, which is the exact behaviour Heron is built to prevent inside a model.
Error pages are never in the brief. They're a good measure of whether a team understood the product or just styled it.
Treating a 404 as an actual page instead of a dead end is such a good instinct, where did the architectural drawing idea come from, personal interest bleeding into the work?