Welcome

Relevant source files

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

• README.md
• package.json
• src/app/App.tsx
• src/pages/Home.tsx
• src/shared/config/content.ts
• src/app/index.css
• netlify.toml
• src/entities/project/model/data.ts
• scripts/optimize-images.js

This document provides a technical overview of the "2026 Gold Standard Portfolio" project. The project serves as a proof-of-concept for modern web system architecture, emphasizing performance, scalability, and maintainability. It is built using React 19, Vite 7, and adheres to the Feature-Sliced Design (FSD) methodology to create a decoupled and resilient application.

The core philosophy shifts from "building components" to "architecting systems." Key aspects include a hybrid motion engine using GSAP and Framer Motion, full Progressive Web App (PWA) capabilities for offline resilience, and a theming engine designed to prevent "flash of incorrect theme" (FOUC). The architecture is designed to enforce unidirectional data flow and prevent dependency issues as the application scales.

Sources: README.md:5-20

Project Architecture

The project's structure is based on the Feature-Sliced Design (FSD) methodology. This architectural pattern organizes the codebase into distinct layers, each with a specific responsibility, to enforce a unidirectional data flow and minimize dependencies between different parts of the application.

Sources: README.md:29-30

Feature-Sliced Design (FSD) Layers

The codebase is organized into the following layers, where higher layers can depend on lower layers, but not vice-versa:

• app: The root layer, responsible for initializing the application, providers, and routing.
• pages: Compositions of widgets and features to form complete application pages.
• widgets: Compositions of features and entities that form standalone UI blocks (e.g., Navbar, Footer).
• features: Business logic and user interactions (e.g., theme toggling).
• shared: Reusable code with no business logic, such as UI components, configuration, and utilities.

The diagram below illustrates the dependency flow between these layers.

Sources: README.md:29-30

Application Bootstrap and Routing

The application's entry point is index.html, which loads the main React script. The core of the application is the App component, which sets up global providers like ThemeProvider and defines the routing structure using react-router-dom. Pages are lazy-loaded using React.lazy to improve initial load performance.

Sources: index.html:33, src/app/App.tsx:9-52

Core Technologies & Key Features

The project is built with a selection of modern technologies to achieve its goals of performance and scalability.

Key Features

Feature	Description	Source File
Feature-Sliced Design	Architecture organized into layers (app, pages, widgets, etc.) to enforce unidirectional data flow.	README.md
Bleeding Edge Performance	Powered by React 19 and Vite 7.	README.md
Hybrid Motion Engine	Uses GSAP for scroll choreography and Framer Motion for declarative transitions and micro-interactions.	README.md
PWA & Offline Resilience	Fully installable with advanced caching strategies to function in offline environments.	README.md
Headless Accessibility	Built on Radix UI primitives for 100% keyboard navigation and screen reader support.	README.md
Dark Mode Intelligence	A persistent, system-aware theming engine that prevents "flash of incorrect theme" (FOUC).	README.md

Sources: README.md:28-42

Core Dependencies

The following table lists the primary dependencies and their versions as defined in package.json.

Dependency	Version	Purpose
react	^19.1.2	Core UI library
vite	^7.0.4	Build tool and development server
gsap	^3.14.2	Animation library for complex timelines
framer-motion	^12.23.12	Animation library for UI interactions
@radix-ui/*	^1.x	Headless UI components for accessibility
tailwindcss	^4.1.18	Utility-first CSS framework
react-router-dom	^7.12.0	Client-side routing

Sources: package.json:11-30

Application Structure

The application is composed of several pages, which are themselves constructed from reusable widgets and entities.

Page Composition

The Home page serves as a primary example of page composition. It aggregates several distinct widgets to create the main landing experience.

Sources: src/pages/Home.tsx:1-5

Content Management

All static text content for the UI is centralized in a single configuration file. This approach decouples content from the component logic, making it easier to manage and update text across the application. Components import the homeContent object to access the required strings.

Sources: src/shared/config/content.ts:1-100

For example, the Hero widget consumes content directly from this file:

// src/shared/config/content.ts
export const homeContent = {
  hero: {
    eyebrow: "Creative Developer",
    headline: {
      part1: "Engineering the fabric of ",
      part2: "the modern web.",
    },
    // ... more content
  },
};

Sources: src/shared/config/content.ts:1-9

// src/widgets/Hero/Hero.tsx
import { homeContent } from "@/shared/config/content";

// ...
<ShinyText text={homeContent.hero.eyebrow} />
// ...
<h1 /* ... */>
  <span>{homeContent.hero.headline.part1}</span>
  <span>{homeContent.hero.headline.part2}</span>
