Projects Page

Relevant source files

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

• src/pages/Projects.tsx
• src/entities/project/ui/ProjectsCarousel.tsx
• src/entities/project/ui/ProjectCard.tsx
• src/entities/project/model/data.ts
• src/entities/project/model/types.ts
• src/widgets/HomeProjectsSection/HomeProjectsSection.tsx
• src/app/App.tsx
• src/widgets/Hero/Hero.tsx

The Projects feature is a core system for showcasing the developer's work throughout the portfolio application. It is composed of a main data source, several reusable UI components (entities), and widgets that integrate these components into different pages. The primary display is the /projects page, which provides a comprehensive list of all projects. Additionally, subsets of projects are featured on the Home page within the Hero and a dedicated projects section.

This system is designed following the Feature-Sliced Design (FSD) principles, with a clear separation between data (model), UI components (ui), and their integration into pages (pages, widgets). All project data is statically defined and imported directly into the components that need it.

Sources: README.md:25, src/entities/project/model/data.ts, src/pages/Projects.tsx

Data Model and Structure

The foundation of the projects feature is a well-defined data structure and a static data array.

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

ProjectCardData Interface

All project information is typed using the ProjectCardData interface. This ensures consistency across all components that display project information.

The diagram below illustrates the structure of the ProjectCardData object.

The table below details each field in 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 project image, used in list/card views.
githubLink	string	The URL to the project's source code on GitHub.
liveLink	string	The URL to the live demo. A value of "#" indicates no live link.
linkType	string	A hint for the primary link type (e.g., "link", "github").
content	object	An object containing detailed content for the project.
content.imageSrc	string	The path to the image used in detailed views or carousels.
content.description	string	A paragraph describing the project.
content.tech	string[]	An array of strings listing the technologies used.

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

Static Data Source

All project data is hardcoded in an array named projectsData within src/entities/project/model/data.ts. This array is exported and directly imported by any component that needs to display project information.

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

Core Components (Entities)

Following FSD, the project display logic is encapsulated in reusable "entity" components.

ProjectCard.tsx

This component is responsible for rendering a summary of a single project. It is used in the HomeProjectsSection widget.

Key Features:

• Receives a single project object of type ProjectCardData as a prop.
• Displays the project's image, year, title, description, and the top 3 technologies.
• The entire card is a Link that navigates the user to the main /projects page.
• Features a hover effect that scales the project image.

Sources: src/entities/project/ui/ProjectCard.tsx

ProjectsCarousel.tsx

This component provides a compact, interactive, accordion-style view of the top four projects. It is designed for use in the Hero section of the Home page.

Key Features:

• Slices the first 4 projects from the main projectsData array.
• Renders projects in a horizontal flex container where each item expands on hover (hover:flex-3).
• On hover, an overlay's opacity changes, the project title and description appear, and a technology icon moves to the corner.
• The first technology from the tech array is used to display a representative icon via getTechIcon.

Sources: src/entities/project/ui/ProjectsCarousel.tsx, src/widgets/Hero/Hero.tsx:288-332

Pages and Widgets

The project entities are assembled and presented to the user through pages and widgets.

Projects.tsx Page

This is the main page located at the /projects route, dedicated to showcasing all projects in a detailed, vertical list format.

The rendering flow for this page is as follows:

Component Breakdown:

• Header: Displays a title "Projects" with a Briefcase icon and a subtitle.
• Projects List: A flex container that maps over the projectsData array.
• Individual Project Card: Each project is rendered in a horizontal card with two main sections:
  1. Image Section: Displays the project image, which scales on hover.
  2. Details Section: Contains the project's year, category, title, full description, all tech stack chips, and action buttons.
• Action Buttons: Conditionally renders "Live Demo" and "Source Code" buttons based on the liveLink and githubLink properties.

Sources: src/pages/Projects.tsx:7-138

HomeProjectsSection.tsx Widget

This widget is displayed on the Home page and provides a preview of the projects.

Key Features:

