This is a submission for Frontend Challenge: Office Edition sponsored by Axero, Holistic Webdev: Office Space
What I Built
I created a fully functional intranet for Thunder Tifflin Paper Company, a fictional paper manufacturer inspired by classic office culture. The intranet features five working pages (HR, Sales, Warehouse, Accounting, Reception) with real functionality like employee directory search, expense forms, and visitor management.
The design balances professional corporate needs with subtle humor - think early 2000s intranet aesthetic but with smooth animations, responsive design, and easter eggs that reward exploration without breaking the user experience.
Key Features:
- Multi-page navigation with working forms and search
- Responsive 3-column → single-column mobile layout
- Employee directory with 12 Office-inspired characters (legally spoofed names)
- Interactive widgets: HR chatbot, safety counter, office status tracking
- Easter eggs: stuck vending machine, "World's Best Boss" certificate, hidden teapot
Demo
Live Demo: Thunder Tifflin Intranet
Source Code: GitHub Repository
Journey
The Collaboration Process
This project was built through an interesting human-AI collaboration. I worked with Claude (Anthropic's AI) to brainstorm concepts, develop the design system, and iterate on features. Claude helped generate the initial code structure and styling, while I used Windsurf (Codeium's IDE) to refine UI elements, test responsiveness, and make detailed adjustments.
Development Flow:
- Concept & Planning: Brainstormed with Claude on The Office theme and corporate intranet requirements
- Architecture: Designed the multi-page structure and responsive grid system
- Implementation: Claude generated initial HTML/CSS/JS, I refined in Windsurf
- Iteration: Used Windsurf's AI features to select and adjust UI elements for better UX
- Polish: Fine-tuned animations, responsiveness, and easter egg interactions
Design Decisions I'm Proud Of
Legal Safety with Creative Freedom: Instead of using actual character names, we created "spoofed" versions (Mitchell Scotts, Tim Halpert, Tony Flenderson) that capture the essence while avoiding copyright issues.
Functional Easter Eggs: Every humorous element serves a purpose. The HR chatbot gives unhelpful responses (just like real corporate bots), the safety counter actually resets, and vending machine B6 is stuck - but these don't interfere with the intranet's utility.
Responsive Without Compromise: The 3-column desktop layout gracefully collapses to single-column mobile while maintaining all functionality. No features are hidden or broken on smaller screens.
Technical Choices
Vanilla JavaScript: No frameworks or dependencies. This keeps the code lightweight and demonstrates fundamental skills while ensuring fast loading.
CSS Grid + Flexbox: Modern layout techniques that provide clean, maintainable responsive design without media query complexity.
Progressive Enhancement: The intranet works with JavaScript disabled (basic navigation and forms), then enhances with JS for better interactions.
What I Learned
AI-Assisted Development: Working with Claude showed me how AI can accelerate initial development while human oversight ensures quality and prevents the "AI feel" in the final product.
Windsurf Integration: Using Windsurf's AI features to select and modify specific UI elements was incredibly efficient for fine-tuning responsive behavior and visual polish.
Balancing Humor and Functionality: The biggest challenge was making something genuinely funny without sacrificing usability. Every joke had to earn its place by not breaking the user experience.
Tools Used
- Claude (Anthropic): Initial architecture, code generation, concept development
- Windsurf (Codeium): Code refinement, UI adjustments, responsive testing
- GitHub: Version control and deployment via GitHub Pages
- Browser DevTools: Cross-browser testing and performance optimization
The Human Touch
While AI helped with the heavy lifting, the creative decisions, user experience flow, and quality control were entirely human-driven. The result feels authentic because the humor and functionality choices came from understanding what makes both good software and good comedy.
This project proves that AI can be a powerful collaborator in development, but the human element remains essential for creating something that truly resonates with users.
Try the demo and see if you can find all the easter eggs! 🫖
I'd love to hear your thoughts on AI-assisted development and balancing humor with functionality in workplace tools.
Top comments (1)
Looks good! I'll always love a good Office reference