Intranet: The Office Edition

Angela — Mon, 28 Jul 2025 15:44:25 +0000

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

angelacyu.github.io

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.

DEV Community: Angela