diff options
Diffstat (limited to 'src/pages/portfolio')
| -rw-r--r-- | src/pages/portfolio/[id].astro | 55 | ||||
| -rw-r--r-- | src/pages/portfolio/dynamic-tourist-info.astro | 26 | ||||
| -rw-r--r-- | src/pages/portfolio/index.astro | 124 | ||||
| -rw-r--r-- | src/pages/portfolio/order-extractor.astro | 28 | ||||
| -rw-r--r-- | src/pages/portfolio/vigo-360.astro | 29 |
5 files changed, 128 insertions, 134 deletions
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> |