Add Beiruti font for titles

6 files changed, 71 insertions, 40 deletions

diff --git a/package-lock.json b/package-lock.json
index c46c9c2..3d7f9ce 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -9,12 +9,13 @@
       "version": "0.0.1",
       "dependencies": {
         "@astrojs/check": "^0.9.4",
-        "@astrojs/rss": "^4.0.10",
-        "@astrojs/sitemap": "^3.2.1",
-        "@fontsource-variable/sen": "^5.0.5",
+        "@astrojs/rss": "4.0.10",
+        "@astrojs/sitemap": "3.2.1",
+        "@fontsource-variable/sen": "5.1.0",
+        "@fontsource/beiruti": "^5.1.1",
         "astro": "^5.1.1",
-        "braces": ">=3.0.3",
-        "typescript": "5.5.4"
+        "braces": "3.0.3",
+        "typescript": "5.7.2"
       },
       "devDependencies": {
         "sass": "^1.76.0"
@@ -702,9 +703,16 @@
       }
     },
     "node_modules/@fontsource-variable/sen": {
-      "version": "5.0.5",
-      "resolved": "https://registry.npmjs.org/@fontsource-variable/sen/-/sen-5.0.5.tgz",
-      "integrity": "sha512-hChjqHYtTt1hud11Q0IOLqFu6sI/qlfhftO+CofnijniEM/DoFys7N2T/7sltTJPJSPrWnOP8/NYVTb0ZzWsYg=="
+      "version": "5.1.0",
+      "resolved": "https://registry.npmjs.org/@fontsource-variable/sen/-/sen-5.1.0.tgz",
+      "integrity": "sha512-kvtPL4/Bmpj2JOK8BdE5MRbLFTgeXnKJs9GrbJKZ7ruuoFG7U50GgfPxcrV2Gzlk9C+VZxcxtsK1iS+V96Iu+w==",
+      "license": "OFL-1.1"
+    },
+    "node_modules/@fontsource/beiruti": {
+      "version": "5.1.1",
+      "resolved": "https://registry.npmjs.org/@fontsource/beiruti/-/beiruti-5.1.1.tgz",
+      "integrity": "sha512-kKBLhtVEED1acwMBtItZiw7AokIeI7/S5+MhaTfRHL5suVeA7cfd/ZHsB5HzHPsXAy6RBRYPOow8RvlJR9Zouw==",
+      "license": "OFL-1.1"
     },
     "node_modules/@img/sharp-darwin-arm64": {
       "version": "0.33.3",
@@ -5740,9 +5748,9 @@
       "license": "MIT"
     },
     "node_modules/typescript": {
-      "version": "5.5.4",
-      "resolved": "https://registry.npmjs.org/typescript/-/typescript-5.5.4.tgz",
-      "integrity": "sha512-Mtq29sKDAEYP7aljRgtPOpTvOfbwRWlS6dPRzwjdE+C0R4brX/GUyhHSecbHMFLNBLcJIPt9nl9yG5TZ1weH+Q==",
+      "version": "5.7.2",
+      "resolved": "https://registry.npmjs.org/typescript/-/typescript-5.7.2.tgz",
+      "integrity": "sha512-i5t66RHxDvVN40HfDd1PsEThGNnlMCMT3jMUuoh9/0TaqWevNontacunWyN02LA9/fIbEWlcHZcgTKb9QoaLfg==",
       "license": "Apache-2.0",
       "bin": {
         "tsc": "bin/tsc",
diff --git a/package.json b/package.json
index 1856324..3aa67de 100644
--- a/package.json
+++ b/package.json
@@ -14,6 +14,7 @@
     "@astrojs/rss": "4.0.10",
     "@astrojs/sitemap": "3.2.1",
     "@fontsource-variable/sen": "5.1.0",
+    "@fontsource/beiruti": "^5.1.1",
     "astro": "^5.1.1",
     "braces": "3.0.3",
     "typescript": "5.7.2"
diff --git a/src/layouts/Layout.astro b/src/layouts/Layout.astro
index 26507bd..988f096 100644
--- a/src/layouts/Layout.astro
+++ b/src/layouts/Layout.astro
@@ -1,4 +1,5 @@
 ---
+import "@fontsource/beiruti";
 import "@fontsource-variable/sen";
 import Header from "../partials/Header.astro";
 import Footer from "../partials/Footer.astro";
diff --git a/src/pages/contact.astro b/src/pages/contact.astro
index 2bb5b18..e8615cc 100644
--- a/src/pages/contact.astro
+++ b/src/pages/contact.astro
@@ -22,7 +22,9 @@ const schema = {
 	<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>
+		<a href="#" id="email-addr">ACTIVA JAVASCRIPT PARA VER ESTO</a>. También
+		puedes usar <a href="https://wa.me/message/W7T7L4EZAELQI1">WhatsApp</a> con el número de teléfono
+		<a href="#" id="phone-number">ACTIVA JAVASCRIPT PARA VER ESTO</a>.
 	</p>
 
 	<p>También puedes encontrarme en algunas redes sociales:</p>
@@ -32,18 +34,52 @@ const schema = {
 		<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>
+		<dt>BlueSky</dt>
+		<dd><a href="https://bsky.app/profile/costas.dev">@costas.dev</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 ", ".");
+	const encryptedEmail = "LygNLiMmFRo/GlQZaFIWBA==";
+	const encryptedPhoneNumber = "ZWlQfX1QT0Z+XgVd";
+	const key = "NZdKOfvuLn5jF6sryF0Q";
+
+	const emailAddrLink = document.getElementById("email-addr") as HTMLAnchorElement;
+	const phoneNumberLink = document.getElementById("phone-number") as HTMLAnchorElement;
+
+	(() => {
+		if (emailAddrLink == null || phoneNumberLink == null) {
+			return;
+		}
+
+		const emailAddress = xorData(encryptedEmail, key);
+		const phoneNumber = xorData(encryptedPhoneNumber, key);
+
+		emailAddrLink.href = `mailto:${emailAddress}`;
+		emailAddrLink.textContent = emailAddress;
+
+		phoneNumberLink.href = `tel:${phoneNumber}`;
+		phoneNumberLink.textContent = phoneNumber;
+	})();
+
+	function xorData(data: string, key: string): string {
+		let actualData = atob(data);
+		let actualKey = key;
+		const keyLength = key.length;
+		const dataLength = actualData.length;
+		const result = new Array(dataLength);
+		
+		// If the key is 12 characters but the data is 30 characters, the key should be repeated 3 times and truncated to 30 characters
+		if (keyLength < dataLength) {
+			actualKey = key.repeat(Math.ceil(dataLength / keyLength)).substring(0, dataLength);
+		} else if (keyLength > dataLength) {
+			actualKey = key.substring(0, dataLength);
+		}
+
+		for (let i = 0; i < dataLength; i++) {
+			result[i] = String.fromCharCode(actualData.charCodeAt(i) ^ actualKey.charCodeAt(i));
+		}
+
+		return result.join("");
 	}
 </script>
diff --git a/src/partials/Header.astro b/src/partials/Header.astro
index aa0d26a..489dc47 100644
--- a/src/partials/Header.astro
+++ b/src/partials/Header.astro
@@ -57,14 +57,3 @@ import Favicon from "../assets/Favicon.astro";
 	@media (min-width: $breakpointDesktop) {
 	}
 </style>
-
-<script>
-	const mobileMenuButton = document.getElementById(
-		"mobile-menu"
-	) as HTMLButtonElement;
-	const headerElement = document.querySelector("header") as HTMLElement;
-
-	mobileMenuButton.addEventListener("click", () => {
-		headerElement.classList.toggle("collapsed");
-	});
-</script>
diff --git a/styles/shared.scss b/styles/shared.scss
index 1d9ccdc..40fd5c2 100644
--- a/styles/shared.scss
+++ b/styles/shared.scss
@@ -1,3 +1,4 @@
+$titleFontStack: 'Beiruti', 'Arial', system-ui, sans-serif;
 $mainFontStack: 'Sen Variable', 'Arial', system-ui, sans-serif;
 $monoFontStack: 'Fira Code', 'Consolas', monospace;
 
@@ -21,13 +22,8 @@ $breakpointDesktop: 1024px;
 	font: 400 16px/1.65 $mainFontStack;
 }
 
-%tracking-tight {
-	letter-spacing: -0.05em;
-}
-
 %heading {
-	font-family: $mainFontStack;
-	@extend %tracking-tight;
+	font-family: $titleFontStack;
 	line-height: 1.25;
 	margin-block-start: 0.75em;
 	margin-block-end: 0.25em;
@@ -35,12 +31,12 @@ $breakpointDesktop: 1024px;
 
 h1 {
 	@extend %heading;
-	font-size: 3rem;
+	font-size: 3.25rem;
 }
 
 h2 {
 	@extend %heading;
-	font-size: 2.25rem;
+	font-size: 2.5rem;
 }
 
 h3 {