8
11 Comments

The Random Inspo Vibe Machine - My struggle to create something fun

Today, I share the adventure and struggle of creating my latest creative site https://getrandominspiration.com/ - a lead magnet for my newsletter, "The Land of Random." (https://thelandofrandom.substack.com/) I hope that by sharing this story, I inspire other Newsletter Creators who are possibly stuck on their websites/products/lead magnets.

One of the struggles of building new projects is finding inspiration. How do I want to set my product/project apart? How do I stand out in a sea of mediocrity? So - I set out to save those links. I used Bublup to create folders with those links for inspiration in the future.

I've shared many of them in my Newsletter "The Land of Random" - but I wanted to go further. I wanted to create some sort of fun project that used many of those links to inspire people.

So I thought to myself - what about a fun website with a list of all the links?
But nah - Everyone has been doing that on Product Hunt and other sites.

But what about something fun? Something literally made for intrinsic fun and wonder?

What about a Random Link Spinner? A website that would randomly take you to cool websites? Like a Google "Get Lucky" button.

As a "no coder" my strong suite is building with tools that don't involve coding - but I'm very willing to try to code. I call myself a "Copy Paste + Tweak Coder."

I built the website on good ole Carrd.Co - a favorite nowadays for one-pager sites. However - how do I make the "Get Lucky" button??

My first goal was to find some kind of random link spinner Javascript I could copy paste. I found one - it was easy enough to implement. It's amazing how many things are available to use for free on the Internet!!

However - what tripped me up was figuring out the JS and CSS for the button. How could I center the button on the page? This was the most difficult part of the project - figuring out how to make this dang button work + look good. Easily 5+ hours of my time on CSS and HTML websites.

AND - I made it look good on Mobile, and eccentric on Desktop. It's properly centered on Mobile, and I added a cool little flying rocket ship on Desktop that points towards the button! (Eccentric but fun)

But how to make the random link open in a new tab?

After many hours - I figured it out. I credit a fellow indie Hacker in the IndieStack Discord with helping me figure out how to make the link redirect to a new page. THAT was something I literally could not figure out on my own.

Well, what about the design of the page? This was something that appeared easy at first - but ended up being quite a challenge. I wanted the website to be simple, easy to use, and have a fun "Vaporwave Vibe."

1). I added a Video Background of a cityscape. At first I started with a video, THEN I realized the insane load time of this website. So - I switched to a Gif with lower resolution - which honestly adds to the Vibe of the page in my opinion - but definitely wouldn't work in all situations. I also added a flying rocket ship to create some "Fun Vibes" in correlation to the background cityscape.

2). I couldn't figure out how to make a CSS loader to compensate for the long load time - so I hackily put some text that reads "Vibes Inbound" that shows up as soon as the page starts loading. It's a trick to delay those who would normally navigate away without some sort of indication that the page isn't "stuck."

3). I wanted "Vibey" music to play automatically in the background. I figured out how to embed a Soundcloud Playlist that would play automatically on desktop. It adds an extra value too! It's a great playlist for LoFi music. This was more of an afterthought - but I'm so good I added the music.

4). I added a way that people can contribute to the site if they so choose. They can fill out a Google Form to submit links - and I can add them manually.

After figuring out all those issues, I finally pressed "publish" on my website two weeks ago at 3 AM. I've got some takeaways that may be helpful to you for your next project.

1: Load times are important - If you have too much cool stuff on your site, people will bounce if it doesn't load right away.

2: Feedback is important - Ask other people what they think!

3: Don't be afraid to ask for help. I would have NEVER figured out how to make the "Inspire Me" button open in a new tab.

4: Plug your Newsletter! I can't say for sure how many subs I've gotten through the website, but I've gotten at least 10 new subs - and I haven't launched on Product Hunt yet. That's the next step.

5: It's important to be creative! This is a website for random and fun inspiration. Nothing more, Nothing less.

Creating "Get Random Inspiration" was a really fun project for me, and It's a fun little addition to my project portfolio.

on November 4, 2020
  1. 2

    awesome project! your story is very familiar, I did a lot of the above with webflow to build https://nineties.io/. Love just building fun projects without any expectation of traffic or revenue.

    1. 1

      Me too! Really like your site. I'd love to chat further with you about your projects.

      1. 1

        Thanks and of course... lets chat on twitter or email!

  2. 2

    It always amazes me to see what amazing creative projects people create with Carrd! 🤩

    Just clicked 5 times on the "Inspire Me" Button and saved every single site to my bookmarks. 🙌🏻

    1. 1

      That's great. 😁

  3. 2

    It replaced poolside for me

    1. 1

      Haha nice! It's a great playlist

  4. 2

    I love it 🔥🙏

  5. 1

    Sort of reminds me of Stumblupon. I had a similar idea a while back. I looked up how to generate random numbers on-click (js) and replaced the numbers with statistics I found interesting. Worked, sort of. I was using webflow's custom code section though...

    And I got stuck on Bongo.cat for almost 20 minutes!

    1. 1

      That sounds cool! Is the site still public? I'd love to see it

      1. 1

        Haha, no I deleted it.

        But here's a very rough recreation I did on codepen:

        You have to click where the missing image file is. (It's supposed to be a refresh button)

        https://codepen.io/alexander-malm/pen/jOreQby