DEV Community: Prashant Gohel

Desk of a Dev – CSS Art

Prashant Gohel — Thu, 17 Jul 2025 13:07:50 +0000

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

💻 Desk of a Dev – CSS Art

Inspiration

Office culture for me revolves around the dev's desk – a keyboard clacking away, a coffee mug steaming, sticky notes with deadlines (and pizza reminders 🍕), and a terminal always open. I wanted to bring this everyday developer vibe to life purely using HTML + CSS, with an interactive terminal and fun easter eggs like sticky note messages and dark/light mode toggling.

Demo

🔗 Live Demo: View the project

🔗 GitHub Repository: https://github.com/prashantgohel321/Desk-of-a-Dev-CSS-Art

💡 Try clicking the sticky notes or typing commands like help, echo Hello, brew coffee, git commit -m "Success!", etc. in the terminal for some fun surprises!

Journey

This was a deep dive into pure CSS creativity. Some highlights:

💡 CSS-only art – Everything on screen (monitor, mug, sticky notes, keyboard, mouse) is built with CSS.
🌗 Dark/Light Mode toggle via a simple button.
⌨️ Interactive Terminal built with input handling in JavaScript and a command system that mimics dev tools.
📝 Sticky Notes that display fun pop-ups.
🖼️ Responsive design for smaller screens too!

What I learned:

How to simulate 3D/realistic effects with shadows and transforms.
Creating interactive elements (e.g., sticky notes and the terminal) without any external frameworks.
Balancing creativity with performance and interactivity in pure frontend work.

Next steps:

Make the terminal support scrollback history.
Add a productivity timer like Pomodoro built into the desk!
Animate the coffee steam more naturally.

Thanks for checking out my submission!

Feel free to ⭐️ the repo or connect with me on GitHub / DEV!

The Timeline of You – A Scrollable Interactive Life Journey Interface

Prashant Gohel — Thu, 17 Jul 2025 12:25:28 +0000

This is a submission for Frontend Challenge: Office Edition sponsored by Axero, Holistic Webdev: Office Space

What I Built

The Timeline of You is a creative scroll-based digital experience that visualizes your journey through key life phases — from childhood curiosity to professional milestones — all through evolving digital environments and workspace metaphors.

Each scene is styled with CSS transitions, responsive sections, and animated details, giving an immersive storytelling experience using just HTML, CSS, and a sprinkle of JS for scroll dynamics.

Demo

🔗 Live: https://timelineofyou.netlify.app/

📦 GitHub: https://github.com/prashantgohel321/The-Timeline-Of-You

Journey

This was one of the most emotionally engaging and creatively fulfilling projects I've built. The idea started with “what if your resume felt like a storybook?” and evolved into an interactive career timeline that’s both personal and universal.

What I loved most:

Designing visually distinct stages to reflect growth, struggle, and maturity
Using scroll-linked storytelling to simulate emotional pacing
Animating environments with CSS (blurred lights, progress bars, icon sets)
Subtle themes like burnout, first win, imposter syndrome (expressed through layout & tone)

DevOpsBoard

Prashant Gohel — Mon, 14 Jul 2025 07:26:32 +0000

This is a submission for Frontend Challenge: Office Edition sponsored by Axero, Holistic Webdev: Office Space

What I Built

DevOpsBoard is a fully frontend-only intranet dashboard designed specifically for DevOps and Cloud teams. It simulates a real-world internal workspace where engineers can track CI/CD pipelines, monitor incidents, view cloud cost breakdowns, see deployment schedules, read logs, and access tools — all using just HTML, CSS, and JavaScript.

Rather than creating a generic corporate intranet, I built something developer-focused, giving teams a space to interact with data they care about: builds, environments, uptime, incidents, logs, and workflows.

🧩 Key Features

✅ CI/CD Pipeline Simulation (Frontend / Backend / Infra)
⚠️ Incident & Alert Center with Modal Details
☁️ Cloud Resource Usage + Cost Tracker (AWS / Azure / GCP simulation)
📅 Deployment Calendar with Color Tags
📈 DevOps Metrics (Uptime, MTTR, CFR, Deployment Frequency)
⌨️ Terminal-style Live Log Feed
🛠️ Tool Panel: DevOps Tips & Tools (Docker, Terraform, K8s, AWS)
👥 Team Activity Feed (GitHub-style)
📚 Knowledge Base & CLI Cheatsheet
🧪 Test Coverage Snapshot (Fake trends)
🌗 Light/Dark Mode ("Day Ops" / "Night Watch")
🔀 Drag-and-Drop Widget Layout (experimental)

Demo

🔗 Live Site: https://devopsboard.netlify.app/

Here are some screenshots of DevOpsBoard in action:

Journey

As a DevOps enthusiast, I’m always thinking about how engineering dashboards can feel more human, more useful, and more engaging. Most dashboards today are either too technical or bland. With DevOpsBoard, I wanted to give it life — with animations, real-time simulation, and a focus on team productivity and visibility.

What I Learned

Simulating real-time pipelines and logs using only vanilla JavaScript
Creating accessible, readable, and responsive UI without a framework
Making the UI DevOps-friendly: CLI themes, logs, metrics, and tools
Building multiple sections using reusable CSS layout techniques (Grid, Flex)

This project helped me sharpen my frontend DOM skills and taught me how to present complex DevOps content through creative and intuitive visualizations — all without a single backend call.

Thanks to Axero and DEV for organizing this awesome challenge — it gave me the opportunity to merge my passion for Cloud + DevOps + Frontend Design into a meaningful project.