chore: home and about page

astro.config.mjs

@@ -1,5 +1,10 @@
 // @ts-check
 import { defineConfig } from 'astro/config';
+import tailwindcss from "@tailwindcss/vite";
+import astroIcon from "astro-icon"
 
 // https://astro.build/config
-export default defineConfig({});
+export default defineConfig({
+    vite: { plugins: [tailwindcss()], },
+    integrations: [astroIcon()],
+});

package.json

@@ -9,6 +9,11 @@
     "astro": "astro"
   },
   "dependencies": {
-    "astro": "^5.12.8"
+    "@tailwindcss/vite": "^4.1.11",
+    "astro": "^5.12.8",
+    "astro-icon": "^1.1.5",
+    "lucide-astro": "^0.536.0",
+    "lucide-react": "^0.536.0",
+    "tailwindcss": "^4.1.11"
   }
 }

public/astro.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" fill="none" width="115" height="48"><path fill="#17191E" d="M7.77 36.35C6.4 35.11 6 32.51 6.57 30.62c.99 1.2 2.35 1.57 3.75 1.78 2.18.33 4.31.2 6.33-.78.23-.12.44-.27.7-.42.18.55.23 1.1.17 1.67a4.56 4.56 0 0 1-1.94 3.23c-.43.32-.9.61-1.34.91-1.38.94-1.76 2.03-1.24 3.62l.05.17a3.63 3.63 0 0 1-1.6-1.38 3.87 3.87 0 0 1-.63-2.1c0-.37 0-.74-.05-1.1-.13-.9-.55-1.3-1.33-1.32a1.56 1.56 0 0 0-1.63 1.26c0 .06-.03.12-.05.2Z"/><path fill="url(#a)" d="M7.77 36.35C6.4 35.11 6 32.51 6.57 30.62c.99 1.2 2.35 1.57 3.75 1.78 2.18.33 4.31.2 6.33-.78.23-.12.44-.27.7-.42.18.55.23 1.1.17 1.67a4.56 4.56 0 0 1-1.94 3.23c-.43.32-.9.61-1.34.91-1.38.94-1.76 2.03-1.24 3.62l.05.17a3.63 3.63 0 0 1-1.6-1.38 3.87 3.87 0 0 1-.63-2.1c0-.37 0-.74-.05-1.1-.13-.9-.55-1.3-1.33-1.32a1.56 1.56 0 0 0-1.63 1.26c0 .06-.03.12-.05.2Z"/><path fill="#17191E" d="M.02 30.31s4.02-1.95 8.05-1.95l3.04-9.4c.11-.45.44-.76.82-.76.37 0 .7.31.82.76l3.04 9.4c4.77 0 8.05 1.95 8.05 1.95L17 11.71c-.2-.56-.53-.91-.98-.91H7.83c-.44 0-.76.35-.97.9L.02 30.31Zm42.37-5.97c0 1.64-2.05 2.62-4.88 2.62-1.85 0-2.5-.45-2.5-1.41 0-1 .8-1.49 2.65-1.49 1.67 0 3.09.03 4.73.23v.05Zm.03-2.04a21.37 21.37 0 0 0-4.37-.36c-5.32 0-7.82 1.25-7.82 4.18 0 3.04 1.71 4.2 5.68 4.2 3.35 0 5.63-.84 6.46-2.92h.14c-.03.5-.05 1-.05 1.4 0 1.07.18 1.16 1.06 1.16h4.15a16.9 16.9 0 0 1-.36-4c0-1.67.06-2.93.06-4.62 0-3.45-2.07-5.64-8.56-5.64-2.8 0-5.9.48-8.26 1.19.22.93.54 2.83.7 4.06 2.04-.96 4.95-1.37 7.2-1.37 3.11 0 3.97.71 3.97 2.15v.57Zm11.37 3c-.56.07-1.33.07-2.12.07-.83 0-1.6-.03-2.12-.1l-.02.58c0 2.85 1.87 4.52 8.45 4.52 6.2 0 8.2-1.64 8.2-4.55 0-2.74-1.33-4.09-7.2-4.39-4.58-.2-4.99-.7-4.99-1.28 0-.66.59-1 3.65-1 3.18 0 4.03.43 4.03 1.35v.2a46.13 46.13 0 0 1 4.24.03l.02-.55c0-3.36-2.8-4.46-8.2-4.46-6.08 0-8.13 1.49-8.13 4.39 0 2.6 1.64 4.23 7.48 4.48 4.3.14 4.77.62 4.77 1.28 0 .7-.7 1.03-3.71 1.03-3.47 0-4.35-.48-4.35-1.47v-.13Zm19.82-12.05a17.5 17.5 0 0 1-6.24 3.48c.03.84.03 2.4.03 3.24l1.5.02c-.02 1.63-.04 3.6-.04 4.9 0 3.04 1.6 5.32 6.58 5.32 2.1 0 3.5-.23 5.23-.6a43.77 43.77 0 0 1-.46-4.13c-1.03.34-2.34.53-3.78.53-2 0-2.82-.55-2.82-2.13 0-1.37 0-2.65.03-3.84 2.57.02 5.13.07 6.64.11-.02-1.18.03-2.9.1-4.04-2.2.04-4.65.07-6.68.07l.07-2.93h-.16Zm13.46 6.04a767.33 767.33 0 0 1 .07-3.18H82.6c.07 1.96.07 3.98.07 6.92 0 2.95-.03 4.99-.07 6.93h5.18c-.09-1.37-.11-3.68-.11-5.65 0-3.1 1.26-4 4.12-4 1.33 0 2.28.16 3.1.46.03-1.16.26-3.43.4-4.43-.86-.25-1.81-.41-2.96-.41-2.46-.03-4.26.98-5.1 3.38l-.17-.02Zm22.55 3.65c0 2.5-1.8 3.66-4.64 3.66-2.81 0-4.61-1.1-4.61-3.66s1.82-3.52 4.61-3.52c2.82 0 4.64 1.03 4.64 3.52Zm4.71-.11c0-4.96-3.87-7.18-9.35-7.18-5.5 0-9.23 2.22-9.23 7.18 0 4.94 3.49 7.59 9.21 7.59 5.77 0 9.37-2.65 9.37-7.6Z"/><defs><linearGradient id="a" x1="6.33" x2="19.43" y1="40.8" y2="34.6" gradientUnits="userSpaceOnUse"><stop stop-color="#D83333"/><stop offset="1" stop-color="#F041FF"/></linearGradient></defs></svg>

