A desktop-inspired developer portfolio — draggable windows, IDE-style navigation, live GitHub data, and a page-driven case study engine.
- Year
- 2026
- Role
- Design · Frontend · Architecture
- Client
- Personal
- Duration
- In progress
- Next.js
- React 19
- WebGL
- UX Engineering
- Case Study System
PORTFOLIO · IN PROGRESS
Folio 2026 — An OS-Style Developer Portfolio
Windows · file tree · WebGL desktop · case studies as routes
This is the portfolio you are viewing — rebuilt from scratch as an interactive desktop experience instead of a linear scroll site. The goal was to combine engineering credibility, project depth, and personality in one cohesive environment that feels like opening a developer’s machine, not reading another template landing page.
Framework
Next.js 16
UI model
Desktop OS
3D layer
R3F + shaders
Case studies
Page-driven
Vision & Product Goals
Traditional portfolios repeat the same hero → about → projects → contact stack. Folio 2026 treats the site as a workspace: sections open in windows, navigation mirrors a file explorer, and deep project write-ups live on dedicated routes you can jump to from the tree.
The experience targets recruiters, founders, and technical collaborators who want signal fast — live GitHub activity, a scrolling project reel, skills and experience in focused panels — without losing the option to read long-form CTO case studies when they want depth.
Everything is built for iteration: new case studies are added as standalone pages under `/case-studies/<slug>`, not buried in a monolithic JSON file.
- Shell
- Desktop UI
- Nav
- File tree
- Data
- JSON + GitHub API
- Depth
- Case routes
Design & Technical Challenges
Desktop UX without breaking mobile
Draggable windows and absolute positioning work on large screens, but mobile needs safe areas, full-width panels, and disabled drag — solved with responsive window chrome and `useSyncExternalStore` for media queries without hydration mismatch.
Layering & focus management
Multiple open windows require z-index stacking, focus on click, and a file tree that stays above the stack — capped window z-index below the tree so navigation never disappears behind panels.
Performance vs. atmosphere
A full-screen WebGL dither shader adds identity but must not block interaction — the canvas sits behind content with controlled intensity and pointer-safe layout.
Scalable case study authoring
Long CTO write-ups (Tradzu, My Forex Firms, Nestingo) need rich sections, galleries, and SEO metadata without copy-pasting layout code — solved with typed section blocks and a shared `CaseStudyView` renderer.
Core Experience — The Desktop Shell
Draggable window manager
Each section (About, Experience, Projects, Skills, Contact) runs inside a `Window` component with title bar, close/minimize, Framer Motion drag controls, and desktop-bound constraints. State lives in the home page with explicit z-index promotion on focus.
IDE-style file tree navigation
A floating, draggable `FileTreeNav` maps folders and files to window IDs or Next.js routes — `src/` opens portfolio panels; `case-studies/` deep-links to full case study pages like markdown files in a repo.
Dither WebGL background
Custom shader background via React Three Fiber and postprocessing — animated noise waves with optional mouse interaction, giving the desktop a tactile, developer-tool aesthetic without a heavy 3D scene graph.
Content Panels & Data Layer
About — live GitHub integration
Zustand store + GitHub service fetch profile and contribution calendar; responsive activity grid, social links, and avatar toggle — proof of work beyond static copy.
Projects — infinite marquee
Projects load from `public/projects.json` through a store/service pattern; cards auto-scroll in a masked horizontal reel with hover pause and external links to shipped products.
Experience, skills & contact
Modular section components inside windows — monospace-forward typography, consistent borders, and scroll areas for dense content on smaller viewports.
Case Study System
Page-per-project authoring
Each case study lives in `src/app/case-studies/<slug>/page.tsx` with `export const metadata` for SEO and a typed `sections` array — no central CMS JSON, easy to paste new content page by page.
Composable section renderer
Shared `CaseStudyView` supports hero, overview, challenges, solutions (with optional screenshots), metrics, card grids, results, quotes, CTAs, and shadcn Embla carousels for product galleries.
Dedicated case study layout
Separate route layout with sticky header, viewport-height scroll container, and back navigation — case studies read like articles while the main site stays a fixed desktop shell.
Architecture Highlights
App Router
Next.js 16 with static case study routes and client islands only where interaction is required.
- RSC shell
- Static CS pages
- Client windows
State boundaries
Zustand for GitHub and projects; local React state for window manager — no over-globalized UI store.
- github.store
- projects.store
Design system
Tailwind v4, Geist fonts, shadcn primitives (carousel, button, scroll-area), CVA variants.
- Dark theme
- Tokens
- shadcn
Content ops
Add a case study → new folder + index card + file-tree entry + optional projects.json row.
- 4-step add
- Typed sections
Stack & Tooling
Core
Next.js 16
App Router, TypeScript, React 19.
Motion
Framer Motion
Window drag, enter/exit, file tree panel.
3D
R3F + Three
Shader background with postprocessing pipeline.
UI
Tailwind 4
Utility-first styling with CSS variables and dark scheme.
Outcomes & What This Demonstrates
Product thinking
OS metaphor
Shows ability to ship a cohesive product concept, not only individual components.
Engineering depth
Full stack UI
Windowing, WebGL, API data, routing, and long-form content systems in one codebase.
CTO narratives
Linked work
Case studies document Tradzu, My Forex Firms, and Nestingo with the same rigor as production platforms.
Maintainability
Page-driven
Future case studies and portfolio tweaks slot in without restructuring the whole site.
“The portfolio is itself a product — a small operating system for how I want people to explore my work, not a single scrolling résumé.”
Want this level of product craft on your team?
I design and build distinctive frontend systems — from gamified fintech to desktop-grade portfolios and scalable case study infrastructure.