Refresh portfolio design and fonts

1 files changed, 48 insertions, 62 deletions

diff --git a/src/layouts/PortfolioPageLayout.astro b/src/layouts/PortfolioPageLayout.astro
index c2d2b38..e213c10 100644
--- a/src/layouts/PortfolioPageLayout.astro
+++ b/src/layouts/PortfolioPageLayout.astro
@@ -2,7 +2,7 @@
 import t from "../i18n/es.json";
 
 import Layout from "./Layout.astro";
-import TechnologyBadge from "../partials/TechnologyBadge.astro";
+import PortfolioProject from "@/components/PortfolioProject.astro";
 
 const schema = {
   "@context": "https://schema.org",
@@ -29,31 +29,33 @@ const schema = {
   <p>{t.portfolioPage.freelanceDesc}</p>
 
   <section>
-    <article>
-      <h3>{t.portfolioPage.orderExtractorTitle}</h3>
+    <PortfolioProject
+      title="Extractor de pedidos venta online"
+      summary="Aplicación de escritorio que extrae los datos sobre los pedidos on-line de diversas plataformas (como WooCommerce, Amazon y Ebay)."
+      tags={["java", "windows"]}
+      detailsLink="/portfolio/order-extractor"
+    />
 
-      <p set:html={t.portfolioPage.orderExtractorDesc} />
+    <PortfolioProject
+      title="Museo a ceo aberto de Ponteareas"
+      summary="Desarrollo de visualización de contenido turístico para el Concello de Ponteareas. Incluye contenido en 360º e incrustación de vídeos de YouTube. Realizado en 2021."
+      tags={["php", "web"]}
+      detailsLink="/portfolio/qr-ponteareas"
+    />
 
-      <TechnologyBadge code="java" />
-      <TechnologyBadge code="windows" />
-    </article>
+    <PortfolioProject
+      title="QR Touro turístico"
+      summary="Desarrollo de un generador estático en TypeScript para información turística del Concello de Touro. Realizado en 2020."
+      tags={["typescript", "web"]}
+      detailsLink="/portfolio/qr-touro"
+    />
 
-    <article>
-      <h3>{t.portfolioPage.touristInfoTitle}</h3>
-
-      <p set:html={t.portfolioPage.touristInfoDesc} />
-
-      <TechnologyBadge code="php" />
-      <TechnologyBadge code="mysql" />
-    </article>
-
-    <article>
-      <h3>{t.portfolioPage.wpConsultingTitle}</h3>
-
-      <p set:html={t.portfolioPage.wpConsultingDesc} />
-
-      <TechnologyBadge code="php" />
-    </article>
+    <PortfolioProject
+      title="Consultoría WordPress"
+      summary="Trabajos de mantenimiento, optimización y migración de sitios web WordPress y tiendas online WooCommerce."
+      tags={["php", "wordpress"]}
+      detailsLink="/portfolio/wp-consulting"
+    />
   </section>
 
   <h2>{t.portfolioPage.ownProjectsTitle}</h2>
@@ -61,52 +63,36 @@ const schema = {
   <p>{t.portfolioPage.ownProjectsDesc}</p>
 
   <section>
-    <article>
-      <h3>{t.portfolioPage.personalWebTitle}</h3>
-
-      <p>{t.portfolioPage.personalWebDesc}</p>
-
-      <TechnologyBadge code="astro" />
-      <TechnologyBadge code="azure" />
-    </article>
-
-    <article>
-      <h3>{t.portfolioPage.mientrenoTitle}</h3>
+    <PortfolioProject
+      title="Web personal"
+      summary="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 via GitHub Actions en mi servidor."
+      tags={["astro", "github", "ubuntu"]}
+      githubLink="https://github.com/arielcostas/costasdev"
+    />
 
-      <p set:html={t.portfolioPage.mientrenoDesc} />
+    <PortfolioProject
+      title="MiEntreno (proyecto fin de ciclo)"
+      summary="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."
+      tags={["dotnet", "azure"]}
+      githubLink="https://github.com/arielcostas/mientreno"
+      detailsLink="/portfolio/mientreno"
+    />
 
-      <TechnologyBadge code="dotnet" />
-      <TechnologyBadge code="sqlserver" />
-      <TechnologyBadge code="azure" />
-      <TechnologyBadge code="rabbitmq" />
-    </article>
-
-    <article>
-      <h3>{t.portfolioPage.vigo360Title}</h3>
-
-      <p set:html={t.portfolioPage.vigo360Desc} />
-
-      <TechnologyBadge code="go" />
-      <TechnologyBadge code="mysql" />
-      <TechnologyBadge code="linux" />
-    </article>
+    <PortfolioProject
+      title="Vigo 360"
+      summary="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."
+      tags={["go", "mysql", "ubuntu"]}
+      githubLink="https://github.com/arielcostas/vigo360"
+      detailsLink="/portfolio/vigo-360"
+      onlineLink="https://vigo360.es"
+    />
   </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;
+    grid-template-columns: repeat(auto-fill,minmax(350px,1fr));
+    gap: 1.5rem;
   }
 </style>