Projects Application

Relevant source files

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

• features/projects/components/ProjectsApp.tsx
• features/projects/index.ts
• lib/content.ts
• lib/apps.config.tsx
• messages/en.json
• features/desktop/components/appRegistry.tsx
• types/index.ts

The Projects Application is a specialized module within the portfolio OS designed to showcase a gallery of software development projects. It functions as a single-instance application within a windowed desktop environment, utilizing a decoupled architecture where structural data is stored in TypeScript definitions while descriptive content is managed through an internationalization (i18n) system.

Sources: features/projects/components/ProjectsApp.tsx, lib/apps.config.tsx:32-37, messages/en.json:28-44

Architecture and Integration

The Projects Application is integrated into the desktop environment via a central registry. It is defined as a DesktopApp with specific metadata, including an icon from the lucide-react library and a default window geometry.

System Integration Flow

The following diagram illustrates how the Projects Application is registered and instantiated within the desktop environment.

Data Models and Structures

The application relies on strictly typed interfaces to manage project metadata and external links.

Project Interfaces

Interface	Field	Type	Description
Project	id	"p1" | "p2" | "p3"	Unique identifier matching i18n keys.
	tags	string[]	Technology stack labels (e.g., "TypeScript").
	links	ProjectLink[]	Array of external resource links.
ProjectLink	label	string	Display text for the link (e.g., "GitHub").
	href	string	The target URL.

Sources: lib/content.ts:1-13

Configuration Instance

The project data is instantiated in a static constant used for rendering:

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

Sources: lib/content.ts:20-36

UI Implementation and Content Rendering

The ProjectsApp component is a Client Component that utilizes the next-intl hook useTranslations to resolve text dynamically based on the active locale.

Rendering Logic

1. Introduction: Displays a localized introductory string (projects.intro).
2. Grid Layout: Renders project items in a responsive grid (grid-cols-2 on small screens and up).
3. Dynamic Key Resolution: The component constructs translation keys using the project ID (e.g., t("${p.id}.title")).
4. Tag System: Lists technologies used in each project as small, styled chips.
5. External Links: Provides accessible links with rel="noreferrer" and target="_blank".

Sources: features/projects/components/ProjectsApp.tsx:6-52

Content Localization Structure

Descriptive content is separated from the code in JSON locale files:

"projects": {
  "intro": "A few things I've built.",
  "p1": {
    "title": "Project One",
    "description": "A placeholder project..."
  }
}

Sources: messages/en.json:28-44, messages/fa.json:28-44

Desktop Configuration

The application is configured with specific window parameters to ensure it fits the desktop layout upon initialization.

Property	Value	Source
App ID	projects	lib/apps.config.tsx:32
Icon	FolderKanban	lib/apps.config.tsx:34
Default Width	640	lib/apps.config.tsx:36
Default Height	460	lib/apps.config.tsx:36
Gradient Tile	from-amber-400 to-orange-600	lib/apps.config.tsx:35

Conclusion

The Projects Application serves as a modular gallery component, strictly separated into data (lib/content.ts), presentation (ProjectsApp.tsx), and localization (messages/). This structure allows for easy expansion of the portfolio by adding new entries to the projects array and corresponding keys in the translation files.