Cyberfolio
An experimental portfolio built as an OS interface — persistent shell, modular layouts, and a live command system.
Nuxt 3 · Vue 3 · TypeScript · CSS Custom Properties
Context
Most portfolios are static pages. This one is a system. The idea was to build a persistent interface where each project loads like an app inside an OS — with a sidebar for navigation, an info panel for context, and a command bar for interaction.
The result is a portfolio that feels more like a tool than a website. Every component stays mounted while content swaps in and out.
Architecture
The project uses Nuxt 3's layout system to manage three distinct grid configurations. Each layout composes the same core components — TopBar, SideBar, InfoPanel, Chat — in different arrangements.
Layouts are assigned per-page via definePageMeta. The shell components auto-import through Nuxt's component resolution, so there are zero manual imports across the entire app.
Command System
The chat bar isn't cosmetic — it's a real command parser. Users can modify the theme at runtime through CSS custom properties.
Technical Stack
File-based routing, layout system, auto-imports. Zero config for the structure.
Tokens → Base → OS → Neon. Four layers, no preprocessor. Variables drive everything.
Shared state via useChat. Reactive, global, no Pinia needed for this scope.
Responsive Strategy
Challenges
The fixed chat bar + info panel + sidebar create a complex positioning puzzle. Every panel uses position: fixed with dynamic left/right offsets tied to CSS variables.
- Fixed elements competing for z-index priority
- Scroll containment within the main content area only
- CSS variable theming that survives layout transitions
- Auto-close logic for chat without interrupting user input
Result
Key Learnings
Building a portfolio as a system forces you to think in components and contracts, not pages. Every decision ripples — a color change in tokens.css updates the entire interface.
That discipline made the project both harder to start and much easier to maintain.