Ragusa IT-Consulting

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

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

License

ISC License - See package.json for details

---

Ragusa IT-Consulting - Professional Web Development & IT Support