Getting Started

Relevant source files

The following files were used as context for generating this wiki page:

• README.md
• package.json
• app/layout.tsx
• biome.json
• tsconfig.json
• lib/content.ts
• context/WindowManagerContext.tsx

The Portfolio OS is an interactive, macOS-style portfolio built with Next.js 16. It leverages a desktop-like environment to showcase software engineering skills, projects, and contact information through a windowed interface. The project utilizes next-intl for internationalization and vitest for unit testing the window management logic.

Developers can begin by configuring the environment, installing dependencies defined in package.json, and running the development server to explore the interactive desktop. The architecture is centered around a custom Window Manager that handles window state, focus, and geometry within a React context.

Sources: README.md:1-5, package.json:10-33, app/layout.tsx:16-19

Environment Setup

The project is built on Next.js and requires a modern Node.js environment. It uses Biome for linting and formatting, replacing traditional tools like ESLint and Prettier for faster performance.

Prerequisites and Installation

To set up the project locally, clone the repository and install dependencies using a supported package manager.

npm install
# or
pnpm install
# or
bun install

Sources: README.md:7-17, package.json:10-25

Available Scripts

The following commands are available for development, testing, and production builds:

Command	Description
npm run dev	Starts the Next.js development server at localhost:3000.
npm run build	Generates an optimized production build.
npm run lint	Runs Biome to check for linting errors.
npm run format	Uses Biome to format the codebase.
npm run test	Executes unit tests using Vitest.

Sources: package.json:7-15, README.md:9-15

Architecture Overview

The application follows a modular structure where features like about, projects, and contact are encapsulated and rendered within a windowing system. The root layout provides the global context, including font optimization and internationalization providers.

Application Flow

The following diagram illustrates the high-level initialization and rendering flow of the Portfolio OS.

The application initializes the locale and direction (LTR/RTL) at the root level before mounting the Window Manager.
Sources: app/layout.tsx:25-44, context/WindowManagerContext.tsx:22-30

Core Technologies

• Framework: Next.js 16.2.9 (App Router)
• Styling: Tailwind CSS 4 with custom "Liquid Glass" components.
• State Management: React useReducer and useContext for windowing logic.
• Internationalization: next-intl for English and Persian support.
• Linting/Formatting: Biome 2.2.0.

Sources: package.json:17-33, app/globals.css:160-195, app/layout.tsx:28-35

Window Management System

The core interactivity of the portfolio is driven by the WindowManagerContext. This system tracks open windows, their z-index for focusing, and their physical dimensions (geometry).

Window State logic

The window manager operates through a reducer that handles actions such as open, close, minimize, focus, move, and resize.

Focus actions raise the zIndex of the targeted window above all others, while minimizing a window removes its focus.
Sources: context/WindowManagerContext.tsx:22-45, workflows/windowManager.test.ts:25-50

Geometry and Types

The system uses defined interfaces for window positioning and application identification.

Type	Description	Values / Fields
AppId	Unique identifier for internal apps.	"about" | "projects" | "contact"
Geometry	Defines window size and position.	x, y, width, height

Sources: types/index.ts:1-10

Content Configuration

Static data and skills are centralized in the lib/content.ts file, allowing for easy updates to the portfolio's information without modifying component logic.

export const projects: Project[] = [
  {
    id: "p1",
    tags: ["TypeScript", "Next.js"],
    links: [{ label: "GitHub", href: "https://github.com" }],
  },
];

export const skills: string[] = [
  "TypeScript", "React", "Next.js", "Node.js", "Tailwind CSS", "PostgreSQL"
];

Sources: lib/content.ts:17-43

Summary

The Portfolio OS provides a robust template for a window-based web desktop. By utilizing Next.js for performance and Biome for development velocity, the project maintains a clean architecture. Developers can start by installing dependencies, exploring the WindowManagerContext for UI logic, and updating lib/content.ts to customize the portfolio data.

Sources: README.md:1-25, package.json:1-35, context/WindowManagerContext.tsx:1-55