public/background.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="1440" height="1024" fill="none"><path fill="url(#a)" fill-rule="evenodd" d="M-217.58 475.75c91.82-72.02 225.52-29.38 341.2-44.74C240 415.56 372.33 315.14 466.77 384.9c102.9 76.02 44.74 246.76 90.31 366.31 29.83 78.24 90.48 136.14 129.48 210.23 57.92 109.99 169.67 208.23 155.9 331.77-13.52 121.26-103.42 264.33-224.23 281.37-141.96 20.03-232.72-220.96-374.06-196.99-151.7 25.73-172.68 330.24-325.85 315.72-128.6-12.2-110.9-230.73-128.15-358.76-12.16-90.14 65.87-176.25 44.1-264.57-26.42-107.2-167.12-163.46-176.72-273.45-10.15-116.29 33.01-248.75 124.87-320.79Z" clip-rule="evenodd" style="opacity:.154"/><path fill="url(#b)" fill-rule="evenodd" d="M1103.43 115.43c146.42-19.45 275.33-155.84 413.5-103.59 188.09 71.13 409 212.64 407.06 413.88-1.94 201.25-259.28 278.6-414.96 405.96-130 106.35-240.24 294.39-405.6 265.3-163.7-28.8-161.93-274.12-284.34-386.66-134.95-124.06-436-101.46-445.82-284.6-9.68-180.38 247.41-246.3 413.54-316.9 101.01-42.93 207.83 21.06 316.62 6.61Z" clip-rule="evenodd" style="opacity:.154"/><defs><linearGradient id="b" x1="373" x2="1995.44" y1="1100" y2="118.03" gradientUnits="userSpaceOnUse"><stop stop-color="#D83333"/><stop offset="1" stop-color="#F041FF"/></linearGradient><linearGradient id="a" x1="107.37" x2="1130.66" y1="1993.35" y2="1026.31" gradientUnits="userSpaceOnUse"><stop stop-color="#3245FF"/><stop offset="1" stop-color="#BC52EE"/></linearGradient></defs></svg>

