Modern, responsive personal portfolio built with React, TypeScript, and cutting-edge web technologies.

This is a modern, multilingual personal portfolio website showcasing projects, skills, and experience. Built with performance, accessibility, and user experience in mind, featuring smooth animations, responsive design, and internationalization support.

Live Demo: migueldedioscalles.dev

English | Español

• 🎨 Modern Design: Clean, professional interface with smooth animations
• 🌐 Multilingual: Full support for English and Spanish
• 📱 Responsive: Optimized for all devices and screen sizes
• ⚡ Performance: Built with Vite for lightning-fast development and builds
• 🎭 Animations: Smooth transitions powered by Framer Motion
• 🔍 SEO Optimized: Meta tags and semantic HTML structure
• ♿ Accessible: WCAG guidelines compliance
• 🎯 Type Safe: Full TypeScript implementation
• 🧪 Well Tested: Comprehensive test suite with Vitest and React Testing Library

# Clone the repository
git clone https://github.com/mddiosc/mywebsite-2.git

# Navigate to project directory
cd mywebsite-2

# Install dependencies
pnpm install

# Start development server
pnpm dev

# Build for production
pnpm build

# Preview production build
pnpm preview

• 📖 English Documentation
• 📖 Documentación en Español

• 🏗️ Architecture
• 🛠️ Development Guide
• 🎨 UI Components
• 🌐 Internationalization
• 🧪 Testing
• 📋 reCAPTCHA Setup

• React 19.0 - UI library
• TypeScript 5.6 - Type safety
• Vite 6.0 - Build tool and dev server
• Tailwind CSS 4.0 - Utility-first CSS framework

• Framer Motion - Animation library
• React Router - Client-side routing
• React Hook Form - Form management
• React Query (TanStack) - Server state management
• React i18next - Internationalization
• Zustand - Global state management
• Axios - HTTP client

• Vitest - Testing framework
• React Testing Library - Testing utilities
• ESLint - Code linting
• Prettier - Code formatting
• Husky - Git hooks
• Commitlint - Commit message linting

mywebsite-2/
├── docs/                    # Documentation
│   ├── en/                 # English documentation
│   └── es/                 # Spanish documentation
├── public/                 # Static assets
│   ├── images/            # Image assets
│   └── logos/             # Logo variations
├── src/
│   ├── components/        # Reusable UI components
│   ├── pages/            # Page components
│   ├── hooks/            # Custom React hooks
│   ├── lib/              # Utility libraries
│   ├── locales/          # Translation files
│   ├── router/           # Routing configuration
│   └── styles/           # Global styles
└── ...config files

• 🏠 Home: Hero section with introduction and featured content
• 📁 Projects: GitHub portfolio showcase with live demos
• 👤 About: Personal information, skills, and experience
• 📬 Contact: Contact form with reCAPTCHA validation

# Development
pnpm dev              # Start development server
pnpm build            # Build for production
pnpm preview          # Preview production build

# Code Quality
pnpm lint             # Run ESLint
pnpm format           # Format with Prettier
pnpm format:check     # Check formatting
pnpm type-check       # TypeScript type checking

# Testing
pnpm test             # Run tests
pnpm test:watch       # Run tests in watch mode
pnpm test:coverage    # Run tests with coverage

This project is licensed under the MIT License - see the LICENSE file for details.

Miguel Ángel de Dios Calles

• 🌐 Website: migueldedioscalles.dev
• 💼 LinkedIn: Miguel Ángel de Dios
• 🐙 GitHub: @mddiosc

⭐ If you found this project helpful, please consider giving it a star!