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
|
---
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="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>
|