public/site.webmanifest

@@ -0,0 +1 @@
+{"name":"","short_name":"","icons":[{"src":"/android-chrome-192x192.png","sizes":"192x192","type":"image/png"},{"src":"/android-chrome-512x512.png","sizes":"512x512","type":"image/png"}],"theme_color":"#ffffff","background_color":"#ffffff","display":"standalone"}

src/assets/favicon.svg

@@ -0,0 +1,9 @@
+<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 128 128">
+    <path d="M50.4 78.5a75.1 75.1 0 0 0-28.5 6.9l24.2-65.7c.7-2 1.9-3.2 3.4-3.2h29c1.5 0 2.7 1.2 3.4 3.2l24.2 65.7s-11.6-7-28.5-7L67 45.5c-.4-1.7-1.6-2.8-2.9-2.8-1.3 0-2.5 1.1-2.9 2.7L50.4 78.5Zm-1.1 28.2Zm-4.2-20.2c-2 6.6-.6 15.8 4.2 20.2a17.5 17.5 0 0 1 .2-.7 5.5 5.5 0 0 1 5.7-4.5c2.8.1 4.3 1.5 4.7 4.7.2 1.1.2 2.3.2 3.5v.4c0 2.7.7 5.2 2.2 7.4a13 13 0 0 0 5.7 4.9v-.3l-.2-.3c-1.8-5.6-.5-9.5 4.4-12.8l1.5-1a73 73 0 0 0 3.2-2.2 16 16 0 0 0 6.8-11.4c.3-2 .1-4-.6-6l-.8.6-1.6 1a37 37 0 0 1-22.4 2.7c-5-.7-9.7-2-13.2-6.2Z" />
+    <style>
+        path { fill: #000; }
+        @media (prefers-color-scheme: dark) {
+            path { fill: #FFF; }
+        }
+    </style>
+</svg>

src/assets/site.webmanifest

@@ -0,0 +1 @@
+{"name":"","short_name":"","icons":[{"src":"/android-chrome-192x192.png","sizes":"192x192","type":"image/png"},{"src":"/android-chrome-512x512.png","sizes":"512x512","type":"image/png"}],"theme_color":"#ffffff","background_color":"#ffffff","display":"standalone"}

src/components/ExperienceCard.astro

@@ -0,0 +1,25 @@
+---
+export interface Props {
+  title: string;
+  company: string;
+  period: string;
+  location: string;
+  achievements: string[];
+  technologies: string;
+}
+
+const { title, company, period, location, achievements, technologies } = Astro.props;
+---
+
+<div class="p-4 bg-neutral-50 rounded-2xl border border-neutral-200 mx-14">
+  <h3 class="text-xl font-semibold text-neutral-900">{title}</h3>
+  <p class="text-sm text-neutral-600">{company}, {period}, {location}</p>
+  <ul class="list-disc list-inside text-sm text-neutral-700 mt-2 space-y-1">
+    {achievements.map(achievement => (
+      <li>{achievement}</li>
+    ))}
+  </ul>
+  <p class="text-xs text-neutral-500 mt-2">
+    {technologies}
+  </p>
+</div>

src/components/NavigationCard.astro

@@ -0,0 +1,23 @@
+---
+export interface Props {
+  href: string;
+  icon: any;
+  heading: string;
+  content: string;
+}
+
+const { href, icon: Icon, heading, content } = Astro.props;
+---
+
+<a 
+  href={href} 
+  class="nav-card group block p-6 rounded-2xl bg-white border border-neutral-200/80 shadow-sm hover:shadow-lg hover:border-neutral-300 focus:outline-none focus:ring-2 focus:ring-neutral-900 focus:ring-offset-2 focus:border-neutral-400"
+>
+  <div class="flex flex-col gap-4">
+    <Icon class="w-7 h-7 text-neutral-500 group-hover:text-neutral-900 transition-colors duration-200" />
+    <div>
+      <h3 class="text-2xl font-semibold text-neutral-900 mb-2">{heading}</h3>
+      <p class="text-sm text-neutral-600 leading-relaxed">{content}</p>
+    </div>
+  </div>
+</a>

src/components/Welcome.astro

@@ -1,210 +0,0 @@
----
-import astroLogo from '../assets/astro.svg';
-import background from '../assets/background.svg';
----
-
-<div id="container">
-	<img id="background" src={background.src} alt="" fetchpriority="high" />
-	<main>
-		<section id="hero">
-			<a href="https://astro.build"
-				><img src={astroLogo.src} width="115" height="48" alt="Astro Homepage" /></a
-			>
-			<h1>
-				To get started, open the <code><pre>src/pages</pre></code> directory in your project.
-			</h1>
-			<section id="links">
-				<a class="button" href="https://docs.astro.build">Read our docs</a>
-				<a href="https://astro.build/chat"
-					>Join our Discord <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 127.14 96.36"
-						><path
-							fill="currentColor"
-							d="M107.7 8.07A105.15 105.15 0 0 0 81.47 0a72.06 72.06 0 0 0-3.36 6.83 97.68 97.68 0 0 0-29.11 0A72.37 72.37 0 0 0 45.64 0a105.89 105.89 0 0 0-26.25 8.09C2.79 32.65-1.71 56.6.54 80.21a105.73 105.73 0 0 0 32.17 16.15 77.7 77.7 0 0 0 6.89-11.11 68.42 68.42 0 0 1-10.85-5.18c.91-.66 1.8-1.34 2.66-2a75.57 75.57 0 0 0 64.32 0c.87.71 1.76 1.39 2.66 2a68.68 68.68 0 0 1-10.87 5.19 77 77 0 0 0 6.89 11.1 105.25 105.25 0 0 0 32.19-16.14c2.64-27.38-4.51-51.11-18.9-72.15ZM42.45 65.69C36.18 65.69 31 60 31 53s5-12.74 11.43-12.74S54 46 53.89 53s-5.05 12.69-11.44 12.69Zm42.24 0C78.41 65.69 73.25 60 73.25 53s5-12.74 11.44-12.74S96.23 46 96.12 53s-5.04 12.69-11.43 12.69Z"
-						></path></svg
-					>
-				</a>
-			</section>
-		</section>
-	</main>
-
-	<a href="https://astro.build/blog/astro-5/" id="news" class="box">
-		<svg width="32" height="32" fill="none" xmlns="http://www.w3.org/2000/svg"
-			><path
-				d="M24.667 12c1.333 1.414 2 3.192 2 5.334 0 4.62-4.934 5.7-7.334 12C18.444 28.567 18 27.456 18 26c0-4.642 6.667-7.053 6.667-14Zm-5.334-5.333c1.6 1.65 2.4 3.43 2.4 5.333 0 6.602-8.06 7.59-6.4 17.334C13.111 27.787 12 25.564 12 22.666c0-4.434 7.333-8 7.333-16Zm-6-5.333C15.111 3.555 16 5.556 16 7.333c0 8.333-11.333 10.962-5.333 22-3.488-.774-6-4-6-8 0-8.667 8.666-10 8.666-20Z"
-				fill="#111827"></path></svg
-		>
-		<h2>What's New in Astro 5.0?</h2>
-		<p>
-			From content layers to server islands, click to learn more about the new features and
-			improvements in Astro 5.0
-		</p>
-	</a>
-</div>
-
-<style>
-	#background {
-		position: fixed;
-		top: 0;
-		left: 0;
-		width: 100%;
-		height: 100%;
-		z-index: -1;
-		filter: blur(100px);
-	}
-
-	#container {
-		font-family: Inter, Roboto, 'Helvetica Neue', 'Arial Nova', 'Nimbus Sans', Arial, sans-serif;
-		height: 100%;
-	}
-
-	main {
-		height: 100%;
-		display: flex;
-		justify-content: center;
-	}
-
-	#hero {
-		display: flex;
-		align-items: start;
-		flex-direction: column;
-		justify-content: center;
-		padding: 16px;
-	}
-
-	h1 {
-		font-size: 22px;
-		margin-top: 0.25em;
-	}
-
-	#links {
-		display: flex;
-		gap: 16px;
-	}
-
-	#links a {
-		display: flex;
-		align-items: center;
-		padding: 10px 12px;
-		color: #111827;
-		text-decoration: none;
-		transition: color 0.2s;
-	}
-
-	#links a:hover {
-		color: rgb(78, 80, 86);
-	}
-
-	#links a svg {
-		height: 1em;
-		margin-left: 8px;
-	}
-
-	#links a.button {
-		color: white;
-		background: linear-gradient(83.21deg, #3245ff 0%, #bc52ee 100%);
-		box-shadow:
-			inset 0 0 0 1px rgba(255, 255, 255, 0.12),
-			inset 0 -2px 0 rgba(0, 0, 0, 0.24);
-		border-radius: 10px;
-	}
-
-	#links a.button:hover {
-		color: rgb(230, 230, 230);
-		box-shadow: none;
-	}
-
-	pre {
-		font-family:
-			ui-monospace, 'Cascadia Code', 'Source Code Pro', Menlo, Consolas, 'DejaVu Sans Mono',
-			monospace;
-		font-weight: normal;
-		background: linear-gradient(14deg, #d83333 0%, #f041ff 100%);
-		-webkit-background-clip: text;
-		-webkit-text-fill-color: transparent;
-		background-clip: text;
-		margin: 0;
-	}
-
-	h2 {
-		margin: 0 0 1em;
-		font-weight: normal;
-		color: #111827;
-		font-size: 20px;
-	}
-
-	p {
-		color: #4b5563;
-		font-size: 16px;
-		line-height: 24px;
-		letter-spacing: -0.006em;
-		margin: 0;
-	}
-
-	code {
-		display: inline-block;
-		background:
-			linear-gradient(66.77deg, #f3cddd 0%, #f5cee7 100%) padding-box,
-			linear-gradient(155deg, #d83333 0%, #f041ff 18%, #f5cee7 45%) border-box;
-		border-radius: 8px;
-		border: 1px solid transparent;
-		padding: 6px 8px;
-	}
-
-	.box {
-		padding: 16px;
-		background: rgba(255, 255, 255, 1);
-		border-radius: 16px;
-		border: 1px solid white;
-	}
-
-	#news {
-		position: absolute;
-		bottom: 16px;
-		right: 16px;
-		max-width: 300px;
-		text-decoration: none;
-		transition: background 0.2s;
-		backdrop-filter: blur(50px);
-	}
-
-	#news:hover {
-		background: rgba(255, 255, 255, 0.55);
-	}
-
-	@media screen and (max-height: 368px) {
-		#news {
-			display: none;
-		}
-	}
-
-	@media screen and (max-width: 768px) {
-		#container {
-			display: flex;
-			flex-direction: column;
-		}
-
-		#hero {
-			display: block;
-			padding-top: 10%;
-		}
-
-		#links {
-			flex-wrap: wrap;
-		}
-
-		#links a.button {
-			padding: 14px 18px;
-		}
-
-		#news {
-			right: 16px;
-			left: 16px;
-			bottom: 2.5rem;
-			max-width: 100%;
-		}
-
-		h1 {
-			line-height: 1.5;
-		}
-	}
-</style>