</h1>

Sources: src/widgets/Hero/Hero.tsx:6,100,105-108

Project Data Model

Project data is stored in an array of objects within src/entities/project/model/data.ts. This file acts as a simple, static database for the portfolio projects displayed throughout the site.

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 project's preview image.
githubLink	string	The URL to the project's GitHub repository.
liveLink	string	The URL to the live deployment of the project.
linkType	"link" | "github"	Determines the primary call-to-action link type.
content	{ imageSrc, description, tech }	An object containing detailed information for the project page.

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

Theming and Styling

The application features a dual-theme system (light and dark) managed by CSS variables. A ThemeProvider component wraps the application and applies a data-theme attribute to the <html> element, which toggles the active set of variables.

The theme variables are defined in src/app/index.css.

/* src/app/index.css */
/* Light Theme Variables */
html[data-theme="light"] {
  /* Backgrounds */
  --bg-default: #ffffff;
  --bg-paper: #f4f4f5;
  /* Text / Foreground */
  --fg-primary: #18181b;
  /* ... */
}

/* Dark Theme Variables */
html[data-theme="dark"] {
  /* Backgrounds */
  --bg-default: #121212;
  --bg-paper: #1e1e20;
  /* Text / Foreground */
  --fg-primary: #f4f4f5;
  /* ... */
}

Sources: src/app/index.css:12-58

This system allows for seamless theme transitions and ensures that styles are consistently applied across all components.

Sources: src/app/App.tsx:8,18, src/app/index.css:12-58

Build and Deployment

The project uses Vite for the development server and build process, and is configured for deployment on Netlify.

Build Scripts

The package.json file defines the core scripts for building and development.

Script	Command	Description
dev	vite	Starts the Vite development server.
build	vite build	Creates a production-ready build in the dist/ directory.
optimize-images	node scripts/optimize-images.js	A custom script to convert and compress images to WebP format before build.

Sources: package.json:6-10, scripts/optimize-images.js

Deployment Configuration

Deployment is managed via netlify.toml. This file configures the build command, publish directory, and server-side rules like redirects and security headers.

# netlify.toml
[build]
  command = "npm run build"
  publish = "dist"

[[redirects]]
  from = "/*"
  to = "/index.html"
  status = 200

Sources: netlify.toml:1-8

The configuration also enforces several important security headers for all responses:

Header	Value	Purpose
X-Frame-Options	DENY	Prevents clickjacking attacks.
X-XSS-Protection	1; mode=block	Enables the browser's built-in XSS filter.
X-Content-Type-Options	nosniff	Prevents MIME-type sniffing.
Referrer-Policy	strict-origin-when-cross-origin	Controls how much referrer information is sent.
Permissions-Policy	camera=(), microphone=(), geolocation=()	Disables access to sensitive device APIs by default.

Sources: netlify.toml:10-16

Conclusion

The "2026 Gold Standard Portfolio" is a meticulously architected project that serves as a practical demonstration of modern web development principles. By leveraging a Feature-Sliced Design, React 19, and a robust set of tools for styling, animation, and deployment, it achieves a high standard of performance, maintainability, and user experience. It stands as a "living proof-of-concept" for building scalable and resilient web applications.

Sources: README.md:22-27