refactor: redesign portfolio with Tailwind CSS and modern layout
- Migrate from vanilla CSS to Tailwind CSS CDN - Implement Stitch design with glassmorphism and fluid gradients - Remove profile photo for cleaner, more professional aesthetic - Restructure About section: remove grid layout, expand content cards - Add 3 real projects with proper descriptions and tech tags - Implement smooth scrolling and contact CTA - Update tech stack section with 8 key technologies - Modernize README to reflect new design and stack - Mobile-first responsive design using Tailwind breakpoints
This commit is contained in:
Itziar Zameza García
@@ -22,3 +22,7 @@ pnpm-debug.log*
|
||||
|
||||
# jetbrains setting folder
|
||||
.idea/
|
||||
.gga
|
||||
diseño/
|
||||
.vscode/
|
||||
|
||||
|
||||
@@ -1,85 +1,52 @@
|
||||
# Personal Portfolio
|
||||
# Personal Portfolio - Itziar ZG
|
||||
|
||||
A framework-free, static portfolio website built with vanilla HTML, CSS, and JavaScript.
|
||||
A modern, static portfolio website for AI & Automation Developer. Built with HTML, Tailwind CSS, and minimal JavaScript.
|
||||
|
||||
## Features
|
||||
|
||||
- **Zero Runtime Dependencies**: No JavaScript framework required
|
||||
- **Multi-language Support**: English and Spanish with instant switching
|
||||
- **Dark/Light Mode**: Theme persistence with localStorage
|
||||
- **Glassmorphism Design**: Modern UI with blur effects and transparency
|
||||
- **Fully Responsive**: Works on all devices
|
||||
- **Modern Design**: Glassmorphism, gradients, fluid animations
|
||||
- **Responsive**: Mobile-first design with Tailwind CSS
|
||||
- **Fast Loading**: No build step, CDN-powered Tailwind
|
||||
- **SEO Optimized**: Semantic HTML5 markup
|
||||
- **Fast Loading**: Minimal bundle size
|
||||
- **Smooth Navigation**: Scroll-to-section anchors
|
||||
- **Professional Layout**: Hero, About, Projects, Tech Stack, Contact sections
|
||||
|
||||
## Tech Stack
|
||||
|
||||
- **HTML5**: Semantic markup
|
||||
- **CSS3**: Custom properties, flexbox, grid, animations
|
||||
- **Vanilla JavaScript**: ES6+ modules, classes, localStorage
|
||||
- **Google Fonts**: Space Grotesk typography
|
||||
- **Tailwind CSS**: Utility-first styling via CDN
|
||||
- **Vanilla JavaScript**: Smooth scrolling, minimal interactions
|
||||
- **Google Fonts**: Space Grotesk & Instrument Serif
|
||||
- **Material Symbols**: Icon system
|
||||
|
||||
## Development
|
||||
|
||||
### Prerequisites
|
||||
## Getting Started
|
||||
|
||||
- Node.js (for dev server only)
|
||||
- Any modern web browser
|
||||
|
||||
### Setup
|
||||
Simply open `index.html` in your browser. No build step required.
|
||||
|
||||
```bash
|
||||
# Install dev dependencies (optional)
|
||||
npm install
|
||||
|
||||
# Start development server
|
||||
npm run dev
|
||||
|
||||
# Or simply open index.html in your browser
|
||||
# Or use a local server
|
||||
python -m http.server 8000
|
||||
# Then visit http://localhost:8000
|
||||
```
|
||||
|
||||
### Project Structure
|
||||
## Project Structure
|
||||
|
||||
```
|
||||
├── index.html # Main HTML file
|
||||
├── styles/
|
||||
│ └── main.css # Complete stylesheet
|
||||
├── js/
|
||||
│ └── main.js # JavaScript functionality
|
||||
├── public/ # Static assets
|
||||
└── package.json # Dev dependencies only
|
||||
├── index.html # Main portfolio page
|
||||
├── diseño/ # Original design files from Stitch
|
||||
├── js/ # Legacy JS files (not currently used)
|
||||
├── styles/ # Legacy CSS files (not currently used)
|
||||
└── README.md # This file
|
||||
```
|
||||
|
||||
## Features Implementation
|
||||
## Sections
|
||||
|
||||
### Language Switching
|
||||
|
||||
- Translations stored in JavaScript objects
|
||||
- No page reload required
|
||||
- Preference saved in localStorage
|
||||
- Dynamic content rendering
|
||||
|
||||
### Theme Toggle
|
||||
|
||||
- CSS custom properties for theming
|
||||
- System preference detection
|
||||
- Smooth transitions
|
||||
- Icon updates based on current theme
|
||||
|
||||
### Performance
|
||||
|
||||
- No build step required
|
||||
- Minimal HTTP requests
|
||||
- Optimized CSS with custom properties
|
||||
- Efficient DOM manipulation
|
||||
|
||||
## Browser Support
|
||||
|
||||
- Chrome 60+
|
||||
- Firefox 55+
|
||||
- Safari 12+
|
||||
- Edge 79+
|
||||
- **Hero**: Attention-grabbing intro with CTA buttons
|
||||
- **About**: Professional background and capabilities
|
||||
- **Selected Works**: 3 featured projects with tech tags
|
||||
- **Tech Stack**: Technologies and tools used
|
||||
- **Contact**: Call-to-action footer with email and social links
|
||||
|
||||
## License
|
||||
|
||||
|
||||
+559
-195
@@ -1,212 +1,576 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<html class="light" lang="es">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta
|
||||
name="description"
|
||||
content="Itziar ZG - Vanguard Designer Portfolio"
|
||||
/>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Itziar ZG - Vanguard CV</title>
|
||||
<meta charset="utf-8" />
|
||||
<meta content="width=device-width, initial-scale=1.0" name="viewport" />
|
||||
<title>Itziar ZG | AI & Automation Developer</title>
|
||||
<script src="https://cdn.tailwindcss.com?plugins=forms,container-queries"></script>
|
||||
<link
|
||||
rel="icon"
|
||||
type="image/svg+xml"
|
||||
href="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><text y='.9em' font-size='90'>🎨</text></svg>"
|
||||
/>
|
||||
<link rel="stylesheet" href="styles/main.css" />
|
||||
<link rel="preconnect" href="https://fonts.googleapis.com" />
|
||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
|
||||
<link
|
||||
href="https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@300;400;500;600;700&display=swap"
|
||||
href="https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@300;400;500;600;700&family=Instrument+Serif:ital@0;1&display=swap"
|
||||
rel="stylesheet"
|
||||
/>
|
||||
<link
|
||||
href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght@100..700,0..1&display=swap"
|
||||
href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&display=swap"
|
||||
rel="stylesheet"
|
||||
/>
|
||||
<script id="tailwind-config">
|
||||
tailwind.config = {
|
||||
darkMode: "class",
|
||||
theme: {
|
||||
extend: {
|
||||
colors: {
|
||||
primary: "#8c2bee",
|
||||
"background-light": "#f7f6f8",
|
||||
"background-dark": "#191022",
|
||||
},
|
||||
fontFamily: {
|
||||
display: ["Space Grotesk", "sans-serif"],
|
||||
serif: ["Instrument Serif", "serif"],
|
||||
},
|
||||
borderRadius: {
|
||||
DEFAULT: "0.5rem",
|
||||
lg: "1rem",
|
||||
xl: "1.5rem",
|
||||
full: "9999px",
|
||||
},
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
<style>
|
||||
.glass {
|
||||
background: rgba(255, 255, 255, 0.4);
|
||||
backdrop-filter: blur(12px);
|
||||
-webkit-backdrop-filter: blur(12px);
|
||||
border: 1px solid rgba(255, 255, 255, 0.3);
|
||||
}
|
||||
.iridescent-bg {
|
||||
background:
|
||||
radial-gradient(
|
||||
circle at 0% 0%,
|
||||
rgba(140, 43, 238, 0.15) 0%,
|
||||
transparent 50%
|
||||
),
|
||||
radial-gradient(
|
||||
circle at 100% 100%,
|
||||
rgba(255, 182, 255, 0.2) 0%,
|
||||
transparent 50%
|
||||
),
|
||||
radial-gradient(
|
||||
circle at 50% 50%,
|
||||
rgba(140, 43, 238, 0.05) 0%,
|
||||
transparent 100%
|
||||
);
|
||||
}
|
||||
.fluid-shape {
|
||||
border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<!-- Top Navigation -->
|
||||
<nav>
|
||||
<div>
|
||||
<h1>Under construction Itziar ZG</h1>
|
||||
</div>
|
||||
<!-- <div>
|
||||
<button
|
||||
id="language-toggle"
|
||||
aria-label="Toggle language"
|
||||
<body
|
||||
class="bg-background-light dark:bg-background-dark font-display text-slate-900 dark:text-slate-100 selection:bg-primary/30"
|
||||
>
|
||||
<div class="relative min-h-screen overflow-hidden iridescent-bg">
|
||||
<!-- Floating Fluid Shapes -->
|
||||
<div
|
||||
class="absolute -top-24 -left-24 w-96 h-96 bg-primary/10 fluid-shape blur-3xl opacity-50"
|
||||
></div>
|
||||
<div
|
||||
class="absolute top-1/2 -right-24 w-80 h-80 bg-pink-300/10 fluid-shape blur-3xl opacity-40"
|
||||
></div>
|
||||
<div class="layout-container flex h-full grow flex-col relative z-10">
|
||||
<!-- Navigation -->
|
||||
<header
|
||||
class="mx-auto w-full max-w-6xl px-6 py-6 flex items-center justify-between"
|
||||
>
|
||||
<span class="material-symbols-outlined">translate</span>
|
||||
</button>
|
||||
<button
|
||||
id="theme-toggle"
|
||||
aria-label="Toggle theme"
|
||||
>
|
||||
<span class="material-symbols-outlined">dark_mode</span>
|
||||
</button>
|
||||
</div> -->
|
||||
</nav>
|
||||
|
||||
<!-- Hero Section -->
|
||||
<!-- <header>
|
||||
<div></div>
|
||||
<div></div>
|
||||
|
||||
<div>
|
||||
<div>
|
||||
<div
|
||||
alt="Professional portrait of a female digital designer"
|
||||
style="
|
||||
background-image: url("https://lh3.googleusercontent.com/aida-public/AB6AXuD6WeB0nJf-ZCuFJ6oa6vOkhHSa7HvieIuXVDVhw_U7ITO-kq3Gi8J9JWbH0WOiEd2zxiItpdWLWJY89C09LQncuy8iD4pjprH8H7aiGUya87L_ap88RqW2GuhhUJHNt74NW_m7y4KGn43RzotxT69wM9i-ri2HEEMQtBZRWPUtWgjSqSguENLtttWkpQrUrXBoy8TXkmvdya-d9S9QKMbaDSVa_6eVpI7uR_BAB1wRlMdbAFlVZVmzUG3HafS5P4jOA1I0nkvNChY");
|
||||
"
|
||||
></div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<h2
|
||||
data-i18n="hero.title"
|
||||
>
|
||||
Vanguard Designer
|
||||
</h2>
|
||||
<p
|
||||
data-i18n="hero.subtitle"
|
||||
>
|
||||
Crafting Digital Excellence
|
||||
</p>
|
||||
<div>
|
||||
<span
|
||||
>UI/UX</span
|
||||
>
|
||||
<span
|
||||
>Motion</span
|
||||
>
|
||||
<span
|
||||
>Strategy</span
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</header> -->
|
||||
|
||||
<!-- About Section -->
|
||||
<!-- <section>
|
||||
<div>
|
||||
<div>
|
||||
<span class="material-symbols-outlined">person</span>
|
||||
<h3 data-i18n="about.title">About Me</h3>
|
||||
</div>
|
||||
<p data-i18n="about.description">
|
||||
A sophisticated designer specializing in high-end digital experiences
|
||||
with a focus on dark aesthetics, glassmorphism, and modern typography.
|
||||
Transforming complex problems into elegant, intuitive interfaces.
|
||||
</p>
|
||||
<div>
|
||||
<button
|
||||
data-i18n="about.downloadCV"
|
||||
>
|
||||
Download CV
|
||||
</button>
|
||||
<button
|
||||
data-i18n="about.contact"
|
||||
>
|
||||
Contact
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</section> -->
|
||||
|
||||
<!-- Skills Section -->
|
||||
<!-- <section>
|
||||
<h3 data-i18n="skills.title">
|
||||
Core Expertise
|
||||
</h3>
|
||||
<div>
|
||||
<div>
|
||||
<div>
|
||||
<span>Visual Design</span>
|
||||
<span
|
||||
>Expert</span
|
||||
>
|
||||
</div>
|
||||
<div>
|
||||
<div>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<div>
|
||||
<span>Prototyping</span>
|
||||
<span>
|
||||
>Advanced</span
|
||||
>
|
||||
</div>
|
||||
<div>
|
||||
<div>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<div>
|
||||
<span>Interaction Design</span>
|
||||
<span>
|
||||
>Advanced</span
|
||||
>
|
||||
</div>
|
||||
<div>
|
||||
<div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section> -->
|
||||
|
||||
<!-- Projects Section -->
|
||||
<!-- <section>
|
||||
<div>
|
||||
<h3 data-i18n="projects.title">
|
||||
Latest Work
|
||||
</h3>
|
||||
<a
|
||||
href="#"
|
||||
data-i18n="projects.viewAll"
|
||||
>View All</a
|
||||
>
|
||||
</div>
|
||||
<div id="projects-container">
|
||||
<!-- Projects will be inserted here by JavaScript -->
|
||||
<!-- </div>
|
||||
</section> -->
|
||||
|
||||
<!-- Experience Timeline -->
|
||||
<!-- <section>
|
||||
<h3 data-i18n="experience.title">
|
||||
Experience
|
||||
</h3>
|
||||
<div class="flex items-center gap-2 group cursor-pointer">
|
||||
<div
|
||||
id="experience-container"
|
||||
class="size-10 bg-primary rounded-full flex items-center justify-center text-white shadow-lg shadow-primary/20"
|
||||
>
|
||||
<!-- Experience will be inserted here by JavaScript -->
|
||||
<!-- </div>
|
||||
</section> -->
|
||||
<span class="material-symbols-outlined text-2xl"
|
||||
>auto_awesome</span
|
||||
>
|
||||
</div>
|
||||
<h2 class="text-xl font-bold tracking-tight font-serif italic">
|
||||
Itziar ZG
|
||||
</h2>
|
||||
</div>
|
||||
<nav
|
||||
class="hidden md:flex items-center gap-10 glass px-8 py-3 rounded-full"
|
||||
>
|
||||
<a
|
||||
class="text-sm font-medium hover:text-primary transition-colors"
|
||||
href="#about"
|
||||
>Sobre mí</a
|
||||
>
|
||||
<a
|
||||
class="text-sm font-medium hover:text-primary transition-colors"
|
||||
href="#projects"
|
||||
>Proyectos</a
|
||||
>
|
||||
<a
|
||||
class="text-sm font-medium hover:text-primary transition-colors"
|
||||
href="#stack"
|
||||
>Tech Stack</a
|
||||
>
|
||||
<a
|
||||
class="text-sm font-medium hover:text-primary transition-colors"
|
||||
href="#contact"
|
||||
>Contacto</a
|
||||
>
|
||||
</nav>
|
||||
<button
|
||||
class="bg-primary hover:bg-primary/90 text-white px-6 py-2.5 rounded-full text-sm font-bold transition-all shadow-md shadow-primary/25"
|
||||
>
|
||||
Hablemos
|
||||
</button>
|
||||
</header>
|
||||
|
||||
<!-- Bottom Navigation Bar -->
|
||||
<!-- <div>
|
||||
<div>
|
||||
<a href="#">
|
||||
<span class="material-symbols-outlined fill-1">home</span>
|
||||
</a>
|
||||
<a href="#">
|
||||
<span class="material-symbols-outlined">work</span>
|
||||
</a>
|
||||
<a href="#">
|
||||
<span class="material-symbols-outlined">grid_view</span>
|
||||
</a>
|
||||
<a href="#">
|
||||
<span class="material-symbols-outlined">mail</span>
|
||||
</a>
|
||||
<a href="#">
|
||||
<span class="material-symbols-outlined">person</span>
|
||||
</a>
|
||||
<!-- Hero Section -->
|
||||
<main
|
||||
class="mx-auto max-w-6xl px-6 pt-16 pb-24 md:pt-24 flex flex-col items-center text-center"
|
||||
>
|
||||
<div
|
||||
class="inline-flex items-center gap-2 px-4 py-2 rounded-full bg-primary/10 border border-primary/20 text-primary text-xs font-bold uppercase tracking-widest mb-8"
|
||||
>
|
||||
<span class="relative flex h-2 w-2">
|
||||
<span
|
||||
class="animate-ping absolute inline-flex h-full w-full rounded-full bg-primary opacity-75"
|
||||
></span>
|
||||
<span
|
||||
class="relative inline-flex rounded-full h-2 w-2 bg-primary"
|
||||
></span>
|
||||
</span>
|
||||
Disponible para nuevos proyectos
|
||||
</div>
|
||||
<h1
|
||||
class="text-6xl md:text-8xl font-serif italic leading-[1.1] text-slate-900 mb-6 max-w-4xl"
|
||||
>
|
||||
Arquitecta de
|
||||
<span
|
||||
class="text-primary not-italic font-display font-black tracking-tighter"
|
||||
>IA</span
|
||||
>
|
||||
& Automatización
|
||||
</h1>
|
||||
<p
|
||||
class="text-lg md:text-xl text-slate-600 max-w-2xl mb-12 leading-relaxed"
|
||||
>
|
||||
Construyo automatizaciones y agentes de IA que conectan
|
||||
herramientas, procesan información y transforman flujos de trabajo
|
||||
en sistemas inteligentes.
|
||||
</p>
|
||||
<div class="flex flex-wrap justify-center gap-4">
|
||||
<button
|
||||
class="bg-primary text-white px-8 py-4 rounded-xl font-bold text-lg hover:translate-y-[-2px] transition-transform shadow-xl shadow-primary/30"
|
||||
>
|
||||
Explorar Proyectos
|
||||
</button>
|
||||
<button
|
||||
class="glass px-8 py-4 rounded-xl font-bold text-lg hover:bg-white/60 transition-colors"
|
||||
>
|
||||
Descargar CV
|
||||
</button>
|
||||
</div>
|
||||
<!-- Abstract Decorative Hero Image -->
|
||||
<div
|
||||
class="mt-20 w-full max-w-5xl aspect-[21/9] rounded-3xl overflow-hidden glass border-4 border-white/50 relative"
|
||||
>
|
||||
<div
|
||||
class="absolute inset-0 bg-cover bg-center"
|
||||
data-alt="Abstract soft purple and pink liquid gradients flowing"
|
||||
style="
|
||||
background-image: url("https://lh3.googleusercontent.com/aida-public/AB6AXuD7jcnN_wxvIYoIUzW4qcK4CoDUZZZNjygy4of13sQuWzPdhmFyLBcD-uo94oXDghcnd1bXI9F8yApHPlBJmTsrsoHrDT7H4NcX0Qv3QSCb8qwZgJV6iPJuI1LjVxfxuJBeaAy9X3nHgeacqLeAJkbb0DQg9-LxVDUdgZUABcx65AW1k59FXjFiuf2K2BAop_ki74vQZC0gsddWQbM6TmU--QLahcLkY54YobaPZeL_Fgh0veydf7Wh7pKAT4s6RFcMDKH0w4Ova98");
|
||||
"
|
||||
></div>
|
||||
<div
|
||||
class="absolute inset-0 bg-gradient-to-t from-background-light/80 to-transparent"
|
||||
></div>
|
||||
</div>
|
||||
</main>
|
||||
|
||||
<!-- About Section -->
|
||||
<section class="py-24 bg-white/30" id="about">
|
||||
<div class="mx-auto max-w-6xl px-6">
|
||||
<div class="max-w-3xl">
|
||||
<h2 class="text-4xl font-serif italic mb-6">Sobre mí</h2>
|
||||
<p class="text-lg text-slate-700 leading-relaxed mb-8">
|
||||
Ingeniera de telecomunicaciones y desarrolladora especializada
|
||||
en automatización de procesos, integración de APIs y creación
|
||||
de agentes basados en inteligencia artificial. Construyo
|
||||
sistemas que conectan herramientas, procesan información
|
||||
(texto, audio, vídeo) y crean flujos automatizados que reducen
|
||||
trabajo manual.
|
||||
</p>
|
||||
<div class="grid md:grid-cols-2 gap-4 mt-12">
|
||||
<div class="p-6 glass rounded-2xl">
|
||||
<span
|
||||
class="material-symbols-outlined text-primary text-3xl mb-3 block"
|
||||
>router</span
|
||||
>
|
||||
<h3 class="font-bold mb-2">Automatización</h3>
|
||||
<p class="text-sm text-slate-600">
|
||||
Optimización de procesos complejos con workflows inteligentes.
|
||||
</p>
|
||||
</div>
|
||||
<div class="p-6 glass rounded-2xl">
|
||||
<span
|
||||
class="material-symbols-outlined text-primary text-3xl mb-3 block"
|
||||
>psychology</span
|
||||
>
|
||||
<h3 class="font-bold mb-2">Agentes IA</h3>
|
||||
<p class="text-sm text-slate-600">
|
||||
LLMs y flujos generativos autónomos.
|
||||
</p>
|
||||
</div>
|
||||
<div class="p-6 glass rounded-2xl">
|
||||
<span
|
||||
class="material-symbols-outlined text-primary text-3xl mb-3 block"
|
||||
>hub</span
|
||||
>
|
||||
<h3 class="font-bold mb-2">Integración APIs</h3>
|
||||
<p class="text-sm text-slate-600">
|
||||
Conexión fluida entre servicios SaaS.
|
||||
</p>
|
||||
</div>
|
||||
<div class="p-6 glass rounded-2xl">
|
||||
<span
|
||||
class="material-symbols-outlined text-primary text-3xl mb-3 block"
|
||||
>terminal</span
|
||||
>
|
||||
<h3 class="font-bold mb-2">Web Moderna</h3>
|
||||
<p class="text-sm text-slate-600">
|
||||
Desarrollo Frontend con Next.js y React.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Selected Works Section -->
|
||||
<section class="py-24" id="projects">
|
||||
<div class="mx-auto max-w-6xl px-6">
|
||||
<div class="flex justify-between items-end mb-16">
|
||||
<div>
|
||||
<h2 class="text-5xl font-serif italic mb-4">Selected Works</h2>
|
||||
<p class="text-slate-500">
|
||||
Proyectos destacados en automatización inteligente.
|
||||
</p>
|
||||
</div>
|
||||
<div class="hidden md:block">
|
||||
<span class="material-symbols-outlined text-slate-300 text-6xl"
|
||||
>arrow_right_alt</span
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
<div class="grid md:grid-cols-3 gap-8">
|
||||
<!-- Project 1: AI Knowledge Pipeline -->
|
||||
<div
|
||||
class="group relative flex flex-col glass rounded-3xl overflow-hidden hover:translate-y-[-8px] transition-all duration-500"
|
||||
>
|
||||
<div class="aspect-video relative overflow-hidden">
|
||||
<img
|
||||
class="object-cover w-full h-full group-hover:scale-110 transition-transform duration-700"
|
||||
data-alt="Visualization of an AI neural network and data pipeline"
|
||||
src="https://lh3.googleusercontent.com/aida-public/AB6AXuA8RWItHd5HSWHY1TZGhviEiYL0nH49aw4shoKawpqU6-sXM8PS5yl17suDdKzrYINIOcJ6UMBjTl-c66Ul8JUBHK9PNN0cXxr_1selPrAOi0plM8CipkLw1D-0QUKa05GZg7AzHFCCYWLdicp0_M6TMYPWiEu7cdxASk_G9GTfhUXkNQKjFA0qrxqtqdDAzG-gpLV-XOs7L3hELHIUam_iE_0w4i5DNlONlsACvbS5kTTDB7FOFb7SAMKe0VH_9c5J3F0eQyyjokw"
|
||||
/>
|
||||
<div
|
||||
class="absolute inset-0 bg-primary/20 opacity-0 group-hover:opacity-100 transition-opacity"
|
||||
></div>
|
||||
</div>
|
||||
<div class="p-8">
|
||||
<h3 class="text-xl font-bold mb-2">AI Knowledge Pipeline</h3>
|
||||
<p class="text-slate-600 text-sm mb-6 leading-relaxed">
|
||||
Sistema automatizado capaz de recibir audio, PDFs, vídeos o
|
||||
texto. Transcribe el contenido, lo resume mediante IA y lo
|
||||
almacena estructuradamente para su reutilización.
|
||||
</p>
|
||||
<div class="flex gap-2 flex-wrap">
|
||||
<span
|
||||
class="px-3 py-1 bg-primary/10 rounded-full text-[10px] font-bold text-primary uppercase"
|
||||
>n8n</span
|
||||
>
|
||||
<span
|
||||
class="px-3 py-1 bg-primary/10 rounded-full text-[10px] font-bold text-primary uppercase"
|
||||
>Supabase</span
|
||||
>
|
||||
<span
|
||||
class="px-3 py-1 bg-primary/10 rounded-full text-[10px] font-bold text-primary uppercase"
|
||||
>APIs IA</span
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Project 2: ChefGPT -->
|
||||
<div
|
||||
class="group relative flex flex-col glass rounded-3xl overflow-hidden hover:translate-y-[-8px] transition-all duration-500"
|
||||
>
|
||||
<div class="aspect-video relative overflow-hidden">
|
||||
<img
|
||||
class="object-cover w-full h-full group-hover:scale-110 transition-transform duration-700"
|
||||
data-alt="High-end modern kitchen with minimalist design"
|
||||
src="https://lh3.googleusercontent.com/aida-public/AB6AXuDfqsuP4x2xr1tNEyjnxJ4D517oj2e5uvU9_41GuMiygljVgzuSLFs-teeZfNDCD7jP8ShaU_Vgc_L0qzjAtd5I-8-oVtoxi8ih81LLt3l5IM6-RvPCVAuoIx9jK7q9SvAcvet8d5Fg9YQCndNdiKbWHXgyEkD9ARj0x7EAdyzsGThzWbcVHof2YHZjw3aXpVV7sq0YrQqsQ07WON23OSALCIHo6W80FBSEUydUs6yvDyEoT-XJlLHO_xKX4xS8J4x38c1nhEDIuiw"
|
||||
/>
|
||||
<div
|
||||
class="absolute inset-0 bg-primary/20 opacity-0 group-hover:opacity-100 transition-opacity"
|
||||
></div>
|
||||
</div>
|
||||
<div class="p-8">
|
||||
<h3 class="text-xl font-bold mb-2">ChefGPT</h3>
|
||||
<p class="text-slate-600 text-sm mb-6 leading-relaxed">
|
||||
Agente conversacional que sugiere recetas en función de los
|
||||
ingredientes disponibles. Integra Telegram, Google Sheets y
|
||||
n8n para automatizar consultas de inventario.
|
||||
</p>
|
||||
<div class="flex gap-2 flex-wrap">
|
||||
<span
|
||||
class="px-3 py-1 bg-primary/10 rounded-full text-[10px] font-bold text-primary uppercase"
|
||||
>Telegram</span
|
||||
>
|
||||
<span
|
||||
class="px-3 py-1 bg-primary/10 rounded-full text-[10px] font-bold text-primary uppercase"
|
||||
>Google Sheets</span
|
||||
>
|
||||
<span
|
||||
class="px-3 py-1 bg-primary/10 rounded-full text-[10px] font-bold text-primary uppercase"
|
||||
>n8n</span
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Project 3: Content Processing Automation -->
|
||||
<div
|
||||
class="group relative flex flex-col glass rounded-3xl overflow-hidden hover:translate-y-[-8px] transition-all duration-500"
|
||||
>
|
||||
<div class="aspect-video relative overflow-hidden">
|
||||
<img
|
||||
class="object-cover w-full h-full group-hover:scale-110 transition-transform duration-700"
|
||||
data-alt="Dashboard showing content performance metrics"
|
||||
src="https://lh3.googleusercontent.com/aida-public/AB6AXuBq9zdk9-QnIcGhOgx3FS680JDa-ouDfdurPEV9qAqxu8XVNEqDFe6lg9rGCeof4iPKxENJpJZWCzvn1JauqOrn67WDSYwxD2rHpU_aBWw-2YvoFbuoa4CGp8_1ZGk9LtnLIenHtt1GFoN5fGyTSf3leg6-rbmrueHVrPqu_7M2cp2u0VRFlWSbe8k9kCmk5p6kq4ypMsY-m7QX5SUbvR3JXfWvFKi6mPWF__c2_NPGKAlBwNcfm5MKcbUR4y0XP5YfzIu6yvKP8YA"
|
||||
/>
|
||||
<div
|
||||
class="absolute inset-0 bg-primary/20 opacity-0 group-hover:opacity-100 transition-opacity"
|
||||
></div>
|
||||
</div>
|
||||
<div class="p-8">
|
||||
<h3 class="text-xl font-bold mb-2">
|
||||
Content Processing Automation
|
||||
</h3>
|
||||
<p class="text-slate-600 text-sm mb-6 leading-relaxed">
|
||||
Pipeline automatizado para procesar contenido multimedia
|
||||
(audio, PDFs, vídeos, texto) que genera transcripciones,
|
||||
resúmenes y conocimiento estructurado.
|
||||
</p>
|
||||
<div class="flex gap-2 flex-wrap">
|
||||
<span
|
||||
class="px-3 py-1 bg-primary/10 rounded-full text-[10px] font-bold text-primary uppercase"
|
||||
>Workflow</span
|
||||
>
|
||||
<span
|
||||
class="px-3 py-1 bg-primary/10 rounded-full text-[10px] font-bold text-primary uppercase"
|
||||
>APIs</span
|
||||
>
|
||||
<span
|
||||
class="px-3 py-1 bg-primary/10 rounded-full text-[10px] font-bold text-primary uppercase"
|
||||
>LLMs</span
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Tech Stack Section -->
|
||||
<section class="py-24 relative" id="stack">
|
||||
<div class="absolute inset-0 bg-primary/[0.03] skew-y-3 -z-10"></div>
|
||||
<div class="mx-auto max-w-4xl px-6 text-center">
|
||||
<h2 class="text-4xl font-serif italic mb-16">Tech Curated Stack</h2>
|
||||
<div class="grid grid-cols-2 md:grid-cols-4 gap-8">
|
||||
<div class="flex flex-col items-center gap-4 group">
|
||||
<div
|
||||
class="size-16 glass rounded-2xl flex items-center justify-center group-hover:bg-primary group-hover:text-white transition-all shadow-inner"
|
||||
>
|
||||
<span class="material-symbols-outlined text-3xl">hub</span>
|
||||
</div>
|
||||
<span class="font-medium text-slate-700">n8n</span>
|
||||
</div>
|
||||
<div class="flex flex-col items-center gap-4 group">
|
||||
<div
|
||||
class="size-16 glass rounded-2xl flex items-center justify-center group-hover:bg-primary group-hover:text-white transition-all shadow-inner"
|
||||
>
|
||||
<span class="material-symbols-outlined text-3xl"
|
||||
>terminal</span
|
||||
>
|
||||
</div>
|
||||
<span class="font-medium text-slate-700">Next.js</span>
|
||||
</div>
|
||||
<div class="flex flex-col items-center gap-4 group">
|
||||
<div
|
||||
class="size-16 glass rounded-2xl flex items-center justify-center group-hover:bg-primary group-hover:text-white transition-all shadow-inner"
|
||||
>
|
||||
<span class="material-symbols-outlined text-3xl">code</span>
|
||||
</div>
|
||||
<span class="font-medium text-slate-700">JavaScript</span>
|
||||
</div>
|
||||
<div class="flex flex-col items-center gap-4 group">
|
||||
<div
|
||||
class="size-16 glass rounded-2xl flex items-center justify-center group-hover:bg-primary group-hover:text-white transition-all shadow-inner"
|
||||
>
|
||||
<span class="material-symbols-outlined text-3xl"
|
||||
>model_training</span
|
||||
>
|
||||
</div>
|
||||
<span class="font-medium text-slate-700">LLMs</span>
|
||||
</div>
|
||||
<div class="flex flex-col items-center gap-4 group">
|
||||
<div
|
||||
class="size-16 glass rounded-2xl flex items-center justify-center group-hover:bg-primary group-hover:text-white transition-all shadow-inner"
|
||||
>
|
||||
<span class="material-symbols-outlined text-3xl"
|
||||
>database</span
|
||||
>
|
||||
</div>
|
||||
<span class="font-medium text-slate-700">Supabase</span>
|
||||
</div>
|
||||
<div class="flex flex-col items-center gap-4 group">
|
||||
<div
|
||||
class="size-16 glass rounded-2xl flex items-center justify-center group-hover:bg-primary group-hover:text-white transition-all shadow-inner"
|
||||
>
|
||||
<span class="material-symbols-outlined text-3xl">api</span>
|
||||
</div>
|
||||
<span class="font-medium text-slate-700">APIs</span>
|
||||
</div>
|
||||
<div class="flex flex-col items-center gap-4 group">
|
||||
<div
|
||||
class="size-16 glass rounded-2xl flex items-center justify-center group-hover:bg-primary group-hover:text-white transition-all shadow-inner"
|
||||
>
|
||||
<span class="material-symbols-outlined text-3xl"
|
||||
>palette</span
|
||||
>
|
||||
</div>
|
||||
<span class="font-medium text-slate-700">Tailwind CSS</span>
|
||||
</div>
|
||||
<div class="flex flex-col items-center gap-4 group">
|
||||
<div
|
||||
class="size-16 glass rounded-2xl flex items-center justify-center group-hover:bg-primary group-hover:text-white transition-all shadow-inner"
|
||||
>
|
||||
<span class="material-symbols-outlined text-3xl">chat</span>
|
||||
</div>
|
||||
<span class="font-medium text-slate-700">TypeScript</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Footer / Contact -->
|
||||
<footer class="mt-24 pb-12" id="contact">
|
||||
<div class="mx-auto max-w-6xl px-6">
|
||||
<div
|
||||
class="glass rounded-[3rem] p-12 md:p-24 text-center relative overflow-hidden"
|
||||
>
|
||||
<div class="absolute top-0 right-0 p-8">
|
||||
<span class="material-symbols-outlined text-primary/20 text-9xl"
|
||||
>alternate_email</span
|
||||
>
|
||||
</div>
|
||||
<h2
|
||||
class="text-5xl md:text-7xl font-serif italic mb-8 relative z-10"
|
||||
>
|
||||
¿Creamos algo<br />extraordinario?
|
||||
</h2>
|
||||
<p
|
||||
class="text-xl text-slate-600 mb-12 max-w-xl mx-auto relative z-10"
|
||||
>
|
||||
Estoy siempre abierta a colaborar en proyectos que desafíen los
|
||||
límites de lo posible con IA y automatización.
|
||||
</p>
|
||||
<div
|
||||
class="flex flex-col md:flex-row justify-center gap-6 relative z-10"
|
||||
>
|
||||
<a
|
||||
class="bg-slate-900 text-white px-10 py-5 rounded-2xl font-bold flex items-center justify-center gap-3 hover:bg-slate-800 transition-colors shadow-2xl"
|
||||
href="mailto:itziar.zameza.dev@gmail.com"
|
||||
>
|
||||
<span class="material-symbols-outlined">mail</span>
|
||||
Enviar un Email
|
||||
</a>
|
||||
<div class="flex gap-4 justify-center">
|
||||
<a
|
||||
class="size-16 glass rounded-full flex items-center justify-center hover:text-primary transition-colors"
|
||||
href="#"
|
||||
title="LinkedIn"
|
||||
>
|
||||
<span class="material-symbols-outlined text-2xl">link</span>
|
||||
</a>
|
||||
<a
|
||||
class="size-16 glass rounded-full flex items-center justify-center hover:text-primary transition-colors"
|
||||
href="#"
|
||||
title="GitHub"
|
||||
>
|
||||
<span class="material-symbols-outlined text-2xl"
|
||||
>share</span
|
||||
>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="mt-16 flex flex-col md:flex-row justify-between items-center gap-6 text-slate-400 text-sm"
|
||||
>
|
||||
<p>© 2025 Itziar ZG. Hecho con IA y mucho café.</p>
|
||||
<div class="flex gap-8">
|
||||
<a
|
||||
class="hover:text-primary transition-colors"
|
||||
href="https://www.linkedin.com/in/itziarzamezagarcia"
|
||||
>LinkedIn</a
|
||||
>
|
||||
<a
|
||||
class="hover:text-primary transition-colors"
|
||||
href="https://github.com/itziarZG"
|
||||
>GitHub</a
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
</div>
|
||||
</div> -->
|
||||
</div>
|
||||
|
||||
<script src="js/main.js"></script>
|
||||
<!-- Scripts -->
|
||||
<script>
|
||||
// Smooth scrolling
|
||||
document.querySelectorAll('a[href^="#"]').forEach((anchor) => {
|
||||
anchor.addEventListener("click", function (e) {
|
||||
e.preventDefault();
|
||||
const target = document.querySelector(this.getAttribute("href"));
|
||||
if (target) {
|
||||
target.scrollIntoView({ behavior: "smooth" });
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
// Contact button functionality
|
||||
document
|
||||
.querySelector(".bg-primary")
|
||||
.addEventListener("click", function () {
|
||||
const contactSection = document.getElementById("contact");
|
||||
if (contactSection) {
|
||||
contactSection.scrollIntoView({ behavior: "smooth" });
|
||||
}
|
||||
});
|
||||
|
||||
// Load saved theme
|
||||
const savedTheme = localStorage.getItem("theme");
|
||||
const systemPrefersDark = window.matchMedia(
|
||||
"(prefers-color-scheme: dark)",
|
||||
).matches;
|
||||
if (savedTheme === "dark" || (!savedTheme && systemPrefersDark)) {
|
||||
document.documentElement.classList.add("dark");
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
+536
-414
File diff suppressed because it is too large
Load Diff
Reference in New Issue
Block a user