Lots of BadgeChain

A lot of the past two weeks was spent on the website for BadgeChain. I was told to go play a game (at work!) to learn about flexbox. It was pretty simple although there were certain lines of code which would change the orientation completely, and then I’d have to reorient myself to make sure the frogs moved the correct direction.

Playing this game was mainly for me to learn how to place items using flexbox since we needed to create a background graphic for the website. Here was the initial super basic version:

CSS

We soon abandoned trying to use solely code to create the background as it was unwieldy. However, we still wanted a background that would be able to scale based on the size of the browser/platform. Originally we talked about putting the icons in hexagons or circles so they’d stack up nicely. This was put into motion by creating a pattern in Photoshop.

Hexagons look nice but they’re a pain to work with. In order to get a hexagon pattern that would line up if replicated and lined up with each other, I had to have a complete hexagon and then also make sure that every part that made up the hexagon was also in the pattern.

hexagoncuts — I just needed the center rectangle.

After that was done, I place the icons that I had picked before into the hexagons. But then came another issue. In order for the pattern to create a cohesive image after tiling, I had to chop up some of the icons. In particular, the icon in the corners got split into fourths. I chose a bag for that icon since it was symmetrical and slight misalignment wouldn’t show up.

Layout of the icons before tiling the pattern.

And it’s actually being used for the website!

The website isn't live yet but here's a copy of it running locally. — The website isn’t live yet but here’s a copy of it running locally.

Well this post is getting long, but I’m still not done. After that was finished, I was given the task of designing a logo and another background image for the bottom portion of the website.

After talking to Suloni, this is what was sent over. I'm not sure if this is final though. — After talking to Suloni, this is what was sent over. I’m not sure if this is final though.

I was told to incorporate the lines on the first rough draft onto this.

I’ve just started on the other background image so that won’t be done for a bit. I learned a lot about flexbox from this but it still takes a bit of fiddling to get the correct positioning. Also, we had a very fun and tedious time setting up git on my laptop since commands are hard to remember.