Introduction
Relevant source files
The following files were used as context for generating this wiki page:
The "Portfolio OS" is a specialized Next.js web application designed to simulate a macOS-style desktop environment. It serves as an interactive personal portfolio where different professional facets—such as professional biography, project showcases, and contact information—are encapsulated within a multi-window management system.
Sources: app/layout.tsx:16-17, messages/en.json:20-22
The system architecture leverages a centralized state management pattern to handle window operations (opening, closing, focusing, and resizing) while providing a localized experience through next-intl. The interface is built with React 19 and styled using a custom "Liquid Glass" system implemented via Tailwind CSS to mimic the aesthetics of macOS Tahoe.
Sources: app/layout.tsx:21-43, app/globals.css:129-165, package.json:17-21
Core System Architecture
The application is structured around a central window management engine that controls the lifecycle of various "apps" within the desktop environment.
Window Management Logic
The state of all open windows is managed through a specialized reducer (windowReducer). This logic ensures that the system is single-instance per application (e.g., re-opening the "About" app focuses the existing window rather than creating a new one) and manages depth through z-index manipulation.
The diagram illustrates the unidirectional data flow from user interactions to state updates within the Window Manager.
Sources: context/WindowManagerContext.tsx:29-54, workflows/windowManager.test.ts:16-56
Internationalization (i18n)
The project supports multiple languages (English and Persian) and handles Right-to-Left (RTL) layout switching dynamically. The RootLayout detects the locale and applies the appropriate text direction and font variables.
Sources: app/layout.tsx:29-37, messages/fa.json:1-49
Desktop Components and Features
The portfolio environment is composed of several integrated components that work together to create the "OS" experience.
Visual System
The application uses a custom "Liquid Glass" surface system defined in the global CSS. This includes three distinct tiers of vibrancy and blur:
| Class | Purpose | Visual Characteristics |
|---|---|---|
.lg-glass | Main Windows | 28px blur, 180% saturation, drop shadow, white border. |
.lg-panel | Menu/Dock | 34px blur, higher transparency, 190% saturation. |
.lg-chip | Widgets/Tooltips | 20px blur, optimized for smaller desktop elements. |
Sources: app/globals.css:129-165
Key Application Modules
The system registry defines three primary applications accessible via the desktop:
- About Me: Displays professional bio and skills (e.g., TypeScript, React, Next.js).
- Projects: A gallery layout showcasing built works with tags and external links.
- Contact: A functional-style contact form for inquiries.
Sources: features/desktop/components/appRegistry.tsx:6-10, lib/content.ts:25-50
Data Structures and Configuration
The windowing system and content are driven by specific TypeScript interfaces and JSON translation files.
Window State Interface
Each window in the system is tracked with specific geometry and state properties.
| Field | Type | Description |
|---|---|---|
appId | AppId | Unique identifier (about, projects, contact). |
x, y | number | Screen coordinates for window positioning. |
width, height | number | Dimensions of the window. |
zIndex | number | Stack order relative to other windows. |
isMinimized | boolean | Whether the window is currently hidden in the dock. |
Sources: types/index.ts:1-10, workflows/windowManager.test.ts:10-12, features/desktop/components/Window.tsx:12-25
Application Content
Content is separated from logic, stored in lib/content.ts for structural data and messages/*.json for localized strings.
export interface Project {
id: "p1" | "p2" | "p3";
tags: string[];
links: ProjectLink[];
}
Sources: lib/content.ts:7-12, messages/en.json:23-38
Conclusion
The Portfolio OS provides a robust framework for an interactive resume. By combining a centralized WindowManagerContext with a reactive UI and high-fidelity CSS effects, it achieves a desktop-like experience within a browser. The architecture is designed for extensibility, allowing for the addition of new applications by registering them in the appRegistry and defining their content in the localization files.
Sources: features/desktop/components/appRegistry.tsx:1-11, context/WindowManagerContext.tsx:11-27