Refactor SCSS imports to use @use syntax, update portfolio entries, and add new projects

18 files changed, 223 insertions, 172 deletions

diff --git a/src/content.config.ts b/src/content.config.ts
index 539db1c..1c24b41 100644
--- a/src/content.config.ts
+++ b/src/content.config.ts
@@ -2,14 +2,24 @@ import { glob } from 'astro/loaders';
 import { defineCollection, z } from 'astro:content';
 
 const blog = defineCollection({
-	loader: glob({ pattern: '**/*.md', base: "src/data/blog" }),
+	loader: glob({ pattern: '**/*.{md,mdx}', base: "src/data/blog" }),
 	schema: z.object({
 		title: z.string(),
 		metaDescription: z.string(),
-		publishedAt: z.date()
+		publishedAt: z.coerce.date()
 	})
 });
 
+const portfolio = defineCollection({
+	loader: glob({ pattern: '**/*.{md,mdx}', base: "src/data/portfolio" }),
+	schema: z.object({
+		title: z.string(),
+		description: z.string(),
+		technologies: z.array(z.string())
+	})
+})
+
 export const collections = {
-	blog
+	blog,
+	portfolio
 };
diff --git a/src/data/blog/necesitas-saber-bitcoin.md b/src/data/blog/necesitas-saber-bitcoin.md
deleted file mode 100644
index 0dbb684..0000000
--- a/src/data/blog/necesitas-saber-bitcoin.md
+++ /dev/null
@@ -1,16 +0,0 @@
----
-title: "Necesitas saber esto antes de 'invertir' en Bitcoin"
-metaDescription: "Desmitifiquemos las criptomonedas y entendamos cómo funcionan antes de invertir en ellas."
-publishedAt: 2025-03-12
----
-
-En los últimos años, hemos oído mucho sobre criptomonedas y otros criptoactivos, pero ¿realmente la gente entiende cómo funcionan? ¿Saben realmente lo que están comprando o simplemente están siguiendo una moda?
-
-Cuando decides invertir en acciones, acudes a un bróker regulado que compra y custodia acciones de una empresa en tu nombre. Esta transacción se realiza en un mercado regulado, como la Bolsa de Madrid (BME) en España o la Bolsa de Nueva York (NYSE) en Estados Unidos, bajo la supervisión de un regulador (CNMV en España, SEC en Estados Unidos) y una cámara de compensación como IberClear en España o la NSCC en Estados Unidos.
-
-Sin embargo, ¿qué ocurre con las criptomonedas? Es posible que ni siquiera estés comprando el activo en sí, sino un derivado (como un CFD) que replica el precio de la criptomoneda. En el mejor de los casos, adquieres una anotación en una base de datos que indica que posees una cantidad determinada en un exchange, con la esperanza de poder transferirla a tu cartera privada.
-
-En cierto modo, este sistema se asemeja más al de un banco que al del mercado de valores. Con la diferencia de que los bancos tienen una reserva fraccionaria obligatoria (por ejemplo, el 1% para depósitos a la vista o de menos de dos años en la Eurozona), mientras que los exchanges de criptomonedas no están obligados a tenerla. Además, si un banco quiebra, tus depósitos están asegurados (hasta 100.000€ por titular y entidad en la Eurozona), pero si un exchange quiebra, puedes perderlo todo, como ocurrió con FTX.
-
-Por otro lado, las criptomonedas no están reguladas, lo que permite que cualquier persona con conocimientos básicos pueda llevar a cabo esquemas de "pump and dump" (inflar y vender) y quedarse con el dinero de inversores desinformados. No existe un regulador que te proteja ni leyes que lo prohíban. Ejemplos recientes incluyen las estafas relacionadas con Trump, Melania y LIBRA, que fue promocionada por Milei, supuestamente sin su conocimiento.
-
diff --git a/src/data/portfolio/dynamic-tourist-info.mdx b/src/data/portfolio/dynamic-tourist-info.mdx
new file mode 100644
index 0000000..677f0f6
--- /dev/null
+++ b/src/data/portfolio/dynamic-tourist-info.mdx
@@ -0,0 +1,9 @@
+---
+title: "Punto de información turística en móviles"
+description: "Creación de un sitio web dinámico con PHP adaptado a móviles y accesible mediante QR en localizaciones físicas"
+technologies: ["php"]
+---
+
+Creación de un sitio web dinámico con PHP adaptado a móviles y accesible mediante QR en localizaciones físicas. Cada página muestra datos de la ubicación correspondiente en tres idiomas (castellano, gallego e inglés), una galería de imágenes en 360º con la biblioteca PanoLens y vídeos incrustados de YouTube.
+
+Desasrrollado entre 2020 y 2021, en colaboración con [Kendra](https://kendra.es/).
\ No newline at end of file
diff --git a/src/data/portfolio/mientreno.mdx b/src/data/portfolio/mientreno.mdx
new file mode 100644
index 0000000..a7d8fab
--- /dev/null
+++ b/src/data/portfolio/mientreno.mdx
@@ -0,0 +1,17 @@
+---
+title: "MiEntreno"
+description: "Creación de un sitio web dinámico con PHP adaptado a móviles y accesible mediante QR en localizaciones físicas"
+technologies: ["dotnet", "sqlserver", "azure", "rabbitmq"]
+---
+
+Aplicación web para la gestión de entrenamientos deportivos, con una interfaz sencilla y fácil de usar. Desarrollado con ASP.NET Core, Razor Pages y SQL Server, y alojada en Azure App Service.
+
+La aplicación permite a los entrenadores personales crear y gestionar rutinas de entrenamiento para sus clientes, que pueden proporcionar _feedback_ sobre estos. Además, los clientes pueden ver sus rutinas de entrenamiento y registrar sus progresos en la aplicación.
+
+La principal complejidad que me encontré en este proyecto fue la implementación de los dos roles de usuario (entrenador y cliente) y la gestión de los permisos de acceso a las distintas partes de la aplicación, con filtrado para evitar mostrar datos potencialmente sensibles.
+
+Además, el tiempo de desarrollo era muy limitado, al tratarse del proyecto final de ciclo, en un plazo de 3 meses desde la concepción de la idea, redacción del proyecto y desarrollo de la aplicación. Podría considerarse un _MVP_ (Producto Mínimo Viable) de la idea original, con muchas funcionalidades que quedaron fuera del alcance de este proyecto.
+
+También, fue un "campo de pruebas" para mí, ya que fue el primer proyecto serio que desarrollé con ASP.NET Core, y donde también quise introducir el uso de emailing transaccional, colas de mensajes y otros conceptos más avanzados que no había utilizado antes en una aplicación real.
+
+El código fuente se puede encontrar en [GitHub](https://github.com/arielcostas/mientreno) bajo la licencia GNU Affero GPL v3.0.
\ No newline at end of file
diff --git a/src/data/portfolio/order-extractor.mdx b/src/data/portfolio/order-extractor.mdx
new file mode 100644
index 0000000..d0a2ea6
--- /dev/null
+++ b/src/data/portfolio/order-extractor.mdx
@@ -0,0 +1,11 @@
+---
+title: "Extractor de pedidos (2023-actualidad)"
+description: "Extractor de pedidos de compra online para generar informes de ventas y rentabilidad"
+technologies: ["java", "windows"]
+---
+
+Implementación de una aplicación de escritorio que extrae los datos sobre los pedidos on-line de diversas plataformas (como WooCommerce, Amazon y Ebay) para almacenar de forma local y centralizada. Además, cruza estos datos con la base de datos de productos en almacén y sus precios de coste, para generar informes de Excel sobre los ingresos y costes por cada pedido, así como calcular la rentabilidad de estos.
+
+Los principales problemas enfrentados en este proyecto fueron la diversidad de formatos de los datos de entrada y la necesidad de mantener la aplicación actualizada con los cambios en las plataformas de venta online; además de no contar con SDKs oficiales para estas plataformas, teniendo que implementar llamadas HTTP a las API públicas, a veces con autenticación compleja o firma de peticiones (como AWS Signature V4).
+
+Por otra parte, está la distribución, instalación y actualización de la aplicación en los equipos del cliente, teniendo que generar un instalador MSI firmado a partir del Java compilado y _shaded_ con sus dependencias mediante maven, y `jpackage` para generar el ejecutable nativo de Windows.
\ No newline at end of file
diff --git a/src/data/portfolio/vigo-360.mdx b/src/data/portfolio/vigo-360.mdx
new file mode 100644
index 0000000..de42b5f
--- /dev/null
+++ b/src/data/portfolio/vigo-360.mdx
@@ -0,0 +1,15 @@
+---
+title: "Vigo 360"
+description: "Desarrollo y publicación de un blog sobre Vigo"
+technologies: ["go", "mysql", "linux"]
+---
+
+Blog sobre Vigo y su entorno, orientado principalmente a hablar de movilidad y toponimia. Desarrollado en Go, con base de datos MySQL y desplegado sobre infraestructura propia.
+
+Opté por desarrollarlo de cero, en lugar de invertir mis esfuerzos en aprender a desarrollar sobre WordPress, por la necesidad de mantener una tonelada de plugins, un tema propio y código que no controlaba. Además, me permitió aprender Go y desplegar una aplicación en producción.
+
+Además de esto, ocasionalmente publico contenido en este blog sobre transporte público, movilidad y toponimia en Vigo y su entorno; sin fines de lucro y con un nivel de rigor que nos ha llevado a ser citados en medios de comunicación locales como un medio especializado en estos temas.
+
+El blog cuenta con un sistema publicaciones, comentarios, etiquetas y búsqueda (con Algolia), así como optimización para buscadores y redes sociales con etiquetas de OpenGraph, Twitter Cards y datos semánticos de Schema.org mediante JSON-LD.
+
+Durante 2025 se planea hacer una reescritura de la aplicación usando .NET para poder implementar nuevas funcionalidades, como procesamiento de fondo de ciertas tareas (generar miniaturas, indexar contenido, etc.) y mejorar la manteniabilidad del código, o búsqueda mediante vectores sin depender de terceros.
diff --git a/src/data/portfolio/wp-consulting.mdx b/src/data/portfolio/wp-consulting.mdx
new file mode 100644
index 0000000..0b6a35f
--- /dev/null
+++ b/src/data/portfolio/wp-consulting.mdx
@@ -0,0 +1,9 @@
+---
+title: "Consultoría WordPress"
+description: "Trabajos de mantenimiento, optimización y migración de sitios web WordPress y tiendas online WooCommerce"
+technologies: ["php"]
+---
+
+Trabajos de mantenimiento, optimización y migración de sitios web WordPress y tiendas online WooCommerce. Incluyendo la instalación y configuración de plugins, temas y optimización de rendimiento y SEO.
+
+Trabajo bajo la premisa de reducir la dependencia de plugins y temas de terceros, y de mejorar la seguridad y rendimiento de los sitios web; además de usar herramientas optimizadas y sin limitaciones artificiales bajo muros de pago, en la medida de lo posible.
diff --git a/src/layouts/Layout.astro b/src/layouts/Layout.astro
index 2f508f9..4952d55 100644
--- a/src/layouts/Layout.astro
+++ b/src/layouts/Layout.astro
@@ -52,7 +52,7 @@ const { title, description } = Astro.props;
 </html>
 
 <style is:global lang="scss">
-	@import "../../styles/shared.scss";
+	@use "../../styles/shared.scss" as *;
 
 	html,
 	body {
diff --git a/src/pages/blog/[id].astro b/src/pages/blog/[id].astro
index 50bf998..e1b5250 100644
--- a/src/pages/blog/[id].astro
+++ b/src/pages/blog/[id].astro
@@ -1,15 +1,19 @@
 ---
-import type { GetStaticPaths } from "astro";
 import Layout from "../../layouts/Layout.astro";
 import { getCollection, render } from "astro:content";
+import { type GetStaticPaths } from "astro";
 
-export const getStaticPaths = (async () => {
+interface Props {
+    entry: any;
+}
+
+export const getStaticPaths: GetStaticPaths = (async () => {
 	const entries = await getCollection("blog");
-	return entries.map((entry) => ({
+	return entries.map((entry: any) => ({
 		params: { id: entry.id },
 		props: { entry },
 	}));
-}) satisfies GetStaticPaths;
+});
 
 const { entry } = Astro.props;
 const { Content } = await render(entry);
diff --git a/src/pages/portfolio/[id].astro b/src/pages/portfolio/[id].astro
new file mode 100644
index 0000000..55bac3f
--- /dev/null
+++ b/src/pages/portfolio/[id].astro
@@ -0,0 +1,55 @@
+---
+import Layout from "../../layouts/Layout.astro";
+import { getCollection, render } from "astro:content";
+import { type GetStaticPaths } from "astro";
+import TechnologyBadge from "../../partials/TechnologyBadge.astro";
+
+interface Props {
+    entry: any;
+}
+
+export const getStaticPaths: GetStaticPaths = (async () => {
+	const entries = await getCollection("portfolio");
+	return entries.map((entry: any) => ({
+		params: { id: entry.id },
+		props: { entry },
+	}));
+});
+
+const { entry } = Astro.props;
+const { Content } = await render(entry);
+---
+
+<Layout title={entry.data.title} description={entry.data.description}>
+    <a id="link-back" href="/portfolio">
+        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="w-6 h-6 inline-block mr-2">
+            <polyline points="15 18 9 12 15 6"></polyline>
+        </svg>
+        Volver al portfolio
+    </a>
+
+	<h1>{entry.data.title}</h1>
+
+	<Content />
+
+    <h2>Tecnologías utilizadas</h2>
+
+    {entry.data.technologies.map((technology: string) => (
+        <TechnologyBadge size="small" code={technology} />
+    ))}
+</Layout>
+
+<style>
+    a#link-back {
+        display: inline-flex;
+        align-items: center;
+        gap: 0.5rem;
+        text-decoration: none;
+        text-transform: uppercase;
+        transition: color 0.2s ease-in-out;
+    }
+
+    a#link-back svg {
+        height: 1em;
+    }
+</style>
diff --git a/src/pages/portfolio/dynamic-tourist-info.astro b/src/pages/portfolio/dynamic-tourist-info.astro
deleted file mode 100644
index ed2be9f..0000000
--- a/src/pages/portfolio/dynamic-tourist-info.astro
+++ /dev/null
@@ -1,26 +0,0 @@
----
-import Layout from "../../layouts/Layout.astro";
-import TechnologyBadge from "../../partials/TechnologyBadge.astro";
----
-
-<Layout
-	title="Punto de información turística en móviles"
-	description="Creación de un sitio web dinámico con PHP adaptado a móviles y accesible mediante QR en localizaciones físicas"
->
-	<a href="/portfolio">← Volver al portfolio</a>
-
-	<h1>Punto de información turística en móviles (2020-2021)</h1>
-
-	<p>
-		Creación de un sitio web dinámico con PHP adaptado a móviles y accesible
-		mediante QR en localizaciones físicas. Cada página muestra datos de la
-		ubicación correspondiente en tres idiomas (castellano, gallego e
-		inglés), una galería de imágenes en 360º con la biblioteca PanoLens y
-		vídeos incrustados de YouTube.
-	</p>
-
-	<h2>Tecnologías utilizadas</h2>
-
-	<TechnologyBadge size={"small"} code="php" />
-	<TechnologyBadge size={"small"} code="webtrio" />
-</Layout>
diff --git a/src/pages/portfolio/index.astro b/src/pages/portfolio/index.astro
index ff80ae8..43f776b 100644
--- a/src/pages/portfolio/index.astro
+++ b/src/pages/portfolio/index.astro
@@ -30,95 +30,117 @@ const schema = {
 	<h2>Proyectos para terceros (freelance)</h2>
 
 	<p>
-		En contadas ocasiones, he realizado proyectos para terceros por encargo:
+		He realizado desarrollos de proyectos para terceros por encargo, siendo los más destacados los siguientes:
 	</p>
 
-	<ul>
-		<li>
-			<p>
-				<strong
-					>Extractor de pedidos compra online (2023-actualidad)</strong
-				>
-			</p>
+	<section>
+		<article>
+			<h3>Extractor de pedidos compra online</h3>
 
 			<p>
 				Aplicación de escritorio que extrae los datos sobre los pedidos
 				on-line de diversas plataformas (como WooCommerce, Amazon y
-				Ebay).
-				<a href="/portfolio/order-extractor">Leer más</a>
+				Ebay). <a href="/portfolio/order-extractor">Más información</a>.
 			</p>
 
-			<TechnologyBadge size="small" code="java" />
-			<TechnologyBadge size="small" code="javafx" />
-			<TechnologyBadge size="small" code="windows" />
-		</li>
+			<TechnologyBadge code="java" />
+			<TechnologyBadge code="windows" />
+		</article>
+
+		<article>
+			<h3>Punto de información turística en móviles</h3>
 
-		<li>
 			<p>
-				<strong>
-					Punto de información turística en móviles (2020-2021)
-				</strong>
+				Aplicación web de información turística, con QR, contenido en 360º e incrustado
+				de YouTube. <a href="/portfolio/dynamic-tourist-info">Más información</a>.
 			</p>
 
+			<TechnologyBadge code="php" />
+			<TechnologyBadge code="mysql" />
+		</article>
+
+		<article>
+			<h3>Consultoría WordPress</h3>
+
 			<p>
-				Aplicación web de información turística, con QR, contenido en 360º e incrustado
-				de YouTube.
-				<a href="/portfolio/dynamic-tourist-info">Leer más</a>
+				Trabajos de mantenimiento, optimización y migración de sitios web WordPress y tiendas online WooCommerce.
+				<a href="/portfolio/wp-consulting">Más información</a>.
+				<a href="/contact">Contactar</a>.
 			</p>
 
-			<TechnologyBadge size={"small"} code="php" />
-			<TechnologyBadge size={"small"} code="webtrio" />		
-		</li>
-	</ul>
+			<TechnologyBadge code="php" />
+		</article>
+	</section>
 
 	<h2>Proyectos propios</h2>
 
 	<p>
-		Además, tengo varios proyectos propios que he desarrollado en mi tiempo
-		libre:
+		Además, tengo varios proyectos propios que he desarrollado en mi tiempo, estando algunos de ellos en activo, y como código abierto.
 	</p>
 
-	<ul>
-		<li>
+	<section>
+		<article>
+			<h3>Web personal</h3>
+
 			<p>
-				<strong>Web personal (2023 - actualidad)</strong>
 				Desarrollado con Astro, un generador de sitios web estáticos que
 				permite escribir contenido en Markdown y publicar en la web con un
 				rendimiento excelente. Desplegado sobre Azure Static Web Apps.
 			</p>
 
-			<TechnologyBadge size="small" code="webtrio" />
-			<TechnologyBadge size="small" code="astro" />
-			<TechnologyBadge size="small" code="azure" />
-		</li>
+			<TechnologyBadge code="astro" />
+			<TechnologyBadge code="azure" />
+		</article>
+
+		<article>
+			<h3>MiEntreno (proyecto fin de ciclo)</h3>
 
-		<li>
 			<p>
-				<strong>MiEntreno (proyecto fin de ciclo)</strong>
 				Aplicación web para la gestión de entrenamientos deportivos, con
 				una interfaz sencilla y fácil de usar. Desarrollado con ASP.NET Core,
-				Razor Pages y SQL Server. Desplegado en Azure App Service, y usando
-				sistemas como RabbitMQ y Azure Communication Services.
+				Razor Pages y SQL Server. <a href="/portfolio/mientreno">Más información</a>.
+				<a href="https://github.com/arielcostas/mientreno">Código fuente</a>.
 			</p>
 
-			<TechnologyBadge size="small" code="dotnet" />
-			<TechnologyBadge size="small" code="sqlserver" />
-			<TechnologyBadge size="small" code="azure" />
-			<TechnologyBadge size="small" code="linux" />
-			<TechnologyBadge size="small" code="rabbitmq" />
-		</li>
+			<TechnologyBadge code="dotnet" />
+			<TechnologyBadge code="sqlserver" />
+			<TechnologyBadge code="azure" />
+			<TechnologyBadge code="rabbitmq" />
+		</article>
+
+		<article>
+			<h3>Vigo 360</h3>
 
-		<li>
 			<p>
-				<strong>Vigo 360 (2021 - actualidad)</strong>
 				Blog sobre Vigo y su entorno, orientado principalmente a hablar de
 				movilidad y toponimia. Desarrollado en Go, con base de datos MySQL
 				y desplegado sobre VPS administrado por mí mismo.
+				<a href="/portfolio/vigo-360">Más información</a>.
+				<a href="https://github.com/arielcostas/vigo360">Código fuente</a>.
+				<a href="https://vigo360.es">Web</a>.
 			</p>
 			
-			<TechnologyBadge size="small" code="go" />
-			<TechnologyBadge size="small" code="mysql" />
-			<TechnologyBadge size="small" code="linux" />
-		</li>
-	</ul>
+			<TechnologyBadge code="go" />
+			<TechnologyBadge code="mysql" />
+			<TechnologyBadge code="linux" />
+		</article>
+	</section>
 </Layout>
+
+<style>
+	section {
+		display: grid;
+		grid-template-columns: repeat(auto-fill, minmax(400px, 1fr));
+		gap: 1rem;
+	}
+
+	article {
+		padding: 1rem;
+		border: 1px solid var(--accent);
+		border-radius: 0.5rem;
+	}
+
+	article h3 {
+		margin-top: 0;
+	}
+</style>
\ No newline at end of file
diff --git a/src/pages/portfolio/order-extractor.astro b/src/pages/portfolio/order-extractor.astro
deleted file mode 100644
index a799c6d..0000000
--- a/src/pages/portfolio/order-extractor.astro
+++ /dev/null
@@ -1,28 +0,0 @@
----
-import Layout from "../../layouts/Layout.astro";
-import TechnologyBadge from "../../partials/TechnologyBadge.astro";
----
-
-<Layout
-	title="Extractor de pedidos"
-	description="Extractor de pedidos de compra online"
->
-	<a href="/portfolio">← Volver al portfolio</a>
-
-	<h1>Extractor de pedidos (2023-actualidad)</h1>
-
-	<p>
-		Implementación de una aplicación de escritorio que extrae los datos
-		sobre los pedidos on-line de diversas plataformas (como WooCommerce,
-		Amazon y Ebay) para almacenar de forma local y centralizada. Además,
-		cruza estos datos con la base de datos de productos en almacén y sus
-		precios de coste, para generar informes de Excel sobre los ingresos y
-		costes por cada pedido, así como calcular la rentabilidad de estos.
-	</p>
-
-	<h2>Tecnologías utilizadas</h2>
-
-	<TechnologyBadge size={"small"} code="java" />
-	<TechnologyBadge size={"small"} code="javafx" />
-	<TechnologyBadge size={"small"} code="windows" />
-</Layout>
diff --git a/src/pages/portfolio/vigo-360.astro b/src/pages/portfolio/vigo-360.astro
deleted file mode 100644
index 46c4cc2..0000000
--- a/src/pages/portfolio/vigo-360.astro
+++ /dev/null
@@ -1,29 +0,0 @@
----
-import Layout from "../../layouts/Layout.astro";
-import TechnologyBadge from "../../partials/TechnologyBadge.astro";
----
-
-<Layout
-	title="Vigo 360"
-	description="Desarrollo y publicación de un blog sobre Vigo"
->
-	<a href="/portfolio">← Volver al portfolio</a>
-
-	<h1>Vigo 360 (2021-actualidad)</h1>
-
-	<p>
-		Implementación de una aplicación de escritorio que extrae los datos
-		sobre los pedidos on-line de diversas plataformas (como WooCommerce,
-		Amazon y Ebay) para almacenar de forma local y centralizada. Además,
-		cruza estos datos con la base de datos de productos en almacén y sus
-		precios de coste, para generar informes de Excel sobre los ingresos y
-		costes por cada pedido, así como calcular la rentabilidad de estos.
-	</p>
-
-	<h2>Tecnologías utilizadas</h2>
-
-	<TechnologyBadge size={"small"} code="go" />
-	<TechnologyBadge size={"small"} code="webtrio" />
-	<TechnologyBadge size={"small"} code="mysql" />
-	<TechnologyBadge size={"small"} code="linux" />
-</Layout>
diff --git a/src/pages/trajectory.astro b/src/pages/trajectory.astro
index 8bb5da5..87557de 100644
--- a/src/pages/trajectory.astro
+++ b/src/pages/trajectory.astro
@@ -44,6 +44,14 @@ const schema = {
 	<h2>Educación y credenciales</h2>
 
 	<ul>
+			<li>
+				<strong>Certificado oficial EF SET C2 Proficient</strong>:
+				acredita mi nivel de inglés C2, el más alto según el Marco Común
+				Europeo de Referencia para las Lenguas. <a
+					href="https://cert.efset.org/es/Yxzc9L"
+					>Ver certificado</a>
+			</li>
+
 		<li>
 			<strong>Microsoft Certified: Azure Developer Associate</strong>:
 			acredita mis conocimientos en el desarrollo de aplicaciones en
diff --git a/src/partials/Footer.astro b/src/partials/Footer.astro
index 9db5a05..dae78b7 100644
--- a/src/partials/Footer.astro
+++ b/src/partials/Footer.astro
@@ -18,7 +18,7 @@
 </footer>
 
 <style lang="scss">
-	@import "../../styles/shared.scss";
+	@use "../../styles/shared.scss" as *;
 
 	footer {
 		background-color: $dark;
diff --git a/src/partials/Header.astro b/src/partials/Header.astro
index 4378ddc..35a39ae 100644
--- a/src/partials/Header.astro
+++ b/src/partials/Header.astro
@@ -7,7 +7,7 @@
 </header>
 
 <style lang="scss">
-	@import "../../styles/shared.scss";
+	@use "../../styles/shared.scss" as *;
 
 	header {
 		color: $accent;
diff --git a/src/partials/TechnologyBadge.astro b/src/partials/TechnologyBadge.astro
index 491bcea..09cd377 100644
--- a/src/partials/TechnologyBadge.astro
+++ b/src/partials/TechnologyBadge.astro
@@ -9,7 +9,7 @@ interface Technology {
 export const technologies: { [key: string]: Technology } = {
 	java: {
 		name: "Java",
-		colour: "#f29111",
+		colour: "#e76f00",
 		icon: "java",
 	},
 	dotnet: {
@@ -24,7 +24,7 @@ export const technologies: { [key: string]: Technology } = {
 	},
 	mysql: {
 		name: "MySQL",
-		colour: "#f29221",
+		colour: "#3a75b0",
 		icon: "mysql",
 	},
 	mongodb: {
@@ -58,21 +58,11 @@ export const technologies: { [key: string]: Technology } = {
 		colour: "#007acc",
 		icon: "typescript",
 	},
-	webtrio: {
-		name: "Web trio",
-		colour: "#ff400c",
-		icon: "webtrio",
-	},
 	azure: {
 		name: "Azure",
 		colour: "#0089d6",
 		icon: "azure",
 	},
-	javafx: {
-		name: "JavaFX",
-		colour: "#c91e21",
-		icon: "javafx",
-	},
 	linux: {
 		name: "Linux",
 		colour: "#010101",