Rebuild the site in Astro

Add licence

Update site name in header to match README.md

Add missing metadescription, opengraph and link to RSS

Update Astro configuration to include sitemap integration with priority and changefreq settings

New post

1 files changed, 271 insertions, 0 deletions

diff --git a/src/partials/Header.astro b/src/partials/Header.astro
new file mode 100644
index 0000000..e4e55d7
--- /dev/null
+++ b/src/partials/Header.astro
@@ -0,0 +1,271 @@
+---
+import Favicon from "../assets/Favicon.astro";
+---
+
+<header class="collapsed">
+	<div id="brand">
+		<button
+			id="mobile-menu"
+			type="button"
+			aria-controls="nav-pages nav-socials"
+		>
+			<svg
+				xmlns="http://www.w3.org/2000/svg"
+				width="24"
+				height="24"
+				viewBox="0 0 24 24"
+				stroke-width="2"
+				stroke="currentColor"
+				fill="none"
+				stroke-linecap="round"
+				stroke-linejoin="round"
+				>
+				<title>Hambuger menu</title>
+				<path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path
+					d="M4 6l16 0"></path><path d="M4 12l16 0"></path><path
+					d="M4 18l16 0"></path></svg
+			>
+		</button>
+
+		<a href="/" style="line-height: 1;">
+			<Favicon />
+		</a>
+	</div>
+
+	<nav id="nav-pages">
+		<a href="/">Inicio</a>
+		<a href="/portfolio">Portfolio</a>
+		<a href="/blog">Blog</a>
+	</nav>
+
+	<nav id="nav-socials">
+		<a rel="me" href="https://masto.es/@arielcg" title="Mastodon">
+			<svg
+				xmlns="http://www.w3.org/2000/svg"
+				class="icon icon-tabler icon-tabler-brand-mastodon"
+				width="32"
+				height="32"
+				viewBox="0 0 24 24"
+				stroke-width="2"
+				stroke="currentColor"
+				fill="none"
+				stroke-linecap="round"
+				stroke-linejoin="round"
+			>
+				<title>Mastodon logo</title>
+				<path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
+				<path
+					d="M18.648 15.254c-1.816 1.763 -6.648 1.626 -6.648 1.626a18.262 18.262 0 0 1 -3.288 -.256c1.127 1.985 4.12 2.81 8.982 2.475c-1.945 2.013 -13.598 5.257 -13.668 -7.636l-.026 -1.154c0 -3.036 .023 -4.115 1.352 -5.633c1.671 -1.91 6.648 -1.666 6.648 -1.666s4.977 -.243 6.648 1.667c1.329 1.518 1.352 2.597 1.352 5.633s-.456 4.074 -1.352 4.944z"
+				></path>
+				<path
+					d="M12 11.204v-2.926c0 -1.258 -.895 -2.278 -2 -2.278s-2 1.02 -2 2.278v4.722m4 -4.722c0 -1.258 .895 -2.278 2 -2.278s2 1.02 2 2.278v4.722"
+				></path>
+			</svg>
+		</a>
+		<a href="https://github.com/arielcostas" title="GitHub">
+			<svg
+				xmlns="http://www.w3.org/2000/svg"
+				class="icon icon-tabler icon-tabler-brand-github"
+				width="32"
+				height="32"
+				viewBox="0 0 24 24"
+				stroke-width="2"
+				stroke="currentColor"
+				fill="none"
+				stroke-linecap="round"
+				stroke-linejoin="round"
+			>
+				<title>GitHub logo</title>
+				<path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
+				<path
+					d="M9 19c-4.3 1.4 -4.3 -2.5 -6 -3m12 5v-3.5c0 -1 .1 -1.4 -.5 -2c2.8 -.3 5.5 -1.4 5.5 -6a4.6 4.6 0 0 0 -1.3 -3.2a4.2 4.2 0 0 0 -.1 -3.2s-1.1 -.3 -3.5 1.3a12.3 12.3 0 0 0 -6.2 0c-2.4 -1.6 -3.5 -1.3 -3.5 -1.3a4.2 4.2 0 0 0 -.1 3.2a4.6 4.6 0 0 0 -1.3 3.2c0 4.6 2.7 5.7 5.5 6c-.6 .6 -.6 1.2 -.5 2v3.5"
+				></path>
+			</svg>
+		</a>
+		<a href="https://linkedin.com/in/ariel-costas" title="LinkedIn">
+			<svg
+				xmlns="http://www.w3.org/2000/svg"
+				class="icon icon-tabler icon-tabler-brand-linkedin"
+				width="32"
+				height="32"
+				viewBox="0 0 24 24"
+				stroke-width="2"
+				stroke="currentColor"
+				fill="none"
+				stroke-linecap="round"
+				stroke-linejoin="round"
+			>
+				<title>LinkedIn logo</title>
+				<path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
+				<path
+					d="M4 4m0 2a2 2 0 0 1 2 -2h12a2 2 0 0 1 2 2v12a2 2 0 0 1 -2 2h-12a2 2 0 0 1 -2 -2z"
+				></path>
+				<path d="M8 11l0 5"></path>
+				<path d="M8 8l0 .01"></path>
+				<path d="M12 16l0 -5"></path>
+				<path d="M16 16v-3a2 2 0 0 0 -4 0"></path>
+			</svg>
+		</a>
+	</nav>
+</header>
+
+<style lang="scss">
+	@import "../../styles/shared.scss";
+
+	header {
+		background-color: $lightAlt;
+		color: $accent;
+		box-shadow: $shadow;
+
+		display: flex;
+		flex-direction: column;
+		justify-content: space-between;
+		gap: 0.5rem 0;
+
+		padding: calc(1rem - 2px) 1rem 1rem 1rem;
+
+		position: relative;
+		overflow: hidden;
+
+		border-top: 4px solid $accent;
+
+		a {
+			display: inline-block;
+		}
+
+		#brand {
+			display: flex;
+			flex-direction: row;
+			align-items: center;
+			gap: 1rem;
+
+			h1 {
+				font-size: 2rem;
+				margin: 0;
+				font-weight: 500;
+				line-height: 1;
+
+				a {
+					font-family: $mainFontStack;
+					color: $accent;
+					text-decoration: none;
+				}
+			}
+		}
+
+		#nav-pages {
+			display: flex;
+			flex-direction: column;
+			align-items: flex-start;
+			gap: 0.25rem;
+
+			padding-inline-start: 2.5rem;
+
+			transition: max-height 0.2s linear;
+			max-height: 100vh;
+
+			a {
+				@extend %tracking-tight;
+			}
+		}
+
+		#nav-socials {
+			align-self: center;
+
+			display: flex;
+			gap: 1.5rem;
+
+			transition: max-height 0.2s linear;
+			max-height: 100vh;
+
+			a {
+				font-size: 1.5rem;
+				transition: color 0.2s ease-in-out;
+				line-height: 1;
+			}
+		}
+
+		nav > a {
+			text-decoration: none;
+			font-weight: 700;
+			font-size: 1.2rem;
+			text-transform: uppercase;
+			letter-spacing: 0.1rem;
+			transition: color 0.2s ease-in-out;
+			color: $accent;
+			line-height: 1;
+
+			&:hover {
+				color: $accentDark;
+			}
+
+			&.active {
+				color: $accentDark;
+			}
+		}
+
+		button#mobile-menu {
+			display: block;
+			background-color: transparent;
+			border: none;
+			font-size: 2rem;
+			cursor: pointer;
+		}
+	}
+
+	@media (max-width: $breakpointTablet) {
+		header.collapsed {
+			gap: 0;
+
+			#nav-pages,
+			#nav-socials {
+				max-height: 0;
+				overflow: hidden;
+			}
+		}
+	}
+
+	@media (min-width: $breakpointTablet) {
+		header {
+			flex-direction: row;
+			align-items: center;
+			justify-content: space-between;
+
+			#nav-pages {
+				justify-self: start;
+				flex-direction: row;
+				gap: 1.5rem;
+				padding-inline-start: 0;
+			}
+
+			button#mobile-menu {
+				display: none;
+			}
+
+			&.collapsed {
+				#nav-pages,
+				#nav-socials {
+					display: flex;
+					max-height: unset;
+				}
+			}
+		}
+	}
+
+	@media (min-width: $breakpointDesktop) {
+		header {
+			padding: calc(1rem - 2px) 5.5rem 1rem 5.5rem;
+			gap: 1.5rem;
+			justify-content: center;
+
+			h1 {
+				margin-bottom: 0.5rem;
+			}
+
+			#nav-socials {
+				align-self: flex-end;
+				margin-left: auto;
+			}
+		}
+	}
+</style>