A Minimalist Website with a Cosmic Twist

When a freelance writer approached me with the design for a simple yet captivating online presence, his request was clear: a digital business card. No complex pages, no long bios - just a clean way for visitors to reach him. But simplicity doesn't have to be dull. Instead of a static webpage, I built a small interactive universe, creating a seamless yet dynamic experience that makes an impression.

1. Simplicity with Personality

The website consists of just two pages: a landing page and a contact page with a small description and an email address. That's it. But the client wanted a unique visual identity - something minimal, yet distinct.

I developed an animated solar system-style design, where a planet (instead of a sun) is surrounded by orbiting moons. The entire animation is generated using JavaScript and Canvas, ensuring fluid motion without sacrificing performance.

2. Building the Cosmic Animation

The animation's goal was to add visual appeal without overwhelming the simplicity of the site. Here's how I built it:

• Randomised Positioning: Every time a user visits the site, the moons are positioned randomly within a defined range, creating a fresh experience.
• Smooth Motion: The moons orbit around the planet in a natural, seamless loop, mimicking celestial motion.
• Canvas & JavaScript: Instead of relying on pre-rendered animations, I built everything using vanilla JavaScript and the Canvas API, ensuring optimal performance across devices.
• Custom Assets: The client provided high-quality images of the planets and moons, which were integrated into the animation while maintaining a balance between visual impact and performance.

3. Making It Responsive

One of the biggest challenges was ensuring the animation adapted seamlessly across all screen sizes. Initially, the positioning and motion of the elements broke on smaller devices. The solution turned out to be simpler than expected - by dynamically scaling the canvas and adjusting object positions based on the viewport size, I was able to make the animation work smoothly across desktops, tablets, and mobile screens.

4. Performance & Optimisation

A website's performance is just as important as its design. Here's how the site scores on Google PageSpeed Insights:

Despite being a visually rich site, performance was a top priority. I optimised it by:

• Minimising the animation's impact: By limiting unnecessary re-renders and keeping computations minimal.
• SEO Optimisation: Ensuring the page remains indexable, even though it's a simple business card site.
• Deploying to Vercel: Leveraging Next.js and TailwindCSS for clean, efficient styling and fast deployment.

5. Final Thoughts

This project proves that even the simplest websites can be engaging, visually compelling, and technically interesting. While it only serves as a contact point, the interactive design adds a level of polish that elevates it beyond a standard business card site.