• It slices the first two projects from projectsData to feature them.
• It uses the ProjectCard entity to render each of the featured projects in a grid layout.
• It includes a "View all projects" link that navigates to the /projects page.

Sources: src/widgets/HomeProjectsSection/HomeProjectsSection.tsx:1-53, src/pages/Home.tsx:18-20

Component and Navigation Flow

The following diagram illustrates the relationship between the main application, pages, widgets, and project entities.

This diagram shows how App.tsx routes to the Home and Projects pages. The Home page uses the Hero and HomeProjects widgets, which in turn use the ProjectsCarousel and ProjectCard entities, respectively. The ProjectsPage consumes the project data directly to build its list. All project-related UI components ultimately source their information from data.ts.

Sources: src/app/App.tsx:1-91, src/pages/Home.tsx:1-29, src/widgets/Hero/Hero.tsx, src/widgets/HomeProjectsSection/HomeProjectsSection.tsx

A typical user flow from the home page to the full projects list is shown below.

Conclusion

The project showcase system is a well-architected feature that effectively utilizes the Feature-Sliced Design methodology. By separating data models, reusable UI entities, and page-specific widgets, the system remains scalable and maintainable. It provides multiple views of project data—a carousel, a featured grid, and a comprehensive list—to engage users at different points in their journey through the portfolio. The static data approach is simple and performant for the current scope of the project.

