Interactive Office Portfolio

Overview

Interactive Office Portfolio is the portfolio system behind ebcady.com: a content-driven interactive web experience built around a dark, illustrated office scene instead of a standard scrolling homepage.

The core idea is that the website itself should feel like a designed product, not just a directory of links. The homepage places the visitor inside a locked office environment where wall frames, desk objects, books, a sticky note, and other scene elements act as intentional navigation points. The experience is visually memorable, but it still preserves normal website behavior through clear secondary routes like /projects, /projects/[slug], /resume, /blog, and /contact.

The system is built as a Next.js portfolio application hosted on Vercel, backed by a GitHub workflow, MDX content records, structured project metadata, responsive artwork assets, accessible hotspots, reduced-motion support, and a fallback navigation menu.

This is not just a visual concept. It is a content-driven portfolio platform designed to grow over time as new projects, blog posts, resume updates, wall-frame artwork, animations, and case studies are added.

Core Problem

Most portfolio websites are structurally identical: a hero section, a grid of project cards, a resume link, and a contact page.

That format works, but it does not always create a memorable experience or communicate the personality behind the work. Interactive Office Portfolio solves that by turning the portfolio itself into a navigable environment while keeping the underlying site practical, structured, and maintainable.

The challenge was to create something distinctive without making it confusing. Interactive sites can easily become slow, inaccessible, hard to update, or overly dependent on fragile positioning. This project approaches that problem as a product system instead of a one-off visual experiment.

The result is an interactive office scene supported by normal routes, structured content, typed hotspot definitions, mobile-specific layout behavior, keyboard-accessible links, reduced-motion support, staged animation layers, and performance-conscious image optimization.

Main Value

The main value of Interactive Office Portfolio is that it turns a personal website into a memorable, expandable product experience.

It keeps the creative surface layer and the technical content layer separate. The office scene creates the first impression, while the MDX-backed routes keep the project archive, case studies, blog posts, and resume content structured and maintainable.

The strongest value shows up in:

• Memorability: The office scene gives the site a distinct identity instead of relying on a generic portfolio grid.
• Structured content: Projects are managed through MDX files with metadata for title, slug, summary, category, featured state, wall slot, frame image, card image, CTA label, ordering, and external links.
• Practical navigation: The homepage feels interactive, but the site still supports conventional routes for projects, resume, blog, and contact.
• Accessibility and usability: Hotspots are designed as real interactive elements with accessible labels, keyboard focus support, hover/focus states, and mobile tap target considerations.
• Long-term extensibility: The office scene can support additional animations, easter eggs, artwork layers, project cards, blog posts, analytics, and case study updates without rebuilding the entire site concept.

User Experience

The homepage presents an illustrated office environment where the visitor appears to be standing in the doorway looking into the room. The wall contains framed project cards, the desk contains interactive objects, and a fallback hamburger menu remains available for direct navigation.

The intended experience is playful but controlled. A visitor can explore the office by clicking or tapping objects, but they can also use traditional navigation at any time.

Key homepage interactions include:

• Six framed wall project cards
• A resume wall frame
• A sticky note that routes to contact
• A main desk book that routes to all projects
• A second book that routes to the blog
• A fallback hamburger menu
• Optional and future easter egg layers such as Brooks and coffee spill interactions

The homepage is designed to remain viewport-locked, while secondary pages scroll normally. That distinction matters because the office is the entry experience, not a replacement for normal readable pages.

The project archive and detail pages behave like a conventional content system. /projects lists the full archive, while /projects/[slug] renders individual case study pages with polished project visuals, expandable hero images, project snapshot sections, external links where available, and consistent case study sections.

Tech Stack

• Frontend/App Framework: Next.js App Router, React, TypeScript
• Styling: Tailwind CSS and CSS modules
• Content System: MDX project files and blog content files
• Metadata Parsing: gray-matter frontmatter parsing
• Hosting: Vercel
• Repository / Version Control: GitHub
• Build Environment: VS Code + Codex
• Analytics: Vercel Web Analytics for basic anonymous page-view tracking
• Interaction Model: Percentage-based hotspot coordinates with separate desktop and mobile positioning
• Motion Layer: Reduced-motion-aware ambient animation foundations
• Assets: Responsive office artwork, wall-frame images, project card images, and optimized WebP homepage-critical imagery

