Shanimations

A fun and colorful website where my arts & animations reside — built using pure HTML, CSS, and JS

01

Language(s)

  • HTML
  • CSS
  • JavaScript

01

Tool(s)

  • Procreate App (iPad Pro)
  • Sketch

01

Duration

  • 3 months

Where shall we begin?

They say when you want to practice a skill, try to align it with something that interests or excites you. Well, building an art portfolio website for myself to exercise the web developer part of my brain has always been on my to-do list. And when the opportunity to take a Web Dev course during my studies arose, the timing couldn't have been more perfect. It was about time I gave Shanimations a go!

The pursuit of inspiration

It all started with a quick search, that led to hours of being in a design frenzy — Letters and colors and styles, oh my!
But then, I stumbled upon a coder/designer's page by the name of Adham Dannaway, who not only blew me away with his "half coder/half designer" landing page, but that we both had that in common! Apart from becoming an instant fan, I also liked the overall look-and-feel of his site which ultimately led him to being the inspiration of my very own.

Adham Dannaway Homepage - screenshot
A screenshot of Adham Dannaway's landing page

Letters and colors and styles, OH MY!

Color Palette

Now that I basically knew what I wanted my art site to resemble, I wanted to combine colors that screamed vibrancy and playfulness — words that describe my child-like excitement and passion for building, designing, and expressing myself through creativity. I went color-swatch crazy with the colors I had in mind and landed on these beauties:

My color swatches image
Color palette choices for website - designed & arranged in Sketch

Font Family Selection

For font choices, I went with a single selection which I used for both heading and body — Proxima Nova. For backup I used Helvetica Nueue. Definitely a loyal sans-serif favorite for many!

Proxima Nova ImageHelvetica Neue Font Image

Wireframing time

This part was pretty straightforward since I had a pretty clear vision and direction for what I was going for. So I got right to sketching, adding and removing the features that I wanted for my site, and even making things up along the way! The ask and goal was to aim for a responsive site so both web and mobile designs were in the works.

Click through each category to see the process ;)

On a retrospective note

Overall Experience

I definitely had fun working on this project! One of my future goals is to take this passion even further and fuse my other passions (Virtual & Augmented Reality) to build and make desktop VR/AR magic.

Feel free to take a look!...But before you do...

If for some reason the video isn't displaying on page-load, go ahead and click on my old logo at the top left of the screen (yes, the one that unintentionally looks like a "5" 😂) to see if a quick refresh fixes it for now. This delay/change is a recent bug with the hosted site that I'll get around to checking out once I'm done helping solve user problems :)

Shanimations website
View other web dev SITES