Key Technologies

Relevant source files

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

• README.md
• package.json
• eslint.config.js
• src/app/index.css
• netlify.toml
• scripts/optimize-images.js
• src/entities/project/model/data.ts
• src/entities/technology/model/techStack.tsx

This project is described as a "masterclass in modern web architecture" and a "living proof-of-concept for the 2026 Web Engineering Gold Standard." It leverages a curated set of bleeding-edge technologies to create a performant, scalable, and resilient application. The core philosophy is not just to build components, but to architect a robust system.

The technology stack is centered around React 19 and Vite, with a strong emphasis on architectural integrity through Feature-Sliced Design (FSD). It also incorporates a sophisticated hybrid animation model, a system-aware theming engine, and a focus on accessibility through headless UI components.

Sources: README.md:5-20

Core Framework and Build Tools

The foundation of the application is built on React 19 and Vite, chosen for performance and modern development features.

Sources: README.md:17, package.json:20, 60

React 19

The project utilizes React 19, embracing its latest features for building the user interface. The use of React is central to the component-based structure of the application.

Sources: package.json:30, README.md:17

Vite 7

Vite 7 is used as the build tool and development server. It is highlighted for its performance, with a forward-looking mention of the Rust-based Rolldown bundler. The package.json file defines scripts for running the development server (dev), building the project (build), and previewing the production build (preview).

The following diagram illustrates the basic development and build workflow using Vite.

Sources: README.md:17, package.json:8-12, netlify.toml:2-3

Architectural Design: Feature-Sliced Design (FSD)

The project's architecture is strictly based on Feature-Sliced Design (FSD). This methodology is adopted to decouple business logic from the UI and ensure the codebase remains scalable and maintainable. FSD organizes the code into distinct layers, each with a specific purpose, and enforces a unidirectional data flow.

The layers, from highest to lowest, are app, pages, widgets, features, entities, and shared.

Sources: README.md:22-24, eslint.config.js:46-72

FSD Layer Structure and Rules

The FSD structure is not just a convention but is actively enforced through ESLint rules defined in eslint.config.js. These rules prevent layers from importing from higher-level layers, thus avoiding "spaghetti dependencies."

The diagram below shows the FSD layers and their allowed import directions.

Sources: README.md:22-24, eslint.config.js:46-72

The enforcement is configured in the ESLint settings:

// eslint.config.js
"boundaries/element-types": [
  "error",
  {
    default: "allow",
    rules: [
      {
        from: "shared",
        disallow: ["app", "pages", "widgets", "features", "entities"],
        message: "Shared layer cannot import from higher layers.",
      },
      {
        from: "entities",
        disallow: ["app", "pages", "widgets", "features"],
        message: "Entities layer cannot import from higher layers.",
      },
      // ... and so on for other layers
    ],
  },
],

Sources: eslint.config.js:46-72

Styling and UI

The project employs a modern styling stack that combines a utility-first CSS framework with a custom, theme-aware design system.

Tailwind CSS

Tailwind CSS is the primary framework for styling. It is configured in postcss.config.js (implied by @tailwindcss/postcss dev dependency) and its classes are used throughout the application's .tsx components.

Sources: package.json:42, src/app/index.css:1

Theming Engine

A persistent, system-aware theming engine for light and dark modes is implemented to prevent "flash of incorrect theme" (FOUC). This is achieved using CSS custom properties (variables) defined for both light and dark themes in src/app/index.css. The theme is applied to the <html> element via a data-theme attribute.

Here is a sample of the theme variable definitions:

/* src/app/index.css */
/* Light Theme Variables */
html[data-theme="light"] {
  /* Backgrounds */
  --bg-default: #ffffff; /* Pure white for clarity */
  --bg-paper: #f4f4f5; /* Zinc-100 */
  /* ... other light theme variables */
}

/* Dark Theme Variables */
html[data-theme="dark"] {
  /* Backgrounds */
  --bg-default: #121212; /* Dark gray, not pitch black */
  --bg-paper: #1e1e20;
  /* ... other dark theme variables */
}

Sources: README.md:30-31, src/app/index.css:12-60

Headless UI and Accessibility

The project is built on Radix UI primitives to ensure full accessibility, including keyboard navigation and screen reader support, without sacrificing design flexibility. Dependencies like @radix-ui/react-accordion and @radix-ui/react-tooltip confirm its usage.

Sources: README.md:28-29, package.json:21-26

Animation and Motion

A hybrid animation model is used to create a sophisticated and stable user experience.

• GSAP (GreenSock Animation Platform): Used for complex, timeline-based scroll choreography.
• Framer Motion: Used for declarative layout transitions and micro-interactions.

This dual approach allows the application to leverage the strengths of both libraries for different animation requirements.

Sources: README.md:25-27, package.json:28, 29

Development and Tooling

Several tools are used to maintain code quality, consistency, and performance.

Linting and Type Safety

• ESLint: Enforces code style and architectural rules (like FSD). The configuration in eslint.config.js is extensive.
• TypeScript: Provides static typing for the entire codebase.

Sources: package.json:45, 58, eslint.config.js

Image Optimization

A custom Node.js script (scripts/optimize-images.js) is used to automate image optimization. This script traverses the public/projects and public/certs directories, converts .png, .jpg, and .jpeg files to the modern .webp format, resizes large images, and then deletes the original files. This process is triggered via the npm run optimize-images command.

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

Key Dependencies

The following tables summarize the key production and development dependencies.

Production Dependencies

Package	Version	Description
react	^19.1.2	Core library for building the UI.
react-dom	^19.1.2	Serves as the entry point to the DOM.
vite	^7.0.4	Next-generation frontend tooling.
framer-motion	^12.23.12	Animation library for declarative transitions.
gsap	^3.14.2	Professional-grade animation library for complex sequences.
@radix-ui/*	^1.x	A collection of headless, accessible UI components.
tailwindcss	^4.1.18	A utility-first CSS framework.
react-router-dom	^7.12.0	Client-side routing.

Sources: package.json:20-40, package.json:59-60

Development Dependencies

Package	Version	Description
typescript	^5.9.3	Superset of JavaScript that adds static types.
eslint	^9.30.1	Linter for identifying and reporting on patterns in code.
eslint-plugin-boundaries	^5.3.1	ESLint plugin to enforce FSD architectural rules.
sharp	^0.34.5	High-performance image processing library for the optimization script.

Sources: package.json:41-61

Deployment

The application is configured for deployment on Netlify.

The netlify.toml file specifies the build command and the publish directory. It also configures a "catch-all" redirect to index.html to support client-side routing and sets several important security headers like X-Frame-Options and Permissions-Policy.

# netlify.toml

[build]
  command = "npm run build"
  publish = "dist"

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

[[headers]]
  for = "/*"
  [headers.values]
    X-Frame-Options = "DENY"
    X-XSS-Protection = "1; mode=block"

Sources: netlify.toml:1-16, README.md:14