Home Page
Relevant source files
The following files were used as context for generating this wiki page:The Home page serves as the primary entry point and central hub for the portfolio application. It is designed to provide a comprehensive overview of the developer's profile, skills, and work through a series of distinct, vertically-scrolling sections. The page is structured to guide the user through a narrative, starting with a high-impact introduction and progressively revealing more detailed information.
For performance, the Home page component is lazy-loaded within the application's main router. This ensures that the code for the home page is only fetched and parsed when the user navigates to the root URL.
Sources: src/pages/Home.tsx, src/app/App.tsx:11, src/app/App.tsx:37-42
Page Structure and Composition
The Home page is a container component that assembles several independent "widget" components into a single, cohesive view. Each widget occupies a full-screen or significant portion of the viewport and is rendered sequentially within a <main> HTML element. This element has an id of main-content, which is used by the "Skip to Main" accessibility feature in the Navbar.
Sources: src/pages/Home.tsx:7-29, src/widgets/Navbar/Navbar.tsx:23-29
The following diagram illustrates the component hierarchy of the Home page:
Sources: src/pages/Home.tsx:7-29, src/app/App.tsx:37-42
The page is composed of the following four sections:
- Hero Section: The initial view that introduces the developer.
- Bento Section: A grid-based layout showcasing various aspects of the developer's profile.
- Projects Section: A preview of featured projects.
- Contact Section: A call-to-action to get in touch.
Sections
Hero Section
The Hero widget is the first component a user sees. It is designed to be a high-impact introduction, combining bold typography, interactive elements, and animations. It is implemented in src/widgets/Hero/Hero.tsx and occupies the full height of the screen.
*Sources: src/pages/Home.tsx:12-14, src/widgets/Hero/Hero.tsx
Layout and Content
On large screens, the Hero section uses a two-column layout:
- Left Column: Contains the primary textual content, including a logo, an animated "Creative Developer" eyebrow text, the main headline, and a sub-headline. The sub-headline features interactive tooltips over the developer's name and company, which reveal
ProfileTooltipCardandCompanyTooltipCardrespectively. Below this are two primary call-to-action buttons: "View Selected Work" (links to/projects) and "Contact Me" (links to/contact). - Right Column: Features the
CardSwapcomponent, an interactive element that automatically cycles through three distinct cards: "Technologies," "Accenture," and "Selected Work." These cards are clickable and navigate to corresponding pages or sections.
All static text content is sourced from the homeContent.hero object in src/shared/config/content.ts.
Sources: src/widgets/Hero/Hero.tsx:49-141, src/shared/config/content.ts:2-49
The following diagram shows the structure of the Hero widget.
Sources: src/widgets/Hero/Hero.tsx:49-333
Home Bento Section
Following the Hero, the HomeBentoSection uses a BentoGrid to present a variety of information in a compact and visually appealing manner. This section is designed to give a quick, at-a-glance overview of the developer's profile, skills, and other key information.
*Sources: src/pages/Home.tsx:17-19, src/widgets/HomeBentoSection/HomeBentoSection.tsx
Grid Items
The bento grid is composed of several BentoCard components, each configured with different content, styles, and background elements. The configuration for these cards is defined in an array within HomeBentoSection.tsx, with text content pulled from homeContent.bento.
Sources: src/widgets/HomeBentoSection/HomeBentoSection.tsx:16-160, src/shared/config/content.ts:50-89
The table below summarizes the items in the bento grid:
| Card Title | Description | CTA Text | Grid Position (Desktop) | Background Content |
|---|---|---|---|---|
Profile | Creative Full-stack Developer. | About Me | col-span-2, row-span-2 | Profile Image |
Accenture | Software Engineer | Experience | col-span-2, row-start-3 | Accenture brand color gradient |
Resume | Download CV. | CV | col-span-2, row-start-4 | Blue color gradient |
Skills | Curated stack for precision. | Deep Dive | col-span-4, row-span-2, col-start-3 | LogoLoop of tech icons from techStack.tsx |
Languages | English, Hindi, Malayalam. | Get in touch | col-span-2, row-span-2, col-start-3, row-start-3 | DottedMap component |
Certificates | Industry verified learning. | View All | col-span-2, row-span-2, col-start-5, row-start-3 | Certificate provider logos (AWS, Google, etc.) |
Sources: src/widgets/HomeBentoSection/HomeBentoSection.tsx:16-160, src/entities/technology/model/techStack.tsx
Home Projects Section
The HomeProjectsSection serves as a preview of the developer's work. It displays a curated selection of projects to entice users to visit the full projects page.
*Sources: src/pages/Home.tsx:22-24, src/widgets/HomeProjectsSection/HomeProjectsSection.tsx
Featured Projects
This section fetches the first two projects from the projectsData array defined in src/entities/project/model/data.ts. Each project is rendered using the shared ProjectCard component, which displays the project's image, year, title, a short description, and top technologies. The section header includes a title, a subtitle, and a "View all projects" link that navigates to the /projects route.
Sources: src/widgets/HomeProjectsSection/HomeProjectsSection.tsx:9-10, src/widgets/HomeProjectsSection/HomeProjectsSection.tsx:40-42, src/entities/project/model/data.ts
Contact Section
The ContactSection is the final major component on the Home page, acting as a direct call-to-action for visitors.
*Sources: src/pages/Home.tsx:27-29, src/widgets/ContactSection/ContactSection.tsx
Features
The section contains:
- A large heading (
Ready to start?) and a paragraph encouraging users to reach out. - A primary "Get in Touch" button that links to the dedicated
/contactpage. - A secondary button that allows users to copy the developer's email address (
bonykoshy@gmail.com) to their clipboard. - On larger screens, a
CalendarUI component is displayed to the right of the text content.
All text is sourced from homeContent.contact in src/shared/config/content.ts.
Sources: src/widgets/ContactSection/ContactSection.tsx:48-81, src/shared/config/content.ts:90-95
Conclusion
The Home page is a strategically designed, multi-section landing page that effectively introduces the developer and their work. By composing the page from distinct, reusable widgets (Hero, HomeBentoSection, HomeProjectsSection, ContactSection), the architecture adheres to the principles of Feature-Sliced Design, promoting modularity and maintainability. It provides a clear and engaging user journey, from a high-level introduction to specific examples of work, culminating in a clear call to action.