src/layouts/Layout.astro

@@ -1,22 +1,42 @@
+---
+import "../styles/global.css"
+import { NotepadText, PencilRuler, LibraryBig, Fingerprint, House } from "lucide-astro";
+---
 <!doctype html>
-<html lang="en">
+<html lang="en" class="scroll-smooth">
-	<head>
+  <head>
-		<meta charset="UTF-8" />
+    <meta charset="UTF-8" />
-		<meta name="viewport" content="width=device-width" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-		<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
+    <title>Alejandro Laguna</title>
-		<meta name="generator" content={Astro.generator} />
+    <meta name="description" content="A computer science student's digital lab notebook documenting knowledge, building software, and understanding the world." />
-		<title>Astro Basics</title>
+    <meta name="generator" content={Astro.generator} />
-	</head>
+    <link rel="apple-touch-icon" sizes="180x180" href="apple-touch-icon.png">
-	<body>
+    <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
-		<slot />
+    <link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
-	</body>
+    <link rel="manifest" href="/site.webmanifest">
+  </head>
+  <body class="bg-neutral-50 text-neutral-900 min-h-screen antialiased">
+    <div class="fixed inset-0 bg-[linear-gradient(rgba(0,0,0,0.03)_1px,transparent_1px),linear-gradient(90deg,rgba(0,0,0,0.03)_1px,transparent_1px)] bg-[size:32px_32px] pointer-events-none" aria-hidden="true"></div>
+	<header class="relative z-10 w-full px-6 sm:px-8 py-8 border-b border-neutral-200/80 bg-white backdrop-blur-md">
+	  <div class="max-w-6xl mx-auto flex items-center justify-between">
+		<div>
+		  <h1 class="text-2xl sm:text-3xl font-bold text-neutral-900">Alejandro Laguna</h1>
+		  <p class="text-sm text-neutral-600 mt-1 font-medium">My digital corner — science, code, thoughts.</p>
+		</div>
+		<a href="/" aria-label="Home" class="text-neutral-600 hover:text-neutral-900 transition-colors bg-neutral-100 p-2 rounded-lg">
+			<House class="w-7 h-7 text-neutral-500 group-hover:text-neutral-900 transition-colors duration-200" />
+		</a>
+	  </div>
+	</header>
+        <main class="relative z-10 max-w-6xl mx-auto px-6 sm:px-8 py-16 sm:py-20 min-h-screen">
+          <slot />
+	</main>
+	<footer class="relative z-10 w-full px-6 sm:px-8 py-8 border-b backdrop-blur-md py-12 border-t border-neutral-200/80 bg-white">
+	  <div class="text-center">
+	    <p class="text-sm text-neutral-500">
+	      © 2025 Alejandro Laguna. Made with a lot of love.
+	    </p>
+	  </div>
+	</footer>
+  </body>
 </html>
