Hero Widget
Relevant source files
The following files were used as context for generating this wiki page:The Hero widget is the primary "above-the-fold" component for the application's home page. It serves as the main introduction, presenting the portfolio owner's identity, role, and a high-level value proposition. It is designed to be visually engaging and interactive, featuring animated text, tooltips, and a dynamic card-swapping element to guide users toward key sections of the portfolio such as Projects and About.
The widget is implemented as a full-height section on the Home page, ensuring it occupies the entire viewport on initial load. Its content is almost entirely driven by a centralized configuration object, making it easily updatable.
Sources: src/widgets/Hero/Hero.tsx, src/pages/Home.tsx:13-15
Architecture and Structure
The Hero widget is built with a responsive, two-column grid layout on larger screens. The left column contains textual information and primary calls-to-action, while the right column features an interactive CardSwap component.
Sources: src/widgets/Hero/Hero.tsx:53-55
This diagram illustrates the high-level component structure of the Hero widget.
Content Configuration
All static text within the Hero widget is sourced from the homeContent.hero object located in src/shared/config/content.ts. This decouples the content from the component's structure, allowing for easy updates without code changes in the widget itself.
homeContent.hero Property | UI Element | Description |
|---|---|---|
eyebrow | Eyebrow Text | The "Creative Developer" text with a live indicator. |
headline | Main Headline | The two-part headline. |
subtext | Sub-headline | The descriptive paragraph with name and company. |
cta | Action Buttons | Text for "View Selected Work" and "Contact Me" buttons. |
tooltips | Tooltip Content | Alt text and roles for tooltips (though content is from entity components). |
cards | Interactive Card Text | Titles, subtitles, and descriptions for the three swappable cards. |
Sources: src/shared/config/content.ts:3-56, src/widgets/Hero/Hero.tsx
Left Column: Informational Content
The left column (lg:col-span-7) is dedicated to presenting the core textual information.
Sources: src/widgets/Hero/Hero.tsx:57-164
Key Elements
- Logo: Displays the site logo using the shared
Logocomponent.
Sources: src/widgets/Hero/Hero.tsx:60-63 - Eyebrow: A small, uppercase text element (
Creative Developer) preceded by an animated "live" indicator. It uses theShinyTextcomponent for a subtle animation effect.
Sources: src/widgets/Hero/Hero.tsx:66-79 - Headline: The main
<h1>tag, split into two lines for stylistic emphasis.
Sources: src/widgets/Hero/Hero.tsx:82-89 - Subtext with Tooltips: A descriptive paragraph that includes the owner's name and company. These two elements are wrapped in the shared
Tooltipcomponent, which reveals aProfileTooltipCardandCompanyTooltipCardrespectively on hover. This provides additional context without cluttering the UI.
Sources: src/widgets/Hero/Hero.tsx:92-126, src/shared/ui/Tooltip/Tooltip.tsx - Call-to-Action (CTA) Buttons: Two primary buttons:
- Primary CTA: A
<Link>styled as a button that navigates the user to the/projectspage. - Secondary CTA: A
<Link>with an "underline" variant that navigates to the/contactpage.
Sources: src/widgets/Hero/Hero.tsx:129-150
- Primary CTA: A
Right Column: Interactive Cards
The right column (lg:col-span-5) is hidden on smaller screens and contains the CardSwap component, which creates a visually appealing, animated stack of interactive cards.
Sources: src/widgets/Hero/Hero.tsx:153-373
CardSwap Component
This component manages the display and animation of three stacked Card elements. It automatically cycles through the cards with a configurable delay and skew effect. Each card is interactive, triggering navigation upon click.
Sources: src/widgets/Hero/Hero.tsx:157-170
Interactive Cards
There are three distinct cards, each designed to navigate the user to a different part of the application. Navigation is handled by the useNavigate hook from react-router-dom.
| Card | Title | Description | Navigation Target |
|---|---|---|---|
| Tech | Full Stack Developer | Displays core technology icons (Python, React, etc.) and links to the skills section. | /about#skills |
| Work | Software Engineer | Highlights the current role at Accenture and links to the experience section. | /about#experience |
| Build | Projects | Contains a ProjectsCarousel entity to showcase selected work and links to the main projects page. | /projects |
Sources: src/widgets/Hero/Hero.tsx:171-372, src/shared/config/content.ts:25-56
User Interaction Flow
The following diagram shows the sequence of events when a user clicks on one of the interactive cards.
Keyboard Accessibility
The cards are also accessible via keyboard. The handleCardKeyDown function ensures that pressing "Enter" or "Space" on a focused card triggers the same navigation as a click.
// src/widgets/Hero/Hero.tsx:32-37
const handleCardKeyDown = (e: React.KeyboardEvent, path: string) => {
if (e.key === "Enter" || e.key === " ") {
e.preventDefault();
navigate(path);
}
};
Sources: src/widgets/Hero/Hero.tsx:32-37, src/widgets/Hero/Hero.tsx:181
Summary
The Hero widget is a complex and highly interactive component that serves as the main entry point to the portfolio. It effectively combines static information with dynamic, interactive elements to introduce the user and guide them to key content areas. Its reliance on a central content configuration file and shared UI components (Tooltip, CardSwap) demonstrates a commitment to the Feature-Sliced Design (FSD) principles of modularity and reusability.
Sources: README.md:26-27, src/widgets/Hero/Hero.tsx