Relevant source files

The following files were used as context for generating this wiki page: - [src/pages/Projects.tsx](https://github.com/BonyKoshy/Portfolio/blob/main/src/pages/Projects.tsx) - [src/entities/project/ui/ProjectsCarousel.tsx](https://github.com/BonyKoshy/Portfolio/blob/main/src/entities/project/ui/ProjectsCarousel.tsx) - [src/entities/project/ui/ProjectCard.tsx](https://github.com/BonyKoshy/Portfolio/blob/main/src/entities/project/ui/ProjectCard.tsx) - [src/entities/project/model/data.ts](https://github.com/BonyKoshy/Portfolio/blob/main/src/entities/project/model/data.ts) - [src/entities/project/model/types.ts](https://github.com/BonyKoshy/Portfolio/blob/main/src/entities/project/model/types.ts) - [src/widgets/HomeProjectsSection/HomeProjectsSection.tsx](https://github.com/BonyKoshy/Portfolio/blob/main/src/widgets/HomeProjectsSection/HomeProjectsSection.tsx) - [src/app/App.tsx](https://github.com/BonyKoshy/Portfolio/blob/main/src/app/App.tsx) - [src/widgets/Hero/Hero.tsx](https://github.com/BonyKoshy/Portfolio/blob/main/src/widgets/Hero/Hero.tsx)

# Projects Page 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. ```mermaid classDiagram direction LR class ProjectCardData { +title: string +category: string +year: number +src: string +githubLink: string +liveLink: string +linkType: string +content: Content } class Content { +imageSrc: string +description: string +tech: string[] } ProjectCardData "1" -- "1" Content : contains ``` *Sources: [src/entities/project/model/types.ts:1-13]()* 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: ```mermaid flowchart TD A[User navigates to /projects] --> B{Projects Page Renders}; B --> C[Import projectsData]; C --> D{Map over projectsData array}; D --> E[For each project...]; E --> F[Render horizontal card container]; F --> G[Display Image]; F --> H[Display Details: Year, Category, Title, Description]; F --> I[Display All Tech Stack Chips]; F --> J[Render Action Buttons]; J --> K{"liveLink exists & != '#'"}; K -- Yes --> L[Show 'Live Demo' Button]; K -- No --> M; J --> N{githubLink exists}; N -- Yes --> O[Show 'Source Code' Button]; N -- No --> M; L & O & M --> P[End of card]; E -- loops --> E; ``` *Sources: [src/pages/Projects.tsx:1-140]()* **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. ```mermaid graph TD subgraph App Routing App[App.tsx] end subgraph Pages Home[pages/Home.tsx] ProjectsPage[pages/Projects.tsx] end subgraph Widgets Hero[widgets/Hero.tsx] HomeProjects[widgets/HomeProjectsSection.tsx] end subgraph Entities Carousel[entities/project/ui/ProjectsCarousel.tsx] Card[entities/project/ui/ProjectCard.tsx] end subgraph Data Data[entities/project/model/data.ts] end App --> Home; App --> ProjectsPage; Home --> Hero; Home --> HomeProjects; Hero --> Carousel; HomeProjects --> Card; ProjectsPage --> Data; Carousel --> Data; Card --> Data; ``` 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. ```mermaid sequenceDiagram participant User participant HomePage as "Home Page" participant HomeProjects as "HomeProjectsSection" participant ProjectsPage as "Projects Page" User->>HomePage: Visits site activate HomePage Note over HomePage: Displays Hero and HomeProjectsSection HomePage->>HomeProjects: Renders featured projects activate HomeProjects HomeProjects-->>HomePage: Shows 2 project cards deactivate HomeProjects User->>HomePage: Clicks "View all projects" HomePage->>ProjectsPage: Navigates to /projects deactivate HomePage activate ProjectsPage Note over ProjectsPage: Page fetches projectsData and renders all project cards. ProjectsPage-->>User: Displays full list of projects deactivate ProjectsPage ``` *Sources: [src/widgets/HomeProjectsSection/HomeProjectsSection.tsx:28-35](), [src/app/App.tsx:44-49]()* ## 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.tsx]()*```json [ {"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 `

` 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 `

` 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 `

` block."}, {"box_content": "

Relevant source files

\nThe following files were used as context for generating this wiki page:\n\n- [src/pages/Projects.tsx](https://github.com/BonyKoshy/Portfolio/blob/main/src/pages/Projects.tsx)\n- [src/entities/project/ui/ProjectsCarousel.tsx](https://github.com/BonyKoshy/Portfolio/blob/main/src/entities/project/ui/ProjectsCarousel.tsx)\n- [src/entities/project/ui/ProjectCard.tsx](https://github.com/BonyKoshy/Portfolio/blob/main/src/entities/project/ui/ProjectCard.tsx)\n- [src/entities/project/model/data.ts](https://github.com/BonyKoshy/Portfolio/blob/main/src/entities/project/model/data.ts)\n- [src/entities/project/model/types.ts](https://github.com/BonyKoshy/Portfolio/blob/main/src/entities/project/model/types.ts)\n- [src/widgets/HomeProjectsSection/HomeProjectsSection.tsx](https://github.com/BonyKoshy/Portfolio/blob/main/src/widgets/HomeProjectsSection/HomeProjectsSection.tsx)\n- [src/app/App.tsx](https://github.com/BonyKoshy/Portfolio/blob/main/src/app/App.tsx)\n- [src/widgets/Hero/Hero.tsx](https://github.com/BonyKoshy/Portfolio/blob/main/src/widgets/Hero/Hero.tsx)\n\n

\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](), [src/entities/project/model/data.ts](), [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](), [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.\n```mermaid\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]()*\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]()*\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]()*\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]()*\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](), [src/widgets/Hero/Hero.tsx:288-332]()*\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:\n```mermaid\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]()*\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]()*\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](), [src/pages/Home.tsx:18-20]()*\n\n## Component and Navigation Flow\n\nThe following diagram illustrates the relationship between the main application, pages, widgets, and project entities.\n\n```mermaid\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](), [src/pages/Home.tsx:1-29](), [src/widgets/Hero/Hero.tsx](), [src/widgets/HomeProjectsSection/HomeProjectsSection.tsx]()*\n\nA typical user flow from the home page to the full projects list is shown below.\n\n```mermaid\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```\n*Sources: [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\n*Sources: [README.md:25](), [src/entities/project/model/data.ts](), [src/pages/Projects.tsx]()*"} ] ```