Technical Design Document

Document ID: FW-TDD-02032026

Current Version: 1.1

Date: 20.04.2026

Organisation: University of Ruse “Angel Kanchev”

Department: IIT

Author(s): H. Hristov

Reviewer(s): M. Dzurov

Confidentiality: Internal

Table of Contents

Introduction

Document Purpose

This document defines the technical design and architectural decisions underlying the Fervor Web website. It serves as a comprehensive reference for the system’s structure, technology choices, and component dependencies. This document aims to provide readers with a clear understanding of how the system is built, what technologies power it, and how its components interact.

Document Scope

The guidelines and specifications outlined in this document apply to the full technical implementation of the Fervor Web website. This includes the front-end architecture, the selected technology stack, and all external libraries and dependencies the project relies upon. This document is intended for the developers and technical reviewers working on the project. It is to be read alongside the Visual Style Guide (FW-VSG-01032026), which governs the visual and UX standards that this technical implementation must uphold.

Relationship to Other Documents

This Technical Design Document complements the Visual Style Guide by providing the technical foundation needed to realize the defined design standards. Decisions regarding component structure, styling approach, and library selection have been made with the requirements of the Visual Style Guide in mind, particularly with respect to typography, color usage, accessibility, and responsive layout.

Architectural Representation

The Fervor Web website follows a client-side multi-page architecture, built entirely on the front end with no backend or server-side rendering involved. All pages are rendered in the browser via React, with React Router managing navigation between them.

Component Stucture

The UI is organized into a hierarchy of reusable React components, following a standard separation of concerns:

Internationalisation

Language switching is managed entirely on the client side via react-i18next. Translation strings are stored in static JSON resource files, one per supported language, and are loaded at runtime. No server requests are made for language changes.

Wiki

The project wiki is architecturally separate from the main application. It is a static site generated by Jekyll and hosted on GitHub Pages under a separate subdomain, sharing no code or build pipeline with the React application.

Technology Stack

The Fervor Web website is built as a modern multi-page application, leveraging a component-based front-end architecture. The stack has been selected to prioritize development speed, visual consistency, and alignment with the standards defined in the Visual Style Guide.

Front End

Component Development and Testing

Documentation and Wiki

Version Control

Runtime Environment

Dependencies

Project Structure

Root

.
├── docs/       # Project documentation 
│   └── assets/ # Images and assets used in documentation
│   └── bg/     # Translation of the documentation, needed for the class
└── site/       # The React(Vite) application

Site

site/
├── public/     # Static files copied as-is to dist (404.html, favicon, etc.)
└── src/        # Application source code

Source (site/src/)

src/
├── assets/     # Images and assets used in the application
│   ├── fonts/  # Self-hosted WOFF2 font files (Montserrat Alternates, Ubuntu, Exo 2)
│   └── icons/  # Custom SVG icons imported as React components via vite-plugin-svgr
│
├── components/ # Reusable UI components shared across pages
│   └── ui/     # shadcn/ui primitives (Button, Card, Carousel, etc.)
│   └── utils/  # Utilities
│
├── context/    # React context providers (ThemeContext for dark/light mode)
│
├── lib/        # Utility modules (cookie helpers, etc.)
│
├── locales/    # Translation JSONs for available languages
│   └── ...
│
├── pages/      # Page-level components (About, Services, Work, Contact)
│
└── stories/    # Storybook stories for component development and documentation