diff options
Diffstat (limited to 'src')
| -rw-r--r-- | src/layouts/Layout.astro | 64 | ||||
| -rw-r--r-- | src/pages/contact.astro | 2 | ||||
| -rw-r--r-- | src/pages/portfolio.astro | 72 | ||||
| -rw-r--r-- | src/pages/portfolio/dynamic-tourist-info.astro | 26 | ||||
| -rw-r--r-- | src/pages/portfolio/order-extractor.astro | 28 | ||||
| -rw-r--r-- | src/pages/portfolio/vigo-360.astro | 29 | ||||
| -rw-r--r-- | src/partials/MainWrapper.astro | 64 | ||||
| -rw-r--r-- | src/partials/TechnologyBadge.astro | 144 |
8 files changed, 334 insertions, 95 deletions
diff --git a/src/layouts/Layout.astro b/src/layouts/Layout.astro index 2395461..2333acd 100644 --- a/src/layouts/Layout.astro +++ b/src/layouts/Layout.astro @@ -1,7 +1,6 @@ --- import "@fontsource-variable/sen"; import Header from "../partials/Header.astro"; -import MainWrapper from "../partials/MainWrapper.astro"; import Footer from "../partials/Footer.astro"; interface Props { @@ -9,7 +8,7 @@ interface Props { description: string; } -const { title, description } = Astro.props; +const { title, description, transitionName, transitionAnimate } = Astro.props; --- <!doctype html> @@ -44,9 +43,9 @@ const { title, description } = Astro.props; </head> <body> <Header /> - <MainWrapper> + <main> <slot /> - </MainWrapper> + </main> <Footer /> </body> </html> @@ -99,4 +98,61 @@ const { title, description } = Astro.props; *::selection { background-color: transparentize($accent, 0.85); } + + li > time { + font-family: $monoFontStack; + } + + main { + box-sizing: border-box; + margin: 0.75rem 1rem 3rem; + padding: 1.5rem 3rem; + border-radius: $floatingRadius; + box-shadow: $shadow; + margin-bottom: auto; + + align-self: center; + + max-width: 82ch; + font-size: 1.2rem; + + background-color: $lightAlt; + + a { + color: $accentDark; + transition: color 0.2s ease-in-out; + + &:hover { + color: $accent; + } + } + + > * { + margin-block: 0.75em; + } + + > p > code { + word-break: break-word; + font-family: $monoFontStack; + + color: $accentDark; + background-color: #f6f6f6; + } + + h1 { + font-size: 2.75rem; + line-height: 1; + margin-bottom: 1rem; + } + + p.meta { + display: block; + font-size: 0.85rem; + margin-bottom: 1rem; + } + + pre { + overflow: scroll; + } + } </style> diff --git a/src/pages/contact.astro b/src/pages/contact.astro index 7e89762..3cb6dc5 100644 --- a/src/pages/contact.astro +++ b/src/pages/contact.astro @@ -27,8 +27,6 @@ const schema = { <p>También puedes encontrarme en algunas redes sociales:</p> <dl> - <dt>Mastodon</dt> - <dd><a href="https://masto.es/@arielcg">@arielcg@masto.es</a></dd> <dt>GitHub</dt> <dd><a href="https://github.com/arielcostas">@arielcostas</a></dd> <dt>LinkedIn</dt> diff --git a/src/pages/portfolio.astro b/src/pages/portfolio.astro index c6ae4db..926d6b0 100644 --- a/src/pages/portfolio.astro +++ b/src/pages/portfolio.astro @@ -1,16 +1,22 @@ --- +import { ViewTransitions } from "astro:transitions"; import Layout from "../layouts/Layout.astro"; +import TechnologyBadge from "../partials/TechnologyBadge.astro"; const schema = { "@context": "https://schema.org", "@type": "WebPage", - "url": "https://www.costas.dev/portfolio", - "headline": "Mi portfolio de proyectos" + url: "https://www.costas.dev/portfolio", + headline: "Mi portfolio de proyectos", }; --- <Layout title="Portfolio" description="Los proyectos en los que he trabajado"> - <script type="application/ld+json" slot="head-jsonld" set:html={JSON.stringify(schema)}></script> + <script + type="application/ld+json" + slot="head-jsonld" + set:html={JSON.stringify(schema)} + ></script> <h1>Mi portfolio</h1> @@ -18,7 +24,7 @@ const schema = { En esta sección encontrarás una lista de los proyectos en los que he trabajado, tanto para terceros como propios. Si quieres más información sobre alguno de ellos, no dudes en - <a href="/contacto">contactar conmigo</a>. + <a href="/contact">contactar conmigo</a>. </p> <h2>Proyectos para terceros (freelance)</h2> @@ -30,14 +36,21 @@ const schema = { <ul> <li> <p> - <strong>Extractor de pedidos compra online (2023)</strong> - 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. + <strong + >Extractor de pedidos compra online (2023-actualidad)</strong + > </p> + + <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> + </p> + + <TechnologyBadge size="small" code="java" /> + <TechnologyBadge size="small" code="javafx" /> + <TechnologyBadge size="small" code="windows" /> </li> <li> @@ -45,12 +58,16 @@ const schema = { <strong> Punto de información turística en móviles (2020-2021) </strong> - 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> + + <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> + </p> + + <TechnologyBadge size={"small"} code="php" /> + <TechnologyBadge size={"small"} code="webtrio" /> </li> </ul> @@ -69,6 +86,10 @@ const schema = { 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> <li> @@ -79,6 +100,12 @@ const schema = { Razor Pages y SQL Server. Desplegado en Azure App Service, y usando sistemas como RabbitMQ y Azure Communication Services. </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> <li> @@ -88,15 +115,10 @@ const schema = { movilidad y toponimia. Desarrollado en Go, con base de datos MySQL y desplegado sobre VPS administrado por mí mismo. </p> - <p> - Además, dentro del ámbito de este proyecto, he desarrollado más - herramientas, como un bot de Telegram que informa sobre las - llegadas de autobuses en tiempo real, a partir de los datos - obtenidos mediante <i>web scraping</i> de la web de Vitrasa. - <a href="https://vigo360.es/post/publicamos-bot-infobus" - >Más información</a - >. - </p> + + <TechnologyBadge size="small" code="go" /> + <TechnologyBadge size="small" code="mysql" /> + <TechnologyBadge size="small" code="linux" /> </li> </ul> </Layout> diff --git a/src/pages/portfolio/dynamic-tourist-info.astro b/src/pages/portfolio/dynamic-tourist-info.astro new file mode 100644 index 0000000..ed2be9f --- /dev/null +++ b/src/pages/portfolio/dynamic-tourist-info.astro @@ -0,0 +1,26 @@ +--- +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/order-extractor.astro b/src/pages/portfolio/order-extractor.astro new file mode 100644 index 0000000..a799c6d --- /dev/null +++ b/src/pages/portfolio/order-extractor.astro @@ -0,0 +1,28 @@ +--- +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 new file mode 100644 index 0000000..46c4cc2 --- /dev/null +++ b/src/pages/portfolio/vigo-360.astro @@ -0,0 +1,29 @@ +--- +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/partials/MainWrapper.astro b/src/partials/MainWrapper.astro deleted file mode 100644 index cceda92..0000000 --- a/src/partials/MainWrapper.astro +++ /dev/null @@ -1,64 +0,0 @@ -<main> - <slot/> -</main> - -<style is:global lang="scss"> - @import "../../styles/shared.scss"; - - li > time { - font-family: $monoFontStack; - } - - main { - box-sizing: border-box; - margin: 0.75rem 1rem 3rem; - padding: 1.5rem 3rem; - border-radius: $floatingRadius; - box-shadow: $shadow; - margin-bottom: auto; - - align-self: center; - - max-width: 82ch; - font-size: 1.2rem; - - background-color: $lightAlt; - - a { - color: $accentDark; - transition: color 0.2s ease-in-out; - - &:hover { - color: $accent; - } - } - - > * { - margin-block: 0.75em; - } - - > p > code { - word-break: break-word; - font-family: $monoFontStack; - - color: $accentDark; - background-color: #f6f6f6; - } - - h1 { - font-size: 2.75rem; - line-height: 1; - margin-bottom: 1rem; - } - - p.meta { - display: block; - font-size: 0.85rem; - margin-bottom: 1rem; - } - - pre { - overflow: scroll; - } - } -</style> diff --git a/src/partials/TechnologyBadge.astro b/src/partials/TechnologyBadge.astro new file mode 100644 index 0000000..491bcea --- /dev/null +++ b/src/partials/TechnologyBadge.astro @@ -0,0 +1,144 @@ +--- +interface Technology { + name: string; + colour: string; + text?: "light" | "dark"; + icon: string; +} + +export const technologies: { [key: string]: Technology } = { + java: { + name: "Java", + colour: "#f29111", + icon: "java", + }, + dotnet: { + name: ".NET", + colour: "#512bd4", + icon: "dotnet", + }, + go: { + name: "Go", + colour: "#00add8", + icon: "go", + }, + mysql: { + name: "MySQL", + colour: "#f29221", + icon: "mysql", + }, + mongodb: { + name: "MongoDB", + colour: "#4db33d", + icon: "mongodb", + }, + sqlserver: { + name: "SQL Server", + colour: "#cc2927", + icon: "sqlserver", + }, + php: { + name: "PHP", + colour: "#8892be", + icon: "php", + }, + python: { + name: "Python", + colour: "#306998", + icon: "python", + }, + javascript: { + name: "JavaScript", + colour: "#ffe70b", + text: "dark", + icon: "javascript", + }, + typescript: { + name: "TypeScript", + 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", + icon: "linux", + }, + windows: { + name: "Windows", + colour: "#0078d6", + icon: "windows", + }, + astro: { + name: "Astro", + colour: "#3d50f5", + icon: "astro", + }, + rabbitmq: { + name: "RabbitMQ", + colour: "#ff6600", + icon: "rabbitmq", + }, +}; + +interface Props { + // tech must be name of the key of one of the technologies + code: string; + + size?: "small" | "large"; +} + +const { code, size } = Astro.props; +const tech = technologies[code] as Technology; +--- + +<span class={`pill-${size ?? "small"} text-${tech.text ?? "light"}`}> + {tech.name} +</span> + +<style define:vars={{ colour: tech.colour }}> + span { + display: inline-block; + background-color: var(--colour); + font-weight: bold; + text-transform: uppercase; + border-radius: 0.5em; + padding: 0.5em 1em; + } + + .text-dark { + color: #000; + } + + .text-light { + color: #fff; + } + + .pill-small { + padding: 0.35em 0.5em; + border-radius: 0.25em; + + font-size: 0.75em; + } + + .pill-large { + padding: 0.35 0.75em; + border-radius: 0.5em; + + font-size: 0.75em; + } +</style> |