Home Bento Section Widget

Relevant source files

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

• src/widgets/HomeBentoSection/HomeBentoSection.tsx
• src/shared/ui/BentoGrid/BentoGrid.tsx
• src/pages/Home.tsx
• src/shared/config/content.ts
• src/entities/technology/model/techStack.tsx
• src/shared/ui/skeletons/HomeSkeleton.tsx

The HomeBentoSection is a primary widget displayed on the application's home page. It presents a collection of interactive cards in a responsive "bento box" style grid. This widget serves as a high-level summary of the portfolio, offering quick navigation to key sections like "About Me", "Skills", "Resume", and more.

The widget is composed of the reusable BentoGrid and BentoCard UI components, which handle the layout and individual card functionality, respectively. The content for each card is centrally managed in the homeContent configuration file, promoting separation of concerns and ease of maintenance. The section is integrated directly into the Home page component.

Sources: src/widgets/HomeBentoSection/HomeBentoSection.tsx, src/pages/Home.tsx:16-18

Architecture and Component Hierarchy

The HomeBentoSection widget acts as a container that orchestrates the layout and content of multiple BentoCard components within a BentoGrid. The Home page renders the HomeBentoSection as one of its main content sections.

The following diagram illustrates the component hierarchy:

This diagram shows that the Home page includes the HomeBentoSection, which in turn uses BentoGrid to wrap multiple BentoCard instances generated from a features array.

Sources: src/pages/Home.tsx:18, src/widgets/HomeBentoSection/HomeBentoSection.tsx:160-163, src/shared/ui/BentoGrid/BentoGrid.tsx:11-22

Data Flow

The content displayed within the HomeBentoSection is not hardcoded. Instead, it is dynamically sourced from the homeContent.bento object located in the shared configuration. This approach decouples the presentation layer from the content itself.

This diagram illustrates how content flows from the content.ts configuration file into the HomeBentoSection widget, which then uses this data to configure and render each BentoCard.

Sources: src/widgets/HomeBentoSection/HomeBentoSection.tsx:14, src/shared/config/content.ts:31-67

Layout and Grid System

The HomeBentoSection utilizes a responsive CSS Grid layout managed by the BentoGrid component. The grid is defined with specific classes that adapt the layout for different screen sizes.

• Mobile: A single column with 10 rows (grid-cols-1 grid-rows-10).
• Desktop (md breakpoint and up): A 6-column, 4-row grid (md:grid-cols-6 md:grid-rows-4).

Each BentoCard is placed within this grid using Tailwind CSS col-span and row-span utility classes, which are assigned via the className property in the features array.

Sources: src/widgets/HomeBentoSection/HomeBentoSection.tsx:160

Loading State

While the HomeBentoSection is loading, a skeleton UI is displayed to maintain layout consistency and improve perceived performance. The HomeSkeleton component provides a matching grid structure with placeholder blocks for each bento card.

// src/shared/ui/skeletons/HomeSkeleton.tsx:32-49
<section /* ... */>
  <div className="grid grid-cols-1 grid-rows-10 md:grid-cols-6 md:grid-rows-4 h-auto md:min-h-175 md:h-[calc(100vh-12rem)] md:max-h-225 gap-4 w-full">
    {/* 1. Profile (2x2) */}
    <div className="row-span-2 md:col-span-2 md:row-span-2 bg-bg-subtle rounded-3xl border border-border-default/50"></div>

    {/* 3. Skills (4x2 on desktop, stacks on mobile) */}
    <div className="row-span-2 row-start-5 md:col-span-4 md:row-span-2 md:col-start-3 md:row-start-1 bg-bg-subtle rounded-3xl border border-border-default/50"></div>

    {/* ... other skeleton blocks */}
  </div>
</section>

Sources: src/shared/ui/skeletons/HomeSkeleton.tsx:32-49

Bento Card Configuration

The HomeBentoSection defines a features array that holds the configuration for each of the six BentoCard instances. Each object in this array corresponds to one card and specifies its content, icon, link, layout class, and background element.

Card Name	Icon	Description Source	Grid Class (className)	Special Background
Profile	User	homeContent.bento.profile	row-span-2 md:col-span-2 md:row-span-2	Profile image (/profile-image.webp)
Accenture	SiAccenture	homeContent.bento.accenture	row-start-3 md:col-span-2 md:row-start-3	Animated gradient with brand color hint
Resume	FileText	homeContent.bento.resume	row-start-4 md:col-span-2 md:row-start-4	Animated gradient with blue color hint
Skills	Code	homeContent.bento.skills	row-span-2 ... md:col-start-3 md:row-start-1	LogoLoop component with techLogos
Languages	GlobeIcon	homeContent.bento.languages	row-span-2 ... md:col-start-3 md:row-start-3	DottedMap component
Certificates	FileBadge	homeContent.bento.certificates	row-span-2 ... md:col-start-5 md:row-start-3	Grid of certificate images (/certs/*.webp)

Sources: src/widgets/HomeBentoSection/HomeBentoSection.tsx:16-158, src/shared/config/content.ts:32-67, src/entities/technology/model/techStack.tsx:1-48

Reusable UI Components

The section is built upon two key reusable components from src/shared/ui/BentoGrid.

BentoGrid Component

A simple wrapper component that establishes the grid container. It accepts a className prop to allow for customization of grid columns, rows, and gaps.

Sources: src/shared/ui/BentoGrid/BentoGrid.tsx:11-22

BentoCard Component

The BentoCard is a highly interactive and configurable component responsible for rendering individual items in the grid. It handles navigation, styling, and user interactions.

Props

Prop	Type	Default	Description
name	string	-	The main title of the card.
className	string	-	CSS classes for grid positioning.
background	ReactNode	-	A React node to render as the card's background.
Icon	ElementType	-	The icon component to display.
description	string	-	The descriptive text for the card.
href	string	-	The navigation link (internal or external).
cta	string	-	The text for the call-to-action button.
minimalCTA	boolean	false	If true, renders a smaller, icon-only CTA.
ctaLayout	"bottom" | "side"	"bottom"	Determines the layout of the CTA on hover for desktop.
spotlightColor	string	rgba(255, 255, 255, 0.15)	The color of the radial gradient spotlight effect on hover.

Sources: src/shared/ui/BentoGrid/BentoGrid.tsx:34-46

Interactivity

The BentoCard includes several interactive features to enhance user experience:

1. Spotlight Effect: On mouse hover, a radial gradient follows the cursor's position, creating a "spotlight" effect. This is achieved using onMouseMove and state updates for position and opacity.
2. Hover-Reveal CTA: On desktop, the call-to-action button is hidden by default and revealed on hover with a transition. The layout can be at the bottom or to the side.
3. Permanent CTA for Touch: On touch devices (pointer-coarse), a permanent, minimal CTA icon is shown in the bottom-right corner, ensuring affordance without hover capabilities.
4. Navigation: The entire card acts as a link. It intelligently uses a standard <a> tag for external links (.pdf, http) and a react-router-dom Link component for internal navigation.

The following diagram shows the sequence of events during a user interaction with a BentoCard.