DevOS — Mostafa Abd ElQawy Portfolio
This portfolio: a developer operating system built with TanStack Start and React 19.
You are viewing this project right now
Current site
TanStack Start, React 19 and Tailwind CSS 4
Modern stack
shadcn/ui and Radix on a single design system
Component system
This portfolio. A premium developer operating system built with TanStack Start, React 19 and Tailwind CSS 4 — file-based routing, server-side rendering and a component-driven UI presented as a developer OS.
Most portfolios are templates. A developer who builds product-grade software should have a portfolio that feels like product-grade software — fast, accessible, responsive and internally coherent, with the personality of the developer coming through the design itself.
DevOS is built as a component system on TanStack Start: file-based routing, server-side rendering, TanStack Query for client state, shadcn/ui on Radix primitives, and a dark, single-accent design system with motion, a command palette, an AI assistant, a boot sequence and a terminal — all driven by one structured data layer.
How data moves through the system.
TanStack Start with file-based routing and SSR over a component-driven UI.
- 01TanStack Start
- 02File-based routing
- 03SSR
- 04Component-oriented UI
- 05Data layer
- 01Developer operating system concept
- 02File-based routing with SSR
- 03Command palette (⌘K / Ctrl+K)
- 04AI assistant
- 05Boot sequence
- 06Interactive terminal
- 07Project filtering and case studies
- 08Structured SEO
- 09Fully responsive and accessible
You are viewing this project right now
Current site
TanStack Start, React 19 and Tailwind CSS 4
Modern stack
shadcn/ui and Radix on a single design system
Component system
One structured source of truth for all content
Data-driven
TanStack Start with file-based routing and server-side rendering. The UI is a component system built on shadcn/ui and Radix primitives, with forms validated by react-hook-form and Zod and data visualised with Recharts.
TypeScript across the board, route-level code splitting, and a single source-of-truth data layer — content lives in structured data, not scattered JSX.
Semantic HTML, keyboard navigation, focus states, ARIA labels and reduced-motion support.
SSR with route-based chunking, minimal dependencies per route and elegant, purposeful animation.
- Baking a 'product' feel — boot sequence, palette, assistant — into a content site without hurting load time.
- Keeping one dark design system consistent across many page archetypes.
- Structuring a real data layer so content changes never touch component code.
- A design system that is data-driven is cheaper to maintain and easier to get right.
- SSR plus route-level splitting gives a premium feel without a performance tax.