chore: add README.md
This commit is contained in:
Melvin Ragusa
203
README.md
Normal file
203
README.md
Normal file
@@ -0,0 +1,203 @@
|
||||
# Ragusa IT-Consulting
|
||||
|
||||
[](https://react.dev)
|
||||
[](https://www.typescriptlang.org)
|
||||
[](https://vitejs.dev)
|
||||
[](https://vitest.dev)
|
||||
|
||||
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
|
||||
|
||||
```bash
|
||||
# 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
|
||||
|
||||
```bash
|
||||
# Start development server (port 3000)
|
||||
pnpm dev
|
||||
```
|
||||
|
||||
### Build
|
||||
|
||||
```bash
|
||||
# Production build
|
||||
pnpm build
|
||||
|
||||
# Preview production build
|
||||
pnpm preview
|
||||
```
|
||||
|
||||
### Testing
|
||||
|
||||
```bash
|
||||
# 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
|
||||
|
||||
```bash
|
||||
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:
|
||||
|
||||
```env
|
||||
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.
|
||||
|
||||
```bash
|
||||
# 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
|
||||
Reference in New Issue
Block a user