Separate portfolio and trajectory

4 files changed, 165 insertions, 81 deletions

diff --git a/src/pages/contact.astro b/src/pages/contact.astro
new file mode 100644
index 0000000..7e89762
--- /dev/null
+++ b/src/pages/contact.astro
@@ -0,0 +1,50 @@
+---
+import Layout from "../layouts/Layout.astro";
+
+const schema = {
+	"@context": "https://schema.org",
+	"@type": "ContactPage",
+	url: "https://www.costas.dev/contact",
+	headline: "Ponte en contacto conmigo",
+};
+---
+
+<Layout title="Contacto" description="Ponte en contacto conmigo">
+	<script
+		type="application/ld+json"
+		slot="head-jsonld"
+		set:html={JSON.stringify(schema)}
+	/>
+
+	<h1>Contacta conmigo</h1>
+
+	<p>
+		La forma más sencilla de contactar conmigo es a través de mi dirección
+		de correo electrónico:
+		<a href="#" id="email-addr">ariel ARROBA costas PUNTO dev</a>
+	</p>
+
+	<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>
+		<dd><a href="https://www.linkedin.com/in/ariel-costas/">/in/ariel-costas</a></dd>
+	</dl>
+</Layout>
+
+<script>
+	// Obfuscate email address
+	const emailAddr = document.getElementById(
+		"email-addr",
+	) as HTMLAnchorElement;
+	if (emailAddr != null) {
+		emailAddr.href = `mailto:${emailAddr.textContent!.replace(" ARROBA ", "@").replace(" PUNTO ", ".")}`;
+		emailAddr.textContent = emailAddr
+			.textContent!.replace(" ARROBA ", "@")
+			.replace(" PUNTO ", ".");
+	}
+</script>
diff --git a/src/pages/portfolio.astro b/src/pages/portfolio.astro
index c0eb7bc..c6ae4db 100644
--- a/src/pages/portfolio.astro
+++ b/src/pages/portfolio.astro
@@ -5,93 +5,20 @@ const schema = {
 	"@context": "https://schema.org",
 	"@type": "WebPage",
 	"url": "https://www.costas.dev/portfolio",
-	"headline": "Mi trayectoria como desarrollador"
+	"headline": "Mi portfolio de proyectos"
 };
 ---
 
-<Layout title="Portfolio" description="Mi trayectoria como desarrollador">
+<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>
 
-	<h1>Mi trayectoria como desarrollador</h1>
+	<h1>Mi portfolio</h1>
 
 	<p>
