feat: change icons and fonts

This commit is contained in:
2026-07-20 15:34:48 +02:00
parent b6a2b049bb
commit b4ff3a0aca
11 changed files with 93 additions and 25 deletions
+86
View File
@@ -1,3 +1,89 @@
/* ==========================================================================
Self-Hosted Fonts & Icons
========================================================================== */
/* Space Grotesk */
@font-face {
font-display: swap;
font-family: 'Space Grotesk';
font-style: normal;
font-weight: 300;
src: url('../fonts/space/space-grotesk-v22-latin-300.woff2') format('woff2');
}
@font-face {
font-display: swap;
font-family: 'Space Grotesk';
font-style: normal;
font-weight: 400;
src: url('../fonts/space/space-grotesk-v22-latin-regular.woff2') format('woff2');
}
@font-face {
font-display: swap;
font-family: 'Space Grotesk';
font-style: normal;
font-weight: 500;
src: url('../fonts/space/space-grotesk-v22-latin-500.woff2') format('woff2');
}
@font-face {
font-display: swap;
font-family: 'Space Grotesk';
font-style: normal;
font-weight: 600;
src: url('../fonts/space/space-grotesk-v22-latin-600.woff2') format('woff2');
}
@font-face {
font-display: swap;
font-family: 'Space Grotesk';
font-style: normal;
font-weight: 700;
src: url('../fonts/space/space-grotesk-v22-latin-700.woff2') format('woff2');
}
/* Instrument Serif */
@font-face {
font-display: swap;
font-family: 'Instrument Serif';
font-style: normal;
font-weight: 400;
src: url('../fonts/instrument/instrument-serif-v5-latin-regular.woff2') format('woff2');
}
@font-face {
font-display: swap;
font-family: 'Instrument Serif';
font-style: italic;
font-weight: 400;
src: url('../fonts/instrument/instrument-serif-v5-latin-italic.woff2') format('woff2');
}
/* Material Symbols Outlined */
@font-face {
font-display: swap;
font-family: 'Material Symbols Outlined';
font-style: normal;
font-weight: 100 700;
src: url('../fonts/MaterialSymbolsOutlined[FILL,GRAD,opsz,wght].woff2') format('woff2');
}
.material-symbols-outlined {
font-family: 'Material Symbols Outlined';
font-weight: normal;
font-style: normal;
font-size: 24px;
line-height: 1;
letter-spacing: normal;
text-transform: none;
display: inline-block;
white-space: nowrap;
word-wrap: normal;
direction: ltr;
-webkit-font-smoothing: antialiased;
}
/* Glass Morphism Effect */
.glass {
background: rgba(255, 255, 255, 0.4);
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
+3 -12
View File
@@ -29,14 +29,6 @@
},
};
</script>
<link
href="https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@300;400;500;600;700&amp;family=Instrument+Serif:ital@0;1&amp;display=swap"
rel="stylesheet"
/>
<link
href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&amp;display=swap"
rel="stylesheet"
/>
<link rel="stylesheet" href="css/styles.css" />
</head>
<body
@@ -258,13 +250,12 @@
<h2
class="text-5xl md:text-7xl font-serif italic mb-8 relative z-10 text-slate-900 dark:text-white"
>
¿Creamos algo<br />extraordinario?
¿Hablamos?
</h2>
<p
class="text-xl text-slate-600 dark:text-slate-400 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 soberanía digital y tecnología responsable.
Si buscas tecnología ligera, accesible y con los pies en la tierra — o simplemente quieres hablar de soberanía digital — escríbeme.
</p>
<div
class="flex flex-col md:flex-row justify-center gap-6 relative z-10"
@@ -299,7 +290,7 @@
<div
class="mt-16 flex flex-col md:flex-row justify-between items-center gap-6 text-slate-400 dark:text-slate-500 text-sm"
>
<p>© 2025 Itziar ZG. Hecho con IA y mucho café.</p>
<p>© 2026 Itziar ZG.</p>
<div class="flex gap-8">
<a
class="hover:text-primary transition-colors text-slate-600 dark:text-slate-400"
+4 -13
View File
@@ -3,7 +3,7 @@
<head>
<meta charset="utf-8" />
<meta content="width=device-width, initial-scale=1.0" name="viewport" />
<title>Itziar ZG | AI &amp; Automation Developer</title>
<title>Itziar ZG | Desarrollo web soberano y sostenible</title>
<script src="https://cdn.tailwindcss.com?plugins=forms,container-queries"></script>
<script id="tailwind-config">
tailwind.config = {
@@ -29,14 +29,6 @@
},
};
</script>
<link
href="https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@300;400;500;600;700&amp;family=Instrument+Serif:ital@0;1&amp;display=swap"
rel="stylesheet"
/>
<link
href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&amp;display=swap"
rel="stylesheet"
/>
<link rel="stylesheet" href="css/styles.css" />
</head>
<body
@@ -591,13 +583,12 @@
<h2
class="text-5xl md:text-7xl font-serif italic mb-8 relative z-10 text-slate-900 dark:text-white"
>
¿Creamos algo<br />extraordinario?
¿Hablamos?
</h2>
<p
class="text-xl text-slate-600 dark:text-slate-400 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.
Si buscas tecnología ligera, accesible y con los pies en la tierra — o simplemente quieres hablar de soberanía digital — escríbeme.
</p>
<div
class="flex flex-col md:flex-row justify-center gap-6 relative z-10"
@@ -632,7 +623,7 @@
<div
class="mt-16 flex flex-col md:flex-row justify-between items-center gap-6 text-slate-400 dark:text-slate-500 text-sm"
>
<p>© 2025 Itziar ZG. Hecho con IA y mucho café.</p>
<p>© 2026 Itziar ZG.</p>
<div class="flex gap-8">
<a
class="hover:text-primary transition-colors text-slate-600 dark:text-slate-400"