-
-<style>
-	html,
-	body {
-		margin: 0;
-		width: 100%;
-		height: 100%;
-	}
-</style>

src/pages/about.astro

@@ -0,0 +1,133 @@
+---
+import "../styles/global.css"
+import Layout from "../layouts/Layout.astro"
+import NavigationCard from "../components/NavigationCard.astro"
+import ExperienceCard from '../components/ExperienceCard.astro';
+import { PencilRuler, LibraryBig, NotepadText, GraduationCap, Wrench, Feather, Briefcase } from 'lucide-astro';
+
+const navItems = [
+  {
+    href: "/workshop", 
+    icon: PencilRuler,
+    heading: "Workshop",
+    content: "From the theory to the implementation. What I build to understand."
+  },
+  {
+    href: "/library",
+    icon: LibraryBig, 
+    heading: "Library",
+    content: "Books and papers and resources I use to learn. What I read, and why it matters."
+  },
+  {
+    href: "/notes",
+    icon: NotepadText,
+    heading: "Notes", 
+    content: "My explorations into the fundamental nature of everything."
+  }
+];
+
+const experiences = [
+  {
+    title: "Software Engineer Intern",
+    company: "MigaLabs",
+    period: "July 2025 - December 2025",
+    location: "Barcelona (Spain)",
+    achievements: [
+      "Built monitoring tools to keep tabs on over a terabyte of Ethereum blockchain data - quality control at scale",
+      "Designed validation systems that could handle different network upgrades, since each fork had its own rules to follow",
+      "Worked the company's main dashboard using Next.js, turning complex blockchain data into something the team and customers could actually understand",
+      "Studied deep the Ethereum specifications to figure out what \"correct\" data should look like across different network phases (phase0, Altair, Bellatrix, Capella...)"
+    ],
+    technologies: "Go • Next.js • Tailwind CSS • Ethereum"
+  },
+  {
+    title: "Full-stack Developer", 
+    company: "Avantiam Inc",
+    period: "September 2023 - August 2024",
+    location: "Figueres (Spain)",
+    achievements: [
+      "Built a multitenant company management platform from the ground up - one codebase serving over 100 local companies",
+      "Developed HR tools, task management, and time tracking features that teams actually ended up using",
+      "Worked with Laravel and Livewire to create real-time interfaces that felt responsive and modern",
+      "Dealt the challenge of building productivity tools that didn't feel like corporate bloatware"
+    ],
+    technologies: "Laravel • PHP • JavaScript • Livewire • Alpine.js • Tailwind CSS"
+  },
+  {
+    title: "Backend Developer Intern",
+    company: "Niblu Group", 
+    period: "Summer 2023",
+    location: "Maribor (Slovenia)",
+    achievements: [
+      "Spent a summer in Slovenia through Erasmus+, working on an e-learning platform while navigating a new country alone at 17",
+      "Built course delivery systems using FastAPI and Next.js, focusing on making educational content engaging",
+      "Got hands-on experience with AWS and Docker, learning how to deploy properly instead of just making things work locally",
+      "Collaborated on tools designed to make learning more accessible. It felt meaningful beyond just writing code"
+    ],
+    technologies: "Next.js • FastAPI • Python • Tailwind CSS • AWS • Docker"
+  }
+];
+
+---
+
+<Layout>
+  <section class="max-w-3xl mb-10 sm:mb-14">
+    <h1 class="text-4xl sm:text-5xl font-bold mb-6 text-neutral-900">About</h1>
+    <p class="text-lg text-neutral-600 leading-relaxed text-justify">
+      I'm a second year computer science student at the European Institute of Technology, still trying to figure out my place but enjoying the journey through systems programming, webdev and other fields. Outside of code, my favorite writer is Isaac Asimov, my favorite piece of music is Spiegel im Spiegel, and my favorite book is The Witches by Roald Dahl. My favorite star is Vega because it was once our north star and will be again in about 12,000 years - something poetic about that cycle. And that's pretty much everything you need to know about me, except maybe my tea preferences, but we'll save that for another time...    </p>
+  </section>
+
+  <section class="mb-12 bg-neutral-50 p-6 rounded-2xl border border-neutral-200">
+    <h2 class="flex items-center gap-2 text-2xl font-semibold text-neutral-900 mb-4">
+      <GraduationCap class="w-6 h-6 text-neutral-500" /> Education
+    </h2>
+    <ul class="space-y-4">
+      <li>
+        <p class="text-base text-neutral-900 font-medium">Bachelor + Master’s Degree in Computer Science</p>
+        <p class="text-sm text-neutral-600">European Institute of Technology, class of 2029</p>
+      </li>
+      <li>
+        <p class="text-base text-neutral-900 font-medium">Vocational Studies in Networking, Microcomputers and Operative Systems</p>
+        <p class="text-sm text-neutral-600">INS Cendrassos, class of 2024</p>
+      </li>
+    </ul>
+  </section>
+  <section class="mb-12">
+    <h2 class="flex items-center gap-2 text-2xl font-semibold text-neutral-900 mb-4">
+      <Briefcase class="w-6 h-6 text-neutral-500" /> Experience
+    </h2>
+    <div class="grid sm:grid-cols-1 gap-6">
+      {experiences.map(exp => (
+        <ExperienceCard {...exp} />
+      ))}
+    </div>
+  </section>
+  <section class="mb-12">
+    <h2 class="flex items-center gap-2 text-2xl font-semibold text-neutral-900 mb-4">
+      <Wrench class="w-6 h-6 text-neutral-500" /> Tools I Use
+    </h2>
+    <code class="block bg-neutral-50 p-4 rounded-xl text-neutral-800 overflow-x-auto border border-neutral-200">
+      <b>Languages:</b> C, Go, Python, Javascript/Typescript, PHP<br>
+      <b>Frameworks & Libraries:</b> Astro, React, Preact, NextJS, Vue, NuxtJS, Express, FastAPI, TailwindCSS <br>
+      <b>Databases:</b> MongoDB, PostgreSQL, MySQL/MariaDB, ClickHouse <br>
+      <b>Tools:</b> Git, Bash, Linux, LaTeX, Typst, Neovim<br>
+    </code>
+  </section>
+
+  <section class="mb-20 sm:mb-28" aria-labelledby="navigation-heading">
+    <h2 class="flex items-center gap-2 text-2xl font-semibold text-neutral-900 mb-4">
+      <Feather class="w-6 h-6 text-neutral-500" /> Projects, posts, thoughts...
+    </h2>
+
+    <div class="grid grid-cols-1 sm:grid-cols-1 lg:grid-cols-3 gap-5">
+      {navItems.map(item => (
+        <NavigationCard
+          href={item.href}
+          icon={item.icon}
+          heading={item.heading}
+          content={item.content}
+        />
+      ))}
+    </div>
+  </section>
+</Layout>

