This is a submission for Frontend Challenge: Office Edition sponsored by Axero, Holistic Webdev: Office Space
What I Built
I went goofy and very literal for this one. Please don't take it super seriously, but I do want to provide some value to this article.
The challenge was to create a home page within the themes of "office". So, I decided to attempt to create an actual office space (desk, wall, folders, etc.) and make IT the home page.
I tried combining the art with the features (brand, navigation, upcoming events) as seamlessly as possible within the represented items inside the office (laptop, folders, desk, etc.).
Disclaimer: I am not an artist so excuse the quality of the "drawings", but the idea is there... and hopefully you can see it. Also, I didn't make it responsive.
The Home Page
Before showing you the demo, here's a quick list of what I actually included in the "office":
- Laptop: for displaying promotional video of the company
- Folders: main navigation where each labeled folder redirects users to a different page
- Calendar: an actual calendar that lists the company's event for that particular month
- Trophy: lists the company's achievements or the products features.
- Banner: the company logo and name
Tech Stack
- Vite
- React
- TailwindCSS
- Shadcn
Easter Egg
Like I said I'd like to provide a little value to readers even though this is just a fun and goofy post.
Without watching the demo video or looking at the code, see if you can find the Easter egg within the main page.
Demo
Quick Video: Easter Egg Spoilers
Project Links
Screenshots
Home page
My favorite part is definitely the lamp. I made the bulb and covered the whole page with that glow. Then asked ChatGPT to create a cone shape with polygon clipping.
Laptop: Promotional Video
This is where I played around with perspective and rotation to give the illusion of 3D space. I think it worked out really well.
Folders: Navigation
I'm most proud of this one. They really look like folders. I wish I knew more about creating 3D art with CSS to make this pop out more, but this was good enough for me.
Calendar: Upcoming Events
Pretty simple. You click on a date with an event(s), and you'll see a Post-It note of the details.
Trophy: Features/Achievements
This could've done better, but it was pretty good for a first attempt.
Banner: Company Name and Logo
I really like the nail heads, especially the shine effects.
Journey
I don't remember the last time trying something silly like this. But I had a lot of fun, and it gave me a lot more appreciation for people who are actually good at making web art.
I re-learned a lot of things that I had barely used lime skew and perspective.
Overall it was just a fun experience. And coming up and developing the Easter egg was also super exciting.
Top comments (0)