1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
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>
|
