itziarZG/MyWebsite
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: add multi-language support (ES, CA, EN) and optimize font preloading & CLS

Browse Source
This commit is contained in:
itziarZG
2026-07-20 19:41:51 +02:00
parent 1c1da7df73
commit e9cf9a160a
5 changed files with 2673 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files
css/styles.css
+7 -2
View File
@@ -62,7 +62,7 @@
/* Material Symbols Outlined */ /* Material Symbols Outlined */
@font-face { @font-face {
font-display: swap; font-display: block;
font-family: 'Material Symbols Outlined'; font-family: 'Material Symbols Outlined';
font-style: normal; font-style: normal;
font-weight: 100 700; font-weight: 100 700;
@@ -74,10 +74,15 @@
font-weight: normal; font-weight: normal;
font-style: normal; font-style: normal;
font-size: 24px; font-size: 24px;
width: 1em;
height: 1em;
overflow: hidden;
line-height: 1; line-height: 1;
letter-spacing: normal; letter-spacing: normal;
text-transform: none; text-transform: none;
display: inline-block; display: inline-flex;
align-items: center;
justify-content: center;
white-space: nowrap; white-space: nowrap;
word-wrap: normal; word-wrap: normal;
direction: ltr; direction: ltr;
huella.html
+11 -1
View File
@@ -29,6 +29,8 @@
}, },
}; };
</script> </script>
<link rel="preload" href="fonts/material-symbols-outlined.woff2" as="font" type="font/woff2" crossorigin />
<link rel="preload" href="fonts/space/space-grotesk-v22-latin-regular.woff2" as="font" type="font/woff2" crossorigin />
<link rel="stylesheet" href="css/styles.css?v=1.1" /> <link rel="stylesheet" href="css/styles.css?v=1.1" />
</head> </head>
<body <body
@@ -91,7 +93,15 @@
>Contacto</a >Contacto</a
> >
</nav> </nav>
<div class="flex items-center gap-4"> <div class="flex items-center gap-3">
<!-- Language Switcher -->
<div class="flex items-center gap-1.5 glass px-3 py-1.5 rounded-full text-xs font-bold">
<span class="text-primary">ES</span>
<span class="text-slate-300 dark:text-slate-700">|</span>
<a href="index-ca.html" class="text-slate-600 dark:text-slate-400 hover:text-primary transition-colors" title="Català">CA</a>
<span class="text-slate-300 dark:text-slate-700">|</span>
<a href="index-en.html" class="text-slate-600 dark:text-slate-400 hover:text-primary transition-colors" title="English">EN</a>
</div>
<button <button
class="size-10 flex items-center justify-center rounded-full glass hover:bg-white/60 dark:hover:bg-white/10 transition-colors" class="size-10 flex items-center justify-center rounded-full glass hover:bg-white/60 dark:hover:bg-white/10 transition-colors"
id="theme-toggle" id="theme-toggle"
index-ca.html
+1320
View File
File diff suppressed because it is too large Load Diff
index-en.html
+1320
View File
File diff suppressed because it is too large Load Diff
index.html
+15 -2
View File
@@ -29,6 +29,11 @@
}, },
}; };
</script> </script>
<link rel="alternate" hreflang="es" href="https://www.itziarzameza.dev/index.html" />
<link rel="alternate" hreflang="ca" href="https://www.itziarzameza.dev/index-ca.html" />
<link rel="alternate" hreflang="en" href="https://www.itziarzameza.dev/index-en.html" />
<link rel="preload" href="fonts/material-symbols-outlined.woff2" as="font" type="font/woff2" crossorigin />
<link rel="preload" href="fonts/space/space-grotesk-v22-latin-regular.woff2" as="font" type="font/woff2" crossorigin />
<link rel="stylesheet" href="css/styles.css?v=1.1" /> <link rel="stylesheet" href="css/styles.css?v=1.1" />
</head> </head>
<body <body
@@ -90,7 +95,15 @@
>Contacto</a >Contacto</a
> >
</nav> </nav>
<div class="flex items-center gap-4"> <div class="flex items-center gap-3">
<!-- Language Switcher -->
<div class="flex items-center gap-1.5 glass px-3 py-1.5 rounded-full text-xs font-bold">
<span class="text-primary">ES</span>
<span class="text-slate-300 dark:text-slate-700">|</span>
<a href="index-ca.html" class="text-slate-600 dark:text-slate-400 hover:text-primary transition-colors" title="Català">CA</a>
<span class="text-slate-300 dark:text-slate-700">|</span>
<a href="index-en.html" class="text-slate-600 dark:text-slate-400 hover:text-primary transition-colors" title="English">EN</a>
</div>
<button <button
class="size-10 flex items-center justify-center rounded-full glass hover:bg-white/60 dark:hover:bg-white/10 transition-colors" class="size-10 flex items-center justify-center rounded-full glass hover:bg-white/60 dark:hover:bg-white/10 transition-colors"
id="theme-toggle" id="theme-toggle"
@@ -423,7 +436,7 @@
class="tab-btn px-6 py-3 rounded-xl font-bold text-sm transition-all text-slate-600 dark:text-slate-400 hover:bg-slate-100 dark:hover:bg-white/5" class="tab-btn px-6 py-3 rounded-xl font-bold text-sm transition-all text-slate-600 dark:text-slate-400 hover:bg-slate-100 dark:hover:bg-white/5"
data-tab="writing" data-tab="writing"
> >
Writing Notes
</button> </button>
</div> </div>