Alejandro García Vallecillo - Portfolio Website

A modern, responsive portfolio website showcasing my skills and experience as a Senior Software Developer.

🌟 Features

• Modern Design: Clean, professional layout with smooth animations
• Dark/Light Mode: Toggle between themes with persistent preference
• Fully Responsive: Optimized for all devices and screen sizes
• Smooth Animations: AOS library integration for scroll animations
• Interactive Elements: Hover effects, skill bars, and micro-interactions
• SEO Optimized: Proper meta tags and semantic HTML
• Fast Loading: Optimized assets and modern web practices
• Accessibility: WCAG compliant with proper focus management

🛠️ Technologies Used

Frontend

• HTML5: Semantic markup and modern standards
• CSS3: Custom properties, Grid, Flexbox, and animations
• JavaScript (ES6+): Modern vanilla JavaScript
• Bootstrap 5: Latest version for responsive grid and components

Libraries & Tools

• Font Awesome 6: Modern icon library
• AOS: Animate On Scroll library
• Google Fonts: Inter font family for typography

Hosting

• GitHub Pages: Static site hosting
• Custom Domain: Professional URL setup

🚀 Performance Features

• Optimized Images: Compressed and properly sized images
• Minimal Dependencies: Only essential libraries loaded
• Lazy Loading: Images and animations load when needed
• Smooth Scrolling: Native CSS scroll behavior
• Debounced Events: Optimized scroll and resize handlers

📱 Responsive Design

The website is fully responsive and tested on:

• Desktop (1920px+)
• Laptop (1024px - 1919px)
• Tablet (768px - 1023px)
• Mobile (320px - 767px)

🎨 Design System

Color Palette

• Primary: #3b82f6 (Blue)
• Secondary: #64748b (Slate)
• Accent: #f59e0b (Amber)
• Success: #10b981 (Emerald)

Typography

• Font Family: Inter (Google Fonts)
• Weights: 300, 400, 500, 600, 700
• Scale: Fluid typography using clamp()

Spacing

• Base Unit: 1rem (16px)
• Scale: 0.5x, 1x, 1.5x, 2x, 3x, 4x, 6x

🔧 Development

Local Development

1. Clone the repository
2. Open index.html in a modern browser
3. For live reloading, use a local server:

   # Using Python
   python -m http.server 8000
   
   # Using Node.js
   npx serve .
   
   # Using PHP
   php -S localhost:8000

File Structure

├── index.html              # Main HTML file
├── css/
│   └── modern-style.css    # Main stylesheet
├── js/
│   └── modern-script.js    # Main JavaScript file
├── images/
│   ├── favicon.ico         # Site favicon
│   └── FotoPerfil.jpeg     # Profile image
└── README.md               # This file

Browser Support

• Chrome 90+
• Firefox 88+
• Safari 14+
• Edge 90+

🌐 Deployment

The site is automatically deployed to GitHub Pages when changes are pushed to the main branch.

Live URL: https://owboxal3x.github.io

Deployment Steps

1. Push changes to the main branch
2. GitHub Actions automatically builds and deploys
3. Changes are live within minutes

📊 Analytics & SEO

SEO Features

• Semantic HTML structure
• Meta tags for social sharing
• Structured data markup
• Sitemap.xml included
• Optimized page titles and descriptions

Performance Metrics

• Lighthouse Score: 95+ (Performance, Accessibility, Best Practices, SEO)
• First Contentful Paint: < 1.5s
• Largest Contentful Paint: < 2.5s
• Cumulative Layout Shift: < 0.1

📞 Contact

• Email: agarciavallecillo@gmail.com
• LinkedIn: Alejandro García Vallecillo
• GitHub: @OwboxAl3x

📄 License

This project is open source and available under the MIT License.

---

Built with ❤️ using modern web technologies

Last updated: September 2025