src/pages/index.astro

@@ -1,11 +1,57 @@
 ---
-import Welcome from '../components/Welcome.astro';
+import "../styles/global.css"
-import Layout from '../layouts/Layout.astro';
+import Layout from "../layouts/Layout.astro"
+import NavigationCard from '../components/NavigationCard.astro';
+import { Fingerprint, PencilRuler, LibraryBig, NotepadText } from 'lucide-astro';
 
-// Welcome to Astro! Wondering what to do next? Check out the Astro documentation at https://docs.astro.build
+const navItems = [
-// Don't want to use any of this? Delete everything in this file, the `assets`, `components`, and `layouts` directories, and start fresh.
+  {
+    href: "/about",
+    icon: Fingerprint,
+    heading: "About",
+    content: "Who am I, my academic and professional background, what drives this work."
+  },
+  {
+    href: "/workshop", 
+    icon: PencilRuler,
+    heading: "Workshop",
+    content: "From the theory to the implementation. What I build to understand."
+  },
+  {
+    href: "/library",
+    icon: LibraryBig, 
+    heading: "Library",
+    content: "Books and papers and resources I use to learn. What I read, and why it matters."
+  },
+  {
+    href: "/notes",
+    icon: NotepadText,
+    heading: "Notes", 
+    content: "My explorations into the fundamental nature of everything."
+  }
+];
 ---
