A modern, performant website for Ragusa IT-Consulting built with React 19, TypeScript, and Vite. Features smooth animations, internationalization (i18n), and a sophisticated design system.

Features

Modern React 19 - Latest React features with concurrent rendering
TypeScript - Strict type checking for robust code
Motion - Beautiful animations and transitions
i18n - Internationalization with English and German support
Responsive Design - Mobile-first, fully responsive layout
Accessibility - ARIA labels, semantic HTML, keyboard navigation
Performance - Code splitting, lazy loading, optimized assets
Testing - Vitest with React Testing Library for comprehensive test coverage
Firebase Hosting - Production-ready deployment setup

Tech Stack

Framework: React 19.2 with React Router 7
Build Tool: Vite 7.3
Language: TypeScript 5.9 (strict mode)
Animation: Motion (Framer Motion successor)
Styling: CSS Modules + Global CSS
Testing: Vitest + React Testing Library + jsdom
Forms: EmailJS for contact form
Icons: React Icons
WebGL: OGL for gradient effects
Deployment: Firebase Hosting

Getting Started

Prerequisites

Node.js 18+ recommended
pnpm (preferred) or npm

Installation

# Clone the repository
git clone https://github.com/ragusa-it/ragusaitweb.git
cd ragusaitweb

# Install dependencies
pnpm install

# Copy environment variables
cp .env.example .env

Development

# Start development server (port 3000)
pnpm dev

Build

# Production build
pnpm build

# Preview production build
pnpm preview

Testing

# Run all tests
pnpm exec vitest

# Run tests in watch mode
pnpm exec vitest --watch

# Run tests with coverage
pnpm exec vitest --coverage

# Run a single test file
pnpm exec vitest src/components/ui/__tests__/Button.test.tsx

Type Checking

pnpm exec tsc --noEmit

Project Structure

src/
├── components/
│   ├── effects/       # Visual effects (GradientBlinds)
│   ├── layout/        # Layout components (Navbar, Footer, FancyCursor)
│   ├── sections/      # Page sections (Hero, Services)
│   └── ui/            # Reusable UI components (Button, Input, Card, Modal)
├── hooks/             # Custom React hooks (useRateLimit, useTypingEffect)
├── i18n/              # Internationalization (en, de translations)
├── pages/             # Route components (Home, About, Contact)
├── styles/            # Global styles and theme
├── utils/             # Utility functions (debounce, security)
├── App.tsx            # Main app component with routing
├── config.ts          # App configuration
└── main.tsx           # Entry point

public/                # Static assets
build/                 # Production build output

Available Scripts

Command	Description
`pnpm dev`	Start development server
`pnpm build`	Type-check and build for production
`pnpm preview`	Preview production build locally

Key Features

Animation System

FancyCursor: Custom cursor with blend-mode effects
GradientBlinds: WebGL-powered animated gradient background
PageLoader: Smooth page transition loading state
Motion: All interactive elements use motion components for micro-interactions

Internationalization

Full i18n support with English and German
Language switching with context provider
RTL-ready architecture

Performance Optimizations

Code splitting with React.lazy() for routes
Preloaded critical fonts
Optimized build with Vite
Rate limiting hooks for form submissions

Testing Strategy

Unit tests for components
Hook tests for custom logic
Performance tests for heavy components
Security tests for utility functions

Design System

Primary Font: Sora (variable font, weights 100-800)
Monospace: JetBrains Mono
Color Palette: Dark theme with accent colors (defined in .jules/palette.md)
Spacing: CSS custom properties for consistent spacing
Components: Modular CSS with BEM-like naming in CSS Modules

Environment Variables

Copy .env.example to .env and configure:

VITE_EMAILJS_SERVICE_ID=your_service_id
VITE_EMAILJS_TEMPLATE_ID=your_template_id
VITE_EMAILJS_PUBLIC_KEY=your_public_key

Deployment

The site is configured for Firebase Hosting. Build output goes to build/ directory.

# Build and deploy
pnpm build
firebase deploy

Browser Support

Chrome 90+
Firefox 88+
Safari 14+
Edge 90+

Contributing

Follow the existing code style (see AGENTS.md)
Use TypeScript strict mode
Write tests for new features
Ensure all tests pass before committing
Use conventional commit messages

License

ISC License - See package.json for details

Ragusa IT-Consulting - Professional Web Development & IT Support