diff --git a/.gitignore b/.gitignore index 16d54bb..2bfc1c0 100644 --- a/.gitignore +++ b/.gitignore @@ -22,3 +22,7 @@ pnpm-debug.log* # jetbrains setting folder .idea/ +.gga +diseño/ +.vscode/ + diff --git a/README.md b/README.md index ba563c6..1117d90 100644 --- a/README.md +++ b/README.md @@ -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 diff --git a/index.html b/index.html index 151a230..474aad1 100644 --- a/index.html +++ b/index.html @@ -1,212 +1,576 @@ - + - - - - Itziar ZG - Vanguard CV + + + Itziar ZG | AI & Automation Developer + - - - - + + - - - - - - - - - - - - - - - - - - - - + auto_awesome + +

+ Itziar ZG +

+ + + + - - +
+
+ + + + + Disponible para nuevos proyectos +
+

+ Arquitecta de + IA + & Automatización +

+

+ Construyo automatizaciones y agentes de IA que conectan + herramientas, procesan información y transforman flujos de trabajo + en sistemas inteligentes. +

+
+ + +
+ +
+
+
+
+
+ + +
+
+
+

Sobre mí

+

+ 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. +

+
+
+ router +

Automatización

+

+ Optimización de procesos complejos con workflows inteligentes. +

+
+
+ psychology +

Agentes IA

+

+ LLMs y flujos generativos autónomos. +

+
+
+ hub +

Integración APIs

+

+ Conexión fluida entre servicios SaaS. +

+
+
+ terminal +

Web Moderna

+

+ Desarrollo Frontend con Next.js y React. +

+
+
+
+
+
+ + +
+
+
+
+

Selected Works

+

+ Proyectos destacados en automatización inteligente. +

+
+ +
+
+ +
+
+ +
+
+
+

AI Knowledge Pipeline

+

+ 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. +

+
+ n8n + Supabase + APIs IA +
+
+
+ + +
+
+ +
+
+
+

ChefGPT

+

+ Agente conversacional que sugiere recetas en función de los + ingredientes disponibles. Integra Telegram, Google Sheets y + n8n para automatizar consultas de inventario. +

+
+ Telegram + Google Sheets + n8n +
+
+
+ + +
+
+ +
+
+
+

+ Content Processing Automation +

+

+ Pipeline automatizado para procesar contenido multimedia + (audio, PDFs, vídeos, texto) que genera transcripciones, + resúmenes y conocimiento estructurado. +

+
+ Workflow + APIs + LLMs +
+
+
+
+
+
+ + +
+
+
+

Tech Curated Stack

