Entity Data Models

Relevant source files

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

• src/entities/project/model/data.ts
• src/entities/project/model/types.ts
• src/entities/technology/model/techStack.tsx
• src/pages/Projects.tsx
• src/shared/config/content.ts
• src/widgets/HomeBentoSection/HomeBentoSection.tsx
• src/widgets/HomeProjectsSection/HomeProjectsSection.tsx

The portfolio application utilizes statically-defined data models to manage content for core entities like "Projects" and "Technologies". This approach decouples the data from the UI components, centralizing content management and adhering to the principles of Feature-Sliced Design (FSD). These models are defined using TypeScript interfaces and are populated by constant arrays, which serve as the single source of truth for entity-related information across the application.

The primary data models are for Projects, Technologies, and general UI content configuration. They provide a structured and type-safe way to manage the information displayed in various sections, from project galleries to technology showcases.

Project Data Model

The Project entity is the most detailed data model in the application, designed to hold all necessary information for displaying project cards, carousels, and detailed project pages.

Sources: src/entities/project/model/types.ts, src/entities/project/model/data.ts

ProjectCardData Interface

The structure for each project is defined by the ProjectCardData interface. This interface ensures that all project objects have a consistent shape.

// src/entities/project/model/types.ts:1-15
export interface ProjectCardData {
  title: string;
  category: string;
  year: number;
  src: string;
  githubLink: string;
  liveLink: string;
  linkType: string;
  content: {
    imageSrc: string;
    description: string;
    tech: string[];
  };
  srcs?: string[];
  key?: string;
}

Sources: src/entities/project/model/types.ts:1-15

The diagram below illustrates the structure of the ProjectCardData interface and its nested content object.

Fields

The table below details each field within the ProjectCardData interface.

Field	Type	Description
title	string	The name of the project.
category	string	The project's category (e.g., "System Architecture").
year	number	The year the project was completed.
src	string	The path to the main image for the project card.
githubLink	string	The URL to the project's GitHub repository.
liveLink	string	The URL to the live demo of the project.
linkType	string	Determines the primary link type, e.g., "link" or "github".
content	object	A nested object containing detailed content.
content.imageSrc	string	Path to the image used in detailed views or carousels.
content.description	string	A detailed description of the project.
content.tech	string[]	An array of technologies used in the project.
srcs	string[] (optional)	An optional array of additional image sources.
key	string (optional)	An optional unique key for the project.

Sources: src/entities/project/model/types.ts:1-15

Static Data Source: projectsData

All project information is stored in a static array named projectsData, which is an array of ProjectCardData objects. This array is the single source of truth for all projects displayed in the portfolio.

// src/entities/project/model/data.ts:3-171
export const projectsData: ProjectCardData[] = [
  {
    title: "2026 Gold Standard Portfolio",
    category: "System Architecture",
    year: 2026,
    src: "/projects/proj1.webp",
    githubLink: "https://github.com/BonyKoshy/Portfolio%22%2C
    liveLink: "/",
    linkType: "link",
    content: {
      imageSrc: "/projects/proj1.webp",
      description:
        "A living proof-of-concept for 2026 web architecture. Built with React 19, Vite 7, and Feature-Sliced Design (FSD) to decouple logic from UI.",
      tech: ["React 19", "Vite 7", "FSD", "GSAP", "Framer Motion", "Radix UI"],
    },
  },
  // ... more project objects
];

Sources: src/entities/project/model/data.ts:3-171

Data Consumption Flow

The projectsData array is imported and consumed by various UI components and pages to render project information. The flow is unidirectional, from the static data source to the presentation layer.

This diagram shows how projectsData is used by different parts of the application.

• Projects.tsx: Imports projectsData and maps over the entire array to display a comprehensive list of all projects.
• HomeProjectsSection.tsx: Imports projectsData, takes a slice of the first two projects (.slice(0, 2)), and passes them to ProjectCard components for display on the home page.
• ProjectsCarousel.tsx: Imports projectsData and slices the top four projects to display in an interactive carousel, typically on the hero section.

Technology Data Model

A simple data model is used to define the technologies and their corresponding icons, which are displayed in the "Skills" section of the bento grid on the home page.

Sources: src/entities/technology/model/techStack.tsx

TechLogo Type

The TechLogo type defines the structure for each technology entry.

// src/entities/technology/model/techStack.tsx:28-31
export type TechLogo = {
  node: React.ReactNode;
  title: string;
};

Sources: src/entities/technology/model/techStack.tsx:28-31

Fields

Field	Type	Description
node	React.ReactNode	The React icon component for the technology (e.g., <SiReact />).
title	string	The name of the technology (e.g., "React.js").

Sources: src/entities/technology/model/techStack.tsx:28-31

Static Data Source: techLogos

Similar to projects, technology data is stored in a static array named techLogos.

// src/entities/technology/model/techStack.tsx:33-64
export const techLogos: TechLogo[] = [
  { node: <SiHtml5 />, title: "HTML5" },
  { node: <SiCss3 />, title: "CSS3" },
  { node: <SiJavascript />, title: "JavaScript" },
  // ... more technology objects
];

Sources: src/entities/technology/model/techStack.tsx:33-64

This array is consumed by the HomeBentoSection widget to populate a looping logo display in the "Skills" card.

Sources: src/widgets/HomeBentoSection/HomeBentoSection.tsx:13, 80

UI Content Configuration

Beyond entity-specific models, the application uses a centralized object, homeContent, to manage static text and labels across various UI components. This is not a traditional entity model but serves a similar purpose of data-UI separation.

Sources: src/shared/config/content.ts

homeContent Object

This large, nested object contains strings for headlines, button labels, section titles, and other text-based content.

// src/shared/config/content.ts:1-100
export const homeContent = {
  hero: {
    eyebrow: "Creative Developer",
    headline: {
      part1: "Engineering the fabric of ",
      part2: "the modern web.",
    },
    // ...
  },
  bento: {
    profile: {
      title: "Profile",
      description: "Creative Full-stack Developer.",
      cta: "About Me",
    },
    // ...
  },
  projects: {
    title: "Projects",
    subtitle: "Milestones in the learning journey",
    viewAll: "View all projects",
    readMore: "Read more",
  },
  // ...
};

Sources: src/shared/config/content.ts:1-100

This configuration object is imported by numerous widgets and pages to ensure consistency and ease of maintenance. For example, HomeProjectsSection.tsx uses homeContent.projects.title and homeContent.projects.subtitle for its header.

Sources: src/widgets/HomeProjectsSection/HomeProjectsSection.tsx:19, 25

Summary

The entity data models in this portfolio are a cornerstone of its architecture. By defining clear, static data structures for Projects and Technologies and centralizing UI content in a configuration object, the application achieves a clean separation of concerns. This makes the codebase easier to maintain, scale, and update. Data flows unidirectionally from these static models to the UI components, which remain purely presentational, aligning perfectly with the goals of Feature-Sliced Design.