Project files live in src/content/projects, and blog posts live in src/content/blog. Each project record can define its title, slug, summary, category, featured state, wall slot, frame image, card image, CTA label, order, and external links.

The homepage-critical image assets were optimized after the office artwork was added. The desktop and mobile office base images were converted to WebP, and the six featured wall-frame images were also optimized so the interactive scene could remain visually rich without carrying unnecessary image weight.

Analytics are intentionally limited. The current implementation uses basic Vercel Web Analytics for anonymous page-view tracking by route/path rather than adding heavy custom event tracking.

Proof-of-Work Signal

Interactive Office Portfolio shows how a creative interface can be built with practical product discipline:

• Frontend product execution: The project combines route structure, responsive design, visual composition, content rendering, interactive hotspots, fallback navigation, and polished secondary pages into one cohesive experience.
• Content modeling: Projects are not hardcoded as one-off cards. They are structured as MDX content records with frontmatter, ordering, featured state, wall-slot placement, frame images, card images, summaries, categories, CTAs, and external links. That makes the portfolio easier to expand and maintain.
• Interactive systems thinking: The office scene uses a typed, percentage-based hotspot model that supports separate desktop and mobile values. That allows the artwork and clickable targets to work together instead of relying on brittle, fixed-position guessing.
• Accessibility awareness: The wall-frame hotspot implementation includes accessible labels, keyboard focus behavior, hover/focus styling, and mobile tap target usability. Those details matter because the project is interactive, but it still needs to behave like a real website.
• Performance discipline: The project did not stop at "the design works." After adding office and wall-frame artwork, the homepage image assets were optimized into WebP equivalents while preserving layout, dimensions, routes, styling, hotspot coordinates, and project ordering.
• Staged development workflow: The project was built through scoped branches and focused implementation tasks rather than one broad, uncontrolled build. Each major layer was treated separately: route structure, content model, office shell, hotspot system, wall frames, secondary navigation, ambient motion, easter egg foundations, analytics, project detail pages, and image optimization.
• AI-assisted build discipline: The project demonstrates a controlled AI-assisted build workflow. AI tools were used as implementation support within defined task boundaries, while the product direction, constraints, review decisions, and acceptance criteria stayed human-led.

Current Status Details

Interactive Office Portfolio is active and continues to evolve as the live portfolio system behind ebcady.com.

Implemented or substantially represented:

• Locked interactive office homepage
• Normal scrolling secondary pages
• /projects archive
• /projects/[slug] detail pages
• /resume page
• /blog and /blog/[slug] routes
• /contact page
• Site-wide fallback navigation menu
• MDX project records
• MDX blog content foundation
• Featured wall project system
• Six clickable wall-frame hotspots
• Resume frame route behavior
• Desk book route to all projects
• Blog book route foundation
• Contact sticky-note route foundation
• Accessible hotspot labels and keyboard focus support
• Desktop and mobile hotspot coordinate model
• Reduced-motion support foundation
• Ambient animation foundations for curtain sway, tree leaves, computer glow, and coffee steam
• Session-state foundations for Brooks and coffee spill easter eggs
• Polished expandable project detail pages
• Project snapshot sections
• Project website/GitHub link support where frontmatter URLs exist
• Basic Vercel Web Analytics page-view tracking
• Optimized WebP homepage and wall-frame assets
• GitHub/Vercel preview deployment workflow

The portfolio is a living project. The core interactive office and case study structure are implemented, while some visual and easter egg layers are intentionally staged for continued refinement. The project already functions as a polished interactive portfolio system and remains an ongoing showcase of interactive web development, frontend architecture, content modeling, performance optimization, and AI-assisted product execution.