aboutsummaryrefslogtreecommitdiff
path: root/src/pages/portfolio/index.astro
blob: 43f776be9f1dd99975859f044e14926dbdf47d12 (plain)
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
138
139
140
141
142
143
144
145
146
---
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",
};
---

<Layout title="Portfolio" description="Un listado de los proyectos en los que he trabajado en los últimos años, con las tecnologías utilizadas.">
	<script
		is:inline
		type="application/ld+json"
		slot="head-jsonld"
		set:html={JSON.stringify(schema)}
	></script>

	<h1>Mi portfolio</h1>

	<p>
		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="/contact">contactar conmigo</a>.
	</p>

	<h2>Proyectos para terceros (freelance)</h2>

	<p>
		He realizado desarrollos de proyectos para terceros por encargo, siendo los más destacados los siguientes:
	</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">Más información</a>.
			</p>

			<TechnologyBadge code="java" />
			<TechnologyBadge code="windows" />
		</article>

		<article>
			<h3>Punto de información turística en móviles</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">Más información</a>.
			</p>

			<TechnologyBadge code="php" />
			<TechnologyBadge code="mysql" />
		</article>

		<article>
			<h3>Consultoría WordPress</h3>

			<p>
				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 code="php" />
		</article>
	</section>

	<h2>Proyectos propios</h2>

	<p>
		Además, tengo varios proyectos propios que he desarrollado en mi tiempo, estando algunos de ellos en activo, y como código abierto.
	</p>

	<section>
		<article>
			<h3>Web personal</h3>

			<p>
				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 code="astro" />
			<TechnologyBadge code="azure" />
		</article>

		<article>
			<h3>MiEntreno (proyecto fin de ciclo)</h3>

			<p>
				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. <a href="/portfolio/mientreno">Más información</a>.
				<a href="https://github.com/arielcostas/mientreno">Código fuente</a>.
			</p>

			<TechnologyBadge code="dotnet" />
			<TechnologyBadge code="sqlserver" />
			<TechnologyBadge code="azure" />
			<TechnologyBadge code="rabbitmq" />
		</article>

		<article>
			<h3>Vigo 360</h3>

			<p>
				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 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>