Add new images and update portfolio layouts for enhanced presentation

1 files changed, 137 insertions, 0 deletions

diff --git a/src/layouts/PortfolioListLayout.astro b/src/layouts/PortfolioListLayout.astro
new file mode 100644
index 0000000..b894f9f
--- /dev/null
+++ b/src/layouts/PortfolioListLayout.astro
@@ -0,0 +1,137 @@
+---
+import t from "../i18n/es.json";
+
+import Layout from "./Layout.astro";
+import PortfolioProject from "@/components/PortfolioProject.astro";
+
+const schema = {
+  "@context": "https://schema.org",
+  "@type": "WebPage",
+  url: "https://www.costas.dev/portfolio",
+  headline: t.portfolioPage.headline,
+};
+---
+
+<Layout title={t.portfolioPage.title} description={t.portfolioPage.description}>
+  <script
+    is:inline
+    type="application/ld+json"
+    slot="head-jsonld"
+    set:html={JSON.stringify(schema)}
+  />
+
+  <h1>{t.portfolioPage.headline}</h1>
+
+  <p set:html={t.portfolioPage.intro} />
+
+  <h2>{t.portfolioPage.freelanceTitle}</h2>
+
+  <p>{t.portfolioPage.freelanceDesc}</p>
+
+  <section>
+    <PortfolioProject
+      title="Mapa patrimonial de la Costa Ártabra"
+      summary="Desarrollo de una aplicación completa para el patrimonio cultural y militar de la Costa Ártabra, con un sistema CMS para el personal de la administración y una aplicación web progresiva (PWA) para visualizar el mapa y planificar rutas."
+      tags={["dotnet", "react", "mysql", "ubuntu"]}
+      detailsLink="/portfolio/mapa-ferrol"
+      onlineLink="https://mapacostaartabramilitar.com"
+    />
+
+    <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"
+    />
+
+    <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"
+    />
+
+    <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"
+    />
+
+    <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>
+
+  <p>{t.portfolioPage.ownProjectsDesc}</p>
+
+  <section>
+    <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"
+    />
+
+    <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"
+    />
+
+    <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>
+
+  <div class="trajectory-summary">
+    <h2>{t.portfolioPage.trajectoryTitle}</h2>
+    <p>{t.portfolioPage.trajectorySummary}</p>
+    <a href="/trajectory" class="cta-link">{t.portfolioPage.viewTrajectory} →</a>
+  </div>
+</Layout>
+
+<style>
+  section {
+    display: grid;
+    grid-template-columns: repeat(auto-fill,minmax(350px,1fr));
+    gap: 1.5rem;
+  }
+
+  .trajectory-summary {
+    margin-top: 3rem;
+    background-color: #FFFFFF;
+    border-radius: 8px;
+    padding: 1.5rem;
+    box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.08);
+    border-left: 4px solid hsl(209, 94%, 42%);
+  }
+
+  .trajectory-summary h2 {
+    margin-top: 0;
+  }
+
+  .cta-link {
+    display: inline-block;
+    margin-top: 0.5rem;
+    font-weight: 600;
+    text-decoration: none;
+    color: hsl(215, 90%, 30%);
+  }
+
+  .cta-link:hover {
+    text-decoration: underline;
+  }
+</style>