The Challenge

Creating a horizontal card spread with cards stacked neatly underneath, and adapting this animation to work smoothly on smaller screens like phones and tablets. Card-based interfaces are always tricky outside of desktop environments, so finding a responsive solution was key."

The Solution

The solution was to make the cards automatically adapt to different screen sizes. On larger displays, they fan out horizontally, just like they would in real life. On smaller devices, users are prompted to rotate their phone to landscape mode. This way, the horizontal card spread animation works seamlessly without the need for a separate mobile version. This UX choice preserves the magical card-spreading experience across all devices.

Technologies Used

• JavaScript
• CSS Animations
• Booking System (getform.io)
• Vercel Deployment
• Mobile Responsive

Key Takeaway

Even complex, animation-heavy layouts can be made responsive with the right balance of design and practicality. By allowing the card spread to adapt naturally to screen size and prompting mobile users to rotate their devices, I was able to preserve the experience without overengineering the solution. This approach reminded me that simplicity and usability should always guide the technical choices.

The Challenge

Enabling payment features without triggering real transactions, ensuring clear disclaimers, and making the demo both functional and legally safe, styling consistency, and sourcing product images that felt authentic for a realistic online store demo.

The Solution

Used mock products, clear “demo only” disclaimers, and explored test payment modes to simulate checkout safely while keeping the site professional for clients.

Technologies Used

• Big Cartel
• Custom CSS
• Stripe Payment Test Mode
• Inventory Management

Key Takeaway

Building this demo webshop demonstrated how to combine functional design, a smooth checkout flow, and safe test payments with clear demo disclaimers.

The Challenge

Working within Squarespace’s design limitations to achieve a unique look, making the template fully responsive across all devices (including tablets, which aren’t handled by default), and ensuring the client could easily update the website without breaking custom styling.

The Solution

Adding custom media queries that extended Squarespace’s default responsiveness, ensuring buttons and booking forms displayed seamlessly on tablets, not only on phones and desktops.

Technologies Used

• Squarespace
• Custom CSS
• Google Analytics
• Responsive Design
• On-page SEO

Key Takeaway

Working with Squarespace taught us the importance of balancing platform limitations with creative solutions. Custom CSS can transform a template into something unique while maintaining the client's ability to manage their own content.