CSS Office Art: The Work

This is a submission for Frontend Challenge: Office Edition sponsored by Axero, CSS Art: Office Culture.

Inspiration

My css art was built around a typical work day, just a pictoral representation of a day doing work. I went through the css prompt for the hackathon and brainstormed on what I could build to showcase this.
I was able to sketch what I envisioned and did some research online to find an image or an animated version of something close to my thought process. This was so i could have a pictoral representation of what I needed to build. Image I was inspired by:

Demo

The code is available: https://github.com/Cruxcodes/CSS-Office-Art

Live View: https://office-css-art.netlify.app/

Journey

It was a brain teasing journey. I had to zoom in and zoom out constantly to make sure each border was round enough or to discern if the div had to be closer or not.
It was a fun project. I enjoyed getting the animations to work, each win was really great. I also learnt new things building the project.

• Linear gradient: Depending on your skill with css, you already know how linear-gradient works with css. When i was trying to build the boxes I found it redundant to use two divs and didn't want to go through using box shadows. I found out you can use linear gradient to create solid colors.

background-image: linear-gradient(to right, #ea3b60 40.5%, #ff506d 0%);

By setting the second property to 0%, the color starts from where the previous color ends. Since there is no space or break for colors to blend, it creates the solid colors side by side.

• Animations: I was able to explore many new things with css animations. The one thing I'm most proud of is the swing of the banner.

Seeing the website go from just boxes to something that looks good is an achievement I would like to share.

• Git commit messages: I made use of conventional commits for most of my uploads but i was able to use vscode's ai to generate commit messages to push to my git repository.

I also improved my mastery with css properties like z-index, the position elements, variables in css, the before and after properties. I was able to minimize creating too many divs by making use of the properties css provides.

• Responsiveness : To deal with responsiveness, I made use of the scale property in css as well as the media queries.

 @media screen and (max-width: 768px) { left: 50%; bottom: 10%; transform: translateX(-50%) scale(0.8); } @media screen and (max-width: 600px) { left: 50%; bottom: 10%; transform: translateX(-50%) scale(0.6); } @media screen and (max-width: 500px) { left: 50%; bottom: 10%; transform: translateX(-50%) scale(0.4); } 

There is definitely room for improvement but i was able to make the css art scale just enough that it would be compatible across devices.

Open source additions.

I also was able to use open source code to improve my css art. I made use of a codepen addition to add the animations for the eyes of character. I also made use of NadaSadek's coffee steam for my own coffee cup.

1. Coffee Steam :https://codepen.io/NadaSadek/pen/xxRgZbq
2. Eyes : https://codepen.io/creme/pen/rdjXav

This was a fun experience and I really enjoyed making css art that tells a story. Office culture definitely isn't just about working, the friends you make, lunch you have, handshakes you exchange, they all form their own little part of your office story.

License

The work is licensed under the MIT License.

The code is available: https://github.com/Cruxcodes/CSS-Office-Art

Live View: https://office-css-art.netlify.app/