TL;DR

You might have noticed that @elear's project Utopian.io is picking up pace very quickly and he is calling for developers to join him now. I am not very familiar with React.js, so it will take some more time for me to become an active core developer of the main project. But in the meanwhile I can contribute simpler but nonetheless important things.

A few days ago @auliausu came up with this awesome design for a landingpage for Utopian.io. I can tell you he was quite surprised about all the positive feedback but that's what happens if you're good at something. Keep up the great work buddy! ;)

I immediately contacted @elear and told him that I would like to be the person who turns this design into a working website. He even wanted to pay me for doing it but... my friend... don't you get the point of your own project? The blockchain pays us! :D Just kidding... I won't stop you from anything but this is still a voluntary open source contribution.

You know... I really REALLY like Utopian and the idea of rewarding open source contributions. That's the way I want to work for the rest of my life. I can decide for myself what I want to do and when I want to do it and if I consider my contribution worthy enough to receive some rewards, I can make a post about it.

So, it is in my very best interest to support this project as good as I can. That's why I really put some love into this and tried my best to give this website a nice and professional look and feel, with some smooth animations here and there.

I made a few little adjustments to the layout, added more sections, made it responsive, wrote some texts and so on. Here's the result:

Utopian.io Landingpage
_{GitHub Repository}

This is not the final product but most of the work is done. However, some issues still remain. Oh and... please don't be disappointed when you click on the video icon on the screen at the top. There is no video yet!

Issues

I opened some issues on GitHub for those who want to help finishing this website.

• Counter animations
• Animation issue on pageload
• Steemconnect integration
• Carousel responsive behavior
• Make moderator rewards pull from the API

At this point I would like to thank @netuoso for the first PR, making the contributor rewards dynamically pulled from the Utopian API. Maybe you can do the same for the moderator rewards.

And of course everyone is invited to test the website on all kinds of devices or check the texts for typos and so on.

Technical details

For open source projects like this I like to use Bootstrap to make it accessible for many developers. There's no predefined template involved.

For the animations I used Gsap by Greensock and wow... what an awesome library. Why the hell haven't I heard of it before? They've been around for over a decade. It makes animations so easy once you get a hang of it. I mean... really EASY!

This animation you see on the landingpage is run by only four lines of code:

let upvotesTimeline = new TimelineMax({repeat: -1});
upvotesTimeline
    .staggerFrom('.upvote', .5, {scale: 0, opacity: 0, ease: Back.easeOut.config(4)}, 1)
    .staggerTo('.upvote', 2, {bottom: "+=25", opacity: 0, ease: Power1.easeInOut}, 1, '-=5');

Together with ScrollMagic it's very easy to control when your animations should start. Here's the code for the animated octocat:

let scrollController = new ScrollMagic.Controller();
let octocatTween = new TweenMax.from('#octocat', 1, {scale: 0, opacity: 0, ease: Back.easeInOut});
let octocatScene = new ScrollMagic.Scene({triggerElement: '#github-trigger', offset: -300})
    .setTween(octocatTween)
    .addTo(scrollController);

If you want to get started with GSAP, check out this video.

That's it.

I really hope you like the landingpage and even more I hope that many people will make many helpful contributions... not only to the landingpage of course but to the whole Utopian project.

In the long run this could give so much freedom to so many developers and other contributors around the world. This project has to become BIG and I'm sure it will! :)

Thank you @elear!

---

@mkt
^Interests:
Technology/Science/Future
Nature/Environment/Sustainability
Creativity/Programming

---

_{Check this out:}
Steemit On Your Website

---

Open Source Contribution posted via Utopian.io

---