Pixels are loading...

From pixels to future - building my “coming soon” page with ChatGPT

Pixel to Future cover image Pixel to Future cover mobile

Why “pixeltofuture.com”?

Every design begins with a pixel. It’s the smallest building block of the digital world, yet from it we create interfaces, systems, brands, and entire experiences. At the same time, design is never just about today — it’s about shaping the future of interaction. That’s why I chose the name Pixel to Future when I bought my domain last month. The name reflects both my design journey and my forward-looking mindset: from the smallest detail to the biggest possibilities.

Every design begins with a pixel. Every design begins with a pixel.

The idea of a pixel-inspired website

I’d been planning to build my portfolio for a long time, but I didn’t want to ship “just another portfolio.” I wanted something different — something that feels alive and playful, even before the main site is ready. That’s how the idea of a pixel interaction page came up: a coming soon page that invites people to explore, not just read. A small taste of what immersive, experimental design could feel like.

A midnight spark (movie + tea + sleepless energy)

On August 15, I went with friends to watch a movie called Weapons. It wasn’t full horror, but scary enough (I loved the sadist aunty Gladys!). To stay awake, I had strong tea around 11pm. After the movie, we got home around 2am — and thanks to the chai and the mood, I couldn’t sleep. So instead of scrolling, I opened my laptop and finally began.

My workstation during the late-night build My workstation during the late-night build

Somewhere between cups of chai and half-sleepless energy, I bombarded ChatGPT with dozens of questions — even asking if it could rebuild a pixel hover animation just from a screen recording. ChatGPT said:

“Got it — you’ve shared a screen recording, so I can’t directly extract the animation code from it, but I can guide you to recreate that ‘pixels moving on mouse over’ effect. From your references, this looks like a pixel particle displacement or grid-based hover animation — often done in Three.js, PixiJS, or with HTML Canvas.”

I had zero JavaScript experience. But through trial, error, and patient prompts, I pieced it together. By sunrise, my interactive pixel portrait was alive — built with ChatGPT + Visual Studio.

Here are a few snapshots from my late-night conversations with ChatGPT. I had dozens of back-and-forth questions, but these are just a handful of the many prompts and replies that guided me through building this page.

ChatGPT screenshot 1 ChatGPT screenshot 1
ChatGPT screenshot 2 ChatGPT screenshot 2

Challenges I faced

  • Starting from scratch: No prior coding experience; I relied on ChatGPT to break it down line by line.
  • Hosting confusion: I had a domain, not hosting. I bought a cheaper plan without checking if SSL was included.
  • SSL struggle: The site loaded but showed “Not Secure.” That hurts trust. I ended up buying a separate SSL — more expensive than expected, but necessary.
SSL certificate error SSL certificate error

Lessons & reflections

This wasn’t just about a coming-soon page — it was about taking the first step without knowing everything. Learning by doing, asking the right questions, and turning a sleepless night into a living experiment in immersive design.

Consistency is the key. Take the first step, even if it’s small. Spend 30 minutes every day learning something new. Keep moving, keep creating, keep learning. Pixels may be tiny, but enough of them together can build the future.