# Maider Barrutia — Frontend developer & UI Specialist

## About
Portfolio website of Maider Barrutia, a Frontend developer based in Madrid (Spain) specializing in React, Scss, TypeScript, Next.js, and AI-driven development.

## Tech Stack
- **Frontend**: React, TypeScript, Next.js, JavaScript, HTML5, CSS3/SCSS, Tailwind CSS, Vite, WordPress, Angular
- **Backend & DB**: Node.js, Express, PHP, MySQL, Oracle
- **Design**: Figma, Photoshop, Illustrator
- **Tools**: Git, Jest, Vitest, React Testing Library, Jira, Scrum, Kanban
- **AI**: GitHub Copilot, ChatGPT/OpenAI, Claude AI, OpenCode

## Experience
1. **Fullstack Developer (Frontend focus)** @ Desarrollos Online (Madrid, 2025–Present)
   - Full Stack development of corporate web apps, AI tool adoption, critical code refactoring, high-concurrency platforms
2. **Fullstack Developer (Frontend focus)** @ Freelance (Remote, 2023–2025)
   - End-to-end custom projects: database architecture, REST APIs, UI/UX design, mobile-optimized interfaces
3. **Frontend UI Developer** @ Corus Consulting (Madrid, 2017–2023)
   - UI development for major Health, Insurance & Media accounts, WPO optimization, security incident resolution, agile workflows

## Education
- **Advanced Diploma in Web Application Development (DAW)** — Ilerna Online (2023–2025)
- **Certificate in Web Page Design and Publishing** — Centro San Luis, Bilbao (2014–2015)
- **Associate Degree in Graphic Design & Advertising Art** — Instituto Ibarrekolanda, Bilbao (2009–2013)

## Certifications
- Bootcamp TS + React + Vitest (TDD) — Lemoncode (114h)
- Full Stack Development (Node.js, Angular, TypeScript, REST APIs) — Samsung (350h)
- Oracle SQL-PL/SQL Development — Cas-training (135h)
- AI-Assisted Development — Big School (6h)

## Language
The site is bilingual: Spanish (es) and English (en). Default locale: es_ES.

## Routes
- `/` — Home page (Hero, About, Featured Projects x3, Tech Stack, Experience, Contact)
- `/projects` (EN) / `/proyectos` (ES) — Full project listing by category tabs
- `/projects/[id]` (EN) / `/proyectos/[id]` (ES) — Individual project detail with gallery + lightbox
- `/legal` — Legal notice, privacy policy, cookies

## Navigation
- **Header**: Logo, nav links (#about, #projects, #tech, #experience, #contact), ES/EN toggle, dark/light theme toggle, hamburger menu (mobile)
- **Footer**: Copyright, social links (GitHub, LinkedIn, Twitter/X), legal link

## Key Sections (Home)
- **Hero**: Title, subtitle, CTA buttons, bento stats grid (Frontend 6+ years, UI Design, Quality, AI)
- **About**: Avatar, bio paragraphs, technology badges, scroll-triggered animations
- **Featured Projects**: 3 featured projects, each with image, tags, description, full-card link + "Ver Proyecto" button
- **Tech Stack**: Tabbed (Frontend / Backend & BBDD / Diseño / IA / Herramientas) with description per tab + icon grid
- **Experience**: Tabbed (Experiencia / Educación), timeline with animated entry, Download CV button, education cards with hover effects
- **Contact**: Form → Web3Forms, social links

## Social
- GitHub: https://github.com/maiderbarrutia
- LinkedIn: https://linkedin.com/in/maiderbarrutiaunzueta
- Website: https://maiderbarrutia.com

## Web Development Projects
### 1. Aisiplan
- **Description:** FullStack leisure activity platform.
- **Stack:** React, Vite, TypeScript, SASS, Node.js, Express, TypeORM, MySQL, JWT.
- **Live Demo:** https://aisiplan.vercel.app
- **Source Code:** https://github.com/maiderbarrutia/fullstack-aisiplan

### 2. Ecommerce + Branding
- **Description:** WordPress + WooCommerce site with multilingual setup (6 languages), art direction, packaging design, payment gateway, and custom child theme.

### 3. Gas Corporate Portal
- **Description:** Multilingual portal for a major energy company using WordPress, Elementor, and custom SASS overrides.

### 4. AI Sales Simulator
- **Description:** Webflow site for an AI sales platform. Pixel-perfect implementation from Figma with custom CSS/JS animations and Webflow CMS.

### 5. Real Estate Portal
- **Description:** WordPress portal for a leading real estate agency. Core frontend layouts using SASS, jQuery, and PHP template overrides.

### 6. Digital Health Portal
- **Description:** Custom WordPress theme built from scratch for a major healthcare company. Medical community platform featuring videos, events, and webinars.