Content Configuration

Relevant source files

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

• src/shared/config/content.ts
• src/entities/project/model/data.ts
• src/widgets/Hero/Hero.tsx
• src/widgets/Footer/Footer.tsx
• src/widgets/HomeBentoSection/HomeBentoSection.tsx
• src/widgets/Navbar/Navbar.tsx
• src/pages/Projects.tsx
• src/widgets/HomeProjectsSection/HomeProjectsSection.tsx

Introduction

The portfolio application employs a centralized content configuration strategy to manage static text, labels, and structured data. This approach decouples the content from the UI components, promoting maintainability, consistency, and ease of updates. The primary sources for this configuration are two key files: src/shared/config/content.ts, which holds most of the site's textual content, and src/entities/project/model/data.ts, which contains a structured array of project details.

This system allows developers to modify UI text and project information without altering the component logic. Components import the necessary content objects and render the data, ensuring a clean separation of concerns as advocated by the Feature-Sliced Design (FSD) architecture used in the project.

Core Content Sources

The content is primarily managed in two locations within the src directory, following FSD principles.

1. homeContent Object

Located in the shared layer, this object is a comprehensive collection of static text used across various widgets and pages. It acts as a single source of truth for labels, titles, descriptions, and CTAs.

Sources: src/shared/config/content.ts

The diagram below illustrates the high-level structure of the homeContent object and the UI sections it populates.

Structure of homeContent

The homeContent object is organized into nested objects, each corresponding to a specific UI section.

hero

This section contains all text for the main hero section on the homepage.

Key	Description	Example Value
eyebrow	Small text above the main headline.	"Creative Developer"
headline	The main H1 heading, split into two parts.	{ part1: "...", part2: "..." }
subtext	The paragraph below the headline, with dynamic parts.	{ prefix: "I am", name: "Bony Koshy", ... }
cta	Call-to-action button labels.	{ primary: "View Selected Work", ... }
tooltips	Content for tooltips on the hero page.	{ profile: { alt: "Profile", ... } }
cards	Text for the interactive cards in the hero section.	{ tech: { backgroundTitle: "TECH", ... } }

Sources: src/shared/config/content.ts:2-49, src/widgets/Hero/Hero.tsx:132

bento

This section provides content for the different cells within the HomeBentoSection grid.

Key	Description	Example Value
profile	Content for the profile bento box.	{ title: "Profile", description: "...", cta: "About Me" }
accenture	Content for the Accenture bento box.	{ title: "Accenture", description: "...", cta: "Experience" }
resume	Content for the resume bento box.	{ title: "Resume", description: "...", cta: "CV" }
skills	Content for the skills bento box.	{ title: "Skills", description: "...", cta: "Deep Dive" }
languages	Content for the languages bento box.	{ title: "Languages", description: "...", cta: "Get in touch" }
certificates	Content for the certificates bento box.	{ title: "Certificates", description: "...", cta: "View All" }

Sources: src/shared/config/content.ts:50-84, src/widgets/HomeBentoSection/HomeBentoSection.tsx:18

Other Sections

The homeContent object also defines content for contact, footer, projects, and navbar sections, following a similar key-value structure.

Section	Purpose
contact	Text for the main contact section, including title, description, and email.
footer	Labels for footer links, section titles, and copyright text.
projects	Titles and CTAs for project-related sections.
navbar	Link labels and CTA text for the main navigation bar.

Sources: src/shared/config/content.ts:85-117

2. projectsData Array

Located in the entities layer, this array is the data source for all project information displayed throughout the portfolio, including the homepage's featured projects and the main projects page.

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

Each element in the projectsData array is an object conforming to the ProjectCardData type.

The diagram below shows the entity relationship for a single project.

ProjectCardData Structure

Field	Type	Description
title	string	The project's title.
category	string	The category of the project (e.g., "System Architecture").
year	number	The year the project was completed.
src	string	The path to the project's preview image.
githubLink	string	The URL to the project's GitHub repository.
liveLink	string	The URL to the live demo. Can be "#" if not available.
linkType	string	Determines which link is prioritized (e.g., "link" or "github").
content	object	An object containing detailed information.
content.imageSrc	string	Path to the image used in detailed views.
content.description	string	A longer description of the project.
content.tech	string[]	An array of technologies used in the project.

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

Consumption Pattern

Components import the centralized content objects and use their properties to render text and data. This pattern is consistent across the application.

The following sequence diagram demonstrates how the Footer component retrieves and displays the copyright text.

Example Implementation

The HomeProjectsSection widget imports both homeContent and projectsData to build its UI.

// src/widgets/HomeProjectsSection/HomeProjectsSection.tsx

import { projectsData } from "@/entities/project/model/data";
import { homeContent } from "@/shared/config/content";

export const HomeProjectsSection = () => {
  // Use first 2 projects
  const featuredProjects = projectsData.slice(0, 2);

  return (
    // ...
    <h2 className="text-4xl font-bold text-text-primary m-0">
      {homeContent.projects.title}
    </h2>
    // ...
    <p className="text-lg text-text-secondary font-medium m-0">
      {homeContent.projects.subtitle}
    </p>
    // ...
    {featuredProjects.map((project) => (
      <ProjectCard key={project.title} project={project} />
    ))}
    // ...
  );
};

Sources: src/widgets/HomeProjectsSection/HomeProjectsSection.tsx:3-25

This snippet shows the widget importing projectsData to select featured projects and homeContent to display the section's title and subtitle. This demonstrates the clear separation between data/content and the component's rendering logic.

Conclusion

The content configuration system is a cornerstone of the portfolio's architecture. By centralizing UI text in src/shared/config/content.ts and project data in src/entities/project/model/data.ts, the application achieves a high degree of maintainability and scalability. This separation of concerns simplifies content updates, ensures consistency across the user interface, and aligns with the modular principles of Feature-Sliced Design. Any future changes to text or project details can be made in these central files with minimal impact on the React components themselves.