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.
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.
Me too! Really like your site. I'd love to chat further with you about your projects.
Thanks and of course... lets chat on twitter or email!
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. 🙌🏻
That's great. 😁
It replaced poolside for me
Haha nice! It's a great playlist
I love it 🔥🙏
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!
That sounds cool! Is the site still public? I'd love to see it
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