Sources: README.md:25, src/entities/project/model/data.ts, src/pages/Projects.tsxjson [ {"box_content": "I need to create a technical wiki page about the \"Projects Page\" feature in the provided repository.\n\nHere's my plan:\n1. **Start with the `<details>` block:** I will list all the relevant source files I've been given and find at least two more to meet the minimum of five.\n - `src/pages/Projects.tsx` (Provided)\n - `src/entities/project/ui/ProjectsCarousel.tsx` (Provided)\n - `src/entities/project/ui/ProjectCard.tsx` (Provided)\n - I'll add `src/entities/project/model/data.ts` because it's the source of all project data.\n - I'll add `src/widgets/HomeProjectsSection/HomeProjectsSection.tsx` as it's a related widget that uses the `ProjectCard`.\n - I'll also add `src/entities/project/model/types.ts` to define the data structure.\n\n2. **H1 Heading:** Add `# Projects Page` right after the `<details>` block.\n\n3. **Introduction:** I'll write a 1-2 paragraph introduction explaining the purpose of the projects-related components. This includes the main `/projects` page, the featured projects section on the homepage, and the carousel on the hero section. I'll explain that it's a key feature for showcasing the developer's work.\n\n4. **Detailed Sections (H2/H3):** I'll break down the feature into logical parts.\n * **Data Model:** I'll start by explaining the data structure.\n * I'll use `src/entities/project/model/types.ts` to define the `ProjectCardData` interface.\n * I'll create a Mermaid diagram (ER or Class) to visualize this structure.\n * I'll create a Markdown table to detail the fields of `ProjectCardData`.\n * I'll mention `src/entities/project/model/data.ts` as the static data source.\n * **Core Components:** I'll describe the main UI components involved.\n * **`Projects.tsx` (The Main Page):**\n * Explain its role as the main showcase page.\n * Describe its structure: Header and a vertical list of project cards.\n * Detail how it maps over `projectsData` to render each project.\n * Mention the interactive elements like hover effects and links (Live Demo, Source Code).\n * I'll create a flowchart to show the rendering logic.\n * **`ProjectCard.tsx` (Entity):**\n * Explain this is a reusable component for displaying a single project summary.\n * Describe its props (`project: ProjectCardData`).\n * Detail its layout: Image, year, title, description, tech stack (sliced to top 3), and a \"Read more\" link.\n * Mention the hover effect (image scale).\n * **`ProjectsCarousel.tsx` (Entity):**\n * Explain its purpose: a compact, interactive accordion-style display for the top 4 projects, used in the Hero section.\n * Describe its behavior: expands on hover, shows details, and uses the first tech icon.\n * Mention it slices the `projectsData` to get the top 4 projects.\n * **Widgets and Integration:** I'll explain how these components are used in larger parts of the application.\n * **`HomeProjectsSection.tsx` (Widget):**\n * Explain this widget is used on the `Home.tsx` page.\n * Describe how it displays a subset (first 2) of projects using `ProjectCard.tsx`.\n * Mention the \"View all projects\" link that navigates to `/projects`.\n * **Application Routing:**\n * Show how `App.tsx` lazy-loads and routes to the `/projects` page.\n * Create a Mermaid diagram showing the component hierarchy from `App` down to `Projects` and `ProjectCard`.\n\n5. **Mermaid Diagrams:** I will create several diagrams as planned above:\n * A class diagram for the `ProjectCardData` interface.\n * A flowchart for the `Projects.tsx` page rendering logic.\n * A component hierarchy graph showing how the different project-related components fit together.\n * A sequence diagram showing user navigation from the Home page to the Projects page.\n\n6. **Tables:** I will use a table to break down the `ProjectCardData` interface fields, types, and descriptions.\n\n7. **Code Snippets:** I might include a snippet of the `ProjectCardData` type definition or the mapping logic in `Projects.tsx` if it adds clarity.\n\n8. **Source Citations:** This is critical. I will add citations (`Sources: [filename:line-range](https://github.com/BonyKoshy/Portfolio/blob/HEAD/%7B%22box_content%22%3A%20%22I%20need%20to%20create%20a%20technical%20wiki%20page%20about%20the%20%5C%22Projects%20Page%5C%22%20feature%20in%20the%20provided%20repository.%5Cn%5CnHere's%20my%20plan%3A%5Cn1.%20%20**Start%20with%20the%20%60%3Cdetails%3E%60%20block%3A**%20I%20will%20list%20all%20the%20relevant%20source%20files%20I've%20been%20given%20and%20find%20at%20least%20two%20more%20to%20meet%20the%20minimum%20of%20five.%5Cn%20%20%20%20-%20%20%20%60src/pages/Projects.tsx%60%20(Provided)%5Cn%20%20%20%20-%20%20%20%60src/entities/project/ui/ProjectsCarousel.tsx%60%20(Provided)%5Cn%20%20%20%20-%20%20%20%60src/entities/project/ui/ProjectCard.tsx%60%20(Provided)%5Cn%20%20%20%20-%20%20%20I'll%20add%20%60src/entities/project/model/data.ts%60%20because%20it's%20the%20source%20of%20all%20project%20data.%5Cn%20%20%20%20-%20%20%20I'll%20add%20%60src/widgets/HomeProjectsSection/HomeProjectsSection.tsx%60%20as%20it's%20a%20related%20widget%20that%20uses%20the%20%60ProjectCard%60.%5Cn%20%20%20%20-%20%20%20I'll%20also%20add%20%60src/entities/project/model/types.ts%60%20to%20define%20the%20data%20structure.%5Cn%5Cn2.%20%20**H1%20Heading%3A**%20Add%20%60# Projects Page` right after the `<details>` block.\n\n3. **Introduction:** I'll write a 1-2 paragraph introduction explaining the purpose of the projects-related components. This includes the main `/projects` page, the featured projects section on the homepage, and the carousel on the hero section. I'll explain that it's a key feature for showcasing the developer's work.\n\n4. **Detailed Sections (H2/H3):** I'll break down the feature into logical parts.\n * **Data Model:** I'll start by explaining the data structure.\n * I'll use `src/entities/project/model/types.ts` to define the `ProjectCardData` interface.\n * I'll create a Mermaid diagram (ER or Class) to visualize this structure.\n * I'll create a Markdown table to detail the fields of `ProjectCardData`.\n * I'll mention `src/entities/project/model/data.ts` as the static data source.\n * **Core Components:** I'll describe the main UI components involved.\n * **`Projects.tsx` (The Main Page):**\n * Explain its role as the main showcase page.\n * Describe its structure: Header and a vertical list of project cards.\n * Detail how it maps over `projectsData` to render each project.\n * Mention the interactive elements like hover effects and links (Live Demo, Source Code).\n * I'll create a flowchart to show the rendering logic.\n * **`ProjectCard.tsx` (Entity):**\n * Explain this is a reusable component for displaying a single project summary.\n * Describe its props (`project: ProjectCardData`).\n * Detail its layout: Image, year, title, description, tech stack (sliced to top 3), and a \"Read more\" link.\n * Mention the hover effect (image scale).\n * **`ProjectsCarousel.tsx` (Entity):**\n * Explain its purpose: a compact, interactive accordion-style display for the top 4 projects, used in the Hero section.\n * Describe its behavior: expands on hover, shows details, and uses the first tech icon.\n * Mention it slices the `projectsData` to get the top 4 projects.\n * **Widgets and Integration:** I'll explain how these components are used in larger parts of the application.\n * **`HomeProjectsSection.tsx` (Widget):**\n * Explain this widget is used on the `Home.tsx` page.\n * Describe how it displays a subset (first 2) of projects using `ProjectCard.tsx`.\n * Mention the \"View all projects\" link that navigates to `/projects`.\n * **Application Routing:**\n * Show how `App.tsx` lazy-loads and routes to the `/projects` page.\n * Create a Mermaid diagram showing the component hierarchy from `App` down to `Projects` and `ProjectCard`.\n\n5. **Mermaid Diagrams:** I will create several diagrams as planned above:\n * A class diagram for the `ProjectCardData` interface.\n * A flowchart for the `Projects.tsx` page rendering logic.\n * A component hierarchy graph showing how the different project-related components fit together.\n * A sequence diagram showing user navigation from the Home page to the Projects page.\n\n6. **Tables:** I will use a table to break down the `ProjectCardData` interface fields, types, and descriptions.\n\n7. **Code Snippets:** I might include a snippet of the `ProjectCardData` type definition or the mapping logic in `Projects.tsx` if it adds clarity.\n\n8. **Source Citations:** This is critical. I will add citations (`Sources: [filename:line-range)`) after every piece of information, diagram, and table. I will ensure I cite from at least 5 different files.\n\n9. **Conclusion:** I'll write a short summary of the project display system, highlighting its modularity (entity/widget structure) and its role in the portfolio.\n\nI will be careful to only use information present in the provided source files. I will maintain a direct, technical tone. I will start the response directly with the `<details>` block."}, {"box_content": "<details>\n<summary>Relevant source files</summary>\nThe following files were used as context for generating this wiki page:\n\n- [src/pages/Projects.tsx](https://github.com/BonyKoshy/Portfolio/blob/HEAD/src/pages/Projects.tsx)\n- [src/entities/project/ui/ProjectsCarousel.tsx](https://github.com/BonyKoshy/Portfolio/blob/HEAD/src/entities/project/ui/ProjectsCarousel.tsx)\n- [src/entities/project/ui/ProjectCard.tsx](https://github.com/BonyKoshy/Portfolio/blob/HEAD/src/entities/project/ui/ProjectCard.tsx)\n- [src/entities/project/model/data.ts](https://github.com/BonyKoshy/Portfolio/blob/HEAD/src/entities/project/model/data.ts)\n- [src/entities/project/model/types.ts](https://github.com/BonyKoshy/Portfolio/blob/HEAD/src/entities/project/model/types.ts)\n- [src/widgets/HomeProjectsSection/HomeProjectsSection.tsx](https://github.com/BonyKoshy/Portfolio/blob/HEAD/src/widgets/HomeProjectsSection/HomeProjectsSection.tsx)\n- [src/app/App.tsx](https://github.com/BonyKoshy/Portfolio/blob/HEAD/src/app/App.tsx)\n- [src/widgets/Hero/Hero.tsx](https://github.com/BonyKoshy/Portfolio/blob/HEAD/src/widgets/Hero/Hero.tsx)\n\n</details>\n\n# Projects Page\n\nThe Projects feature is a core system for showcasing the developer's work throughout the portfolio application. It is composed of a main data source, several reusable UI components (entities), and widgets that integrate these components into different pages. The primary display is the `/projects` page, which provides a comprehensive list of all projects. Additionally, subsets of projects are featured on the Home page within the Hero and a dedicated projects section.\n\nThis system is designed following the Feature-Sliced Design (FSD) principles, with a clear separation between data (`model`), UI components (`ui`), and their integration into pages (`pages`, `widgets`). All project data is statically defined and imported directly into the components that need it.\n\n*Sources: [README.md:25](https://github.com/BonyKoshy/Portfolio/blob/HEAD/README.md#L25), [src/entities/project/model/data.ts](https://github.com/BonyKoshy/Portfolio/blob/HEAD/src/entities/project/model/data.ts), [src/pages/Projects.tsx](https://github.com/BonyKoshy/Portfolio/blob/HEAD/src/pages/Projects.tsx)*\n\n## Data Model and Structure\n\nThe foundation of the projects feature is a well-defined data structure and a static data array.\n\n*Sources: [src/entities/project/model/types.ts](https://github.com/BonyKoshy/Portfolio/blob/HEAD/src/entities/project/model/types.ts), [src/entities/project/model/data.ts](https://github.com/BonyKoshy/Portfolio/blob/HEAD/src/entities/project/model/data.ts)*\n\n### `ProjectCardData` Interface\n\nAll project information is typed using the `ProjectCardData` interface. This ensures consistency across all components that display project information.\n\nThe diagram below illustrates the structure of the `ProjectCardData` object.\nmermaid\nclassDiagram\n direction LR\n class ProjectCardData {\n +title: string\n +category: string\n +year: number\n +src: string\n +githubLink: string\n +liveLink: string\n +linkType: string\n +content: Content\n }\n class Content {\n +imageSrc: string\n +description: string\n +tech: string[]\n }\n ProjectCardData "1" -- "1" Content : contains\n\n*Sources: [src/entities/project/model/types.ts:1-13](https://github.com/BonyKoshy/Portfolio/blob/HEAD/src/entities/project/model/types.ts#L1-L13)*\n\nThe table below details each field in the `ProjectCardData` interface.\n\n| Field | Type | Description |\n| :--- | :--- | :--- |\n| `title` | `string` | The name of the project. |\n| `category` | `string` | The project's category (e.g., \"System Architecture\"). |\n| `year` | `number` | The year the project was completed. |\n| `src` | `string` | The path to the main project image, used in list/card views. |\n| `githubLink` | `string` | The URL to the project's source code on GitHub. |\n| `liveLink` | `string` | The URL to the live demo. A value of `\"#\"` indicates no live link. |\n| `linkType` | `string` | A hint for the primary link type (e.g., \"link\", \"github\"). |\n| `content` | `object` | An object containing detailed content for the project. |\n| `content.imageSrc` | `string` | The path to the image used in detailed views or carousels. |\n| `content.description` | `string` | A paragraph describing the project. |\n| `content.tech` | `string[]` | An array of strings listing the technologies used. |\n\n*Sources: [src/entities/project/model/types.ts:1-13](https://github.com/BonyKoshy/Portfolio/blob/HEAD/src/entities/project/model/types.ts#L1-L13)*\n\n### Static Data Source\n\nAll project data is hardcoded in an array named `projectsData` within `src/entities/project/model/data.ts`. This array is exported and directly imported by any component that needs to display project information.\n\n*Sources: [src/entities/project/model/data.ts:3-174](https://github.com/BonyKoshy/Portfolio/blob/HEAD/src/entities/project/model/data.ts#L3-L174)*\n\n## Core Components (Entities)\n\nFollowing FSD, the project display logic is encapsulated in reusable \"entity\" components.\n\n### `ProjectCard.tsx`\n\nThis component is responsible for rendering a summary of a single project. It is used in the `HomeProjectsSection` widget.\n\n**Key Features:**\n- Receives a single `project` object of type `ProjectCardData` as a prop.\n- Displays the project's image, year, title, description, and the top 3 technologies.\n- The entire card is a `Link` that navigates the user to the main `/projects` page.\n- Features a hover effect that scales the project image.\n\n*Sources: [src/entities/project/ui/ProjectCard.tsx](https://github.com/BonyKoshy/Portfolio/blob/HEAD/src/entities/project/ui/ProjectCard.tsx)*\n\n### `ProjectsCarousel.tsx`\n\nThis component provides a compact, interactive, accordion-style view of the top four projects. It is designed for use in the `Hero` section of the Home page.\n\n**Key Features:**\n- Slices the first 4 projects from the main `projectsData` array.\n- Renders projects in a horizontal flex container where each item expands on hover (`hover:flex-3`).\n- On hover, an overlay's opacity changes, the project title and description appear, and a technology icon moves to the corner.\n- The first technology from the `tech` array is used to display a representative icon via `getTechIcon`.\n\n*Sources: [src/entities/project/ui/ProjectsCarousel.tsx](https://github.com/BonyKoshy/Portfolio/blob/HEAD/src/entities/project/ui/ProjectsCarousel.tsx), [src/widgets/Hero/Hero.tsx:288-332](https://github.com/BonyKoshy/Portfolio/blob/HEAD/src/widgets/Hero/Hero.tsx#L288-L332)*\n\n## Pages and Widgets\n\nThe project entities are assembled and presented to the user through pages and widgets.\n\n### `Projects.tsx` Page\n\nThis is the main page located at the `/projects` route, dedicated to showcasing all projects in a detailed, vertical list format.\n\nThe rendering flow for this page is as follows:\nmermaid\nflowchart TD\n A[User navigates to /projects] --> B{Projects Page Renders};\n B --> C[Import projectsData];\n C --> D{Map over projectsData array};\n D --> E[For each project...];\n E --> F[Render horizontal card container];\n F --> G[Display Image];\n F --> H[Display Details: Year, Category, Title, Description];\n F --> I[Display All Tech Stack Chips];\n F --> J[Render Action Buttons];\n J --> K{"liveLink exists & != '#'"};\n K -- Yes --> L[Show 'Live Demo' Button];\n K -- No --> M;\n J --> N{githubLink exists};\n N -- Yes --> O[Show 'Source Code' Button];\n N -- No --> M;\n L & O & M --> P[End of card];\n E -- loops --> E;\n\n*Sources: [src/pages/Projects.tsx:1-140](https://github.com/BonyKoshy/Portfolio/blob/HEAD/src/pages/Projects.tsx#L1-L140)*\n\n**Component Breakdown:**\n- **Header:** Displays a title \"Projects\" with a `Briefcase` icon and a subtitle.\n- **Projects List:** A flex container that maps over the `projectsData` array.\n- **Individual Project Card:** Each project is rendered in a horizontal card with two main sections:\n 1. **Image Section:** Displays the project image, which scales on hover.\n 2. **Details Section:** Contains the project's year, category, title, full description, all tech stack chips, and action buttons.\n- **Action Buttons:** Conditionally renders \"Live Demo\" and \"Source Code\" buttons based on the `liveLink` and `githubLink` properties.\n\n*Sources: [src/pages/Projects.tsx:7-138](https://github.com/BonyKoshy/Portfolio/blob/HEAD/src/pages/Projects.tsx#L7-L138)*\n\n### `HomeProjectsSection.tsx` Widget\n\nThis widget is displayed on the Home page and provides a preview of the projects.\n\n**Key Features:**\n- It slices the first two projects from `projectsData` to feature them.\n- It uses the `ProjectCard` entity to render each of the featured projects in a grid layout.\n- It includes a \"View all projects\" link that navigates to the `/projects` page.\n\n*Sources: [src/widgets/HomeProjectsSection/HomeProjectsSection.tsx:1-53](https://github.com/BonyKoshy/Portfolio/blob/HEAD/src/widgets/HomeProjectsSection/HomeProjectsSection.tsx#L1-L53), [src/pages/Home.tsx:18-20](https://github.com/BonyKoshy/Portfolio/blob/HEAD/src/pages/Home.tsx#L18-L20)*\n\n## Component and Navigation Flow\n\nThe following diagram illustrates the relationship between the main application, pages, widgets, and project entities.\n\nmermaid\ngraph TD\n subgraph App Routing\n App[App.tsx]\n end\n\n subgraph Pages\n Home[pages/Home.tsx]\n ProjectsPage[pages/Projects.tsx]\n end\n\n subgraph Widgets\n Hero[widgets/Hero.tsx]\n HomeProjects[widgets/HomeProjectsSection.tsx]\n end\n\n subgraph Entities\n Carousel[entities/project/ui/ProjectsCarousel.tsx]\n Card[entities/project/ui/ProjectCard.tsx]\n end\n \n subgraph Data\n Data[entities/project/model/data.ts]\n end\n\n App --> Home;\n App --> ProjectsPage;\n\n Home --> Hero;\n Home --> HomeProjects;\n\n Hero --> Carousel;\n HomeProjects --> Card;\n ProjectsPage --> Data;\n \n Carousel --> Data;\n Card --> Data;\n\nThis diagram shows how `App.tsx` routes to the `Home` and `Projects` pages. The `Home` page uses the `Hero` and `HomeProjects` widgets, which in turn use the `ProjectsCarousel` and `ProjectCard` entities, respectively. The `ProjectsPage` consumes the project data directly to build its list. All project-related UI components ultimately source their information from `data.ts`.\n\n*Sources: [src/app/App.tsx:1-91](https://github.com/BonyKoshy/Portfolio/blob/HEAD/src/app/App.tsx#L1-L91), [src/pages/Home.tsx:1-29](https://github.com/BonyKoshy/Portfolio/blob/HEAD/src/pages/Home.tsx#L1-L29), [src/widgets/Hero/Hero.tsx](https://github.com/BonyKoshy/Portfolio/blob/HEAD/src/widgets/Hero/Hero.tsx), [src/widgets/HomeProjectsSection/HomeProjectsSection.tsx](https://github.com/BonyKoshy/Portfolio/blob/HEAD/src/widgets/HomeProjectsSection/HomeProjectsSection.tsx)*\n\nA typical user flow from the home page to the full projects list is shown below.\n\nmermaid\nsequenceDiagram\n participant User\n participant HomePage as "Home Page"\n participant HomeProjects as "HomeProjectsSection"\n participant ProjectsPage as "Projects Page"\n\n User->>HomePage: Visits site\n activate HomePage\n Note over HomePage: Displays Hero and HomeProjectsSection\n HomePage->>HomeProjects: Renders featured projects\n activate HomeProjects\n HomeProjects-->>HomePage: Shows 2 project cards\n deactivate HomeProjects\n \n User->>HomePage: Clicks "View all projects"\n HomePage->>ProjectsPage: Navigates to /projects\n deactivate HomePage\n activate ProjectsPage\n Note over ProjectsPage: Page fetches projectsData and renders all project cards.\n ProjectsPage-->>User: Displays full list of projects\n deactivate ProjectsPage\n```\nSources: src/widgets/HomeProjectsSection/HomeProjectsSection.tsx:28-35, src/app/App.tsx:44-49\n\n## Conclusion\n\nThe project showcase system is a well-architected feature that effectively utilizes the Feature-Sliced Design methodology. By separating data models, reusable UI entities, and page-specific widgets, the system remains scalable and maintainable. It provides multiple views of project data—a carousel, a featured grid, and a comprehensive list—to engage users at different points in their journey through the portfolio. The static data approach is simple and performant for the current scope of the project.\n\nSources: README.md:25, src/entities/project/model/data.ts, src/pages/Projects.tsx"}
]