Content Data Structures
Relevant source files
The following files were used as context for generating this wiki page:
Introduction
Content Data Structures in this portfolio project provide a centralized and type-safe mechanism for managing application-specific data such as professional projects, technical skills, social links, and contact information. These structures decouple the raw data from the UI components, allowing for easier maintenance and integration with internationalization (i18n) systems.
The system relies on TypeScript interfaces to enforce data consistency and uses JSON-based message files to handle localized strings. This ensures that the portfolio can support multiple languages while maintaining a unified data schema across different features like the About, Projects, and Contact applications.
Sources: lib/content.ts, messages/en.json, types/index.ts
Core Data Models
The project defines specific TypeScript interfaces to structure the information displayed within the macOS-style desktop environment. The primary models include projects, social links, and application identifiers.
Project Schema
The Project interface represents a portfolio entry. It uses an id that maps directly to translation keys in the i18n JSON files, ensuring that titles and descriptions remain localized while tags and links remain static.
The following table describes the fields within the core data models:
| Field | Type | Description |
|---|---|---|
id | AppId | A unique identifier matching message keys (e.g., "p1", "p2"). |
tags | string[] | Technical stacks or keywords associated with a project. |
links | ProjectLink[] | Array of external URLs (GitHub, Live demo) with labels. |
label | string | Display text for a link or social platform. |
href | string | The target URL for the link. |
Sources: lib/content.ts:1-20, types/index.ts:1-2
Content Integration and i18n
The application utilizes a hybrid approach where structural data is stored in TypeScript files, while descriptive text is stored in localization files. This separation allows the UI to iterate over data arrays while fetching the corresponding text via the next-intl library.
Relationship between Content and Messages
UI components like ProjectsApp map through the projects array and use the Project.id to retrieve localized strings.
Static Data Arrays
Several constants are exported to populate the "About" and "Contact" sections of the portfolio.
| Constant | Type | Purpose |
|---|---|---|
projects | Project[] | List of projects with IDs, tags, and links. |
skills | string[] | List of technical competencies (e.g., React, Next.js). |
socials | SocialLink[] | External social profile links (GitHub, LinkedIn). |
contactEmail | string | Primary contact email address. |
Sources: lib/content.ts:22-51
Feature-Specific Implementation
About and Skills
The "About" section consumes the skills string array. The AboutApp component iterates over these strings to render them as stylized chips.
Sources: features/about/components/AboutApp.tsx:5-29
Contact and Socials
The "Contact" section utilizes both the contactEmail and the socials array. It provides a functional form for user input and a list of social links for external navigation.
Sources: features/contact/components/ContactApp.tsx:9-56
Project Gallery
The ProjectsApp component serves as the primary consumer of the Project interface. It generates a grid layout where each project card displays its localized title and description alongside its technical tags.
Sources: features/projects/components/ProjectsApp.tsx:7-45
Summary
Content Data Structures in this project provide the backbone for the portfolio's information architecture. By combining TypeScript interfaces in lib/content.ts with localized strings in messages/, the architecture achieves a clean separation of concerns. This structure allows the "OS-style" interface to dynamically render applications while maintaining strict data integrity and supporting multi-language capabilities.