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