DEV Community

Cover image for The Virtual Office – CSS Art Inspired by Workplace Culture
Apoorv
Apoorv

Posted on

The Virtual Office – CSS Art Inspired by Workplace Culture

#frontendchallenge #devchallenge #css

Frontend Challenge CSS Art Submission

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

Inspiration

I wanted to create a modern, interactive office dashboard that captures the essence of a digital workplace. The design is inspired by real-world office portals, focusing on employee updates, HR resources, task management, and a clean, professional look. The goal was to blend utility with a visually appealing, CSS-driven layout that feels both productive and welcoming.

Demo

Link to deployed code: https://apoorvtomar2222.github.io/company-portal/

Company Tool

(https://via.placeholder.com/900x500?text=Office+Portal+Demo)

Live Demo:

You can run the project locally by cloning the repo and running:

npm install
npm run dev
Enter fullscreen mode Exit fullscreen mode

Repo Link: https://github.com/apoorvtomar2222/company-portal

Journey

This project was built with React and CSS, focusing on a three-column layout:

  • Left Sidebar: Collapsible quick actions for tasks, calendar, and widgets.
  • Center: Company updates (like employee changes, Google Sheet edits, new tasks) and a sample widget (bar chart for open tickets, pending tasks, meetings).
  • Right Sidebar: A responsive calendar (with today highlighted), a styled task list with filters, and HR resources.

What I learned:

  • How to create a fully responsive, modern dashboard layout with pure CSS and React.
  • How to build a simple calendar from scratch using JavaScript date logic and CSS grid.
  • The importance of small UI details (collapsible sidebar, task cards, color coding) for a professional look.

Proud of:

  • The clean, office-inspired design that adapts to all screen sizes.
  • The interactive sidebar and visually clear task/calendar sections.
  • The use of only CSS and React (no UI libraries) for all layout and art.

Next steps:

  • Add more interactivity (drag-and-drop widgets, real data integration).
  • Polish the calendar with month navigation.
  • Add more CSS art elements (e.g., office-themed icons, avatars).

Team Submission:

Solo project by @apoorvtomar

License:

Feel free to use or adapt this code for your own projects!

Thank you for the challenge and inspiration!

Top comments (0)