chore: add under construction
This commit is contained in:
Itziar Zameza García
+192
-139
@@ -1,159 +1,212 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en" class="light">
|
||||
<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">
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<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>
|
||||
<link rel="icon" type="image/svg+xml" href="/favicon.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" rel="stylesheet">
|
||||
<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght@100..700,0..1&display=swap" rel="stylesheet">
|
||||
</head>
|
||||
<body class="bg-background-light dark:bg-background-dark font-display text-slate-900 dark:text-slate-100 min-h-screen pb-24">
|
||||
<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"
|
||||
rel="stylesheet"
|
||||
/>
|
||||
<link
|
||||
href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght@100..700,0..1&display=swap"
|
||||
rel="stylesheet"
|
||||
/>
|
||||
</head>
|
||||
<body>
|
||||
<!-- Top Navigation -->
|
||||
<nav class="sticky top-0 z-50 flex items-center justify-between p-4 glass-dark">
|
||||
<div class="flex items-center gap-2">
|
||||
<span class="material-symbols-outlined text-primary text-3xl">deployed_code</span>
|
||||
<h1 class="text-xl font-bold tracking-tight">Itziar ZG</h1>
|
||||
</div>
|
||||
<div class="flex items-center gap-2">
|
||||
<button
|
||||
id="language-toggle"
|
||||
class="p-2 rounded-full hover:bg-primary/10 transition-colors"
|
||||
aria-label="Toggle language"
|
||||
>
|
||||
<span class="material-symbols-outlined text-primary">translate</span>
|
||||
</button>
|
||||
<button
|
||||
id="theme-toggle"
|
||||
class="p-2 rounded-full hover:bg-primary/10 transition-colors"
|
||||
aria-label="Toggle theme"
|
||||
>
|
||||
<span class="material-symbols-outlined text-primary">dark_mode</span>
|
||||
</button>
|
||||
</div>
|
||||
<nav>
|
||||
<div>
|
||||
<h1>Under construction Itziar ZG</h1>
|
||||
</div>
|
||||
<!-- <div>
|
||||
<button
|
||||
id="language-toggle"
|
||||
aria-label="Toggle language"
|
||||
>
|
||||
<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 class="relative px-6 pt-10 pb-16 overflow-hidden">
|
||||
<div class="absolute top-0 right-0 -z-10 w-64 h-64 bg-primary/20 rounded-full blur-[100px]"></div>
|
||||
<div class="absolute bottom-0 left-0 -z-10 w-48 h-48 bg-purple-600/10 rounded-full blur-[80px]"></div>
|
||||
|
||||
<div class="flex flex-col items-center text-center gap-6">
|
||||
<div class="relative p-1 rounded-full bg-gradient-to-tr from-primary to-purple-400">
|
||||
<div
|
||||
class="w-32 h-32 rounded-full bg-cover bg-center border-4 border-background-dark"
|
||||
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 class="space-y-2">
|
||||
<h2 class="text-4xl font-bold tracking-tighter" data-i18n="hero.title">Vanguard Designer</h2>
|
||||
<p class="text-primary font-medium tracking-widest uppercase text-sm" data-i18n="hero.subtitle">Crafting Digital Excellence</p>
|
||||
<div class="flex gap-2 justify-center mt-4">
|
||||
<span class="px-3 py-1 rounded-full text-xs font-semibold glass border border-primary/20">UI/UX</span>
|
||||
<span class="px-3 py-1 rounded-full text-xs font-semibold glass border border-primary/20">Motion</span>
|
||||
<span class="px-3 py-1 rounded-full text-xs font-semibold glass border border-primary/20">Strategy</span>
|
||||
</div>
|
||||
</div>
|
||||
<!-- <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>
|
||||
</header>
|
||||
|
||||
<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 class="px-6 mb-12">
|
||||
<div class="glass-dark rounded-xl p-6 space-y-4">
|
||||
<div class="flex items-center gap-2 text-primary">
|
||||
<span class="material-symbols-outlined">person</span>
|
||||
<h3 class="font-bold text-lg" data-i18n="about.title">About Me</h3>
|
||||
</div>
|
||||
<p class="text-slate-400 leading-relaxed" 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 class="flex gap-4 pt-2">
|
||||
<button class="flex-1 bg-primary text-white py-3 rounded-lg font-bold shadow-lg shadow-primary/20" data-i18n="about.downloadCV">Download CV</button>
|
||||
<button class="flex-1 border border-primary/30 text-primary py-3 rounded-lg font-bold glass" data-i18n="about.contact">Contact</button>
|
||||
</div>
|
||||
<!-- <section>
|
||||
<div>
|
||||
<div>
|
||||
<span class="material-symbols-outlined">person</span>
|
||||
<h3 data-i18n="about.title">About Me</h3>
|
||||
</div>
|
||||
</section>
|
||||
<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 class="px-6 mb-12">
|
||||
<h3 class="text-2xl font-bold mb-6 px-1" data-i18n="skills.title">Core Expertise</h3>
|
||||
<div class="grid grid-cols-1 gap-4">
|
||||
<div class="glass-dark p-5 rounded-xl border-l-4 border-primary">
|
||||
<div class="flex justify-between items-center mb-3">
|
||||
<span class="font-bold">Visual Design</span>
|
||||
<span class="text-xs text-primary bg-primary/10 px-2 py-1 rounded">Expert</span>
|
||||
</div>
|
||||
<div class="w-full bg-slate-800 h-1.5 rounded-full overflow-hidden">
|
||||
<div class="bg-primary h-full w-[95%]"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="glass-dark p-5 rounded-xl border-l-4 border-primary">
|
||||
<div class="flex justify-between items-center mb-3">
|
||||
<span class="font-bold">Prototyping</span>
|
||||
<span class="text-xs text-primary bg-primary/10 px-2 py-1 rounded">Advanced</span>
|
||||
</div>
|
||||
<div class="w-full bg-slate-800 h-1.5 rounded-full overflow-hidden">
|
||||
<div class="bg-primary h-full w-[88%]"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="glass-dark p-5 rounded-xl border-l-4 border-primary">
|
||||
<div class="flex justify-between items-center mb-3">
|
||||
<span class="font-bold">Interaction Design</span>
|
||||
<span class="text-xs text-primary bg-primary/10 px-2 py-1 rounded">Advanced</span>
|
||||
</div>
|
||||
<div class="w-full bg-slate-800 h-1.5 rounded-full overflow-hidden">
|
||||
<div class="bg-primary h-full w-[82%]"></div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- <section>
|
||||
<h3 data-i18n="skills.title">
|
||||
Core Expertise
|
||||
</h3>
|
||||
<div>
|
||||
<div>
|
||||
<div>
|
||||
<span>Visual Design</span>
|
||||
<span
|
||||
>Expert</span
|
||||
>
|
||||
</div>
|
||||
<div>
|
||||
<div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<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 class="px-6 mb-12">
|
||||
<div class="flex justify-between items-end mb-6 px-1">
|
||||
<h3 class="text-2xl font-bold" data-i18n="projects.title">Latest Work</h3>
|
||||
<a class="text-primary text-sm font-semibold" href="#" data-i18n="projects.viewAll">View All</a>
|
||||
</div>
|
||||
<div class="flex flex-col gap-6" id="projects-container">
|
||||
<!-- Projects will be inserted here by JavaScript -->
|
||||
</div>
|
||||
</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 class="px-6 mb-12">
|
||||
<h3 class="text-2xl font-bold mb-6 px-1" data-i18n="experience.title">Experience</h3>
|
||||
<div class="space-y-8 relative before:absolute before:left-[11px] before:top-2 before:bottom-2 before:w-0.5 before:bg-primary/20" id="experience-container">
|
||||
<!-- Experience will be inserted here by JavaScript -->
|
||||
</div>
|
||||
</section>
|
||||
<!-- <section>
|
||||
<h3 data-i18n="experience.title">
|
||||
Experience
|
||||
</h3>
|
||||
<div
|
||||
id="experience-container"
|
||||
>
|
||||
<!-- Experience will be inserted here by JavaScript -->
|
||||
<!-- </div>
|
||||
</section> -->
|
||||
|
||||
<!-- Bottom Navigation Bar -->
|
||||
<div class="fixed bottom-6 left-1/2 -translate-x-1/2 w-[90%] max-w-md z-50">
|
||||
<div class="glass-dark rounded-full px-6 py-3 flex items-center justify-between border border-primary/30 shadow-2xl shadow-primary/20">
|
||||
<a class="flex flex-col items-center gap-1 text-primary" href="#">
|
||||
<span class="material-symbols-outlined fill-1">home</span>
|
||||
</a>
|
||||
<a class="flex flex-col items-center gap-1 text-slate-500" href="#">
|
||||
<span class="material-symbols-outlined">work</span>
|
||||
</a>
|
||||
<a class="flex flex-col items-center gap-1 text-slate-500" href="#">
|
||||
<span class="material-symbols-outlined">grid_view</span>
|
||||
</a>
|
||||
<a class="flex flex-col items-center gap-1 text-slate-500" href="#">
|
||||
<span class="material-symbols-outlined">mail</span>
|
||||
</a>
|
||||
<a class="flex flex-col items-center gap-1 text-slate-500" href="#">
|
||||
<span class="material-symbols-outlined">person</span>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<!-- <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>
|
||||
</div>
|
||||
</div> -->
|
||||
|
||||
<script src="/js/main.js"></script>
|
||||
</body>
|
||||
<script src="js/main.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
Reference in New Issue
Block a user