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
A personal-brand site where the design does the selling — testimonials as a Stories-style deck, a colour that "develops" across a black-and-white portrait, an accordion carousel that works without JavaScript.
What I did: turned the Figma/React references into a lean Astro site (React removed), animations and carousels with no-JS fallbacks, deployed on Cloudflare Workers.
The accordion carousel without JavaScript caught my eye. Did you need to change any of the original interactions when you moved from the React references to Astro, or could you keep the design pretty much as it was?
Thanks! Short answer: the look and the idea stayed, the mechanics changed. The hover.dev originals drive everything with React state and Framer Motion, so I rebuilt them as vanilla TS + CSS.
The carousel is now a native scroll-snap rail instead of a JS-translated row, so touch...
Ah, the expanded panels explain the no-JS part. Keeping everything readable before the interactions kick in is a nice touch. Thanks for walking me through the rebuild!
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
3 Page landing btw. Somehow ended up with dark versions, light versions, a whole DS and like 6 card explorations.
Is this overexploring or is this just the job? Genuinely asking. 🧠
Man, this is wonderful and modern
Meet UNFORMED, my new Framer template for independent creative studios and agencies. 🖤💚
I wanted to build something that doesn’t play it safe. Most studio sites look the same, so this one leans into huge condensed type, a warm off-white and black palette, and one loud lime accent.
A few things I’m proud of:
A draggable chrome object in the hero. Grab it and break the frame.
A type experiment where visitors drag the words to make their own composition, and it works by keyboard too.
CMS case studies, an accordion services section and a live local clock.
Fully responsive, with clean text and colour styles and a template guide to help you set it up.
Pages: Home, Work, Project, Studio, Capabilities, Contact and a Template guide.
Built for studios that want their site to have a point of view. Would love to hear what you think.
The MacWhisperer | Kajabi Website Design for Online Courses & Memberships
I designed The MacWhisperer website using Kajabi, creating a professional online platform that helps users learn how to use Apple technology with greater confidence, simplify everyday tasks, and improve productivity.
The design focuses on making technology education approachable through a clear website structure, engaging content sections, and a user-friendly experience. I aimed to help visitors understand the value of the training, explore educational resources, and discover the available courses and membership opportunities.
What I Focused On
Kajabi Website Design: A professional website layout aligned with the brand's identity and educational mission.
Course Presentation: Clear organization of learning content to help visitors explore technology training.
Membership Experience: Structured presentation of membership benefits and learning opportunities.
User-Friendly Navigation: An intuitive browsing experience that makes important information easy to find.
Trust Building: Strategic presentation of testimonials, brand information, and service benefits.
Conversion-Focused Design: Clear calls to action that encourage visitors to explore courses, memberships, and contact options.
The goal was to create an engaging digital learning platform that builds trust, communicates the value of online education, and makes it easier for visitors to take the next step.
Platform: Kajabi
Service: Website Design
Industry: Technology Education, Online Courses & Memberships
For technology training, I’d make the course-versus-membership choice explicit: solve one specific problem with a course, or get ongoing help through membership. Showing who each path suits beside its CTA could reduce the decision load for someone who already feels unsure about the technology.