+
+
+
+ hub +
+ n8n +
+
+
+ terminal +
+ Next.js +
+
+
+ code +
+ JavaScript +
+
+
+ model_training +
+ LLMs +
+
+
+ database +
+ Supabase +
+
+
+ api +
+ APIs +
+
+
+ palette +
+ Tailwind CSS +
+
+
+ chat +
+ TypeScript +
+
+
+
+ + + - --> + - + + diff --git a/styles/main.css b/styles/main.css index d7d795b..787a295 100644 --- a/styles/main.css +++ b/styles/main.css @@ -1,552 +1,674 @@ /* Reset and Base Styles */ * { - margin: 0; - padding: 0; - box-sizing: border-box; + margin: 0; + padding: 0; + box-sizing: border-box; } /* CSS Custom Properties for Theming */ :root { - --primary: #8c2bee; - --primary-light: #d4a5ff; - --background-light: #f7f6f8; - --background-dark: #0d0614; - --surface-light: #ffffff; - --surface-dark: #1a0f2e; - --text-primary-light: #0f172a; - --text-primary-dark: #f8fafc; - --text-secondary-light: #64748b; - --text-secondary-dark: #94a3b8; - --border-light: #e2e8f0; - --border-dark: #334155; - --glass-bg-light: rgba(140, 43, 238, 0.05); - --glass-bg-dark: rgba(20, 10, 30, 0.6); - --glass-border-light: rgba(140, 43, 238, 0.1); - --glass-border-dark: rgba(140, 43, 238, 0.2); + --primary: #3b82f6; + --primary-light: #60a5fa; + --background: #0a0a0a; + --surface: #171717; + --text-primary: #ffffff; + --text-secondary: #94a3b8; + --border: rgba(255, 255, 255, 0.1); + --accent: #8b5cf6; + --glass-bg: rgba(255, 255, 255, 0.03); + --glass-border: rgba(255, 255, 255, 0.1); +} + +/* Dark mode - when html has class="dark" */ +html.dark { + --background: #ffffff; + --surface: #f8fafc; + --text-primary: #0a0a0a; + --text-secondary: #64748b; + --border: rgba(0, 0, 0, 0.1); + --glass-bg: rgba(0, 0, 0, 0.03); + --glass-border: rgba(0, 0, 0, 0.1); } /* Typography */ body { - font-family: 'Space Grotesk', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; - line-height: 1.6; - min-height: max(884px, 100dvh); + font-family: + "Inter", + -apple-system, + BlinkMacSystemFont, + "Segoe UI", + Roboto, + sans-serif; + line-height: 1.6; + background-color: var(--background); + color: var(--text-primary); + transition: + background-color 0.3s ease, + color 0.3s ease; + scroll-behavior: smooth; +} + +/* Layout Classes */ +.container { + max-width: 72rem; + margin: 0 auto; + padding: 0 1.5rem; +} + +/* Navigation */ +.nav { + position: fixed; + top: 0; + width: 100%; + z-index: 50; + border-bottom: 1px solid var(--border); + background-color: var(--background); + backdrop-filter: blur(12px); + display: flex; + justify-content: space-between; + align-items: center; +} + +.nav-content { + max-width: 72rem; + margin: 0 auto; + padding: 0 1.5rem; + height: 4rem; + display: flex; + align-items: center; + justify-content: space-between; +} + +.nav-logo { + font-size: 1.25rem; + font-weight: 700; + letter-spacing: -0.025em; +} + +.nav-links { + display: none; + gap: 2rem; +} + +.nav-links a { + font-size: 0.875rem; + font-weight: 500; + color: var(--text-secondary); + text-decoration: none; + transition: color 0.15s ease; +} + +.nav-links a:hover { + color: var(--text-primary); +} + +.nav-contact { + font-size: 0.875rem; + font-weight: 500; + padding: 0.5rem 1rem; + border-radius: 9999px; + border: 1px solid var(--border); + text-decoration: none; + color: var(--text-primary); + transition: all 0.15s ease; +} + +.nav-contact:hover { + background-color: var(--text-primary); + color: var(--background); +} + +/* Hero Section */ +.hero { + position: relative; + padding-top: 8rem; + padding-bottom: 5rem; + overflow: hidden; +} + +.hero-bg { + position: absolute; + top: 0; + left: 50%; + transform: translateX(-50%); + width: 100%; + height: 100%; + pointer-events: none; +} + +.hero-glow-1 { + position: absolute; + top: -10%; + left: -10%; + width: 40%; + height: 40%; + background-color: rgba(59, 130, 246, 0.2); + border-radius: 50%; + filter: blur(120px); +} + +.hero-glow-2 { + position: absolute; + bottom: 10%; + right: -10%; + width: 30%; + height: 30%; + background-color: rgba(139, 92, 246, 0.2); + border-radius: 50%; + filter: blur(120px); +} + +.hero-content { + max-width: 72rem; + margin: 0 auto; + padding: 0 1.5rem; + position: relative; + z-index: 10; + text-align: center; } -.font-display { - font-family: 'Space Grotesk', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; +.hero-title { + font-size: 3.75rem; + font-weight: 800; + letter-spacing: -0.025em; + margin-bottom: 1.5rem; + background: linear-gradient(to right, #ffffff, #94a3b8, #ffffff); + background-size: 200% 200%; + background-clip: text; + -webkit-background-clip: text; + color: transparent; + animation: subtle-gradient 8s ease infinite; } -/* Material Symbols */ -.material-symbols-outlined { - font-variation-settings: - 'FILL' 0, - 'wght' 400, - 'GRAD' 0, - 'opsz' 24; +.hero-subtitle { + font-size: 1.25rem; + font-weight: 500; + color: var(--primary); + margin-bottom: 2rem; } -.material-symbols-outlined.fill-1 { - font-variation-settings: - 'FILL' 1, - 'wght' 400, - 'GRAD' 0, - 'opsz' 24; +.hero-description { + max-width: 42rem; + margin: 0 auto 3rem; + font-size: 1.125rem; + line-height: 1.625; + color: var(--text-secondary); } -/* Layout */ -.sticky { - position: sticky; +.hero-actions { + display: flex; + flex-direction: column; + align-items: center; + gap: 1rem; } -.top-0 { - top: 0; +.btn-primary { + padding: 1rem 2rem; + background-color: #ffffff; + color: var(--background); + font-weight: 600; + border-radius: 0.5rem; + text-decoration: none; + display: flex; + align-items: center; + gap: 0.5rem; + transition: all 0.15s ease; } -.z-50 { - z-index: 50; +.btn-primary:hover { + opacity: 0.9; } -.flex { - display: flex; +.btn-secondary { + padding: 1rem 2rem; + background-color: var(--surface); + border: 1px solid var(--border); + color: var(--text-primary); + font-weight: 600; + border-radius: 0.5rem; + text-decoration: none; + display: flex; + align-items: center; + justify-content: center; + transition: all 0.15s ease; } -.items-center { - align-items: center; +.btn-secondary:hover { + border-color: var(--primary); } -.justify-between { - justify-content: space-between; +.btn-tertiary { + padding: 1rem 2rem; + background-color: transparent; + color: var(--text-secondary); + font-size: 0.875rem; + font-weight: 500; + border: none; + cursor: pointer; + transition: color 0.15s ease; } -.justify-center { - justify-content: center; +.btn-tertiary:hover { + color: var(--text-primary); } -.justify-end { - justify-content: flex-end; +/* Section Styles */ +.section { + padding: 6rem 0; } -.gap-1 { gap: 0.25rem; } -.gap-2 { gap: 0.5rem; } -.gap-4 { gap: 1rem; } -.gap-6 { gap: 1.5rem; } - -/* Spacing */ -.p-1 { padding: 0.25rem; } -.p-2 { padding: 0.5rem; } -.p-3 { padding: 0.75rem; } -.p-4 { padding: 1rem; } -.p-5 { padding: 1.25rem; } -.p-6 { padding: 1.5rem; } - -.px-1 { padding-left: 0.25rem; padding-right: 0.25rem; } -.px-2 { padding-left: 0.5rem; padding-right: 0.5rem; } -.px-3 { padding-left: 0.75rem; padding-right: 0.75rem; } -.px-6 { padding-left: 1.5rem; padding-right: 1.5rem; } - -.py-1 { padding-top: 0.25rem; padding-bottom: 0.25rem; } -.py-3 { padding-top: 0.75rem; padding-bottom: 0.75rem; } - -.pt-10 { padding-top: 2.5rem; } -.pt-16 { padding-top: 4rem; } -.pb-16 { padding-bottom: 4rem; } -.pb-24 { padding-bottom: 6rem; } - -.mb-1 { margin-bottom: 0.25rem; } -.mb-2 { margin-bottom: 0.5rem; } -.mb-4 { margin-bottom: 1rem; } -.mb-6 { margin-bottom: 1.5rem; } -.mb-8 { margin-bottom: 2rem; } -.mb-12 { margin-bottom: 3rem; } - -.mt-2 { margin-top: 0.5rem; } -.mt-4 { margin-top: 1rem; } - -.ml-8 { margin-left: 2rem; } - -/* Flexbox */ -.flex-col { - flex-direction: column; -} - -.flex-1 { - flex: 1; -} - -/* Grid */ -.grid { - display: grid; -} - -.grid-cols-1 { - grid-template-columns: repeat(1, minmax(0, 1fr)); -} - -/* Positioning */ -.relative { - position: relative; -} - -.absolute { - position: absolute; -} - -.fixed { - position: fixed; -} - -.top-0 { top: 0; } -.right-0 { right: 0; } -.bottom-0 { bottom: 0; } -.left-0 { left: 0; } -.left-1\/2 { left: 50%; } - -.-z-10 { - z-index: -10; -} - -.z-50 { - z-index: 50; -} - -.-translate-x-1\/2 { - transform: translateX(-50%); -} - -/* Sizing */ -.w-32 { width: 8rem; } -.w-48 { width: 12rem; } -.w-64 { width: 16rem; } -.w-full { width: 100%; } -.w-[90%] { width: 90%; } -.w-[95%] { width: 95%; } -.w-[88%] { width: 88%; } -.w-[82%] { width: 82%; } - -.h-32 { height: 8rem; } -.h-48 { height: 12rem; } -.h-64 { height: 16rem; } -.h-1 { height: 0.25rem; } -.h-1\.5 { height: 0.375rem; } -.h-2 { height: 0.5rem; } -.h-2\.5 { height: 0.625rem; } -.h-24 { height: 6rem; } -.h-full { height: 100%; } - -.min-h-screen { - min-height: 100vh; -} - -.max-w-md { - max-width: 28rem; -} - -/* Border Radius */ -.rounded { - border-radius: 0.25rem; -} - -.rounded-full { - border-radius: 9999px; -} - -.rounded-lg { - border-radius: 0.5rem; -} - -.rounded-xl { - border-radius: 0.75rem; +.section-dark { + background-color: var(--surface); } -/* Backgrounds */ -.bg-background-light { - background-color: var(--background-light); +.section-header { + text-align: center; + margin-bottom: 4rem; } -.bg-background-dark { - background-color: var(--background-dark); +.section-title { + font-size: 1.875rem; + font-weight: 700; + margin-bottom: 1rem; } -.bg-primary { - background-color: var(--primary); +.section-subtitle { + color: var(--text-secondary); } -.bg-slate-800 { - background-color: #1e293b; +/* About Section */ +.about-grid { + display: grid; + grid-template-columns: 1fr; + gap: 4rem; + align-items: start; } -.bg-primary\/10 { - background-color: rgba(140, 43, 238, 0.1); +.about-content h2 { + font-size: 1.875rem; + font-weight: 700; + margin-bottom: 1.5rem; } -.bg-primary\/20 { - background-color: rgba(140, 43, 238, 0.2); +.about-content p { + color: var(--text-secondary); + font-size: 1.125rem; + line-height: 1.625; + margin-bottom: 2rem; } -.bg-purple-600\/10 { - background-color: rgba(147, 51, 234, 0.1); +.about-quote { + padding: 1.5rem; + background: var(--glass-bg); + backdrop-filter: blur(10px); + border: 1px solid var(--glass-border); + border-radius: 1rem; + border-left: 4px solid var(--primary); } -.bg-cover { - background-size: cover; +.about-quote p { + font-style: italic; + color: var(--text-secondary); } -.bg-center { - background-position: center; +.capabilities-grid { + display: grid; + grid-template-columns: 1fr; + gap: 1rem; } -.bg-gradient-to-tr { - background: linear-gradient(to top right, var(--primary), var(--primary-light)); +.capability-card { + padding: 1rem; + background: var(--glass-bg); + backdrop-filter: blur(10px); + border: 1px solid var(--glass-border); + border-radius: 0.75rem; } -/* Glass Effects */ -.glass { - background: var(--glass-bg-light); - backdrop-filter: blur(12px); - -webkit-backdrop-filter: blur(12px); - border: 1px solid var(--glass-border-light); +.capability-icon { + width: 2.5rem; + height: 2.5rem; + background-color: rgba(59, 130, 246, 0.1); + border-radius: 0.5rem; + display: flex; + align-items: center; + justify-content: center; + margin-bottom: 1rem; + color: var(--primary); } -.dark .glass { - background: var(--glass-bg-light); - backdrop-filter: blur(12px); - -webkit-backdrop-filter: blur(12px); - border: 1px solid var(--glass-border-light); +.capability-icon.purple { + background-color: rgba(139, 92, 246, 0.1); + color: var(--accent); } -.glass-dark { - background: var(--glass-bg-dark); - backdrop-filter: blur(16px); - -webkit-backdrop-filter: blur(16px); - border: 1px solid var(--glass-border-dark); +.capability-card h3 { + font-weight: 600; + margin-bottom: 0.5rem; } -/* Borders */ -.border { - border: 1px solid; +.capability-card p { + font-size: 0.75rem; + color: var(--text-secondary); } -.border-2 { - border: 2px solid; +/* Projects Section */ +.projects-grid { + display: grid; + grid-template-columns: 1fr; + gap: 2rem; } -.border-4 { - border: 4px solid; +.project-card { + position: relative; + background-color: var(--surface); + border-radius: 1rem; + border: 1px solid var(--border); + overflow: hidden; + transition: all 0.15s ease; } -.border-l-4 { - border-left: 4px solid; +.project-card:hover { + border-color: rgba(59, 130, 246, 0.3); } -.border-primary { - border-color: var(--primary); +.project-image { + height: 12rem; + display: flex; + align-items: center; + justify-content: center; + font-size: 4rem; } -.border-primary\/10 { - border-color: rgba(140, 43, 238, 0.1); +.project-image-1 { + background: linear-gradient( + to bottom right, + rgba(37, 99, 235, 0.2), + rgba(147, 51, 234, 0.2) + ); } -.border-primary\/20 { - border-color: rgba(140, 43, 238, 0.2); +.project-image-2 { + background: linear-gradient( + to bottom right, + rgba(16, 185, 129, 0.2), + rgba(37, 99, 235, 0.2) + ); } -.border-primary\/30 { - border-color: rgba(140, 43, 238, 0.3); +.project-image-3 { + background: linear-gradient( + to bottom right, + rgba(147, 51, 234, 0.2), + rgba(219, 39, 119, 0.2) + ); } -.border-background-dark { - border-color: var(--background-dark); +.project-content { + padding: 2rem; } -/* Text Colors */ -.text-slate-900 { - color: var(--text-primary-light); +.project-tags { + display: flex; + gap: 0.5rem; + margin-bottom: 1rem; } -.dark .text-slate-900 { - color: var(--text-primary-dark); +.project-tag { + font-size: 10px; + text-transform: uppercase; + letter-spacing: 0.05em; + font-weight: 700; + padding: 0.25rem 0.5rem; + background-color: rgba(255, 255, 255, 0.05); + border-radius: 0.25rem; + color: var(--text-secondary); } -.text-slate-100 { - color: var(--text-primary-dark); +.project-card h3 { + font-size: 1.25rem; + font-weight: 700; + margin-bottom: 0.75rem; + transition: color 0.15s ease; } -.text-slate-400 { - color: var(--text-secondary-light); +.project-card:hover h3 { + color: var(--primary); } -.dark .text-slate-400 { - color: var(--text-secondary-dark); +.project-card p { + color: var(--text-secondary); + font-size: 0.875rem; + line-height: 1.625; + margin-bottom: 1.5rem; } -.text-slate-500 { - color: #64748b; +.project-link { + display: flex; + align-items: center; + font-size: 0.75rem; + font-weight: 600; + text-transform: uppercase; + letter-spacing: 0.05em; + color: var(--primary); + text-decoration: none; } -.text-primary { - color: var(--primary); +.project-link svg { + width: 1rem; + height: 1rem; + margin-left: 0.5rem; } -.text-white { - color: white; +/* Tech Stack Section */ +.tech-grid { + display: grid; + grid-template-columns: repeat(2, 1fr); + gap: 1.5rem; } -/* Typography */ -.text-xs { font-size: 0.75rem; } -.text-sm { font-size: 0.875rem; } -.text-lg { font-size: 1.125rem; } -.text-xl { font-size: 1.25rem; } -.text-2xl { font-size: 1.5rem; } -.text-3xl { font-size: 1.875rem; } -.text-4xl { font-size: 2.25rem; } - -.font-thin { font-weight: 100; } -.font-light { font-weight: 300; } -.font-normal { font-weight: 400; } -.font-medium { font-weight: 500; } -.font-semibold { font-weight: 600; } -.font-bold { font-weight: 700; } - -.tracking-tight { letter-spacing: -0.025em; } -.tracking-tighter { letter-spacing: -0.05em; } -.tracking-widest { letter-spacing: 0.1em; } -.tracking-wider { letter-spacing: 0.05em; } - -.uppercase { text-transform: uppercase; } -.lowercase { text-transform: lowercase; } - -.leading-relaxed { line-height: 1.625; } - -.text-center { text-align: center; } - -/* Effects */ -.transition-colors { - transition-property: color, background-color, border-color; - transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); - transition-duration: 150ms; +.tech-item { + padding: 1.5rem; + border: 1px solid var(--border); + border-radius: 1rem; + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + transition: all 0.15s ease; } -.shadow-lg { - box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05); +.tech-item:hover { + border-color: rgba(59, 130, 246, 0.5); + background-color: rgba(59, 130, 246, 0.05); } -.shadow-primary\/20 { - box-shadow: 0 10px 15px -3px rgba(140, 43, 238, 0.2), 0 4px 6px -2px rgba(140, 43, 238, 0.1); +.tech-icon { + width: 3rem; + height: 3rem; + background-color: rgba(255, 255, 255, 0.05); + border-radius: 50%; + display: flex; + align-items: center; + justify-content: center; + margin-bottom: 1rem; + font-size: 1.25rem; + font-weight: 700; } -.shadow-2xl { - box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25); +.tech-icon.emerald { + color: #10b981; } -.shadow-primary\/20 { - box-shadow: 0 25px 50px -12px rgba(140, 43, 238, 0.25); +.tech-name { + font-size: 0.875rem; + font-weight: 500; } -.blur-\[100px\] { - filter: blur(100px); +/* Footer */ +.footer { + padding: 6rem 0; + border-top: 1px solid var(--border); } -.blur-\[80px\] { - filter: blur(80px); +.footer-content { + text-align: center; } -.overflow-hidden { - overflow: hidden; +.footer h2 { + font-size: 2.25rem; + font-weight: 700; + margin-bottom: 2rem; } -.space-y-2 > * + * { - margin-top: 0.5rem; -} - -.space-y-4 > * + * { - margin-top: 1rem; -} - -.space-y-8 > * + * { - margin-top: 2rem; -} - -.space-x-2 > * + * { - margin-left: 0.5rem; -} - -/* Hover States */ -.hover\:bg-primary\/10:hover { - background-color: rgba(140, 43, 238, 0.1); -} - -/* Group States */ -.group:hover .group-hover\:scale-105 { - transform: scale(1.05); -} - -/* Dark Mode */ -.dark { - color-scheme: dark; -} - -.dark .bg-background-light { - background-color: var(--background-dark); -} - -.dark .text-slate-900 { - color: var(--text-primary-dark); -} - -.dark .text-slate-400 { - color: var(--text-secondary-dark); -} - -/* Responsive */ -@media (min-width: 640px) { - .sm\:grid-cols-2 { - grid-template-columns: repeat(2, minmax(0, 1fr)); - } -} - -@media (min-width: 768px) { - .md\:grid-cols-3 { - grid-template-columns: repeat(3, minmax(0, 1fr)); - } -} - -@media (min-width: 1024px) { - .lg\:grid-cols-4 { - grid-template-columns: repeat(4, minmax(0, 1fr)); - } -} - -/* Utility Classes */ -.block { - display: block; -} - -.inline { - display: inline; -} - -.inline-block { - display: inline-block; -} - -.hidden { - display: none; -} - -.opacity-0 { opacity: 0; } -.opacity-30 { opacity: 0.3; } -.opacity-100 { opacity: 1; } - -.cursor-pointer { - cursor: pointer; +.footer p { + color: var(--text-secondary); + font-size: 1.125rem; + margin-bottom: 3rem; + max-width: 36rem; + margin-left: auto; + margin-right: auto; } -.select-none { - user-select: none; +.footer-links { + display: flex; + flex-direction: column; + align-items: center; + gap: 1.5rem; } -.pointer-events-none { - pointer-events: none; +.footer-link { + font-size: 1.125rem; + font-weight: 600; + color: var(--text-primary); + text-decoration: none; + transition: color 0.15s ease; } -/* Focus States */ -.focus\:outline-none:focus { - outline: 2px solid transparent; - outline-offset: 2px; +.footer-link:hover { + color: var(--primary); } -.focus\:ring-2:focus { - box-shadow: 0 0 0 2px var(--primary); +.footer-divider { + display: none; + width: 1px; + height: 1.5rem; + background-color: rgba(255, 255, 255, 0.2); } -/* Animation */ -@keyframes fadeIn { - from { opacity: 0; transform: translateY(10px); } - to { opacity: 1; transform: translateY(0); } +.footer-copyright { + margin-top: 6rem; + font-size: 0.875rem; + color: var(--text-secondary); + opacity: 0.5; } -.animate-fade-in { - animation: fadeIn 0.5s ease-out; +/* Custom Animations */ +@keyframes subtle-gradient { + 0% { + background-position: 0% 50%; + } + 50% { + background-position: 100% 50%; + } + 100% { + background-position: 0% 50%; + } } /* Custom scrollbar */ ::-webkit-scrollbar { - width: 8px; + width: 8px; } ::-webkit-scrollbar-track { - background: var(--background-light); -} - -.dark ::-webkit-scrollbar-track { - background: var(--background-dark); + background: var(--background); } ::-webkit-scrollbar-thumb { - background: var(--primary); - border-radius: 4px; + background: var(--primary); + border-radius: 4px; } ::-webkit-scrollbar-thumb:hover { - background: var(--primary-light); + background: var(--primary-light); +} + +/* Media Queries */ +@media (min-width: 768px) { + .hero { + padding-top: 12rem; + padding-bottom: 8rem; + } + + .hero-title { + font-size: 6rem; + } + + .hero-subtitle { + font-size: 1.875rem; + } + + .nav-links { + display: flex; + } + + .hero-actions { + flex-direction: row; + justify-content: center; + } + + .about-grid { + grid-template-columns: 1fr 1fr; + } + + .capabilities-grid { + grid-template-columns: 1fr 1fr; + } + + .projects-grid { + grid-template-columns: 1fr; + } + + .footer-links { + flex-direction: row; + align-items: center; + } + + .footer-divider { + display: block; + } +} + +@media (min-width: 1024px) { + .projects-grid { + grid-template-columns: repeat(3, 1fr); + } + + .tech-grid { + grid-template-columns: repeat(6, 1fr); + } +} + +/* Theme Toggle Button */ +.theme-toggle { + position: fixed; + bottom: 2rem; + right: 2rem; + width: 3rem; + height: 3rem; + background-color: var(--surface); + border: 1px solid var(--border); + border-radius: 50%; + display: flex; + align-items: center; + justify-content: center; + cursor: pointer; + transition: all 0.15s ease; + z-index: 50; +} + +.theme-toggle:hover { + background-color: var(--primary); + color: white; }