Press Start: An Immersive Intranet for a Game Studio

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

What I Built

For this challenge, I designed and built an intranet homepage for "Pixel Potion Studios," a fictional indie game development company. My goal was to move beyond a generic corporate template and create a digital workspace that felt like an immersive extension of the company's creative culture. The entire layout is designed to feel like the main menu of an indie game, making it a familiar and engaging space for its employees.

The key widgets and features include:

• A Personalized Welcome: Greets the logged-in employee by name.
• Notifications: A dynamic section that combines major announcements (like a CEO's message) with smaller, more personal updates like wellness challenges or welcoming new team members.
• "Patch Notes": A thematic and fun take on general office updates. Instead of a boring memo, office news is framed as patch notes, a concept every game developer is familiar with.
• "Bug Tracker Summary": A data-driven widget that provides an at-a-glance summary of open, in-progress, and closed tickets, complete with animated progress bars.
• "Project Spotlight": An interactive carousel to showcase the latest concept art, models, or other visual work, which is perfect for a creative studio.
• "Guild Hall": A creative re-skin of a standard team directory, reinforcing the collaborative, game-like theme of the workspace.
• Light/Dark Mode: A fully functional theme switcher to ensure user comfort in any lighting condition.

The entire project is fully responsive, ensuring a seamless experience whether you're on a desktop, tablet, or mobile device.

Demo

You can view the live demo of the project here:

Live Site: https://k4rtikay.github.io/PixelPotionStudios/

The complete code is available on GitHub:

Code Repository: https://github.com/k4rtikay/PixelPotionStudios

Journey

My journey for this project was guided by one core principle: immersion. I wanted to build an intranet that employees would actually enjoy using, a space that reflects their passion. This led me to the concept of a game studio and a UI inspired by game menus.

From a technical standpoint, I made the deliberate choice to build this project using only vanilla HTML, CSS, and JavaScript. I wanted to challenge myself to build a modern, interactive, and polished interface from the ground up, demonstrating a strong command of web fundamentals. This meant handling animations, state management for the theme switcher, and DOM manipulation entirely from scratch.

One of the challenges I'm particularly proud of solving was perfecting the page load animation. Initially, the staggered slide-in animation for the cards caused a brief, jarring flash of the main scrollbar. After exploring a few JavaScript-based solutions, I landed on a cleaner, CSS-only fix by applying overflow: hidden to the parent container of the cards. This clipped the animation overflow locally without affecting the page's global scrollability, resulting in a perfectly smooth loading experience.

I also spent significant time refining the details—adding the subtle scrolling background to bring the page to life, ensuring all hover states felt responsive, and iterating on the color palette to guarantee high contrast and accessibility in both light and dark modes.

Ultimately, I'm proud to have created a project that is not only functional but also full of personality. I believe the best digital workspaces are those that foster a sense of community and shared identity, and I hope Pixel Potion Studios captures that essence.