The latest articles on DEV Community by Pardeep Singh (@pssaini). https://dev.to/pssaini https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https:%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F180978%2F1eccfd68-bba3-44e8-b077-4844023ea4e0.jpg https://dev.to/pssaini en Pardeep Singh Thu, 24 Jul 2025 20:00:07 +0000 https://dev.to/pssaini/office-culture-ideal-office-setup-1j1b https://dev.to/pssaini/office-culture-ideal-office-setup-1j1b <p><em>This is a submission for <a href="https://dev.to/challenges/frontend/axero">Frontend Challenge: Office Edition sponsored by Axero, CSS Art: Office Culture</a>.</em></p> <h2> Inspiration </h2> <p>Hello fellow developers!<br> I tried to show my ideal desktop setup, trying to be minimalistic and give a clean look!<br> It almost resembles the setup I have at work.</p> <h2> Demo </h2> <p><a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fw0z58nqy6sly9s6sqbwa.png" class="article-body-image-wrapper"><img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fw0z58nqy6sly9s6sqbwa.png" alt=" " width="800" height="541"></a></p> <p><a href="https://codepen.io/ps-saini/pen/KwdVGyW" rel="noopener noreferrer">https://codepen.io/ps-saini/pen/KwdVGyW</a></p> <h2> Journey </h2> <p>My initial idea was to create a css art in 2D style, but then I thought I should try something new and tried my best to give a 3D look at my art using perspective, translates, etc...</p> <p>For the CSS part i used tailwindcss and also there is some javascript to handle the window resize. I tried my best to keep the art intact while resizing the window, so I used percentage units or vw units.</p> <p>In the right monitor I also included the Axero website that can be surfed as you wish (not that I needed to handle the navigation, it's just an iframe 🤣).</p> <p>I did not have much time so I'm publishing it as it is.<br> My next step was to make the left monitor more interactive.<br> I was planning to use GSAP to give some animations to the items in the windows but I got this far and sadly I will not be able to add the functionality in time before the due date.</p> <p>Hope you guys like it!</p> frontendchallenge devchallenge css