ChrisOS — Desktop Portfolio System
Chris Horn
ChrisOS — Desktop Portfolio System
Overview
ChrisOS is a browser-based desktop environment designed to present projects, technical work, and documentation as a system of applications, rather than a traditional portfolio website.
Instead of navigating static pages, users interact with a windowed interface that supports multiple views, persistent state, and deeper exploration of technical content.
The project was built to explore how application-style interfaces can better represent complex work, particularly systems, workflows, and multi-part products.
Problem
Traditional portfolio sites are inherently linear:
Navigation is page-based and interrupt-driven
Context is lost when moving between sections
Complex projects are flattened into summaries
Technical depth is difficult to surface without overwhelming the user
For system-oriented work, this creates a mismatch:
The interface does not reflect how the work itself is structured.
There was a need for a model that could:
Support non-linear exploration
Preserve context across views
Allow multiple pieces of content to be open simultaneously
Present work as interconnected systems, not isolated pages
Approach
ChrisOS was designed as a single application with a system layer, not a collection of routes.
Key design principles:
Treat each section as an application, not a page
Maintain a global windowing system
Use shared state to coordinate behavior across the entire interface
Allow users to open, move, and interact with multiple views at once
The result is a desktop-style environment with:
Window manager
Dock and launcher
Menu bar
Application-level navigation
Implementation
Frontend Architecture
Built with Next.js (App Router) and TypeScript
Uses a centralized state model to manage:
window lifecycle
active applications
navigation payloads
Navigation is not strictly route-based. Instead, the system supports:
opening multiple apps simultaneously
restoring state across sessions/views
passing structured data between components
Window System
A core window manager handles:
window creation and destruction
z-index stacking and focus
drag positioning
resizing and layout behavior
Each application runs inside this system as an independent unit while still participating in shared state.
Application Model
Each section (Projects, Resume, Terminal, etc.) is implemented as a modular application:
self-contained UI + logic
aware of global system state
capable of receiving structured input
This enables:
deep linking into specific content
consistent interaction patterns
extensibility without restructuring the entire system
Interaction Model
Unlike traditional navigation:
users can open multiple views simultaneously
context is preserved across interactions
transitions are handled at the application level rather than full page reloads
This creates a more continuous and exploratory experience.
Mobile Adaptation
The desktop paradigm does not translate directly to mobile, so a separate interaction model was introduced:
simplified navigation structure
app-style transitions
adjusted layout and controls
This maintains conceptual consistency while adapting to device constraints.
Challenges
State Coordination
Managing shared state across multiple active windows introduced complexity:
ensuring consistency between apps
handling focus and interaction priority
preventing state conflicts
This required a clear separation between:
global system state
application-level state
Interaction Complexity
Replicating desktop behaviors (dragging, layering, resizing) in the browser required:
careful event handling
performance considerations
edge case handling (overlapping interactions, resizing constraints)
Balancing Novelty vs Usability
A desktop-style interface introduces friction if overdone.
The challenge was:
Making the system feel different without making it harder to use.
This required:
simplifying interactions where possible
maintaining predictable behavior
avoiding unnecessary complexity
Outcome
ChrisOS successfully demonstrates:
a non-linear, system-based approach to presenting technical work
how application-style interfaces can improve exploration of complex content
a reusable pattern for building modular, state-driven UI systems
It serves both as:
a portfolio
and a proof-of-concept for system-oriented frontend architecture
Key Takeaways
Not all products should be page-based—system-based interfaces can better represent complex work
Shared state + modular apps enables flexible, extensible UI systems
UX should reflect the structure of the underlying product, not just conventions
Stack
Next.js (App Router)
TypeScript
Zustand-style state management
Tailwind CSS
Framer Motion
Notes
ChrisOS is not intended as a production operating system replacement, but as a controlled exploration of interface patterns for presenting technical systems and content in a more structured, interactive way.
Like this project
Posted Mar 22, 2026
Desktop-style web app with window manager, shared state, and modular apps. Built for exploring projects beyond traditional page navigation.
