Having good content is great, but we wanted the portfolio to be funky, special, interactive and playful, yet clean and simple. Scroll and "mouse over element" interactions are something we enjoy ourselves, so we wanted to bring it in as part of the project.

What it does

The graphic hero elements are moving along with your cursor, smoothing you down before you get to enjoy the view. The photos have a parallax Lottie effect when you move mouse over them, creating a more realistic effect and allowing you to control the perspective.

How we built it

First we've created Lottie animations and came up with a design style to match the mood of the imagery. Then we've created the hero section with animations and overall structure of the website. Added the content and parallax effect and voilà!

Challenges we ran into

24h for a project while being in 2 different time zones was chellenging. Cutting very detailed images into layers is a bit of a pain, so that took a very long time to do. We also had quite a few ideas for animations, so all that had to be tested and not everything worked as intended.

Accomplishments that we're proud of

It's the type of website which actually entertains you. There are things to try out, to play with. In the age of informational overload it's nice to see something clean and soothing, distracting from everything else.

What we learned

Don't plan too many things for 24h design-a-tons!

What's next for Night cityscapes

We'd like to expand the gallery and add more photos to it, as well as more information about the locations.

Built With

+ 3 more
Share this project:


posted an update

The process of creating the lottie animations turned out far longer than I initially anticipated! While technically not to difficult to create, the process is lengthy due to the meticulous care that needs to be taken when rotoscoping the images to achieve a good result in parallax.

Log in or sign up for Devpost to join the conversation.