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- 🏗️ Architecture
- 🛠️ Development Guide
- 🎨 UI Components
- 🌐 Internationalization
- 🧪 Testing
- 📋 reCAPTCHA Setup
- React 19.2 - UI library
- TypeScript 5.9 - Type safety
- Vite 8.0 - Build tool and dev server
- Tailwind CSS 4.2 - 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
- Zod - Schema validation
- 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
│ ├── content/ # Blog markdown content
│ ├── context/ # React context providers
│ ├── data/ # Static data sources
│ ├── hooks/ # Custom React hooks
│ ├── i18n/ # Internationalization configuration
│ ├── lib/ # Utility libraries
│ ├── locales/ # Translation files
│ ├── router/ # Routing configuration
│ ├── styles/ # Global styles
│ ├── utils/ # General utilities
│ ├── types/ # Shared TypeScript types
│ └── types.ts # Global TypeScript types
└── ...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 coverageThis 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!