From 54dab1e00b38693e96c801d0c5a020693a35bbda Mon Sep 17 00:00:00 2001
From: Ariel Costas Guerrero <94913521+arielcostas@users.noreply.github.com>
Date: Fri, 14 Mar 2025 22:21:47 +0100
Subject: Refactor SCSS imports to use @use syntax, update portfolio entries,
 and add new projects

---
 src/pages/portfolio/[id].astro                 |  55 +++++++++++
 src/pages/portfolio/dynamic-tourist-info.astro |  26 ------
 src/pages/portfolio/index.astro                | 124 +++++++++++++++----------
 src/pages/portfolio/order-extractor.astro      |  28 ------
 src/pages/portfolio/vigo-360.astro             |  29 ------
 5 files changed, 128 insertions(+), 134 deletions(-)
 create mode 100644 src/pages/portfolio/[id].astro
 delete mode 100644 src/pages/portfolio/dynamic-tourist-info.astro
 delete mode 100644 src/pages/portfolio/order-extractor.astro
 delete mode 100644 src/pages/portfolio/vigo-360.astro

(limited to 'src/pages/portfolio')

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>
-- 
cgit v1.3