-		Soy un desarrollador de software que vive en Vigo, España. Me gusta
-		mucho la tecnología, y me gusta aprender cosas nuevas. Me dedico
-		profesionalmente al desarrollo de software en todos sus ámbitos: desde
-		el diseño de la arquitectura, la implementación y el despliegue en
-		producción, pasando por otros aspectos como la experiencia de usuario,
-		la accesibilidad y la seguridad.
-	</p>
-
-	<h2>Tecnologías que domino</h2>
-
-	<p>
-		Domino principalmente el ecosistema de Microsoft: .NET (C#), ASP.NET
-		Core, SQL Server, Azure y Azure DevOps. También tengo experiencia con
-		otros lenguajes y tecnologías, como PHP, Python y Java. Además, tengo
-		conocimientos de frontend con
-		<abbr title="Hypertext Markup Language">HTML5</abbr>,
-		<abbr title="Cascading Style Sheets">CSS3</abbr>, JavaScript y
-		TypeScript.
-	</p>
-
-	<p>
-		También tengo experiencia con herramientas de DevOps como Docker,
-		Kubernetes, Terraform y GitHub Actions; así como el ecosistema Cloud de
-		Azure.
-	</p>
-
-	<h2>Educación y credenciales</h2>
-
-	<ul>
-		<li>
-			<strong>Microsoft Certified: Azure Developer Associate</strong>:
-			acredita mis conocimientos en el desarrollo de aplicaciones en
-			Azure. <a
-				href="https://learn.microsoft.com/api/credentials/share/en-us/ariel-costas/E15072607CCF2DA9?sharingId=149A1CD9C13790F4"
-				>Ver credencial</a
-			>.
-		</li>
-
-		<li>
-			<strong>Microsoft Certified: Azure DevOps Engineer Expert</strong>:
-			acredita mis conocimientos en la implementación de metodologías de
-			DevOps en Azure con Azure DevOps y GitHub. <a
-				href="https://learn.microsoft.com/api/credentials/share/en-us/ariel-costas/5FB94876A1701595?sharingId=149A1CD9C13790F4"
-				>Ver credencial</a
-			>
-		</li>
-
-		<li>
-			<strong
-				>Técnico Superior en Desarrollo de Aplicaciones Multiplataforma</strong
-			>: título de formación profesional de grado superior, obtenido en el
-			<a href="https://iesteis.es/">IES de Teis</a> en Vigo.
-		</li>
-	</ul>
-
-	<h2>Experiencia laboral</h2>
-
-	<h3>Estelaria Solutions (Q3 2023 - actualidad)</h3>
-
-	<p>
-		Desarrollo de aplicaciones full-stack, principalmente en PHP con
-		Symfony, MongoDB y JavaScript Vanilla. Además, implementé una cantidad
-		considerable de mejoras en usabilidad, accesibilidad y rendimiento.
-	</p>
-
-	<p>
-		También me encargo de la gestión de la infraestructura en AWS, y de la
-		implementación de herramientas de colaboración como Jira y GitHub.
-	</p>
-
-	<h3>FCT en Polygon-E (Q2 2023)</h3>
-
-	<p>
-		Realicé mis prácticas de formación profesional en la empresa Polygon-E,
-		donde desarrollé varias aplicaciones de gestión interna con ASP.NET Core
-		y Blazor, desplegando sobre entornos <i>on-premise</i> con Windows Server,
-		IIS y SQL Server.
+		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>.
 	</p>
 
 	<h2>Proyectos para terceros (freelance)</h2>
diff --git a/src/pages/trajectory.astro b/src/pages/trajectory.astro
new file mode 100644
index 0000000..ae3cba7
--- /dev/null
+++ b/src/pages/trajectory.astro
@@ -0,0 +1,103 @@
+---
+import Layout from "../layouts/Layout.astro";
+
+const schema = {
+	"@context": "https://schema.org",
+	"@type": "WebPage",
+	"url": "https://www.costas.dev/trajectory",
+	"headline": "Mi trayectoria como desarrollador"
+};
+---
+
+<Layout title="Trayectoria" description="Mi trayectoria como desarrollador">
+	<script type="application/ld+json" slot="head-jsonld" set:html={JSON.stringify(schema)}></script>
+
+	<h1>Mi trayectoria como desarrollador</h1>
+
+	<p>
+		Soy un desarrollador de software que vive en Vigo, España. Me gusta
+		mucho la tecnología, y me gusta aprender cosas nuevas. Me dedico
+		profesionalmente al desarrollo de software en todos sus ámbitos: desde
+		el diseño de la arquitectura, la implementación y el despliegue en
+		producción, pasando por otros aspectos como la experiencia de usuario,
+		la accesibilidad y la seguridad.
+	</p>
+
+	<h2>Tecnologías que domino</h2>
+
+	<p>
+		Domino principalmente el ecosistema de Microsoft: .NET (C#), ASP.NET
+		Core, SQL Server, Azure y Azure DevOps. También tengo experiencia con
+		otros lenguajes y tecnologías, como PHP, Python y Java. Además, tengo
+		conocimientos de frontend con
+		<abbr title="Hypertext Markup Language">HTML5</abbr>,
+		<abbr title="Cascading Style Sheets">CSS3</abbr>, JavaScript y
+		TypeScript.
+	</p>
+
+	<p>
+		También tengo experiencia con herramientas de DevOps como Docker,
+		Kubernetes, Terraform y GitHub Actions; así como el ecosistema Cloud de
+		Azure.
+	</p>
+
+	<h2>Educación y credenciales</h2>
+
+	<ul>
+		<li>
+			<strong>Microsoft Certified: Azure Developer Associate</strong>:
+			acredita mis conocimientos en el desarrollo de aplicaciones en
+			Azure. <a
+				href="https://learn.microsoft.com/api/credentials/share/en-us/ariel-costas/E15072607CCF2DA9?sharingId=149A1CD9C13790F4"
+				>Ver credencial</a
+			>.
+		</li>
+
+		<li>
+			<strong>Microsoft Certified: Azure DevOps Engineer Expert</strong>:
+			acredita mis conocimientos en la implementación de metodologías de
+			DevOps en Azure con Azure DevOps y GitHub. <a
+				href="https://learn.microsoft.com/api/credentials/share/en-us/ariel-costas/5FB94876A1701595?sharingId=149A1CD9C13790F4"
+				>Ver credencial</a
+			>
+		</li>
+
+		<li>
+			<strong
+				>Técnico Superior en Desarrollo de Aplicaciones Multiplataforma</strong
+			>: título de formación profesional de grado superior, obtenido en el
+			<a href="https://iesteis.es/">IES de Teis</a> en Vigo.
+		</li>
+	</ul>
+
+	<h2>Experiencia laboral</h2>
+
+	<h3>Estelaria Solutions (Q3 2023 - actualidad)</h3>
+
+	<p>
+		Desarrollo de aplicaciones full-stack, principalmente en PHP con
+		Symfony, MongoDB y JavaScript Vanilla. Además, implementé una cantidad
+		considerable de mejoras en usabilidad, accesibilidad y rendimiento.
+	</p>
+
+	<p>
+		También me encargo de la gestión de la infraestructura en AWS, y de la
+		implementación de herramientas de colaboración como Jira y GitHub.
+	</p>
+
+	<h3>FCT en Polygon-E (Q2 2023)</h3>
+
+	<p>
+		Realicé mis prácticas de formación profesional en la empresa Polygon-E,
+		donde desarrollé varias aplicaciones de gestión interna con ASP.NET Core
+		y Blazor, desplegando sobre entornos <i>on-premise</i> con Windows Server,
+		IIS y SQL Server.
+	</p>
+
+	<h2>Proyectos</h2>
+
+	<p>
+		Puedes encontrar los proyectos (públicos) en los que he trabajado en <a href="/portfolio">mi portfolio</a>
+		y en mi <a href="https://github.com/arielcostas">perfil de GitHub</a>.
+	</p>
+</Layout>
diff --git a/src/partials/Header.astro b/src/partials/Header.astro
index 5f3c0e6..842841a 100644
--- a/src/partials/Header.astro
+++ b/src/partials/Header.astro
@@ -34,8 +34,10 @@ import Favicon from "../assets/Favicon.astro";
 
 	<nav id="nav-pages">
 		<a href="/">Inicio</a>
+		<a href="/trajectory">Trayectoria</a>
 		<a href="/portfolio">Portfolio</a>
 		<a href="/blog">Blog</a>
+		<a href="/contact">Contacto</a>
 	</nav>
 
 	<nav id="nav-socials">
@@ -191,12 +193,14 @@ import Favicon from "../assets/Favicon.astro";
 			font-size: 1.2rem;
 			text-transform: uppercase;
 			letter-spacing: 0.1rem;
-			transition: color 0.2s ease-in-out;
+			transition: color 0.2s ease-in-out, border-bottom-color 0.2s ease-in-out;
 			color: $accent;
 			line-height: 1;
+			border-bottom: 2px solid transparent;
 
 			&:hover {
 				color: $accentDark;
+				border-bottom-color: currentColor;
 			}
 
 			&.active {