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

perf: replace Tailwind CDN with minified CSS build

Browse Source 
- Add package.json, tailwind.config.js and css/source.css with @tailwind directives
- Generate css/styles.css (24 KB) via Tailwind CLI v3.4
- Remove cdn.tailwindcss.com and inline tailwind.config from all HTML pages
- Add preload of css/styles.css
- Add cross-language hreflang alternates in HTML and sitemap.xml
This commit is contained in:
itziarZG
2026-07-26 21:30:21 +02:00
parent 3b6352bdca
commit e287861dd7
13 changed files with 1295 additions and 368 deletions
Download Patch File Download Diff File Expand all files Collapse all files
css/source.css
+173
View File
@@ -0,0 +1,173 @@
/* ==========================================================================
Self-Hosted Fonts & Icons
========================================================================== */
@tailwind base;
@tailwind components;
@tailwind utilities;
/* 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: 300 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: 300 400;
src: url('../fonts/instrument/instrument-serif-v5-latin-italic.woff2') format('woff2');
}
/* Material Symbols Outlined */
@font-face {
font-display: block;
font-family: 'Material Symbols Outlined';
font-style: normal;
font-weight: 100 700;
src: url('../fonts/material-symbols-outlined.woff2') format('woff2');
}
.material-symbols-outlined {
font-family: 'Material Symbols Outlined';
font-weight: normal;
font-style: normal;
font-size: 24px;
width: 1em;
height: 1em;
overflow: hidden;
line-height: 1;
letter-spacing: normal;
text-transform: none;
display: inline-flex;
align-items: center;
justify-content: center;
white-space: nowrap;
word-wrap: normal;
direction: ltr;
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
-moz-osx-font-smoothing: grayscale;
font-feature-settings: 'liga';
-webkit-font-feature-settings: 'liga';
}
/* Glass Morphism Effect */
.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);
}
.dark .glass {
background: rgba(30, 20, 40, 0.4);
border: 1px solid rgba(255, 255, 255, 0.1);
}
/* Iridescent Background Gradient */
.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 Blob Shapes */
.fluid-shape {
border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%;
}
.skip-link {
position: fixed;
top: 1rem;
left: 1rem;
z-index: 100;
transform: translateY(-200%);
padding: 0.75rem 1rem;
border-radius: 0.5rem;
background: #191022;
color: #ffffff;
font-weight: 700;
}
.skip-link:focus {
transform: translateY(0);
}
:focus-visible {
outline: 3px solid #8c2bee;
outline-offset: 3px;
}
:target {
scroll-margin-top: 2rem;
}
@media (prefers-reduced-motion: reduce) {
*,
*::before,
*::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
scroll-behavior: auto !important;
transition-duration: 0.01ms !important;
}
}
css/styles.css
+2 -168
View File
File diff suppressed because one or more lines are too long
huella.html
+5 -27
View File
@@ -37,34 +37,12 @@
"mainEntityOfPage": "https://www.itziarzameza.dev/huella.html"
}
</script>
<script src="https://cdn.tailwindcss.com?plugins=forms,container-queries"></script>
<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>
<link rel="preload" href="fonts/material-symbols-outlined.woff2" as="font" type="font/woff2" crossorigin />
<link rel="preload" href="css/styles.css" as="style" />
<link rel="stylesheet" href="css/styles.css" />
<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/space/space-grotesk-v22-latin-regular.woff2" as="font" type="font/woff2" crossorigin />
<link rel="stylesheet" href="css/styles.css?v=1.1" />
<script
defer
src="https://stats.itziarzameza.dev/script.js"
index-ca.html
+2 -26
View File
@@ -33,31 +33,8 @@
]
}
</script>
<script src="https://cdn.tailwindcss.com?plugins=forms,container-queries"></script>
<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>
<link rel="preload" href="css/styles.css" as="style" />
<link rel="stylesheet" href="css/styles.css" />
<link
rel="alternate"
hreflang="es"
@@ -92,7 +69,6 @@
type="font/woff2"
crossorigin
/>
<link rel="stylesheet" href="css/styles.css?v=1.1" />
<script
defer
src="https://stats.itziarzameza.dev/script.js"
index-en.html
+2 -26
View File
@@ -33,31 +33,8 @@
]
}
</script>
<script src="https://cdn.tailwindcss.com?plugins=forms,container-queries"></script>
<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>
<link rel="preload" href="css/styles.css" as="style" />
<link rel="stylesheet" href="css/styles.css" />
<link
rel="alternate"
hreflang="es"
@@ -92,7 +69,6 @@
type="font/woff2"
crossorigin
/>
<link rel="stylesheet" href="css/styles.css?v=1.1" />
<script
defer
src="https://stats.itziarzameza.dev/script.js"
index.html
+2 -41
View File
@@ -33,51 +33,13 @@
]
}
</script>
<script src="https://cdn.tailwindcss.com?plugins=forms,container-queries"></script>
<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>
<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="alternate"
hreflang="x-default"
href="https://www.itziarzameza.dev/index.html"
/>
<link rel="preload" href="css/styles.css" as="style" />
<link rel="stylesheet" href="css/styles.css" />
<link
rel="preload"
href="fonts/material-symbols-outlined.woff2"
@@ -92,7 +54,6 @@
type="font/woff2"
crossorigin
/>
<link rel="stylesheet" href="css/styles.css?v=1.1" />
<script
defer
src="https://stats.itziarzameza.dev/script.js"
package-lock.json
Generated
+1028
View File
File diff suppressed because it is too large Load Diff
package.json
+13
View File
@@ -0,0 +1,13 @@
{
"name": "mywebsite",
"version": "1.0.0",
"private": true,
"description": "Personal portfolio of Itziar ZG",
"scripts": {
"build:css": "tailwindcss -i ./css/source.css -o ./css/styles.css --minify",
"watch:css": "tailwindcss -i ./css/source.css -o ./css/styles.css --watch"
},
"devDependencies": {
"tailwindcss": "^3.4.17"
}
}
privacidad-ca.html
+2 -26
View File
@@ -16,38 +16,14 @@
<meta property="og:title" content="Política de privacitat | Itziar ZG" />
<meta property="og:description" content="Informació sobre el tractament de dades i els drets RGPD en aquest lloc web." />
<meta property="og:url" content="https://www.itziarzameza.dev/privacidad-ca.html" />
<script src="https://cdn.tailwindcss.com?plugins=forms,container-queries"></script>
<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>
<link rel="preload" href="css/styles.css" as="style" />
<link rel="stylesheet" href="css/styles.css" />
<link rel="alternate" hreflang="es" href="https://www.itziarzameza.dev/privacidad.html" />
<link rel="alternate" hreflang="ca" href="https://www.itziarzameza.dev/privacidad-ca.html" />
<link rel="alternate" hreflang="en" href="https://www.itziarzameza.dev/privacidad-en.html" />
<link rel="alternate" hreflang="x-default" href="https://www.itziarzameza.dev/privacidad.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" />
<script
defer
src="https://stats.itziarzameza.dev/script.js"
privacidad-en.html
+2 -26
View File
@@ -16,38 +16,14 @@
<meta property="og:title" content="Privacy policy | Itziar ZG" />
<meta property="og:description" content="Information about data processing and GDPR rights on this website." />
<meta property="og:url" content="https://www.itziarzameza.dev/privacidad-en.html" />
<script src="https://cdn.tailwindcss.com?plugins=forms,container-queries"></script>
<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>
<link rel="preload" href="css/styles.css" as="style" />
<link rel="stylesheet" href="css/styles.css" />
<link rel="alternate" hreflang="es" href="https://www.itziarzameza.dev/privacidad.html" />
<link rel="alternate" hreflang="ca" href="https://www.itziarzameza.dev/privacidad-ca.html" />
<link rel="alternate" hreflang="en" href="https://www.itziarzameza.dev/privacidad-en.html" />
<link rel="alternate" hreflang="x-default" href="https://www.itziarzameza.dev/privacidad.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" />
<script
defer
src="https://stats.itziarzameza.dev/script.js"
privacidad.html
+2 -26
View File
@@ -16,38 +16,14 @@
<meta property="og:title" content="Política de privacidad | Itziar ZG" />
<meta property="og:description" content="Información sobre el tratamiento de datos y los derechos RGPD en este sitio web." />
<meta property="og:url" content="https://www.itziarzameza.dev/privacidad.html" />
<script src="https://cdn.tailwindcss.com?plugins=forms,container-queries"></script>
<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>
<link rel="preload" href="css/styles.css" as="style" />
<link rel="stylesheet" href="css/styles.css" />
<link rel="alternate" hreflang="es" href="https://www.itziarzameza.dev/privacidad.html" />
<link rel="alternate" hreflang="ca" href="https://www.itziarzameza.dev/privacidad-ca.html" />
<link rel="alternate" hreflang="en" href="https://www.itziarzameza.dev/privacidad-en.html" />
<link rel="alternate" hreflang="x-default" href="https://www.itziarzameza.dev/privacidad.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" />
<script
defer
src="https://stats.itziarzameza.dev/script.js"
sitemap.xml
+29 -2
View File
@@ -1,38 +1,65 @@
<?xml version="1.0" encoding="UTF-8"?>
<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">
<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9" xmlns:xhtml="http://www.w3.org/1999/xhtml">
<url>
<loc>https://www.itziarzameza.dev/index.html</loc>
<lastmod>2026-07-26</lastmod>
<priority>1.0</priority>
<xhtml:link rel="alternate" hreflang="es" href="https://www.itziarzameza.dev/index.html" />
<xhtml:link rel="alternate" hreflang="ca" href="https://www.itziarzameza.dev/index-ca.html" />
<xhtml:link rel="alternate" hreflang="en" href="https://www.itziarzameza.dev/index-en.html" />
<xhtml:link rel="alternate" hreflang="x-default" href="https://www.itziarzameza.dev/index.html" />
</url>
<url>
<loc>https://www.itziarzameza.dev/index-ca.html</loc>
<lastmod>2026-07-26</lastmod>
<priority>0.9</priority>
<xhtml:link rel="alternate" hreflang="es" href="https://www.itziarzameza.dev/index.html" />
<xhtml:link rel="alternate" hreflang="ca" href="https://www.itziarzameza.dev/index-ca.html" />
<xhtml:link rel="alternate" hreflang="en" href="https://www.itziarzameza.dev/index-en.html" />
<xhtml:link rel="alternate" hreflang="x-default" href="https://www.itziarzameza.dev/index.html" />
</url>
<url>
<loc>https://www.itziarzameza.dev/index-en.html</loc>
<lastmod>2026-07-26</lastmod>
<priority>0.9</priority>
<xhtml:link rel="alternate" hreflang="es" href="https://www.itziarzameza.dev/index.html" />
<xhtml:link rel="alternate" hreflang="ca" href="https://www.itziarzameza.dev/index-ca.html" />
<xhtml:link rel="alternate" hreflang="en" href="https://www.itziarzameza.dev/index-en.html" />
<xhtml:link rel="alternate" hreflang="x-default" href="https://www.itziarzameza.dev/index.html" />
</url>
<url>
<loc>https://www.itziarzameza.dev/huella.html</loc>
<lastmod>2026-07-26</lastmod>
<priority>0.8</priority>
<xhtml:link rel="alternate" hreflang="es" href="https://www.itziarzameza.dev/index.html" />
<xhtml:link rel="alternate" hreflang="ca" href="https://www.itziarzameza.dev/index-ca.html" />
<xhtml:link rel="alternate" hreflang="en" href="https://www.itziarzameza.dev/index-en.html" />
</url>
<url>
<loc>https://www.itziarzameza.dev/privacidad.html</loc>
<lastmod>2026-07-26</lastmod>
<priority>0.4</priority>
<xhtml:link rel="alternate" hreflang="es" href="https://www.itziarzameza.dev/privacidad.html" />
<xhtml:link rel="alternate" hreflang="ca" href="https://www.itziarzameza.dev/privacidad-ca.html" />
<xhtml:link rel="alternate" hreflang="en" href="https://www.itziarzameza.dev/privacidad-en.html" />
<xhtml:link rel="alternate" hreflang="x-default" href="https://www.itziarzameza.dev/privacidad.html" />
</url>
<url>
<loc>https://www.itziarzameza.dev/privacidad-ca.html</loc>
<lastmod>2026-07-26</lastmod>
<priority>0.4</priority>
<xhtml:link rel="alternate" hreflang="es" href="https://www.itziarzameza.dev/privacidad.html" />
<xhtml:link rel="alternate" hreflang="ca" href="https://www.itziarzameza.dev/privacidad-ca.html" />
<xhtml:link rel="alternate" hreflang="en" href="https://www.itziarzameza.dev/privacidad-en.html" />
<xhtml:link rel="alternate" hreflang="x-default" href="https://www.itziarzameza.dev/privacidad.html" />
</url>
<url>
<loc>https://www.itziarzameza.dev/privacidad-en.html</loc>
<lastmod>2026-07-26</lastmod>
<priority>0.4</priority>
<xhtml:link rel="alternate" hreflang="es" href="https://www.itziarzameza.dev/privacidad.html" />
<xhtml:link rel="alternate" hreflang="ca" href="https://www.itziarzameza.dev/privacidad-ca.html" />
<xhtml:link rel="alternate" hreflang="en" href="https://www.itziarzameza.dev/privacidad-en.html" />
<xhtml:link rel="alternate" hreflang="x-default" href="https://www.itziarzameza.dev/privacidad.html" />
</url>
</urlset>
</urlset>
tailwind.config.js
+33
View File
@@ -0,0 +1,33 @@
/** @type {import('tailwindcss').Config} */
module.exports = {
darkMode: "class",
content: [
"./index.html",
"./index-ca.html",
"./index-en.html",
"./huella.html",
"./privacidad.html",
"./privacidad-ca.html",
"./privacidad-en.html",
],
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",
},
},
},
plugins: [],
};