-
 <Layout>
-	<Welcome />
+  <section class="max-w-4xl mb-20 sm:mb-28">
+    <h2 class="text-4xl sm:text-5xl lg:text-6xl font-bold leading-[1.1] mb-6 text-neutral-900">
+      A <span class="text-neutral-600"> notebook </span> for <br>working things out.
+    </h2>
+    <p class="text-lg sm:text-xl text-neutral-600 leading-relaxed max-w-2xl">
+      Unpolished notes, working prototypes, honest questions. A space for building understanding from the ground up. Trying to understand the world by writing and building.
+    </p>
+  </section>
+
+  <section class="mb-20 sm:mb-28" aria-labelledby="navigation-heading">
+    <h2 id="navigation-heading" class="sr-only">Site navigation</h2>
+    <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-5">
+      {navItems.map(item => (
+        <NavigationCard
+          href={item.href}
+          icon={item.icon}
+          heading={item.heading}
+          content={item.content}
+        />
+      ))}
+    </div>
+  </section>
 </Layout>

src/styles/global.css

@@ -0,0 +1,31 @@
+@import url('https://fonts.googleapis.com/css2?family=Crimson+Pro:ital,wght@0,200..900;1,200..900&family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&family=JetBrains+Mono:ital,wght@0,100..800;1,100..800&display=swap');
+@import "tailwindcss";
+
+:root {
+  --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
+  --font-serif: 'Crimson Pro', Georgia, serif;
+  --font-mono: 'JetBrains Mono', monospace;
+}
+
+body {
+  font-family: var(--font-sans);
+  font-feature-settings: 'kern' 1, 'liga' 1, 'calt' 1;
+}
+
+h1, h2, h3 {
+  font-family: var(--font-serif);
+  letter-spacing: -0.025em;
+}
+
+.nav-card {
+  transform: translateY(0);
+  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+.nav-card:hover {
+  transform: translateY(-2px);
+}
+
+.nav-card:focus {
+  transform: translateY(-1px);
+}