From 207782921cb4ab9c8fd5713b82a6e2bf72eed705 Mon Sep 17 00:00:00 2001
From: micraj <mrajzer2004@gmail.com>
Date: Tue, 8 Jul 2025 14:54:54 +0100
Subject: [PATCH 01/11] Initial frontend design

---
 frontend/src/routes/+page.svelte | 194 +++++++++++++++++++++++++++++--
 1 file changed, 187 insertions(+), 7 deletions(-)

diff --git a/frontend/src/routes/+page.svelte b/frontend/src/routes/+page.svelte
index 58dc6ff..d896656 100644
--- a/frontend/src/routes/+page.svelte
+++ b/frontend/src/routes/+page.svelte
@@ -1,10 +1,190 @@
-<script lang="ts">
-	import TinyEditor from '$lib/components/TinyEditor.svelte';
-	let content: string = '<p>Hello, TinyMCE!</p>';
+<script>
+	import { onMount } from 'svelte';
+
+	const sections = ['welcome', 'projects', 'about'];
+
+	onMount(() => {
+		const navLinks = document.querySelectorAll('.sidebar nav ul li a');
+
+		navLinks.forEach((link) => {
+			link.addEventListener('click', (event) => {
+				event.preventDefault();
+
+				const targetId = link.getAttribute('href').substring(1);
+				const targetSection = document.getElementById(targetId);
+
+				if (targetSection) {
+					targetSection.scrollIntoView({ behavior: 'smooth' });
+				}
+			});
+		});
+	});
 </script>
 
-<h1>My Editor</h1>
-<TinyEditor bind:content height={400} />
+<div class="app">
+	<!-- Sidebar -->
+	<aside class="sidebar">
+		<nav>
+			<ul>
+				{#each sections as section}
+					<li>
+						<a href={`#${section}`}>{section.charAt(0).toUpperCase() + section.slice(1)}</a>
+					</li>
+				{/each}
+			</ul>
+		</nav>
+		<!-- <div class="social-icons">
+			<a href="#"
+				><img src="https://cdn-icons-png.flaticon.com/512/174/174857.png" alt="LinkedIn" /></a
+			>
+			<a href="#"><img src="https://cdn-icons-png.flaticon.com/512/25/25231.png" alt="GitHub" /></a>
+		</div> -->
+	</aside>
+
+	<!-- Main content -->
+	<main class="content">
+		<section id="welcome">
+			<h1>Hi! I’m Michal,<br />welcome to<br />my blog</h1>
+		</section>
+
+		<section id="projects">
+			<div class="project-card red">
+				<img src="https://via.placeholder.com/100x80?text=Macro" alt="Macropad" />
+				<div class="text">
+					<h3>Macropad</h3>
+					<p class="date">08/07/2025</p>
+					<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
+				</div>
+			</div>
+
+			<div class="project-card purple">
+				<img src="https://via.placeholder.com/100x80?text=Cloud" alt="Self-hosted website" />
+				<div class="text">
+					<h3>Self-hosted website</h3>
+					<p class="date">08/07/2025</p>
+					<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
+				</div>
+			</div>
+		</section>
+
+		<section id="about">
+			<h2>About Me</h2>
+			<p>This is a short bio about Michal. You can customize this section however you like.</p>
+		</section>
+	</main>
+</div>
+
+<style>
+	/* Layout */
+	.app {
+		display: flex;
+		height: 100vh;
+		overflow: hidden;
+		font-family: 'Segoe UI', sans-serif;
+	}
+
+	.sidebar {
+		width: 150px;
+		background-color: #f1f9c6;
+		border-right: 2px solid #d3e4a3;
+		padding: 20px 10px;
+		position: sticky;
+		top: 0;
+		height: 100vh;
+		display: flex;
+		flex-direction: column;
+		justify-content: space-between;
+	}
+
+	.content {
+		flex: 1;
+		overflow-y: scroll;
+		scroll-snap-type: y mandatory;
+		scroll-behavior: smooth;
+	}
+
+	section {
+		min-height: 100vh;
+		padding: 40px;
+		background-color: #f1f9c6;
+		scroll-snap-align: start;
+	}
+
+	/* Sidebar */
+	ul {
+		list-style: none;
+		padding: 0;
+		line-height: 2.5;
+	}
+
+	li a {
+		text-decoration: none;
+		color: #222;
+		font-weight: 500;
+	}
+
+	li a:hover {
+		color: #006699;
+	}
+
+	.social-icons img {
+		width: 24px;
+		margin: 10px 0;
+		cursor: pointer;
+	}
+
+	/* Welcome Section */
+	#welcome h1 {
+		font-size: 2.5rem;
+		color: #214c4e;
+		line-height: 1.5;
+	}
+
+	/* Projects Section */
+	#projects {
+		display: flex;
+		flex-direction: column;
+		gap: 20px;
+	}
+
+	.project-card {
+		display: flex;
+		color: white;
+		padding: 20px;
+		border-radius: 10px;
+		box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.1);
+		align-items: center;
+		gap: 20px;
+	}
+
+	.red {
+		background-color: #e74c3c;
+	}
+
+	.purple {
+		background-color: #dd5edb;
+	}
+
+	.project-card img {
+		width: 100px;
+		border-radius: 5px;
+	}
+
+	.date {
+		font-size: 0.9em;
+		opacity: 0.9;
+		margin-bottom: 10px;
+	}
+
+	/* About Section */
+	#about h2 {
+		color: #214c4e;
+		font-size: 2rem;
+		margin-bottom: 10px;
+	}
 
-<!-- <h2>Preview:</h2>
-<div>{@html content}</div> -->
+	#about p {
+		font-size: 1.1rem;
+		max-width: 600px;
+	}
+</style>

From 9b4b9fb81a43b9ebc80612a6fca1d669cb588e84 Mon Sep 17 00:00:00 2001
From: micraj <mrajzer2004@gmail.com>
Date: Thu, 10 Jul 2025 23:19:06 +0100
Subject: [PATCH 02/11] Working resize for welcome and projects

---
 frontend/src/app.html                      |   5 +
 frontend/src/lib/components/SideBar.svelte | 133 +++++++++
 frontend/src/routes/+page.svelte           | 320 +++++++++++++++------
 3 files changed, 370 insertions(+), 88 deletions(-)
 create mode 100644 frontend/src/lib/components/SideBar.svelte

diff --git a/frontend/src/app.html b/frontend/src/app.html
index 77a5ff5..128e3c4 100644
--- a/frontend/src/app.html
+++ b/frontend/src/app.html
@@ -4,6 +4,11 @@
 		<meta charset="utf-8" />
 		<link rel="icon" href="%sveltekit.assets%/favicon.png" />
 		<meta name="viewport" content="width=device-width, initial-scale=1" />
+		<link
+			href="https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;700&display=swap"
+			rel="stylesheet"
+		/>
+
 		%sveltekit.head%
 	</head>
 	<body data-sveltekit-preload-data="hover">
diff --git a/frontend/src/lib/components/SideBar.svelte b/frontend/src/lib/components/SideBar.svelte
new file mode 100644
index 0000000..93f76bb
--- /dev/null
+++ b/frontend/src/lib/components/SideBar.svelte
@@ -0,0 +1,133 @@
+<script lang="ts">
+	export let sections: string[] = [];
+
+	import { onMount, onDestroy } from 'svelte';
+	import { writable } from 'svelte/store';
+
+	let activeSection = writable(sections[0] || '');
+
+	function handleClick(event: MouseEvent) {
+		event.preventDefault();
+
+		const target = event.currentTarget as HTMLAnchorElement;
+		const href = target.getAttribute('href');
+
+		if (!href) return;
+
+		const targetId = href.substring(1);
+		const targetSection = document.getElementById(targetId);
+
+		if (targetSection) {
+			targetSection.scrollIntoView({ behavior: 'smooth' });
+			// activeSection.set(targetId);
+		}
+	}
+
+	let observer: IntersectionObserver;
+
+	onMount(() => {
+		const options = {
+			root: null,
+			rootMargin: '0px',
+			threshold: 0.1 // Adjust how much should be visible to be "active"
+		};
+
+		observer = new IntersectionObserver((entries) => {
+			entries.forEach((entry) => {
+				if (entry.isIntersecting) {
+					activeSection.set(entry.target.id);
+				}
+			});
+		}, options);
+
+		sections.forEach((sectionId) => {
+			const el = document.getElementById(sectionId);
+			if (el) observer.observe(el);
+		});
+	});
+
+	onDestroy(() => {
+		if (observer) observer.disconnect();
+	});
+</script>
+
+<aside class="sidebar">
+	<nav>
+		<ul>
+			{#each sections as section}
+				<li>
+					<a
+						href={`#${section}`}
+						on:click={handleClick}
+						class:selected={$activeSection === section}
+					>
+						{section.charAt(0).toUpperCase() + section.slice(1)}
+					</a>
+				</li>
+			{/each}
+		</ul>
+	</nav>
+</aside>
+
+<style>
+	/* When screen width is small */
+	@media (max-width: 600px) {
+		.sidebar {
+			display: none;
+		}
+	}
+	.sidebar {
+		width: 175px;
+		height: 100vh;
+		position: relative; /* Needed for ::before positioning */
+		/* Remove the full-height border */
+	}
+	.sidebar nav {
+		padding: 5px;
+	}
+	.sidebar::before {
+		content: '';
+		position: absolute;
+		top: 5%; /* space from the top */
+		bottom: 5%; /* space from the bottom */
+		right: 0;
+		width: 7px;
+		background-color: rgba(136, 150, 150, 0.5); /* or #000000 if you prefer */
+		border-radius: 10px;
+	}
+
+	/* Sidebar */
+	ul {
+		list-style: none;
+		padding: 125px 0px 0px 10px;
+		line-height: 2.5;
+	}
+
+	li a {
+		text-decoration: none;
+		color: #14080e;
+		font-weight: 500;
+		padding-left: 10px;
+		border-left: 4px solid transparent;
+		transition: border-color 0.3s ease;
+		font-family: 'Space Grotesk', sans-serif;
+		font-size: 1.5rem;
+		font-weight: 700;
+	}
+
+	li a:hover {
+		color: #6ca6c1;
+	}
+
+	li a.selected {
+		border-left-color: #6ca6c1; /* Active left border */
+		color: #6ca6c1;
+		font-weight: 700;
+	}
+
+	.social-icons img {
+		width: 24px;
+		margin: 10px 0;
+		cursor: pointer;
+	}
+</style>
diff --git a/frontend/src/routes/+page.svelte b/frontend/src/routes/+page.svelte
index d896656..4381dcc 100644
--- a/frontend/src/routes/+page.svelte
+++ b/frontend/src/routes/+page.svelte
@@ -1,69 +1,133 @@
 <script>
 	import { onMount } from 'svelte';
+	import SideBar from '$lib/components/SideBar.svelte';
 
 	const sections = ['welcome', 'projects', 'about'];
-
-	onMount(() => {
-		const navLinks = document.querySelectorAll('.sidebar nav ul li a');
-
-		navLinks.forEach((link) => {
-			link.addEventListener('click', (event) => {
-				event.preventDefault();
-
-				const targetId = link.getAttribute('href').substring(1);
-				const targetSection = document.getElementById(targetId);
-
-				if (targetSection) {
-					targetSection.scrollIntoView({ behavior: 'smooth' });
-				}
-			});
-		});
-	});
+	const blogs = [
+		{
+			title: 'Macropad',
+			date: '08/07/2025',
+			excerpt: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit.',
+			image: 'https://via.placeholder.com/100x80?text=Macro'
+		},
+		{
+			title: 'Self-hosted website',
+			date: '08/07/2025',
+			excerpt: 'Learn how I hosted my personal website using open-source tools.',
+			image: 'https://via.placeholder.com/100x80?text=Cloud'
+		},
+		{
+			title: 'Macropad',
+			date: '08/07/2025',
+			excerpt: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit.',
+			image: 'https://via.placeholder.com/100x80?text=Macro'
+		},
+		{
+			title: 'Self-hosted website',
+			date: '08/07/2025',
+			excerpt: 'Learn how I hosted my personal website using open-source tools.',
+			image: 'https://via.placeholder.com/100x80?text=Cloud'
+		},
+		{
+			title: 'Macropad',
+			date: '08/07/2025',
+			excerpt: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit.',
+			image: 'https://via.placeholder.com/100x80?text=Macro'
+		},
+		{
+			title: 'Self-hosted website',
+			date: '08/07/2025',
+			excerpt: 'Learn how I hosted my personal website using open-source tools.',
+			image: 'https://via.placeholder.com/100x80?text=Cloud'
+		},
+		{
+			title: 'Macropad',
+			date: '08/07/2025',
+			excerpt: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit.',
+			image: 'https://via.placeholder.com/100x80?text=Macro'
+		},
+		{
+			title: 'Self-hosted website',
+			date: '08/07/2025',
+			excerpt: 'Learn how I hosted my personal website using open-source tools.',
+			image: 'https://via.placeholder.com/100x80?text=Cloud'
+		},
+		{
+			title: 'Self-hosted website',
+			date: '08/07/2025',
+			excerpt: 'Learn how I hosted my personal website using open-source tools.',
+			image: 'https://via.placeholder.com/100x80?text=Cloud'
+		},
+		{
+			title: 'Self-hosted website',
+			date: '08/07/2025',
+			excerpt: 'Learn how I hosted my personal website using open-source tools.',
+			image: 'https://via.placeholder.com/100x80?text=Cloud'
+		},
+		{
+			title: 'Self-hosted website',
+			date: '08/07/2025',
+			excerpt: 'Learn how I hosted my personal website using open-source tools.',
+			image: 'https://via.placeholder.com/100x80?text=Cloud'
+		},
+		{
+			title: 'Self-hosted website',
+			date: '08/07/2025',
+			excerpt: 'Learn how I hosted my personal website using open-source tools.',
+			image: 'https://via.placeholder.com/100x80?text=Cloud'
+		},
+		{
+			title: 'Self-hosted website',
+			date: '08/07/2025',
+			excerpt: 'Learn how I hosted my personal website using open-source tools.',
+			image: 'https://via.placeholder.com/100x80?text=Cloud'
+		},
+		{
+			title: 'Self-hosted website',
+			date: '08/07/2025',
+			excerpt: 'Learn how I hosted my personal website using open-source tools.',
+			image: 'https://via.placeholder.com/100x80?text=Cloud'
+		},
+		{
+			title: 'Self-hosted website',
+			date: '08/07/2025',
+			excerpt: 'Learn how I hosted my personal website using open-source tools.',
+			image: 'https://via.placeholder.com/100x80?text=Cloud'
+		},
+		{
+			title: 'Self-hosted website',
+			date: '08/07/2025',
+			excerpt: 'Learn how I hosted my personal website using open-source tools.',
+			image: 'https://via.placeholder.com/100x80?text=Cloud'
+		}
+	];
 </script>
 
 <div class="app">
-	<!-- Sidebar -->
-	<aside class="sidebar">
-		<nav>
-			<ul>
-				{#each sections as section}
-					<li>
-						<a href={`#${section}`}>{section.charAt(0).toUpperCase() + section.slice(1)}</a>
-					</li>
-				{/each}
-			</ul>
-		</nav>
-		<!-- <div class="social-icons">
-			<a href="#"
-				><img src="https://cdn-icons-png.flaticon.com/512/174/174857.png" alt="LinkedIn" /></a
-			>
-			<a href="#"><img src="https://cdn-icons-png.flaticon.com/512/25/25231.png" alt="GitHub" /></a>
-		</div> -->
-	</aside>
+	<SideBar {sections} />
 
 	<!-- Main content -->
 	<main class="content">
 		<section id="welcome">
-			<h1>Hi! I’m Michal,<br />welcome to<br />my blog</h1>
+			<h1>Hi! I'm Michal,<br />Welcome to<br />my blog</h1>
 		</section>
 
 		<section id="projects">
-			<div class="project-card red">
-				<img src="https://via.placeholder.com/100x80?text=Macro" alt="Macropad" />
-				<div class="text">
-					<h3>Macropad</h3>
-					<p class="date">08/07/2025</p>
-					<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
-				</div>
+			<div class="sticky-header">
+				<h2>Projects</h2>
+				<hr class="projects-line" />
 			</div>
-
-			<div class="project-card purple">
-				<img src="https://via.placeholder.com/100x80?text=Cloud" alt="Self-hosted website" />
-				<div class="text">
-					<h3>Self-hosted website</h3>
-					<p class="date">08/07/2025</p>
-					<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
-				</div>
+			<div class="blog-grid">
+				{#each blogs as blog}
+					<div class="blog-card">
+						<img src="hamster_angry.jpg" alt={blog.title} />
+						<div class="content">
+							<h3>{blog.title}</h3>
+							<p class="date">{blog.date}</p>
+							<p class="excerpt">{blog.excerpt}</p>
+						</div>
+					</div>
+				{/each}
 			</div>
 		</section>
 
@@ -83,19 +147,6 @@
 		font-family: 'Segoe UI', sans-serif;
 	}
 
-	.sidebar {
-		width: 150px;
-		background-color: #f1f9c6;
-		border-right: 2px solid #d3e4a3;
-		padding: 20px 10px;
-		position: sticky;
-		top: 0;
-		height: 100vh;
-		display: flex;
-		flex-direction: column;
-		justify-content: space-between;
-	}
-
 	.content {
 		flex: 1;
 		overflow-y: scroll;
@@ -104,47 +155,125 @@
 	}
 
 	section {
-		min-height: 100vh;
+		min-height: 90vh;
+		height: auto;
 		padding: 40px;
-		background-color: #f1f9c6;
 		scroll-snap-align: start;
+		/* scroll-padding-top: 60px; */
 	}
 
-	/* Sidebar */
-	ul {
-		list-style: none;
-		padding: 0;
-		line-height: 2.5;
+	/* Welcome Section */
+	#welcome {
+		display: flex;
+		justify-content: center; /* Center horizontally */
+		align-items: center; /* Center vertically */
+		text-align: left;
+		min-height: 95vh; /* already present */
+		padding: 40px;
 	}
 
-	li a {
-		text-decoration: none;
-		color: #222;
-		font-weight: 500;
+	#welcome h1 {
+		font-size: clamp(3.2rem, 8vw, 5.5em);
+		color: #1c5253;
+		line-height: 1.5;
+		font-family: 'Space Grotesk', sans-serif;
+		margin: 0;
+		padding-bottom: 100px;
 	}
 
-	li a:hover {
-		color: #006699;
+	#projects {
+		padding: 0 10px; /* horizontal padding instead of fixed width */
+		display: flex;
+		flex-direction: column;
+		gap: 20px;
+		position: relative;
+		max-width: 1200px; /* optional max width */
+		margin: 0 auto; /* center it */
 	}
 
-	.social-icons img {
-		width: 24px;
-		margin: 10px 0;
-		cursor: pointer;
+	/* Sticky header */
+	.sticky-header {
+		position: sticky;
+		top: 0;
+		background-color: #f3ffc6;
+		z-index: 10;
+		display: flex;
+		flex-direction: column;
+		padding-left: 40px; /* match the #projects padding */
+		padding-right: 40px;
 	}
 
-	/* Welcome Section */
-	#welcome h1 {
-		font-size: 2.5rem;
+	#projects h2 {
+		background-color: #f3ffc6;
+		padding-left: 0;
+		padding-right: 0;
+		margin: 20px 0 0 0;
+		z-index: 11;
 		color: #214c4e;
-		line-height: 1.5;
+		font-size: 2rem;
 	}
 
-	/* Projects Section */
-	#projects {
+	.projects-line {
+		width: calc(100% -2px);
+		height: 4px;
+		background-color: #1c5253;
+		margin: 0;
+		margin-top: 8px;
+		position: sticky;
+		top: 44px; /* height of the h2 + some space */
+		z-index: 10;
+	}
+	/* 3-column grid */
+	.blog-grid {
+		display: grid;
+		grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
+		gap: 24px;
+		padding: 20px 40px 100px; /* top 20, left/right 40 (match section) */
+	}
+
+	.blog-card {
+		background: white;
+		border: 2px solid #1c5253;
+		border-radius: 10px;
+		box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
+		overflow: hidden;
+		transition:
+			transform 0.2s ease,
+			box-shadow 0.2s ease;
 		display: flex;
 		flex-direction: column;
-		gap: 20px;
+	}
+
+	.blog-card:hover {
+		transform: translateY(-4px);
+		box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
+	}
+
+	.blog-card img {
+		width: 100%;
+		height: 180px;
+		object-fit: cover;
+	}
+
+	.blog-card .content {
+		padding: 20px;
+	}
+
+	.blog-card h3 {
+		margin: 0 0 8px;
+		color: #333;
+		font-size: 1.3rem;
+	}
+
+	.blog-card .date {
+		color: #888;
+		font-size: 0.9rem;
+		margin-bottom: 12px;
+	}
+
+	.blog-card .excerpt {
+		color: #555;
+		font-size: 1rem;
 	}
 
 	.project-card {
@@ -155,6 +284,7 @@
 		box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.1);
 		align-items: center;
 		gap: 20px;
+		height: 40vh;
 	}
 
 	.red {
@@ -165,6 +295,11 @@
 		background-color: #dd5edb;
 	}
 
+	#projects h2 {
+		color: #214c4e;
+		font-size: 2rem;
+		margin-bottom: 20px;
+	}
 	.project-card img {
 		width: 100px;
 		border-radius: 5px;
@@ -177,6 +312,9 @@
 	}
 
 	/* About Section */
+	#about {
+		padding-top: 0px;
+	}
 	#about h2 {
 		color: #214c4e;
 		font-size: 2rem;
@@ -187,4 +325,10 @@
 		font-size: 1.1rem;
 		max-width: 600px;
 	}
+
+	:global(body) {
+		background-color: #f3ffc6;
+		margin: 0;
+		font-family: 'Space Grotesk', sans-serif;
+	}
 </style>

From f856d68f5bf361d968093ad5848e4422d26a98c9 Mon Sep 17 00:00:00 2001
From: micraj <mrajzer2004@gmail.com>
Date: Wed, 6 Aug 2025 20:35:53 +0100
Subject: [PATCH 03/11] Initial snap scrolling implementation

---
 frontend/src/lib/components/SideBar.svelte |   5 +-
 frontend/src/routes/+page.svelte           | 129 ++++++++++++++-------
 2 files changed, 88 insertions(+), 46 deletions(-)

diff --git a/frontend/src/lib/components/SideBar.svelte b/frontend/src/lib/components/SideBar.svelte
index 93f76bb..167d52f 100644
--- a/frontend/src/lib/components/SideBar.svelte
+++ b/frontend/src/lib/components/SideBar.svelte
@@ -79,8 +79,8 @@
 	.sidebar {
 		width: 175px;
 		height: 100vh;
-		position: relative; /* Needed for ::before positioning */
-		/* Remove the full-height border */
+		position: relative;
+		user-select: none;
 	}
 	.sidebar nav {
 		padding: 5px;
@@ -113,6 +113,7 @@
 		font-family: 'Space Grotesk', sans-serif;
 		font-size: 1.5rem;
 		font-weight: 700;
+		cursor: pointer;
 	}
 
 	li a:hover {
diff --git a/frontend/src/routes/+page.svelte b/frontend/src/routes/+page.svelte
index 4381dcc..a650f81 100644
--- a/frontend/src/routes/+page.svelte
+++ b/frontend/src/routes/+page.svelte
@@ -4,6 +4,20 @@
 
 	const sections = ['welcome', 'projects', 'about'];
 	const blogs = [
+		{
+			title: 'Macropad',
+			date: '08/07/2025',
+			excerpt: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit.',
+			image: 'https://via.placeholder.com/100x80?text=Macro'
+		},
+		{
+			title: 'Self-hosted website',
+			date: '08/07/2025',
+			excerpt: 'Learn how I hosted my personal website using open-source tools.',
+			image: 'https://via.placeholder.com/100x80?text=Cloud'
+		}
+	];
+	const blogs1 = [
 		{
 			title: 'Macropad',
 			date: '08/07/2025',
@@ -101,6 +115,25 @@
 			image: 'https://via.placeholder.com/100x80?text=Cloud'
 		}
 	];
+
+	let stopped = false;
+
+	onMount(() => {
+		const aboutExitAnchor = document.querySelector('.about-exit-anchor');
+		const contentScroll = document.querySelector('.content');
+
+		const observer = new IntersectionObserver(
+			([entry]) => {
+				stopped = entry.isIntersecting; // true when about exit anchor is visible, else false
+			},
+			{
+				root: contentScroll,
+				threshold: 0
+			}
+		);
+
+		if (aboutExitAnchor) observer.observe(aboutExitAnchor);
+	});
 </script>
 
 <div class="app">
@@ -113,7 +146,7 @@
 		</section>
 
 		<section id="projects">
-			<div class="sticky-header">
+			<div class="sticky-header" class:stoppedSticky={stopped}>
 				<h2>Projects</h2>
 				<hr class="projects-line" />
 			</div>
@@ -129,11 +162,18 @@
 					</div>
 				{/each}
 			</div>
+			<span class="snap-bottom-anchor"></span>
 		</section>
 
 		<section id="about">
-			<h2>About Me</h2>
-			<p>This is a short bio about Michal. You can customize this section however you like.</p>
+			<div class="sticky-header">
+				<h2>About me</h2>
+				<hr class="projects-line" />
+			</div>
+			<div class="about-content">
+				<p>This is a short bio about Michal. You can customize this section however you like.</p>
+			</div>
+			<div class="about-exit-anchor"></div>
 		</section>
 	</main>
 </div>
@@ -152,13 +192,26 @@
 		overflow-y: scroll;
 		scroll-snap-type: y mandatory;
 		scroll-behavior: smooth;
+		/* Hide scrollbar */
+		scrollbar-width: none;
+		-ms-overflow-style: none;
+	}
+
+	.content::-webkit-scrollbar {
+		display: none;
+	}
+	.about-exit-anchor {
+		height: 1px;
+		margin-top: 300px;
 	}
 
 	section {
-		min-height: 90vh;
+		min-height: 100vh;
+		max-width: 1600px;
 		height: auto;
 		padding: 40px;
 		scroll-snap-align: start;
+		margin: 0 auto;
 		/* scroll-padding-top: 60px; */
 	}
 
@@ -187,24 +240,25 @@
 		flex-direction: column;
 		gap: 20px;
 		position: relative;
-		max-width: 1200px; /* optional max width */
-		margin: 0 auto; /* center it */
+		margin: 0 auto;
 	}
 
 	/* Sticky header */
 	.sticky-header {
+		background-color: #ebebeb;
 		position: sticky;
 		top: 0;
-		background-color: #f3ffc6;
 		z-index: 10;
 		display: flex;
 		flex-direction: column;
 		padding-left: 40px; /* match the #projects padding */
 		padding-right: 40px;
 	}
+	.stoppedSticky {
+		position: relative;
+	}
 
 	#projects h2 {
-		background-color: #f3ffc6;
 		padding-left: 0;
 		padding-right: 0;
 		margin: 20px 0 0 0;
@@ -228,7 +282,7 @@
 		display: grid;
 		grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
 		gap: 24px;
-		padding: 20px 40px 100px; /* top 20, left/right 40 (match section) */
+		padding: 20px 40px; /* top 20, left/right 40 (match section) */
 	}
 
 	.blog-card {
@@ -276,35 +330,6 @@
 		font-size: 1rem;
 	}
 
-	.project-card {
-		display: flex;
-		color: white;
-		padding: 20px;
-		border-radius: 10px;
-		box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.1);
-		align-items: center;
-		gap: 20px;
-		height: 40vh;
-	}
-
-	.red {
-		background-color: #e74c3c;
-	}
-
-	.purple {
-		background-color: #dd5edb;
-	}
-
-	#projects h2 {
-		color: #214c4e;
-		font-size: 2rem;
-		margin-bottom: 20px;
-	}
-	.project-card img {
-		width: 100px;
-		border-radius: 5px;
-	}
-
 	.date {
 		font-size: 0.9em;
 		opacity: 0.9;
@@ -313,21 +338,37 @@
 
 	/* About Section */
 	#about {
-		padding-top: 0px;
+		padding: 0 10px; /* horizontal padding instead of fixed width */
+		display: flex;
+		flex-direction: column;
+		gap: 20px;
+		position: relative;
+		margin: 0 auto; /* center it */
+		height: 100vh; /* full height */
+	}
+	.snap-bottom-anchor {
+		position: absolute;
+		bottom: 0;
+		left: 0;
+		right: 0;
+		height: 1px; /* or whatever height you want */
+		scroll-snap-align: end;
 	}
 	#about h2 {
+		padding-left: 0;
+		padding-right: 0;
+		margin: 20px 0 0 0;
+		z-index: 11;
 		color: #214c4e;
 		font-size: 2rem;
-		margin-bottom: 10px;
 	}
 
-	#about p {
-		font-size: 1.1rem;
-		max-width: 600px;
+	.about-content {
+		padding: 20px 40px 100px; /* top 20, left/right 40 (match section) */
 	}
 
 	:global(body) {
-		background-color: #f3ffc6;
+		background-color: #ebebeb;
 		margin: 0;
 		font-family: 'Space Grotesk', sans-serif;
 	}

From 735e4384c5ba4f2fb71442b48d4780d0e6ae31da Mon Sep 17 00:00:00 2001
From: micraj <mrajzer2004@gmail.com>
Date: Thu, 7 Aug 2025 19:14:04 +0100
Subject: [PATCH 04/11] CSS cleanup

---
 frontend/src/routes/+page.svelte     | 343 ++++++++++--------------
 frontend/src/routes/old/+page.svelte | 375 +++++++++++++++++++++++++++
 2 files changed, 513 insertions(+), 205 deletions(-)
 create mode 100644 frontend/src/routes/old/+page.svelte

diff --git a/frontend/src/routes/+page.svelte b/frontend/src/routes/+page.svelte
index a650f81..b01e01f 100644
--- a/frontend/src/routes/+page.svelte
+++ b/frontend/src/routes/+page.svelte
@@ -3,7 +3,8 @@
 	import SideBar from '$lib/components/SideBar.svelte';
 
 	const sections = ['welcome', 'projects', 'about'];
-	const blogs = [
+
+	const blogs1 = [
 		{
 			title: 'Macropad',
 			date: '08/07/2025',
@@ -17,19 +18,8 @@
 			image: 'https://via.placeholder.com/100x80?text=Cloud'
 		}
 	];
-	const blogs1 = [
-		{
-			title: 'Macropad',
-			date: '08/07/2025',
-			excerpt: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit.',
-			image: 'https://via.placeholder.com/100x80?text=Macro'
-		},
-		{
-			title: 'Self-hosted website',
-			date: '08/07/2025',
-			excerpt: 'Learn how I hosted my personal website using open-source tools.',
-			image: 'https://via.placeholder.com/100x80?text=Cloud'
-		},
+
+	const blogs = [
 		{
 			title: 'Macropad',
 			date: '08/07/2025',
@@ -59,101 +49,37 @@
 			date: '08/07/2025',
 			excerpt: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit.',
 			image: 'https://via.placeholder.com/100x80?text=Macro'
-		},
-		{
-			title: 'Self-hosted website',
-			date: '08/07/2025',
-			excerpt: 'Learn how I hosted my personal website using open-source tools.',
-			image: 'https://via.placeholder.com/100x80?text=Cloud'
-		},
-		{
-			title: 'Self-hosted website',
-			date: '08/07/2025',
-			excerpt: 'Learn how I hosted my personal website using open-source tools.',
-			image: 'https://via.placeholder.com/100x80?text=Cloud'
-		},
-		{
-			title: 'Self-hosted website',
-			date: '08/07/2025',
-			excerpt: 'Learn how I hosted my personal website using open-source tools.',
-			image: 'https://via.placeholder.com/100x80?text=Cloud'
-		},
-		{
-			title: 'Self-hosted website',
-			date: '08/07/2025',
-			excerpt: 'Learn how I hosted my personal website using open-source tools.',
-			image: 'https://via.placeholder.com/100x80?text=Cloud'
-		},
-		{
-			title: 'Self-hosted website',
-			date: '08/07/2025',
-			excerpt: 'Learn how I hosted my personal website using open-source tools.',
-			image: 'https://via.placeholder.com/100x80?text=Cloud'
-		},
-		{
-			title: 'Self-hosted website',
-			date: '08/07/2025',
-			excerpt: 'Learn how I hosted my personal website using open-source tools.',
-			image: 'https://via.placeholder.com/100x80?text=Cloud'
-		},
-		{
-			title: 'Self-hosted website',
-			date: '08/07/2025',
-			excerpt: 'Learn how I hosted my personal website using open-source tools.',
-			image: 'https://via.placeholder.com/100x80?text=Cloud'
-		},
-		{
-			title: 'Self-hosted website',
-			date: '08/07/2025',
-			excerpt: 'Learn how I hosted my personal website using open-source tools.',
-			image: 'https://via.placeholder.com/100x80?text=Cloud'
-		},
-		{
-			title: 'Self-hosted website',
-			date: '08/07/2025',
-			excerpt: 'Learn how I hosted my personal website using open-source tools.',
-			image: 'https://via.placeholder.com/100x80?text=Cloud'
 		}
 	];
-
-	let stopped = false;
-
-	onMount(() => {
-		const aboutExitAnchor = document.querySelector('.about-exit-anchor');
-		const contentScroll = document.querySelector('.content');
-
-		const observer = new IntersectionObserver(
-			([entry]) => {
-				stopped = entry.isIntersecting; // true when about exit anchor is visible, else false
-			},
-			{
-				root: contentScroll,
-				threshold: 0
-			}
-		);
-
-		if (aboutExitAnchor) observer.observe(aboutExitAnchor);
-	});
 </script>
 
 <div class="app">
 	<SideBar {sections} />
 
-	<!-- Main content -->
 	<main class="content">
-		<section id="welcome">
-			<h1>Hi! I'm Michal,<br />Welcome to<br />my blog</h1>
+		<!-- Welcome -->
+		<section id="welcome" class="section welcome-section">
+			<h1>
+				Hi! I'm Michal,<br />Welcome to<br />my blog<span
+					class="wave"
+					aria-label="waving hand"
+					role="img">👋</span
+				>
+			</h1>
 		</section>
 
-		<section id="projects">
-			<div class="sticky-header" class:stoppedSticky={stopped}>
+		<!-- Projects -->
+		<section id="projects" class="section projects-section">
+			<div class="section-header">
 				<h2>Projects</h2>
-				<hr class="projects-line" />
+				<hr />
 			</div>
+
+			<!-- Blog Grid -->
 			<div class="blog-grid">
 				{#each blogs as blog}
 					<div class="blog-card">
-						<img src="hamster_angry.jpg" alt={blog.title} />
+						<img src={blog.image} alt={blog.title} />
 						<div class="content">
 							<h3>{blog.title}</h3>
 							<p class="date">{blog.date}</p>
@@ -162,29 +88,51 @@
 					</div>
 				{/each}
 			</div>
-			<span class="snap-bottom-anchor"></span>
+
+			<div id="projects-exit-anchor" class="exit-anchor snap-scroll-bottom"></div>
 		</section>
 
-		<section id="about">
-			<div class="sticky-header">
+		<!-- About -->
+		<section id="about" class="section about-section">
+			<div class="section-header">
 				<h2>About me</h2>
-				<hr class="projects-line" />
+				<hr />
 			</div>
+
 			<div class="about-content">
 				<p>This is a short bio about Michal. You can customize this section however you like.</p>
 			</div>
-			<div class="about-exit-anchor"></div>
+
+			<div id="about-exit-anchor" class="exit-anchor"></div>
 		</section>
 	</main>
 </div>
 
 <style>
-	/* Layout */
+	:root {
+		--color-bg: #ebebeb;
+		--color-primary: #1c5253;
+		--color-secondary: #214c4e;
+		--color-heading: #333;
+		--color-subtext: #555;
+		--color-muted: #888;
+		--color-white: #ffffff;
+
+		--font-body: 'Segoe UI', sans-serif;
+		--font-heading: 'Space Grotesk', sans-serif;
+	}
+
+	:global(body) {
+		background-color: var(--color-bg);
+		margin: 0;
+		font-family: var(--font-heading);
+	}
+
 	.app {
 		display: flex;
 		height: 100vh;
 		overflow: hidden;
-		font-family: 'Segoe UI', sans-serif;
+		font-family: var(--font-body);
 	}
 
 	.content {
@@ -192,184 +140,169 @@
 		overflow-y: scroll;
 		scroll-snap-type: y mandatory;
 		scroll-behavior: smooth;
+
 		/* Hide scrollbar */
 		scrollbar-width: none;
 		-ms-overflow-style: none;
 	}
 
+	/* Hide scrollbar for WebKit browsers */
 	.content::-webkit-scrollbar {
 		display: none;
 	}
-	.about-exit-anchor {
-		height: 1px;
-		margin-top: 300px;
-	}
 
-	section {
+	.section {
 		min-height: 100vh;
 		max-width: 1600px;
-		height: auto;
 		padding: 40px;
 		scroll-snap-align: start;
+		scroll-snap-stop: always;
 		margin: 0 auto;
-		/* scroll-padding-top: 60px; */
+		display: flex;
+		flex-direction: column;
+		gap: 20px;
 	}
 
-	/* Welcome Section */
-	#welcome {
-		display: flex;
-		justify-content: center; /* Center horizontally */
-		align-items: center; /* Center vertically */
+	/* Welcome */
+	.welcome-section {
+		justify-content: center;
+		align-items: center;
 		text-align: left;
-		min-height: 95vh; /* already present */
-		padding: 40px;
+		min-height: 95vh;
 	}
-
-	#welcome h1 {
-		font-size: clamp(3.2rem, 8vw, 5.5em);
-		color: #1c5253;
+	.welcome-section h1 {
+		font-size: clamp(3.2rem, 8vw, 8em);
+		color: var(--color-primary);
 		line-height: 1.5;
-		font-family: 'Space Grotesk', sans-serif;
+		font-family: var(--font-heading);
 		margin: 0;
 		padding-bottom: 100px;
 	}
 
-	#projects {
-		padding: 0 10px; /* horizontal padding instead of fixed width */
-		display: flex;
-		flex-direction: column;
-		gap: 20px;
-		position: relative;
-		margin: 0 auto;
-	}
-
-	/* Sticky header */
-	.sticky-header {
-		background-color: #ebebeb;
-		position: sticky;
-		top: 0;
-		z-index: 10;
-		display: flex;
-		flex-direction: column;
-		padding-left: 40px; /* match the #projects padding */
-		padding-right: 40px;
-	}
-	.stoppedSticky {
-		position: relative;
-	}
-
-	#projects h2 {
-		padding-left: 0;
-		padding-right: 0;
-		margin: 20px 0 0 0;
-		z-index: 11;
-		color: #214c4e;
-		font-size: 2rem;
-	}
-
-	.projects-line {
-		width: calc(100% -2px);
-		height: 4px;
-		background-color: #1c5253;
-		margin: 0;
-		margin-top: 8px;
-		position: sticky;
-		top: 44px; /* height of the h2 + some space */
-		z-index: 10;
-	}
-	/* 3-column grid */
+	/* Projects */
 	.blog-grid {
 		display: grid;
 		grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
 		gap: 24px;
-		padding: 20px 40px; /* top 20, left/right 40 (match section) */
+		padding: 20px 40px;
 	}
 
 	.blog-card {
-		background: white;
-		border: 2px solid #1c5253;
+		background: var(--color-white);
+		border: 2px solid var(--color-primary);
 		border-radius: 10px;
 		box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
-		overflow: hidden;
 		transition:
 			transform 0.2s ease,
 			box-shadow 0.2s ease;
 		display: flex;
 		flex-direction: column;
+		overflow: hidden;
 	}
-
 	.blog-card:hover {
 		transform: translateY(-4px);
 		box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
 	}
-
 	.blog-card img {
 		width: 100%;
 		height: 180px;
 		object-fit: cover;
 	}
-
 	.blog-card .content {
 		padding: 20px;
 	}
-
 	.blog-card h3 {
 		margin: 0 0 8px;
-		color: #333;
+		color: var(--color-heading);
 		font-size: 1.3rem;
 	}
-
 	.blog-card .date {
-		color: #888;
+		color: var(--color-muted);
 		font-size: 0.9rem;
 		margin-bottom: 12px;
 	}
-
 	.blog-card .excerpt {
-		color: #555;
+		color: var(--color-subtext);
 		font-size: 1rem;
 	}
-
 	.date {
 		font-size: 0.9em;
 		opacity: 0.9;
 		margin-bottom: 10px;
 	}
 
-	/* About Section */
-	#about {
-		padding: 0 10px; /* horizontal padding instead of fixed width */
+	/* About */
+	.about-content {
+		padding: 20px 40px 100px;
+	}
+
+	/* Utilities */
+	.section-header {
+		background-color: var(--color-bg);
+		position: relative;
+		top: 0;
+		z-index: 10;
 		display: flex;
 		flex-direction: column;
-		gap: 20px;
-		position: relative;
-		margin: 0 auto; /* center it */
-		height: 100vh; /* full height */
-	}
-	.snap-bottom-anchor {
-		position: absolute;
-		bottom: 0;
-		left: 0;
-		right: 0;
-		height: 1px; /* or whatever height you want */
-		scroll-snap-align: end;
+		padding: 0 40px;
 	}
-	#about h2 {
-		padding-left: 0;
-		padding-right: 0;
-		margin: 20px 0 0 0;
-		z-index: 11;
-		color: #214c4e;
+
+	.section-header h2 {
+		margin: 0;
+		color: var(--color-secondary);
 		font-size: 2rem;
 	}
 
-	.about-content {
-		padding: 20px 40px 100px; /* top 20, left/right 40 (match section) */
+	.section-header hr {
+		width: calc(100% -2px);
+		height: 4px;
+		background-color: var(--color-primary);
+		margin-top: 8px;
+		margin: 0;
+		position: sticky;
+		top: 44px;
+		z-index: 10;
+	}
+	.snap-scroll-bottom {
+		scroll-snap-align: end;
+	}
+	.exit-anchor {
+		height: 1px;
+		position: absolute;
+		bottom: 0;
+	}
+	.wave {
+		display: inline-block;
+		animation: wave-animation 2s infinite;
+		transform-origin: 70% 70%;
+		font-size: 1em; /* Adjust as needed */
 	}
 
-	:global(body) {
-		background-color: #ebebeb;
-		margin: 0;
-		font-family: 'Space Grotesk', sans-serif;
+	/* Keyframes for hand wave */
+	@keyframes wave-animation {
+		0% {
+			transform: rotate(0deg);
+		}
+		10% {
+			transform: rotate(14deg);
+		}
+		20% {
+			transform: rotate(-8deg);
+		}
+		30% {
+			transform: rotate(14deg);
+		}
+		40% {
+			transform: rotate(-4deg);
+		}
+		50% {
+			transform: rotate(10deg);
+		}
+		60% {
+			transform: rotate(0deg);
+		}
+		100% {
+			transform: rotate(0deg);
+		}
 	}
 </style>
diff --git a/frontend/src/routes/old/+page.svelte b/frontend/src/routes/old/+page.svelte
new file mode 100644
index 0000000..a650f81
--- /dev/null
+++ b/frontend/src/routes/old/+page.svelte
@@ -0,0 +1,375 @@
+<script>
+	import { onMount } from 'svelte';
+	import SideBar from '$lib/components/SideBar.svelte';
+
+	const sections = ['welcome', 'projects', 'about'];
+	const blogs = [
+		{
+			title: 'Macropad',
+			date: '08/07/2025',
+			excerpt: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit.',
+			image: 'https://via.placeholder.com/100x80?text=Macro'
+		},
+		{
+			title: 'Self-hosted website',
+			date: '08/07/2025',
+			excerpt: 'Learn how I hosted my personal website using open-source tools.',
+			image: 'https://via.placeholder.com/100x80?text=Cloud'
+		}
+	];
+	const blogs1 = [
+		{
+			title: 'Macropad',
+			date: '08/07/2025',
+			excerpt: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit.',
+			image: 'https://via.placeholder.com/100x80?text=Macro'
+		},
+		{
+			title: 'Self-hosted website',
+			date: '08/07/2025',
+			excerpt: 'Learn how I hosted my personal website using open-source tools.',
+			image: 'https://via.placeholder.com/100x80?text=Cloud'
+		},
+		{
+			title: 'Macropad',
+			date: '08/07/2025',
+			excerpt: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit.',
+			image: 'https://via.placeholder.com/100x80?text=Macro'
+		},
+		{
+			title: 'Self-hosted website',
+			date: '08/07/2025',
+			excerpt: 'Learn how I hosted my personal website using open-source tools.',
+			image: 'https://via.placeholder.com/100x80?text=Cloud'
+		},
+		{
+			title: 'Macropad',
+			date: '08/07/2025',
+			excerpt: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit.',
+			image: 'https://via.placeholder.com/100x80?text=Macro'
+		},
+		{
+			title: 'Self-hosted website',
+			date: '08/07/2025',
+			excerpt: 'Learn how I hosted my personal website using open-source tools.',
+			image: 'https://via.placeholder.com/100x80?text=Cloud'
+		},
+		{
+			title: 'Macropad',
+			date: '08/07/2025',
+			excerpt: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit.',
+			image: 'https://via.placeholder.com/100x80?text=Macro'
+		},
+		{
+			title: 'Self-hosted website',
+			date: '08/07/2025',
+			excerpt: 'Learn how I hosted my personal website using open-source tools.',
+			image: 'https://via.placeholder.com/100x80?text=Cloud'
+		},
+		{
+			title: 'Self-hosted website',
+			date: '08/07/2025',
+			excerpt: 'Learn how I hosted my personal website using open-source tools.',
+			image: 'https://via.placeholder.com/100x80?text=Cloud'
+		},
+		{
+			title: 'Self-hosted website',
+			date: '08/07/2025',
+			excerpt: 'Learn how I hosted my personal website using open-source tools.',
+			image: 'https://via.placeholder.com/100x80?text=Cloud'
+		},
+		{
+			title: 'Self-hosted website',
+			date: '08/07/2025',
+			excerpt: 'Learn how I hosted my personal website using open-source tools.',
+			image: 'https://via.placeholder.com/100x80?text=Cloud'
+		},
+		{
+			title: 'Self-hosted website',
+			date: '08/07/2025',
+			excerpt: 'Learn how I hosted my personal website using open-source tools.',
+			image: 'https://via.placeholder.com/100x80?text=Cloud'
+		},
+		{
+			title: 'Self-hosted website',
+			date: '08/07/2025',
+			excerpt: 'Learn how I hosted my personal website using open-source tools.',
+			image: 'https://via.placeholder.com/100x80?text=Cloud'
+		},
+		{
+			title: 'Self-hosted website',
+			date: '08/07/2025',
+			excerpt: 'Learn how I hosted my personal website using open-source tools.',
+			image: 'https://via.placeholder.com/100x80?text=Cloud'
+		},
+		{
+			title: 'Self-hosted website',
+			date: '08/07/2025',
+			excerpt: 'Learn how I hosted my personal website using open-source tools.',
+			image: 'https://via.placeholder.com/100x80?text=Cloud'
+		},
+		{
+			title: 'Self-hosted website',
+			date: '08/07/2025',
+			excerpt: 'Learn how I hosted my personal website using open-source tools.',
+			image: 'https://via.placeholder.com/100x80?text=Cloud'
+		}
+	];
+
+	let stopped = false;
+
+	onMount(() => {
+		const aboutExitAnchor = document.querySelector('.about-exit-anchor');
+		const contentScroll = document.querySelector('.content');
+
+		const observer = new IntersectionObserver(
+			([entry]) => {
+				stopped = entry.isIntersecting; // true when about exit anchor is visible, else false
+			},
+			{
+				root: contentScroll,
+				threshold: 0
+			}
+		);
+
+		if (aboutExitAnchor) observer.observe(aboutExitAnchor);
+	});
+</script>
+
+<div class="app">
+	<SideBar {sections} />
+
+	<!-- Main content -->
+	<main class="content">
+		<section id="welcome">
+			<h1>Hi! I'm Michal,<br />Welcome to<br />my blog</h1>
+		</section>
+
+		<section id="projects">
+			<div class="sticky-header" class:stoppedSticky={stopped}>
+				<h2>Projects</h2>
+				<hr class="projects-line" />
+			</div>
+			<div class="blog-grid">
+				{#each blogs as blog}
+					<div class="blog-card">
+						<img src="hamster_angry.jpg" alt={blog.title} />
+						<div class="content">
+							<h3>{blog.title}</h3>
+							<p class="date">{blog.date}</p>
+							<p class="excerpt">{blog.excerpt}</p>
+						</div>
+					</div>
+				{/each}
+			</div>
+			<span class="snap-bottom-anchor"></span>
+		</section>
+
+		<section id="about">
+			<div class="sticky-header">
+				<h2>About me</h2>
+				<hr class="projects-line" />
+			</div>
+			<div class="about-content">
+				<p>This is a short bio about Michal. You can customize this section however you like.</p>
+			</div>
+			<div class="about-exit-anchor"></div>
+		</section>
+	</main>
+</div>
+
+<style>
+	/* Layout */
+	.app {
+		display: flex;
+		height: 100vh;
+		overflow: hidden;
+		font-family: 'Segoe UI', sans-serif;
+	}
+
+	.content {
+		flex: 1;
+		overflow-y: scroll;
+		scroll-snap-type: y mandatory;
+		scroll-behavior: smooth;
+		/* Hide scrollbar */
+		scrollbar-width: none;
+		-ms-overflow-style: none;
+	}
+
+	.content::-webkit-scrollbar {
+		display: none;
+	}
+	.about-exit-anchor {
+		height: 1px;
+		margin-top: 300px;
+	}
+
+	section {
+		min-height: 100vh;
+		max-width: 1600px;
+		height: auto;
+		padding: 40px;
+		scroll-snap-align: start;
+		margin: 0 auto;
+		/* scroll-padding-top: 60px; */
+	}
+
+	/* Welcome Section */
+	#welcome {
+		display: flex;
+		justify-content: center; /* Center horizontally */
+		align-items: center; /* Center vertically */
+		text-align: left;
+		min-height: 95vh; /* already present */
+		padding: 40px;
+	}
+
+	#welcome h1 {
+		font-size: clamp(3.2rem, 8vw, 5.5em);
+		color: #1c5253;
+		line-height: 1.5;
+		font-family: 'Space Grotesk', sans-serif;
+		margin: 0;
+		padding-bottom: 100px;
+	}
+
+	#projects {
+		padding: 0 10px; /* horizontal padding instead of fixed width */
+		display: flex;
+		flex-direction: column;
+		gap: 20px;
+		position: relative;
+		margin: 0 auto;
+	}
+
+	/* Sticky header */
+	.sticky-header {
+		background-color: #ebebeb;
+		position: sticky;
+		top: 0;
+		z-index: 10;
+		display: flex;
+		flex-direction: column;
+		padding-left: 40px; /* match the #projects padding */
+		padding-right: 40px;
+	}
+	.stoppedSticky {
+		position: relative;
+	}
+
+	#projects h2 {
+		padding-left: 0;
+		padding-right: 0;
+		margin: 20px 0 0 0;
+		z-index: 11;
+		color: #214c4e;
+		font-size: 2rem;
+	}
+
+	.projects-line {
+		width: calc(100% -2px);
+		height: 4px;
+		background-color: #1c5253;
+		margin: 0;
+		margin-top: 8px;
+		position: sticky;
+		top: 44px; /* height of the h2 + some space */
+		z-index: 10;
+	}
+	/* 3-column grid */
+	.blog-grid {
+		display: grid;
+		grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
+		gap: 24px;
+		padding: 20px 40px; /* top 20, left/right 40 (match section) */
+	}
+
+	.blog-card {
+		background: white;
+		border: 2px solid #1c5253;
+		border-radius: 10px;
+		box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
+		overflow: hidden;
+		transition:
+			transform 0.2s ease,
+			box-shadow 0.2s ease;
+		display: flex;
+		flex-direction: column;
+	}
+
+	.blog-card:hover {
+		transform: translateY(-4px);
+		box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
+	}
+
+	.blog-card img {
+		width: 100%;
+		height: 180px;
+		object-fit: cover;
+	}
+
+	.blog-card .content {
+		padding: 20px;
+	}
+
+	.blog-card h3 {
+		margin: 0 0 8px;
+		color: #333;
+		font-size: 1.3rem;
+	}
+
+	.blog-card .date {
+		color: #888;
+		font-size: 0.9rem;
+		margin-bottom: 12px;
+	}
+
+	.blog-card .excerpt {
+		color: #555;
+		font-size: 1rem;
+	}
+
+	.date {
+		font-size: 0.9em;
+		opacity: 0.9;
+		margin-bottom: 10px;
+	}
+
+	/* About Section */
+	#about {
+		padding: 0 10px; /* horizontal padding instead of fixed width */
+		display: flex;
+		flex-direction: column;
+		gap: 20px;
+		position: relative;
+		margin: 0 auto; /* center it */
+		height: 100vh; /* full height */
+	}
+	.snap-bottom-anchor {
+		position: absolute;
+		bottom: 0;
+		left: 0;
+		right: 0;
+		height: 1px; /* or whatever height you want */
+		scroll-snap-align: end;
+	}
+	#about h2 {
+		padding-left: 0;
+		padding-right: 0;
+		margin: 20px 0 0 0;
+		z-index: 11;
+		color: #214c4e;
+		font-size: 2rem;
+	}
+
+	.about-content {
+		padding: 20px 40px 100px; /* top 20, left/right 40 (match section) */
+	}
+
+	:global(body) {
+		background-color: #ebebeb;
+		margin: 0;
+		font-family: 'Space Grotesk', sans-serif;
+	}
+</style>

From dde151ce98de8e29d400b5d1d18f4602a9f8a13b Mon Sep 17 00:00:00 2001
From: micraj <mrajzer2004@gmail.com>
Date: Thu, 7 Aug 2025 19:36:48 +0100
Subject: [PATCH 05/11] handwave and fade in animations

---
 frontend/src/routes/+page.svelte | 77 +++++++++++++++++++++++++-------
 1 file changed, 60 insertions(+), 17 deletions(-)

diff --git a/frontend/src/routes/+page.svelte b/frontend/src/routes/+page.svelte
index b01e01f..5943adc 100644
--- a/frontend/src/routes/+page.svelte
+++ b/frontend/src/routes/+page.svelte
@@ -1,6 +1,8 @@
 <script>
-	import { onMount } from 'svelte';
+	import { onMount, tick } from 'svelte';
 	import SideBar from '$lib/components/SideBar.svelte';
+	import { fade } from 'svelte/transition';
+	import { cubicOut } from 'svelte/easing';
 
 	const sections = ['welcome', 'projects', 'about'];
 
@@ -51,6 +53,44 @@
 			image: 'https://via.placeholder.com/100x80?text=Macro'
 		}
 	];
+	let show = false;
+
+	onMount(() => {
+		const observerTarget = document.querySelector('#welcome');
+		if (!observerTarget) return;
+
+		const observer = new IntersectionObserver(
+			async (entries) => {
+				for (const entry of entries) {
+					if (entry.isIntersecting) {
+						// Unmount to reset fade
+						show = false;
+						await tick(); // wait for DOM update
+
+						// Mount to trigger fade-in
+						show = true;
+
+						await tick();
+
+						// Restart wave animation
+						const waveEl = document.querySelector('.hand');
+						if (waveEl) {
+							waveEl.classList.remove('wave');
+							void waveEl.offsetWidth; // trigger reflow
+							waveEl.classList.add('wave');
+						}
+					} else {
+						show = false; // unmount when out of view
+					}
+				}
+			},
+			{ threshold: 0.2 }
+		);
+
+		observer.observe(observerTarget);
+
+		return () => observer.disconnect();
+	});
 </script>
 
 <div class="app">
@@ -59,13 +99,12 @@
 	<main class="content">
 		<!-- Welcome -->
 		<section id="welcome" class="section welcome-section">
-			<h1>
-				Hi! I'm Michal,<br />Welcome to<br />my blog<span
-					class="wave"
-					aria-label="waving hand"
-					role="img">👋</span
-				>
-			</h1>
+			{#if show}
+				<h1 in:fade={{ duration: 1000, delay: 100, easing: cubicOut }}>
+					Hi! I'm Michal,<br />Welcome to<br />my blog
+					<span class="hand wave" aria-label="waving hand" role="img"> 👋 </span>
+				</h1>
+			{/if}
 		</section>
 
 		<!-- Projects -->
@@ -271,32 +310,36 @@
 		position: absolute;
 		bottom: 0;
 	}
-	.wave {
+	.hand {
 		display: inline-block;
-		animation: wave-animation 2s infinite;
 		transform-origin: 70% 70%;
-		font-size: 1em; /* Adjust as needed */
 	}
 
-	/* Keyframes for hand wave */
+	/* Triggered only when wave class is added */
+	.wave {
+		animation: wave-animation 1.8s ease-in-out 1;
+		animation-fill-mode: forwards;
+		animation-delay: 0.4s;
+	}
+
 	@keyframes wave-animation {
 		0% {
 			transform: rotate(0deg);
 		}
 		10% {
-			transform: rotate(14deg);
+			transform: rotate(12deg);
 		}
 		20% {
-			transform: rotate(-8deg);
+			transform: rotate(-6deg);
 		}
 		30% {
-			transform: rotate(14deg);
+			transform: rotate(12deg);
 		}
 		40% {
-			transform: rotate(-4deg);
+			transform: rotate(-2deg);
 		}
 		50% {
-			transform: rotate(10deg);
+			transform: rotate(8deg);
 		}
 		60% {
 			transform: rotate(0deg);

From bf50fb900e39b50aaf65cce320f8308705f7faa9 Mon Sep 17 00:00:00 2001
From: micraj <mrajzer2004@gmail.com>
Date: Fri, 8 Aug 2025 19:07:21 +0100
Subject: [PATCH 06/11] Social Icons

---
 frontend/src/lib/components/SideBar.svelte | 43 ++++++++++--
 frontend/src/routes/+page.svelte           |  2 +
 frontend/static/icons/github_icon.svg      | 76 ++++++++++++++++++++++
 frontend/static/icons/linkedin_icon.svg    | 42 ++++++++++++
 4 files changed, 156 insertions(+), 7 deletions(-)
 create mode 100644 frontend/static/icons/github_icon.svg
 create mode 100644 frontend/static/icons/linkedin_icon.svg

diff --git a/frontend/src/lib/components/SideBar.svelte b/frontend/src/lib/components/SideBar.svelte
index 167d52f..de6822c 100644
--- a/frontend/src/lib/components/SideBar.svelte
+++ b/frontend/src/lib/components/SideBar.svelte
@@ -67,6 +67,25 @@
 			{/each}
 		</ul>
 	</nav>
+	<!-- Social Icons -->
+	<div class="social-icons">
+		<a
+			href="https://github.com/your-username"
+			target="_blank"
+			rel="noopener noreferrer"
+			aria-label="GitHub"
+		>
+			<img src="/icons/github_icon.svg" alt="GitHub" />
+		</a>
+		<a
+			href="https://linkedin.com/in/your-username"
+			target="_blank"
+			rel="noopener noreferrer"
+			aria-label="LinkedIn"
+		>
+			<img src="/icons/linkedin_icon.svg" alt="LinkedIn" />
+		</a>
+	</div>
 </aside>
 
 <style>
@@ -77,7 +96,7 @@
 		}
 	}
 	.sidebar {
-		width: 175px;
+		width: 250px;
 		height: 100vh;
 		position: relative;
 		user-select: none;
@@ -88,8 +107,8 @@
 	.sidebar::before {
 		content: '';
 		position: absolute;
-		top: 5%; /* space from the top */
-		bottom: 5%; /* space from the bottom */
+		top: 20px; /* space from the top */
+		bottom: 20px; /* space from the bottom */
 		right: 0;
 		width: 7px;
 		background-color: rgba(136, 150, 150, 0.5); /* or #000000 if you prefer */
@@ -107,8 +126,8 @@
 		text-decoration: none;
 		color: #14080e;
 		font-weight: 500;
-		padding-left: 10px;
 		border-left: 4px solid transparent;
+		padding-left: 30px;
 		transition: border-color 0.3s ease;
 		font-family: 'Space Grotesk', sans-serif;
 		font-size: 1.5rem;
@@ -126,9 +145,19 @@
 		font-weight: 700;
 	}
 
-	.social-icons img {
-		width: 24px;
-		margin: 10px 0;
+	.social-icons {
+		position: relative;
+		top: clamp(100px, 15vh, 400px); /* distance from bottom */
+		left: 20px; /* distance from left */
+		display: flex;
+		flex-direction: row;
+		gap: 24px;
+		z-index: 1000; /* stay on top */
+	}
+
+	.social-icons a img {
 		cursor: pointer;
+		width: 50px;
+		height: 50px;
 	}
 </style>
diff --git a/frontend/src/routes/+page.svelte b/frontend/src/routes/+page.svelte
index 5943adc..d9e66f3 100644
--- a/frontend/src/routes/+page.svelte
+++ b/frontend/src/routes/+page.svelte
@@ -183,6 +183,7 @@
 		/* Hide scrollbar */
 		scrollbar-width: none;
 		-ms-overflow-style: none;
+		user-select: none;
 	}
 
 	/* Hide scrollbar for WebKit browsers */
@@ -290,6 +291,7 @@
 		margin: 0;
 		color: var(--color-secondary);
 		font-size: 2rem;
+		padding-bottom: 10px;
 	}
 
 	.section-header hr {
diff --git a/frontend/static/icons/github_icon.svg b/frontend/static/icons/github_icon.svg
new file mode 100644
index 0000000..a513c2c
--- /dev/null
+++ b/frontend/static/icons/github_icon.svg
@@ -0,0 +1,76 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Uploaded to: SVG Repo, www.svgrepo.com, Transformed by: SVG Repo Mixer Tools -->
+
+<svg
+   width="800px"
+   height="800px"
+   viewBox="0 0 20 20"
+   version="1.1"
+   fill="#000000"
+   id="svg1"
+   sodipodi:docname="github_icon.svg"
+   inkscape:version="1.4.2 (f4327f4, 2025-05-13)"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:svg="http://www.w3.org/2000/svg">
+  <defs
+     id="defs2" />
+  <sodipodi:namedview
+     id="namedview1"
+     pagecolor="#ffffff"
+     bordercolor="#000000"
+     borderopacity="0.25"
+     inkscape:showpageshadow="2"
+     inkscape:pageopacity="0.0"
+     inkscape:pagecheckerboard="0"
+     inkscape:deskcolor="#d1d1d1"
+     inkscape:zoom="1.45875"
+     inkscape:cx="400"
+     inkscape:cy="400"
+     inkscape:window-width="3440"
+     inkscape:window-height="1369"
+     inkscape:window-x="-8"
+     inkscape:window-y="-8"
+     inkscape:window-maximized="1"
+     inkscape:current-layer="SVGRepo_iconCarrier" />
+  <g
+     id="SVGRepo_bgCarrier"
+     stroke-width="0" />
+  <g
+     id="SVGRepo_tracerCarrier"
+     stroke-linecap="round"
+     stroke-linejoin="round" />
+  <g
+     id="SVGRepo_iconCarrier">
+    <title
+       id="title1">github [#142]</title>
+    <desc
+       id="desc1">Created with Sketch.</desc>
+    <defs
+       id="defs1" />
+    <g
+       id="Page-1"
+       stroke="none"
+       stroke-width="1"
+       fill="none"
+       fill-rule="evenodd"
+       style="fill:#000000;fill-opacity:1">
+      <g
+         id="Dribbble-Light-Preview"
+         transform="translate(-140,-7559)"
+         fill="#333"
+         style="fill:#000000;fill-opacity:1">
+        <g
+           id="icons"
+           transform="translate(56,160)"
+           style="fill:#000000;fill-opacity:1">
+          <path
+             d="m 94,7399 c 5.523,0 10,4.59 10,10.253 0,4.529 -2.862,8.371 -6.833,9.728 -0.507,0.101 -0.687,-0.219 -0.687,-0.492 0,-0.338 0.012,-1.442 0.012,-2.814 0,-0.956 -0.32,-1.58 -0.679,-1.898 2.227,-0.254 4.567,-1.121 4.567,-5.059 0,-1.12 -0.388,-2.034 -1.03,-2.752 0.104,-0.259 0.447,-1.302 -0.098,-2.714 0,0 -0.838,-0.275 -2.747,1.051 -0.799,-0.227 -1.655,-0.341 -2.505,-0.345 -0.85,0 -1.705,0.118 -2.503,0.345 -1.911,-1.326 -2.751,-1.051 -2.751,-1.051 -0.543,1.412 -0.2,2.455 -0.097,2.714 -0.639,0.718 -1.03,1.632 -1.03,2.752 0,3.928 2.335,4.808 4.556,5.067 -0.286,0.256 -0.545,0.708 -0.635,1.371 -0.57,0.262 -2.018,0.715 -2.91,-0.852 0,0 -0.529,-0.985 -1.533,-1.057 0,0 -0.975,-0.013 -0.068,0.623 0,0 0.655,0.315 1.11,1.5 0,0 0.587,1.83 3.369,1.21 0.005,0.857 0.014,1.665 0.014,1.909 0,0.271 -0.184,0.588 -0.683,0.493 C 86.865,7417.627 84,7413.783 84,7409.253 84,7403.59 88.478,7399 94,7399"
+             id="github-[#142]"
+             style="fill:#000000;fill-opacity:1" />
+        </g>
+      </g>
+    </g>
+  </g>
+</svg>
diff --git a/frontend/static/icons/linkedin_icon.svg b/frontend/static/icons/linkedin_icon.svg
new file mode 100644
index 0000000..740dcab
--- /dev/null
+++ b/frontend/static/icons/linkedin_icon.svg
@@ -0,0 +1,42 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools -->
+
+<svg
+   width="800px"
+   height="800px"
+   viewBox="0 0 24 24"
+   fill="none"
+   version="1.1"
+   id="svg1"
+   sodipodi:docname="linkedin_icon.svg"
+   inkscape:version="1.4.2 (f4327f4, 2025-05-13)"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:svg="http://www.w3.org/2000/svg">
+  <defs
+     id="defs1" />
+  <sodipodi:namedview
+     id="namedview1"
+     pagecolor="#ffffff"
+     bordercolor="#000000"
+     borderopacity="0.25"
+     inkscape:showpageshadow="2"
+     inkscape:pageopacity="0.0"
+     inkscape:pagecheckerboard="0"
+     inkscape:deskcolor="#d1d1d1"
+     inkscape:zoom="1.45875"
+     inkscape:cx="400"
+     inkscape:cy="345.50129"
+     inkscape:window-width="1718"
+     inkscape:window-height="1360"
+     inkscape:window-x="-7"
+     inkscape:window-y="0"
+     inkscape:window-maximized="0"
+     inkscape:current-layer="svg1" />
+  <path
+     d="M 22.130907,0.05210118 H 2.1063666 C 1.8482677,0.04001222 1.5903036,0.07893382 1.3472641,0.1666607 1.1042247,0.25438774 0.88087975,0.38918042 0.68999431,0.5633144 0.49912359,0.73746352 0.34446215,0.94754918 0.23488967,1.1815278 0.12531719,1.4155214 0.06296362,1.6688181 0.05141389,1.9269296 V 21.995137 c 0.01511968,0.5401 0.23648454,1.054103 0.61863075,1.436118 0.38214626,0.382165 0.89609446,0.603546 1.43632196,0.618694 H 22.130907 c 0.525136,-0.02339 1.020276,-0.251677 1.379217,-0.635792 0.358943,-0.384116 0.553037,-0.893468 0.540739,-1.41902 V 1.9269296 C 24.055163,1.6757027 24.008113,1.4262605 23.912566,1.1938716 23.817019,0.96149798 23.674971,0.75108227 23.495125,0.57552326 23.31543,0.39997939 23.101684,0.26301197 22.867089,0.17300512 22.632495,0.08299837 22.382,0.04185722 22.130907,0.05210118 Z M 7.5512414,20.060314 H 4.0563218 V 9.3662938 H 7.5512414 Z M 5.8862798,7.7463965 C 5.6424005,7.7549011 5.3993909,7.7128749 5.1725358,7.6229735 4.9456664,7.5330707 4.7398411,7.3972285 4.568005,7.2239795 4.3961541,7.0507303 4.2619822,6.8438243 4.1739339,6.6162503 4.0858699,6.3886759 4.0458379,6.1453533 4.0563211,5.9015655 4.0455371,5.6551367 4.0863691,5.4091907 4.1762443,5.1794867 4.2661067,4.9497683 4.4029931,4.741377 4.578115,4.5676778 4.753251,4.3939626 4.9627512,4.2587818 5.1931909,4.1707991 5.4236453,4.0828023 5.66994,4.0439575 5.9162792,4.0567351 c 0.2438784,-0.00848 0.486889,0.03352 0.7137437,0.123424 0.2268704,0.089901 0.4326953,0.225744 0.6045312,0.3989936 0.1718528,0.173248 0.3060224,0.3801552 0.394071,0.6077292 0.088061,0.2275744 0.128096,0.470897 0.1176128,0.7146845 C 7.7570219,6.1479952 7.7161899,6.3939415 7.6263147,6.6236455 7.5364527,6.8533639 7.3995659,7.0617555 7.2244443,7.2354544 7.0493083,7.4091696 6.8398082,7.5443504 6.6093685,7.6323331 6.3789141,7.7203299 6.1326194,7.7591779 5.8862802,7.7464035 Z M 20.060953,20.060314 H 16.551035 V 14.21085 c 0,-1.394874 -0.494988,-2.354786 -1.739961,-2.354786 -0.38669,0.0033 -0.763032,0.126138 -1.077124,0.35172 -0.314243,0.225578 -0.550939,0.542799 -0.677835,0.908166 -0.0975,0.273875 -0.138298,0.564698 -0.119991,0.854922 v 6.089442 H 9.486197 V 9.3662938 h 3.449921 v 1.4998622 c 0.306742,-0.563498 0.763181,-1.031155 1.319069,-1.3515265 0.555887,-0.3202202 1.189473,-0.4805856 1.830859,-0.463353 2.264948,0 3.974907,1.4999095 3.974907,4.6946165 z"
+     fill="#000000"
+     id="path1"
+     style="stroke-width:1.49992;fill:#0a66c2;fill-opacity:1" />
+</svg>

From 15b6c6bb54275e5438f3bbae399cfb8c47c5c915 Mon Sep 17 00:00:00 2001
From: micraj <mrajzer2004@gmail.com>
Date: Fri, 8 Aug 2025 20:52:19 +0100
Subject: [PATCH 07/11] Scroll arrow

---
 frontend/src/lib/components/SideBar.svelte  |  9 ++--
 frontend/src/routes/+page.svelte            | 48 ++++++++++++++++++---
 frontend/static/icons/double-arrow-down.svg |  2 +
 3 files changed, 49 insertions(+), 10 deletions(-)
 create mode 100644 frontend/static/icons/double-arrow-down.svg

diff --git a/frontend/src/lib/components/SideBar.svelte b/frontend/src/lib/components/SideBar.svelte
index de6822c..017c21b 100644
--- a/frontend/src/lib/components/SideBar.svelte
+++ b/frontend/src/lib/components/SideBar.svelte
@@ -96,7 +96,7 @@
 		}
 	}
 	.sidebar {
-		width: 250px;
+		width: 200px;
 		height: 100vh;
 		position: relative;
 		user-select: none;
@@ -147,12 +147,13 @@
 
 	.social-icons {
 		position: relative;
-		top: clamp(100px, 15vh, 400px); /* distance from bottom */
-		left: 20px; /* distance from left */
+		top: clamp(100px, 20vh, 400px);
 		display: flex;
 		flex-direction: row;
 		gap: 24px;
-		z-index: 1000; /* stay on top */
+		z-index: 1000;
+		width: 100%;
+		justify-content: center;
 	}
 
 	.social-icons a img {
diff --git a/frontend/src/routes/+page.svelte b/frontend/src/routes/+page.svelte
index d9e66f3..e4e8ce0 100644
--- a/frontend/src/routes/+page.svelte
+++ b/frontend/src/routes/+page.svelte
@@ -102,8 +102,15 @@
 			{#if show}
 				<h1 in:fade={{ duration: 1000, delay: 100, easing: cubicOut }}>
 					Hi! I'm Michal,<br />Welcome to<br />my blog
-					<span class="hand wave" aria-label="waving hand" role="img"> 👋 </span>
+					<span class="hand" aria-label="waving hand" role="img">
+						<span class="wave">👋</span>
+					</span>
 				</h1>
+
+				<!-- Up and Down Arrow SVG -->
+				<div class="scroll-indicator" in:fade={{ duration: 2000, delay: 3000, easing: cubicOut }}>
+					<img src="/icons/double-arrow-down.svg" alt="arrow" />
+				</div>
 			{/if}
 		</section>
 
@@ -207,9 +214,17 @@
 	.welcome-section {
 		justify-content: center;
 		align-items: center;
-		text-align: left;
 		min-height: 95vh;
 	}
+	.welcome-fade-content {
+		display: flex;
+		flex-direction: column;
+		justify-content: center;
+		align-items: center;
+		width: 100%;
+		height: 100%;
+		text-align: center;
+	}
 	.welcome-section h1 {
 		font-size: clamp(3.2rem, 8vw, 8em);
 		color: var(--color-primary);
@@ -217,6 +232,27 @@
 		font-family: var(--font-heading);
 		margin: 0;
 		padding-bottom: 100px;
+		text-align: left;
+	}
+	.scroll-indicator {
+		top: 200px;
+		transform: translateX(-50%);
+	}
+
+	.scroll-indicator img {
+		width: clamp(50px, 8vw, 100px);
+		height: auto;
+		animation: arrowUpDown 1.5s infinite;
+	}
+
+	@keyframes arrowUpDown {
+		0%,
+		100% {
+			transform: translateY(0);
+		}
+		50% {
+			transform: translateY(8px);
+		}
 	}
 
 	/* Projects */
@@ -319,14 +355,14 @@
 
 	/* Triggered only when wave class is added */
 	.wave {
-		animation: wave-animation 1.8s ease-in-out 1;
+		animation: wave-animation 1.8s ease-in-out 1 forwards;
 		animation-fill-mode: forwards;
 		animation-delay: 0.4s;
 	}
 
 	@keyframes wave-animation {
 		0% {
-			transform: rotate(0deg);
+			transform: rotate(1deg);
 		}
 		10% {
 			transform: rotate(12deg);
@@ -344,10 +380,10 @@
 			transform: rotate(8deg);
 		}
 		60% {
-			transform: rotate(0deg);
+			transform: rotate(1deg);
 		}
 		100% {
-			transform: rotate(0deg);
+			transform: rotate(1deg);
 		}
 	}
 </style>
diff --git a/frontend/static/icons/double-arrow-down.svg b/frontend/static/icons/double-arrow-down.svg
new file mode 100644
index 0000000..c170f6d
--- /dev/null
+++ b/frontend/static/icons/double-arrow-down.svg
@@ -0,0 +1,2 @@
+<?xml version="1.0" encoding="utf-8"?><!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools -->
+<svg fill="#1c5253d8" width="800px" height="800px" viewBox="-96 0 512 512" xmlns="http://www.w3.org/2000/svg"><path d="M143 256.3L7 120.3c-9.4-9.4-9.4-24.6 0-33.9l22.6-22.6c9.4-9.4 24.6-9.4 33.9 0l96.4 96.4 96.4-96.4c9.4-9.4 24.6-9.4 33.9 0L313 86.3c9.4 9.4 9.4 24.6 0 33.9l-136 136c-9.4 9.5-24.6 9.5-34 .1zm34 192l136-136c9.4-9.4 9.4-24.6 0-33.9l-22.6-22.6c-9.4-9.4-24.6-9.4-33.9 0L160 352.1l-96.4-96.4c-9.4-9.4-24.6-9.4-33.9 0L7 278.3c-9.4 9.4-9.4 24.6 0 33.9l136 136c9.4 9.5 24.6 9.5 34 .1z"/></svg>
\ No newline at end of file

From a3cd5a5cabfabeffcd0434b5afa2533857b30de9 Mon Sep 17 00:00:00 2001
From: micraj <mrajzer2004@gmail.com>
Date: Sun, 31 Aug 2025 14:04:49 +0100
Subject: [PATCH 08/11] Update dependancies

---
 frontend/package-lock.json | 212 +++++++++++++++++++++++++++++++------
 frontend/package.json      |   4 +-
 frontend/svelte.config.js  |   4 +-
 3 files changed, 182 insertions(+), 38 deletions(-)

diff --git a/frontend/package-lock.json b/frontend/package-lock.json
index 4b26ff3..3a7c60b 100644
--- a/frontend/package-lock.json
+++ b/frontend/package-lock.json
@@ -8,11 +8,11 @@
 			"name": "frontend",
 			"version": "0.0.1",
 			"dependencies": {
-				"@sveltejs/adapter-node": "^5.2.12",
 				"tinymce": "^7.9.1"
 			},
 			"devDependencies": {
-				"@sveltejs/kit": "^2.16.0",
+				"@sveltejs/adapter-node": "^5.3.1",
+				"@sveltejs/kit": "^2.37.0",
 				"@sveltejs/vite-plugin-svelte": "^5.0.0",
 				"prettier": "^3.4.2",
 				"prettier-plugin-svelte": "^3.3.3",
@@ -26,6 +26,7 @@
 			"version": "2.3.0",
 			"resolved": "https://registry.npmjs.org/@ampproject/remapping/-/remapping-2.3.0.tgz",
 			"integrity": "sha512-30iZtAPgz+LTIYoeivqYo853f02jBYSd5uGnGpkFV0M3xOt9aN73erkgYAmZU43x4VfqcnLxW9Kpg3R5LC4YYw==",
+			"dev": true,
 			"license": "Apache-2.0",
 			"dependencies": {
 				"@jridgewell/gen-mapping": "^0.3.5",
@@ -42,6 +43,7 @@
 			"cpu": [
 				"ppc64"
 			],
+			"dev": true,
 			"optional": true,
 			"os": [
 				"aix"
@@ -57,6 +59,7 @@
 			"cpu": [
 				"arm"
 			],
+			"dev": true,
 			"optional": true,
 			"os": [
 				"android"
@@ -72,6 +75,7 @@
 			"cpu": [
 				"arm64"
 			],
+			"dev": true,
 			"optional": true,
 			"os": [
 				"android"
@@ -87,6 +91,7 @@
 			"cpu": [
 				"x64"
 			],
+			"dev": true,
 			"optional": true,
 			"os": [
 				"android"
@@ -102,6 +107,7 @@
 			"cpu": [
 				"arm64"
 			],
+			"dev": true,
 			"optional": true,
 			"os": [
 				"darwin"
@@ -117,6 +123,7 @@
 			"cpu": [
 				"x64"
 			],
+			"dev": true,
 			"optional": true,
 			"os": [
 				"darwin"
@@ -132,6 +139,7 @@
 			"cpu": [
 				"arm64"
 			],
+			"dev": true,
 			"optional": true,
 			"os": [
 				"freebsd"
@@ -147,6 +155,7 @@
 			"cpu": [
 				"x64"
 			],
+			"dev": true,
 			"optional": true,
 			"os": [
 				"freebsd"
@@ -162,6 +171,7 @@
 			"cpu": [
 				"arm"
 			],
+			"dev": true,
 			"optional": true,
 			"os": [
 				"linux"
@@ -177,6 +187,7 @@
 			"cpu": [
 				"arm64"
 			],
+			"dev": true,
 			"optional": true,
 			"os": [
 				"linux"
@@ -192,6 +203,7 @@
 			"cpu": [
 				"ia32"
 			],
+			"dev": true,
 			"optional": true,
 			"os": [
 				"linux"
@@ -207,6 +219,7 @@
 			"cpu": [
 				"loong64"
 			],
+			"dev": true,
 			"optional": true,
 			"os": [
 				"linux"
@@ -222,6 +235,7 @@
 			"cpu": [
 				"mips64el"
 			],
+			"dev": true,
 			"optional": true,
 			"os": [
 				"linux"
@@ -237,6 +251,7 @@
 			"cpu": [
 				"ppc64"
 			],
+			"dev": true,
 			"optional": true,
 			"os": [
 				"linux"
@@ -252,6 +267,7 @@
 			"cpu": [
 				"riscv64"
 			],
+			"dev": true,
 			"optional": true,
 			"os": [
 				"linux"
@@ -267,6 +283,7 @@
 			"cpu": [
 				"s390x"
 			],
+			"dev": true,
 			"optional": true,
 			"os": [
 				"linux"
@@ -282,6 +299,7 @@
 			"cpu": [
 				"x64"
 			],
+			"dev": true,
 			"optional": true,
 			"os": [
 				"linux"
@@ -297,6 +315,7 @@
 			"cpu": [
 				"arm64"
 			],
+			"dev": true,
 			"optional": true,
 			"os": [
 				"netbsd"
@@ -312,6 +331,7 @@
 			"cpu": [
 				"x64"
 			],
+			"dev": true,
 			"optional": true,
 			"os": [
 				"netbsd"
@@ -327,6 +347,7 @@
 			"cpu": [
 				"arm64"
 			],
+			"dev": true,
 			"optional": true,
 			"os": [
 				"openbsd"
@@ -342,6 +363,7 @@
 			"cpu": [
 				"x64"
 			],
+			"dev": true,
 			"optional": true,
 			"os": [
 				"openbsd"
@@ -357,6 +379,7 @@
 			"cpu": [
 				"x64"
 			],
+			"dev": true,
 			"optional": true,
 			"os": [
 				"sunos"
@@ -372,6 +395,7 @@
 			"cpu": [
 				"arm64"
 			],
+			"dev": true,
 			"optional": true,
 			"os": [
 				"win32"
@@ -387,6 +411,7 @@
 			"cpu": [
 				"ia32"
 			],
+			"dev": true,
 			"optional": true,
 			"os": [
 				"win32"
@@ -402,6 +427,7 @@
 			"cpu": [
 				"x64"
 			],
+			"dev": true,
 			"optional": true,
 			"os": [
 				"win32"
@@ -414,6 +440,7 @@
 			"version": "0.3.8",
 			"resolved": "https://registry.npmjs.org/@jridgewell/gen-mapping/-/gen-mapping-0.3.8.tgz",
 			"integrity": "sha512-imAbBGkb+ebQyxKgzv5Hu2nmROxoDOXHh80evxdoXNOrvAnVx7zimzc1Oo5h9RlfV4vPXaE2iM5pOFbvOCClWA==",
+			"dev": true,
 			"license": "MIT",
 			"dependencies": {
 				"@jridgewell/set-array": "^1.2.1",
@@ -428,6 +455,7 @@
 			"version": "3.1.2",
 			"resolved": "https://registry.npmjs.org/@jridgewell/resolve-uri/-/resolve-uri-3.1.2.tgz",
 			"integrity": "sha512-bRISgCIjP20/tbWSPWMEi54QVPRZExkuD9lJL+UIxUKtwVJA8wW1Trb1jMs1RFXo1CBTNZ/5hpC9QvmKWdopKw==",
+			"dev": true,
 			"license": "MIT",
 			"engines": {
 				"node": ">=6.0.0"
@@ -437,6 +465,7 @@
 			"version": "1.2.1",
 			"resolved": "https://registry.npmjs.org/@jridgewell/set-array/-/set-array-1.2.1.tgz",
 			"integrity": "sha512-R8gLRTZeyp03ymzP/6Lil/28tGeGEzhx1q2k703KGWRAI1VdvPIXdG70VJc2pAMw3NA6JKL5hhFu1sJX0Mnn/A==",
+			"dev": true,
 			"license": "MIT",
 			"engines": {
 				"node": ">=6.0.0"
@@ -446,12 +475,14 @@
 			"version": "1.5.0",
 			"resolved": "https://registry.npmjs.org/@jridgewell/sourcemap-codec/-/sourcemap-codec-1.5.0.tgz",
 			"integrity": "sha512-gv3ZRaISU3fjPAgNsriBRqGWQL6quFx04YMPW/zD8XMLsU32mhCCbfbO6KZFLjvYpCZ8zyDEgqsgf+PwPaM7GQ==",
+			"dev": true,
 			"license": "MIT"
 		},
 		"node_modules/@jridgewell/trace-mapping": {
 			"version": "0.3.25",
 			"resolved": "https://registry.npmjs.org/@jridgewell/trace-mapping/-/trace-mapping-0.3.25.tgz",
 			"integrity": "sha512-vNk6aEwybGtawWmy/PzwnGDOjCkLWSD2wqvjGGAgOAwCGWySYXfYoxt00IJkTF+8Lb57DwOb3Aa0o9CApepiYQ==",
+			"dev": true,
 			"license": "MIT",
 			"dependencies": {
 				"@jridgewell/resolve-uri": "^3.1.0",
@@ -459,15 +490,18 @@
 			}
 		},
 		"node_modules/@polka/url": {
-			"version": "1.0.0-next.28",
-			"resolved": "https://registry.npmjs.org/@polka/url/-/url-1.0.0-next.28.tgz",
-			"integrity": "sha512-8LduaNlMZGwdZ6qWrKlfa+2M4gahzFkprZiAt2TF8uS0qQgBizKXpXURqvTJ4WtmupWxaLqjRb2UCTe72mu+Aw==",
+			"version": "1.0.0-next.29",
+			"resolved": "https://registry.npmjs.org/@polka/url/-/url-1.0.0-next.29.tgz",
+			"integrity": "sha512-wwQAWhWSuHaag8c4q/KN/vCoeOJYshAIvMQwD4GpSb3OiZklFfvAgmj0VCBBImRpuF/aFgIRzllXlVX93Jevww==",
+			"dev": true,
 			"license": "MIT"
 		},
 		"node_modules/@rollup/plugin-commonjs": {
-			"version": "28.0.3",
-			"resolved": "https://registry.npmjs.org/@rollup/plugin-commonjs/-/plugin-commonjs-28.0.3.tgz",
-			"integrity": "sha512-pyltgilam1QPdn+Zd9gaCfOLcnjMEJ9gV+bTw6/r73INdvzf1ah9zLIJBm+kW7R6IUFIQ1YO+VqZtYxZNWFPEQ==",
+			"version": "28.0.6",
+			"resolved": "https://registry.npmjs.org/@rollup/plugin-commonjs/-/plugin-commonjs-28.0.6.tgz",
+			"integrity": "sha512-XSQB1K7FUU5QP+3lOQmVCE3I0FcbbNvmNT4VJSj93iUjayaARrTQeoRdiYQoftAJBLrR9t2agwAd3ekaTgHNlw==",
+			"dev": true,
+			"license": "MIT",
 			"dependencies": {
 				"@rollup/pluginutils": "^5.0.1",
 				"commondir": "^1.0.1",
@@ -493,6 +527,8 @@
 			"version": "1.2.1",
 			"resolved": "https://registry.npmjs.org/is-reference/-/is-reference-1.2.1.tgz",
 			"integrity": "sha512-U82MsXXiFIrjCK4otLT+o2NA2Cd2g5MLoOVXUZjIOhLurrRxpEXzI8O0KZHr3IjLvlAH1kTPYSuqer5T9ZVBKQ==",
+			"dev": true,
+			"license": "MIT",
 			"dependencies": {
 				"@types/estree": "*"
 			}
@@ -501,6 +537,8 @@
 			"version": "6.1.0",
 			"resolved": "https://registry.npmjs.org/@rollup/plugin-json/-/plugin-json-6.1.0.tgz",
 			"integrity": "sha512-EGI2te5ENk1coGeADSIwZ7G2Q8CJS2sF120T7jLw4xFw9n7wIOXHo+kIYRAoVpJAN+kmqZSoO3Fp4JtoNF4ReA==",
+			"dev": true,
+			"license": "MIT",
 			"dependencies": {
 				"@rollup/pluginutils": "^5.1.0"
 			},
@@ -520,6 +558,8 @@
 			"version": "16.0.1",
 			"resolved": "https://registry.npmjs.org/@rollup/plugin-node-resolve/-/plugin-node-resolve-16.0.1.tgz",
 			"integrity": "sha512-tk5YCxJWIG81umIvNkSod2qK5KyQW19qcBF/B78n1bjtOON6gzKoVeSzAE8yHCZEDmqkHKkxplExA8KzdJLJpA==",
+			"dev": true,
+			"license": "MIT",
 			"dependencies": {
 				"@rollup/pluginutils": "^5.0.1",
 				"@types/resolve": "1.20.2",
@@ -540,9 +580,11 @@
 			}
 		},
 		"node_modules/@rollup/pluginutils": {
-			"version": "5.1.4",
-			"resolved": "https://registry.npmjs.org/@rollup/pluginutils/-/pluginutils-5.1.4.tgz",
-			"integrity": "sha512-USm05zrsFxYLPdWWq+K3STlWiT/3ELn3RcV5hJMghpeAIhxfsUIg6mt12CBJBInWMV4VneoV7SfGv8xIwo2qNQ==",
+			"version": "5.2.0",
+			"resolved": "https://registry.npmjs.org/@rollup/pluginutils/-/pluginutils-5.2.0.tgz",
+			"integrity": "sha512-qWJ2ZTbmumwiLFomfzTyt5Kng4hwPi9rwCYN4SHb6eaRU1KNO4ccxINHr/VhH4GgPlt1XfSTLX2LBTme8ne4Zw==",
+			"dev": true,
+			"license": "MIT",
 			"dependencies": {
 				"@types/estree": "^1.0.0",
 				"estree-walker": "^2.0.2",
@@ -567,6 +609,7 @@
 			"cpu": [
 				"arm"
 			],
+			"dev": true,
 			"optional": true,
 			"os": [
 				"android"
@@ -579,6 +622,7 @@
 			"cpu": [
 				"arm64"
 			],
+			"dev": true,
 			"optional": true,
 			"os": [
 				"android"
@@ -591,6 +635,7 @@
 			"cpu": [
 				"arm64"
 			],
+			"dev": true,
 			"optional": true,
 			"os": [
 				"darwin"
@@ -603,6 +648,7 @@
 			"cpu": [
 				"x64"
 			],
+			"dev": true,
 			"optional": true,
 			"os": [
 				"darwin"
@@ -615,6 +661,7 @@
 			"cpu": [
 				"arm64"
 			],
+			"dev": true,
 			"optional": true,
 			"os": [
 				"freebsd"
@@ -627,6 +674,7 @@
 			"cpu": [
 				"x64"
 			],
+			"dev": true,
 			"optional": true,
 			"os": [
 				"freebsd"
@@ -639,6 +687,7 @@
 			"cpu": [
 				"arm"
 			],
+			"dev": true,
 			"optional": true,
 			"os": [
 				"linux"
@@ -651,6 +700,7 @@
 			"cpu": [
 				"arm"
 			],
+			"dev": true,
 			"optional": true,
 			"os": [
 				"linux"
@@ -663,6 +713,7 @@
 			"cpu": [
 				"arm64"
 			],
+			"dev": true,
 			"optional": true,
 			"os": [
 				"linux"
@@ -675,6 +726,7 @@
 			"cpu": [
 				"arm64"
 			],
+			"dev": true,
 			"optional": true,
 			"os": [
 				"linux"
@@ -687,6 +739,7 @@
 			"cpu": [
 				"loong64"
 			],
+			"dev": true,
 			"optional": true,
 			"os": [
 				"linux"
@@ -699,6 +752,7 @@
 			"cpu": [
 				"ppc64"
 			],
+			"dev": true,
 			"optional": true,
 			"os": [
 				"linux"
@@ -711,6 +765,7 @@
 			"cpu": [
 				"riscv64"
 			],
+			"dev": true,
 			"optional": true,
 			"os": [
 				"linux"
@@ -723,6 +778,7 @@
 			"cpu": [
 				"riscv64"
 			],
+			"dev": true,
 			"optional": true,
 			"os": [
 				"linux"
@@ -735,6 +791,7 @@
 			"cpu": [
 				"s390x"
 			],
+			"dev": true,
 			"optional": true,
 			"os": [
 				"linux"
@@ -747,6 +804,7 @@
 			"cpu": [
 				"x64"
 			],
+			"dev": true,
 			"optional": true,
 			"os": [
 				"linux"
@@ -759,6 +817,7 @@
 			"cpu": [
 				"x64"
 			],
+			"dev": true,
 			"optional": true,
 			"os": [
 				"linux"
@@ -771,6 +830,7 @@
 			"cpu": [
 				"arm64"
 			],
+			"dev": true,
 			"optional": true,
 			"os": [
 				"win32"
@@ -783,6 +843,7 @@
 			"cpu": [
 				"ia32"
 			],
+			"dev": true,
 			"optional": true,
 			"os": [
 				"win32"
@@ -795,23 +856,35 @@
 			"cpu": [
 				"x64"
 			],
+			"dev": true,
 			"optional": true,
 			"os": [
 				"win32"
 			]
 		},
+		"node_modules/@standard-schema/spec": {
+			"version": "1.0.0",
+			"resolved": "https://registry.npmjs.org/@standard-schema/spec/-/spec-1.0.0.tgz",
+			"integrity": "sha512-m2bOd0f2RT9k8QJx1JN85cZYyH1RqFBdlwtkSlf4tBDYLCiiZnv1fIIwacK6cqwXavOydf0NPToMQgpKq+dVlA==",
+			"dev": true,
+			"license": "MIT"
+		},
 		"node_modules/@sveltejs/acorn-typescript": {
 			"version": "1.0.5",
 			"resolved": "https://registry.npmjs.org/@sveltejs/acorn-typescript/-/acorn-typescript-1.0.5.tgz",
 			"integrity": "sha512-IwQk4yfwLdibDlrXVE04jTZYlLnwsTT2PIOQQGNLWfjavGifnk1JD1LcZjZaBTRcxZu2FfPfNLOE04DSu9lqtQ==",
+			"dev": true,
+			"license": "MIT",
 			"peerDependencies": {
 				"acorn": "^8.9.0"
 			}
 		},
 		"node_modules/@sveltejs/adapter-node": {
-			"version": "5.2.12",
-			"resolved": "https://registry.npmjs.org/@sveltejs/adapter-node/-/adapter-node-5.2.12.tgz",
-			"integrity": "sha512-0bp4Yb3jKIEcZWVcJC/L1xXp9zzJS4hDwfb4VITAkfT4OVdkspSHsx7YhqJDbb2hgLl6R9Vs7VQR+fqIVOxPUQ==",
+			"version": "5.3.1",
+			"resolved": "https://registry.npmjs.org/@sveltejs/adapter-node/-/adapter-node-5.3.1.tgz",
+			"integrity": "sha512-PSoGfa9atkmuixe7jvuS2tsUohVZF20So87ASzfMRGTTNqEd8s48KAodlv3CzHwq9XO/BM8KsQLpqqsr/6dmuA==",
+			"dev": true,
+			"license": "MIT",
 			"dependencies": {
 				"@rollup/plugin-commonjs": "^28.0.1",
 				"@rollup/plugin-json": "^6.1.0",
@@ -823,15 +896,18 @@
 			}
 		},
 		"node_modules/@sveltejs/kit": {
-			"version": "2.21.2",
-			"resolved": "https://registry.npmjs.org/@sveltejs/kit/-/kit-2.21.2.tgz",
-			"integrity": "sha512-EMYTY4+rNa7TaRZYzCqhQslEkACEZzWc363jOYuc90oJrgvlWTcgqTxcGSIJim48hPaXwYlHyatRnnMmTFf5tA==",
+			"version": "2.37.0",
+			"resolved": "https://registry.npmjs.org/@sveltejs/kit/-/kit-2.37.0.tgz",
+			"integrity": "sha512-xgKtpjQ6Ry4mdShd01ht5AODUsW7+K1iValPDq7QX8zI1hWOKREH9GjG8SRCN5tC4K7UXmMhuQam7gbLByVcnw==",
+			"dev": true,
+			"license": "MIT",
 			"dependencies": {
+				"@standard-schema/spec": "^1.0.0",
 				"@sveltejs/acorn-typescript": "^1.0.5",
 				"@types/cookie": "^0.6.0",
 				"acorn": "^8.14.1",
 				"cookie": "^0.6.0",
-				"devalue": "^5.1.0",
+				"devalue": "^5.3.2",
 				"esm-env": "^1.2.2",
 				"kleur": "^4.1.5",
 				"magic-string": "^0.30.5",
@@ -847,15 +923,22 @@
 				"node": ">=18.13"
 			},
 			"peerDependencies": {
-				"@sveltejs/vite-plugin-svelte": "^3.0.0 || ^4.0.0-next.1 || ^5.0.0",
+				"@opentelemetry/api": "^1.0.0",
+				"@sveltejs/vite-plugin-svelte": "^3.0.0 || ^4.0.0-next.1 || ^5.0.0 || ^6.0.0-next.0",
 				"svelte": "^4.0.0 || ^5.0.0-next.0",
-				"vite": "^5.0.3 || ^6.0.0"
+				"vite": "^5.0.3 || ^6.0.0 || ^7.0.0-beta.0"
+			},
+			"peerDependenciesMeta": {
+				"@opentelemetry/api": {
+					"optional": true
+				}
 			}
 		},
 		"node_modules/@sveltejs/vite-plugin-svelte": {
 			"version": "5.0.3",
 			"resolved": "https://registry.npmjs.org/@sveltejs/vite-plugin-svelte/-/vite-plugin-svelte-5.0.3.tgz",
 			"integrity": "sha512-MCFS6CrQDu1yGwspm4qtli0e63vaPCehf6V7pIMP15AsWgMKrqDGCPFF/0kn4SP0ii4aySu4Pa62+fIRGFMjgw==",
+			"dev": true,
 			"license": "MIT",
 			"dependencies": {
 				"@sveltejs/vite-plugin-svelte-inspector": "^4.0.1",
@@ -877,6 +960,7 @@
 			"version": "4.0.1",
 			"resolved": "https://registry.npmjs.org/@sveltejs/vite-plugin-svelte-inspector/-/vite-plugin-svelte-inspector-4.0.1.tgz",
 			"integrity": "sha512-J/Nmb2Q2y7mck2hyCX4ckVHcR5tu2J+MtBEQqpDrrgELZ2uvraQcK/ioCV61AqkdXFgriksOKIceDcQmqnGhVw==",
+			"dev": true,
 			"license": "MIT",
 			"dependencies": {
 				"debug": "^4.3.7"
@@ -894,22 +978,27 @@
 			"version": "0.6.0",
 			"resolved": "https://registry.npmjs.org/@types/cookie/-/cookie-0.6.0.tgz",
 			"integrity": "sha512-4Kh9a6B2bQciAhf7FSuMRRkUWecJgJu9nPnx3yzpsfXX/c50REIqpHY4C82bXP90qrLtXtkDxTZosYO3UpOwlA==",
+			"dev": true,
 			"license": "MIT"
 		},
 		"node_modules/@types/estree": {
 			"version": "1.0.7",
 			"resolved": "https://registry.npmjs.org/@types/estree/-/estree-1.0.7.tgz",
-			"integrity": "sha512-w28IoSUCJpidD/TGviZwwMJckNESJZXFu7NBZ5YJ4mEUnNraUn9Pm8HSZm/jDF1pDWYKspWE7oVphigUPRakIQ=="
+			"integrity": "sha512-w28IoSUCJpidD/TGviZwwMJckNESJZXFu7NBZ5YJ4mEUnNraUn9Pm8HSZm/jDF1pDWYKspWE7oVphigUPRakIQ==",
+			"dev": true
 		},
 		"node_modules/@types/resolve": {
 			"version": "1.20.2",
 			"resolved": "https://registry.npmjs.org/@types/resolve/-/resolve-1.20.2.tgz",
-			"integrity": "sha512-60BCwRFOZCQhDncwQdxxeOEEkbc5dIMccYLwbxsS4TUNeVECQ/pBJ0j09mrHOl/JJvpRPGwO9SvE4nR2Nb/a4Q=="
+			"integrity": "sha512-60BCwRFOZCQhDncwQdxxeOEEkbc5dIMccYLwbxsS4TUNeVECQ/pBJ0j09mrHOl/JJvpRPGwO9SvE4nR2Nb/a4Q==",
+			"dev": true,
+			"license": "MIT"
 		},
 		"node_modules/acorn": {
 			"version": "8.14.1",
 			"resolved": "https://registry.npmjs.org/acorn/-/acorn-8.14.1.tgz",
 			"integrity": "sha512-OvQ/2pUDKmgfCg++xsTX1wGxfTaszcHVcTctW4UJB4hibJx2HXxxO5UmVgyjMa+ZDsiaf5wWLXYpRWMmBI0QHg==",
+			"dev": true,
 			"bin": {
 				"acorn": "bin/acorn"
 			},
@@ -921,6 +1010,7 @@
 			"version": "1.4.13",
 			"resolved": "https://registry.npmjs.org/acorn-typescript/-/acorn-typescript-1.4.13.tgz",
 			"integrity": "sha512-xsc9Xv0xlVfwp2o7sQ+GCQ1PgbkdcpWdTzrwXxO3xDMTAywVS3oXVOcOHuRjAPkS4P9b+yc/qNF15460v+jp4Q==",
+			"dev": true,
 			"license": "MIT",
 			"peerDependencies": {
 				"acorn": ">=8.9.0"
@@ -930,6 +1020,7 @@
 			"version": "5.3.2",
 			"resolved": "https://registry.npmjs.org/aria-query/-/aria-query-5.3.2.tgz",
 			"integrity": "sha512-COROpnaoap1E2F000S62r6A60uHZnmlvomhfyT2DlTcrY1OrBKn2UhH7qn5wTC9zMvD0AY7csdPSNwKP+7WiQw==",
+			"dev": true,
 			"license": "Apache-2.0",
 			"engines": {
 				"node": ">= 0.4"
@@ -939,6 +1030,7 @@
 			"version": "4.1.0",
 			"resolved": "https://registry.npmjs.org/axobject-query/-/axobject-query-4.1.0.tgz",
 			"integrity": "sha512-qIj0G9wZbMGNLjLmg1PT6v2mE9AH2zlnADJD/2tC6E00hgmhUOfEB6greHPAfLRSufHqROIUTkw6E+M3lH0PTQ==",
+			"dev": true,
 			"license": "Apache-2.0",
 			"engines": {
 				"node": ">= 0.4"
@@ -964,6 +1056,7 @@
 			"version": "2.1.1",
 			"resolved": "https://registry.npmjs.org/clsx/-/clsx-2.1.1.tgz",
 			"integrity": "sha512-eYm0QWBtUrBWZWG0d386OGAw16Z995PiOVo2B7bjWSbHedGl5e0ZWaq65kOGgUSNesEIDkB9ISbTg/JK9dhCZA==",
+			"dev": true,
 			"license": "MIT",
 			"engines": {
 				"node": ">=6"
@@ -972,12 +1065,15 @@
 		"node_modules/commondir": {
 			"version": "1.0.1",
 			"resolved": "https://registry.npmjs.org/commondir/-/commondir-1.0.1.tgz",
-			"integrity": "sha512-W9pAhw0ja1Edb5GVdIF1mjZw/ASI0AlShXM83UUGe2DVr5TdAPEA1OA8m/g8zWp9x6On7gqufY+FatDbC3MDQg=="
+			"integrity": "sha512-W9pAhw0ja1Edb5GVdIF1mjZw/ASI0AlShXM83UUGe2DVr5TdAPEA1OA8m/g8zWp9x6On7gqufY+FatDbC3MDQg==",
+			"dev": true,
+			"license": "MIT"
 		},
 		"node_modules/cookie": {
 			"version": "0.6.0",
 			"resolved": "https://registry.npmjs.org/cookie/-/cookie-0.6.0.tgz",
 			"integrity": "sha512-U71cyTamuh1CRNCfpGY6to28lxvNwPG4Guz/EVjgf3Jmzv0vlDp1atT9eS5dDjMYHucpHbWns6Lwf3BKz6svdw==",
+			"dev": true,
 			"license": "MIT",
 			"engines": {
 				"node": ">= 0.6"
@@ -987,6 +1083,7 @@
 			"version": "4.4.0",
 			"resolved": "https://registry.npmjs.org/debug/-/debug-4.4.0.tgz",
 			"integrity": "sha512-6WTZ/IxCY/T6BALoZHaE4ctp9xm+Z5kY/pzYaCHRFeyVhojxlrm+46y68HA6hr0TcwEssoxNiDEUJQjfPZ/RYA==",
+			"dev": true,
 			"license": "MIT",
 			"dependencies": {
 				"ms": "^2.1.3"
@@ -1004,21 +1101,24 @@
 			"version": "4.3.1",
 			"resolved": "https://registry.npmjs.org/deepmerge/-/deepmerge-4.3.1.tgz",
 			"integrity": "sha512-3sUqbMEc77XqpdNO7FRyRog+eW3ph+GYCbj+rK+uYyRMuwsVy0rMiVtPn+QJlKFvWP/1PYpapqYn0Me2knFn+A==",
+			"dev": true,
 			"license": "MIT",
 			"engines": {
 				"node": ">=0.10.0"
 			}
 		},
 		"node_modules/devalue": {
-			"version": "5.1.1",
-			"resolved": "https://registry.npmjs.org/devalue/-/devalue-5.1.1.tgz",
-			"integrity": "sha512-maua5KUiapvEwiEAe+XnlZ3Rh0GD+qI1J/nb9vrJc3muPXvcF/8gXYTWF76+5DAqHyDUtOIImEuo0YKE9mshVw==",
+			"version": "5.3.2",
+			"resolved": "https://registry.npmjs.org/devalue/-/devalue-5.3.2.tgz",
+			"integrity": "sha512-UDsjUbpQn9kvm68slnrs+mfxwFkIflOhkanmyabZ8zOYk8SMEIbJ3TK+88g70hSIeytu4y18f0z/hYHMTrXIWw==",
+			"dev": true,
 			"license": "MIT"
 		},
 		"node_modules/esbuild": {
 			"version": "0.25.5",
 			"resolved": "https://registry.npmjs.org/esbuild/-/esbuild-0.25.5.tgz",
 			"integrity": "sha512-P8OtKZRv/5J5hhz0cUAdu/cLuPIKXpQl1R9pZtvmHWQvrAUVd0UNIPT4IB4W3rNOqVO0rlqHmCIbSwxh/c9yUQ==",
+			"dev": true,
 			"hasInstallScript": true,
 			"bin": {
 				"esbuild": "bin/esbuild"
@@ -1058,12 +1158,14 @@
 			"version": "1.2.2",
 			"resolved": "https://registry.npmjs.org/esm-env/-/esm-env-1.2.2.tgz",
 			"integrity": "sha512-Epxrv+Nr/CaL4ZcFGPJIYLWFom+YeV1DqMLHJoEd9SYRxNbaFruBwfEX/kkHUJf55j2+TUbmDcmuilbP1TmXHA==",
+			"dev": true,
 			"license": "MIT"
 		},
 		"node_modules/esrap": {
 			"version": "1.4.3",
 			"resolved": "https://registry.npmjs.org/esrap/-/esrap-1.4.3.tgz",
 			"integrity": "sha512-Xddc1RsoFJ4z9nR7W7BFaEPIp4UXoeQ0+077UdWLxbafMQFyU79sQJMk7kxNgRwQ9/aVgaKacCHC2pUACGwmYw==",
+			"dev": true,
 			"license": "MIT",
 			"dependencies": {
 				"@jridgewell/sourcemap-codec": "^1.4.15"
@@ -1072,12 +1174,15 @@
 		"node_modules/estree-walker": {
 			"version": "2.0.2",
 			"resolved": "https://registry.npmjs.org/estree-walker/-/estree-walker-2.0.2.tgz",
-			"integrity": "sha512-Rfkk/Mp/DL7JVje3u18FxFujQlTNR2q6QfMSMB7AvCBx91NGj/ba3kCfza0f6dVDbw7YlRf/nDrn7pQrCCyQ/w=="
+			"integrity": "sha512-Rfkk/Mp/DL7JVje3u18FxFujQlTNR2q6QfMSMB7AvCBx91NGj/ba3kCfza0f6dVDbw7YlRf/nDrn7pQrCCyQ/w==",
+			"dev": true,
+			"license": "MIT"
 		},
 		"node_modules/fdir": {
 			"version": "6.4.5",
 			"resolved": "https://registry.npmjs.org/fdir/-/fdir-6.4.5.tgz",
 			"integrity": "sha512-4BG7puHpVsIYxZUbiUE3RqGloLaSSwzYie5jvasC4LWuBWzZawynvYouhjbQKw2JuIGYdm0DzIxl8iVidKlUEw==",
+			"dev": true,
 			"peerDependencies": {
 				"picomatch": "^3 || ^4"
 			},
@@ -1091,6 +1196,7 @@
 			"version": "2.3.3",
 			"resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.3.tgz",
 			"integrity": "sha512-5xoDfX+fL7faATnagmWPpbFtwh/R77WmMMqqHGS65C3vvB0YHrgF+B1YmZ3441tMj5n63k0212XNoJwzlhffQw==",
+			"dev": true,
 			"hasInstallScript": true,
 			"license": "MIT",
 			"optional": true,
@@ -1105,6 +1211,8 @@
 			"version": "1.1.2",
 			"resolved": "https://registry.npmjs.org/function-bind/-/function-bind-1.1.2.tgz",
 			"integrity": "sha512-7XHNxH7qX9xG5mIwxkhumTox/MIRNcOgDrxWsMt2pAr23WHp6MrRlN7FBSFpCpr+oVO0F744iUgR82nJMfG2SA==",
+			"dev": true,
+			"license": "MIT",
 			"funding": {
 				"url": "https://github.com/sponsors/ljharb"
 			}
@@ -1113,6 +1221,8 @@
 			"version": "2.0.2",
 			"resolved": "https://registry.npmjs.org/hasown/-/hasown-2.0.2.tgz",
 			"integrity": "sha512-0hJU9SCPvmMzIBdZFqNPXWa6dqh7WdH0cII9y+CyS8rG3nL48Bclra9HmKhVVUHyPWNH5Y7xDwAB7bfgSjkUMQ==",
+			"dev": true,
+			"license": "MIT",
 			"dependencies": {
 				"function-bind": "^1.1.2"
 			},
@@ -1124,6 +1234,8 @@
 			"version": "2.16.1",
 			"resolved": "https://registry.npmjs.org/is-core-module/-/is-core-module-2.16.1.tgz",
 			"integrity": "sha512-UfoeMA6fIJ8wTYFEUjelnaGI67v6+N7qXJEvQuIGa99l4xsCruSYOVSQ0uPANn4dAzm8lkYPaKLrrijLq7x23w==",
+			"dev": true,
+			"license": "MIT",
 			"dependencies": {
 				"hasown": "^2.0.2"
 			},
@@ -1137,12 +1249,15 @@
 		"node_modules/is-module": {
 			"version": "1.0.0",
 			"resolved": "https://registry.npmjs.org/is-module/-/is-module-1.0.0.tgz",
-			"integrity": "sha512-51ypPSPCoTEIN9dy5Oy+h4pShgJmPCygKfyRCISBI+JoWT/2oJvK8QPxmwv7b/p239jXrm9M1mlQbyKJ5A152g=="
+			"integrity": "sha512-51ypPSPCoTEIN9dy5Oy+h4pShgJmPCygKfyRCISBI+JoWT/2oJvK8QPxmwv7b/p239jXrm9M1mlQbyKJ5A152g==",
+			"dev": true,
+			"license": "MIT"
 		},
 		"node_modules/is-reference": {
 			"version": "3.0.3",
 			"resolved": "https://registry.npmjs.org/is-reference/-/is-reference-3.0.3.tgz",
 			"integrity": "sha512-ixkJoqQvAP88E6wLydLGGqCJsrFUnqoH6HnaczB8XmDH1oaWU+xxdptvikTgaEhtZ53Ky6YXiBuUI2WXLMCwjw==",
+			"dev": true,
 			"license": "MIT",
 			"dependencies": {
 				"@types/estree": "^1.0.6"
@@ -1152,6 +1267,7 @@
 			"version": "4.1.5",
 			"resolved": "https://registry.npmjs.org/kleur/-/kleur-4.1.5.tgz",
 			"integrity": "sha512-o+NO+8WrRiQEE4/7nwRJhN1HWpVmJm511pBHUxPLtp0BUISzlBplORYSmTclCnJvQq2tKu/sgl3xVpkc7ZWuQQ==",
+			"dev": true,
 			"license": "MIT",
 			"engines": {
 				"node": ">=6"
@@ -1161,12 +1277,14 @@
 			"version": "3.0.0",
 			"resolved": "https://registry.npmjs.org/locate-character/-/locate-character-3.0.0.tgz",
 			"integrity": "sha512-SW13ws7BjaeJ6p7Q6CO2nchbYEc3X3J6WrmTTDto7yMPqVSZTUyY5Tjbid+Ab8gLnATtygYtiDIJGQRRn2ZOiA==",
+			"dev": true,
 			"license": "MIT"
 		},
 		"node_modules/magic-string": {
 			"version": "0.30.17",
 			"resolved": "https://registry.npmjs.org/magic-string/-/magic-string-0.30.17.tgz",
 			"integrity": "sha512-sNPKHvyjVf7gyjwS4xGTaW/mCnF8wnjtifKBEhxfZ7E/S8tQ0rssrwGNn6q8JH/ohItJfSQp9mBtQYuTlH5QnA==",
+			"dev": true,
 			"license": "MIT",
 			"dependencies": {
 				"@jridgewell/sourcemap-codec": "^1.5.0"
@@ -1176,15 +1294,17 @@
 			"version": "1.2.0",
 			"resolved": "https://registry.npmjs.org/mri/-/mri-1.2.0.tgz",
 			"integrity": "sha512-tzzskb3bG8LvYGFF/mDTpq3jpI6Q9wc3LEmBaghu+DdCssd1FakN7Bc0hVNmEyGq1bq3RgfkCb3cmQLpNPOroA==",
+			"dev": true,
 			"license": "MIT",
 			"engines": {
 				"node": ">=4"
 			}
 		},
 		"node_modules/mrmime": {
-			"version": "2.0.0",
-			"resolved": "https://registry.npmjs.org/mrmime/-/mrmime-2.0.0.tgz",
-			"integrity": "sha512-eu38+hdgojoyq63s+yTpN4XMBdt5l8HhMhc4VKLO9KM5caLIBvUm4thi7fFaxyTmCKeNnXZ5pAlBwCUnhA09uw==",
+			"version": "2.0.1",
+			"resolved": "https://registry.npmjs.org/mrmime/-/mrmime-2.0.1.tgz",
+			"integrity": "sha512-Y3wQdFg2Va6etvQ5I82yUhGdsKrcYox6p7FfL1LbK2J4V01F9TGlepTIhnK24t7koZibmg82KGglhA1XK5IsLQ==",
+			"dev": true,
 			"license": "MIT",
 			"engines": {
 				"node": ">=10"
@@ -1194,12 +1314,14 @@
 			"version": "2.1.3",
 			"resolved": "https://registry.npmjs.org/ms/-/ms-2.1.3.tgz",
 			"integrity": "sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA==",
+			"dev": true,
 			"license": "MIT"
 		},
 		"node_modules/nanoid": {
 			"version": "3.3.11",
 			"resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.11.tgz",
 			"integrity": "sha512-N8SpfPUnUp1bK+PMYW8qSWdl9U+wwNWI4QKxOYDy9JAro3WMX7p2OeVRF9v+347pnakNevPmiHhNmZ2HbFA76w==",
+			"dev": true,
 			"funding": [
 				{
 					"type": "github",
@@ -1216,18 +1338,22 @@
 		"node_modules/path-parse": {
 			"version": "1.0.7",
 			"resolved": "https://registry.npmjs.org/path-parse/-/path-parse-1.0.7.tgz",
-			"integrity": "sha512-LDJzPVEEEPR+y48z93A0Ed0yXb8pAByGWo/k5YYdYgpY2/2EsOsksJrq7lOHxryrVOn1ejG6oAp8ahvOIQD8sw=="
+			"integrity": "sha512-LDJzPVEEEPR+y48z93A0Ed0yXb8pAByGWo/k5YYdYgpY2/2EsOsksJrq7lOHxryrVOn1ejG6oAp8ahvOIQD8sw==",
+			"dev": true,
+			"license": "MIT"
 		},
 		"node_modules/picocolors": {
 			"version": "1.1.1",
 			"resolved": "https://registry.npmjs.org/picocolors/-/picocolors-1.1.1.tgz",
 			"integrity": "sha512-xceH2snhtb5M9liqDsmEw56le376mTZkEX/jEb/RxNFyegNul7eNslCXP9FDj/Lcu0X8KEyMceP2ntpaHrDEVA==",
+			"dev": true,
 			"license": "ISC"
 		},
 		"node_modules/picomatch": {
 			"version": "4.0.2",
 			"resolved": "https://registry.npmjs.org/picomatch/-/picomatch-4.0.2.tgz",
 			"integrity": "sha512-M7BAV6Rlcy5u+m6oPhAPFgJTzAioX/6B0DxyvDlo9l8+T3nLKbrczg2WLUyzd45L8RqfUMyGPzekbMvX2Ldkwg==",
+			"dev": true,
 			"engines": {
 				"node": ">=12"
 			},
@@ -1239,6 +1365,7 @@
 			"version": "8.5.4",
 			"resolved": "https://registry.npmjs.org/postcss/-/postcss-8.5.4.tgz",
 			"integrity": "sha512-QSa9EBe+uwlGTFmHsPKokv3B/oEMQZxfqW0QqNCyhpa6mB1afzulwn8hihglqAb2pOw+BJgNlmXQ8la2VeHB7w==",
+			"dev": true,
 			"funding": [
 				{
 					"type": "opencollective",
@@ -1307,6 +1434,8 @@
 			"version": "1.22.10",
 			"resolved": "https://registry.npmjs.org/resolve/-/resolve-1.22.10.tgz",
 			"integrity": "sha512-NPRy+/ncIMeDlTAsuqwKIiferiawhefFJtkNSW0qZJEqMEb+qBt/77B/jGeeek+F0uOeN05CDa6HXbbIgtVX4w==",
+			"dev": true,
+			"license": "MIT",
 			"dependencies": {
 				"is-core-module": "^2.16.0",
 				"path-parse": "^1.0.7",
@@ -1326,6 +1455,7 @@
 			"version": "4.42.0",
 			"resolved": "https://registry.npmjs.org/rollup/-/rollup-4.42.0.tgz",
 			"integrity": "sha512-LW+Vse3BJPyGJGAJt1j8pWDKPd73QM8cRXYK1IxOBgL2AGLu7Xd2YOW0M2sLUBCkF5MshXXtMApyEAEzMVMsnw==",
+			"dev": true,
 			"dependencies": {
 				"@types/estree": "1.0.7"
 			},
@@ -1364,6 +1494,7 @@
 			"version": "1.8.1",
 			"resolved": "https://registry.npmjs.org/sade/-/sade-1.8.1.tgz",
 			"integrity": "sha512-xal3CZX1Xlo/k4ApwCFrHVACi9fBqJ7V+mwhBsuf/1IOKbBy098Fex+Wa/5QMubw09pSZ/u8EY8PWgevJsXp1A==",
+			"dev": true,
 			"license": "MIT",
 			"dependencies": {
 				"mri": "^1.1.0"
@@ -1376,12 +1507,14 @@
 			"version": "2.7.1",
 			"resolved": "https://registry.npmjs.org/set-cookie-parser/-/set-cookie-parser-2.7.1.tgz",
 			"integrity": "sha512-IOc8uWeOZgnb3ptbCURJWNjWUPcO3ZnTTdzsurqERrP6nPyv+paC55vJM0LpOlT2ne+Ix+9+CRG1MNLlyZ4GjQ==",
+			"dev": true,
 			"license": "MIT"
 		},
 		"node_modules/sirv": {
-			"version": "3.0.0",
-			"resolved": "https://registry.npmjs.org/sirv/-/sirv-3.0.0.tgz",
-			"integrity": "sha512-BPwJGUeDaDCHihkORDchNyyTvWFhcusy1XMmhEVTQTwGeybFbp8YEmB+njbPnth1FibULBSBVwCQni25XlCUDg==",
+			"version": "3.0.1",
+			"resolved": "https://registry.npmjs.org/sirv/-/sirv-3.0.1.tgz",
+			"integrity": "sha512-FoqMu0NCGBLCcAkS1qA+XJIQTR6/JHfQXl+uGteNCQ76T91DMUjPa9xfmeqMY3z80nLSg9yQmNjK0Px6RWsH/A==",
+			"dev": true,
 			"license": "MIT",
 			"dependencies": {
 				"@polka/url": "^1.0.0-next.24",
@@ -1396,6 +1529,7 @@
 			"version": "1.2.1",
 			"resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-1.2.1.tgz",
 			"integrity": "sha512-UXWMKhLOwVKb728IUtQPXxfYU+usdybtUrK/8uGE8CQMvrhOpwvzDBwj0QhSL7MQc7vIsISBG8VQ8+IDQxpfQA==",
+			"dev": true,
 			"engines": {
 				"node": ">=0.10.0"
 			}
@@ -1404,6 +1538,8 @@
 			"version": "1.0.0",
 			"resolved": "https://registry.npmjs.org/supports-preserve-symlinks-flag/-/supports-preserve-symlinks-flag-1.0.0.tgz",
 			"integrity": "sha512-ot0WnXS9fgdkgIcePe6RHNk1WA8+muPa6cSjeR3V8K27q9BB1rTE3R1p7Hv0z1ZyAc8s6Vvv8DIyWf681MAt0w==",
+			"dev": true,
+			"license": "MIT",
 			"engines": {
 				"node": ">= 0.4"
 			},
@@ -1415,6 +1551,7 @@
 			"version": "5.19.3",
 			"resolved": "https://registry.npmjs.org/svelte/-/svelte-5.19.3.tgz",
 			"integrity": "sha512-rb/bkYG9jq67OCWikMvaPnfOobyGn0JizVDwHpdeBtLiNXPMcoA9GTFC3BhptP7xGNquUU8J5GiS7PlGlfDAFA==",
+			"dev": true,
 			"license": "MIT",
 			"dependencies": {
 				"@ampproject/remapping": "^2.3.0",
@@ -1464,6 +1601,7 @@
 			"version": "0.2.14",
 			"resolved": "https://registry.npmjs.org/tinyglobby/-/tinyglobby-0.2.14.tgz",
 			"integrity": "sha512-tX5e7OM1HnYr2+a2C/4V0htOcSQcoSTH9KgJnVvNm5zm/cyEWKJ7j7YutsH9CxMdtOkkLFy2AHrMci9IM8IPZQ==",
+			"dev": true,
 			"dependencies": {
 				"fdir": "^6.4.4",
 				"picomatch": "^4.0.2"
@@ -1485,6 +1623,7 @@
 			"version": "3.0.1",
 			"resolved": "https://registry.npmjs.org/totalist/-/totalist-3.0.1.tgz",
 			"integrity": "sha512-sf4i37nQ2LBx4m3wB74y+ubopq6W/dIzXg0FDGjsYnZHVa1Da8FH853wlL2gtUhg+xJXjfk3kUZS3BRoQeoQBQ==",
+			"dev": true,
 			"license": "MIT",
 			"engines": {
 				"node": ">=6"
@@ -1508,6 +1647,7 @@
 			"version": "6.3.5",
 			"resolved": "https://registry.npmjs.org/vite/-/vite-6.3.5.tgz",
 			"integrity": "sha512-cZn6NDFE7wdTpINgs++ZJ4N49W2vRp8LCKrn3Ob1kYNtOo21vfDoaV5GzBfLU4MovSAB8uNRm4jgzVQZ+mBzPQ==",
+			"dev": true,
 			"dependencies": {
 				"esbuild": "^0.25.0",
 				"fdir": "^6.4.4",
@@ -1581,6 +1721,7 @@
 			"version": "1.0.5",
 			"resolved": "https://registry.npmjs.org/vitefu/-/vitefu-1.0.5.tgz",
 			"integrity": "sha512-h4Vflt9gxODPFNGPwp4zAMZRpZR7eslzwH2c5hn5kNZ5rhnKyRJ50U+yGCdc2IRaBs8O4haIgLNGrV5CrpMsCA==",
+			"dev": true,
 			"license": "MIT",
 			"workspaces": [
 				"tests/deps/*",
@@ -1599,6 +1740,7 @@
 			"version": "1.1.2",
 			"resolved": "https://registry.npmjs.org/zimmerframe/-/zimmerframe-1.1.2.tgz",
 			"integrity": "sha512-rAbqEGa8ovJy4pyBxZM70hg4pE6gDgaQ0Sl9M3enG3I0d6H4XSAM3GeNGLKnsBpuijUow064sf7ww1nutC5/3w==",
+			"dev": true,
 			"license": "MIT"
 		}
 	}
diff --git a/frontend/package.json b/frontend/package.json
index 8e2c507..ac2e99f 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -14,7 +14,8 @@
 		"lint": "prettier --check ."
 	},
 	"devDependencies": {
-		"@sveltejs/kit": "^2.16.0",
+		"@sveltejs/adapter-node": "^5.3.1",
+		"@sveltejs/kit": "^2.37.0",
 		"@sveltejs/vite-plugin-svelte": "^5.0.0",
 		"prettier": "^3.4.2",
 		"prettier-plugin-svelte": "^3.3.3",
@@ -24,7 +25,6 @@
 		"vite": "^6.0.0"
 	},
 	"dependencies": {
-		"@sveltejs/adapter-node": "^5.2.12",
 		"tinymce": "^7.9.1"
 	}
 }
diff --git a/frontend/svelte.config.js b/frontend/svelte.config.js
index c9d7bb4..f12139d 100644
--- a/frontend/svelte.config.js
+++ b/frontend/svelte.config.js
@@ -1,7 +1,7 @@
 import adapter from '@sveltejs/adapter-node';
 import { vitePreprocess } from '@sveltejs/vite-plugin-svelte';
 
-export default {
+const config =  {
   preprocess: vitePreprocess(),
   kit: {
     adapter: adapter({
@@ -9,3 +9,5 @@ export default {
     })
   }
 };
+
+export default config;

From 4108984c61113a292b83ab3ff9588677499d7a85 Mon Sep 17 00:00:00 2001
From: micraj <mrajzer2004@gmail.com>
Date: Mon, 1 Sep 2025 10:15:35 +0100
Subject: [PATCH 09/11] Added PostGrid componennt

---
 frontend/src/lib/components/PostGrid.svelte | 95 +++++++++++++++++++++
 frontend/src/routes/+page.svelte            | 14 +--
 frontend/src/routes/PostEditor/+page.svelte |  5 ++
 3 files changed, 102 insertions(+), 12 deletions(-)
 create mode 100644 frontend/src/lib/components/PostGrid.svelte
 create mode 100644 frontend/src/routes/PostEditor/+page.svelte

diff --git a/frontend/src/lib/components/PostGrid.svelte b/frontend/src/lib/components/PostGrid.svelte
new file mode 100644
index 0000000..52a7f39
--- /dev/null
+++ b/frontend/src/lib/components/PostGrid.svelte
@@ -0,0 +1,95 @@
+<script lang="ts">
+	import { onMount } from 'svelte';
+
+	type Post = {
+		id: number;
+		timestamp: number;
+		title: string;
+		slug: string;
+		content: string;
+		cover_image: string;
+	};
+
+	let posts: Post[] = [];
+	let loading = true;
+	let error: string | null = null;
+
+	onMount(async () => {
+		try {
+			const res = await fetch('http://127.0.0.1:8000/posts/');
+			if (!res.ok) throw new Error(`Failed to fetch: ${res.status}`);
+			posts = await res.json();
+		} catch (e: any) {
+			error = e.message;
+		} finally {
+			loading = false;
+		}
+	});
+</script>
+
+<!-- Post Grid -->
+<div class="post-grid">
+	{#each posts as post}
+		<div class="post-card">
+			<img src={post.cover_image} alt={post.title} />
+			<div class="content">
+				<h3>{post.title}</h3>
+				<p class="date">{new Date(post.timestamp).toLocaleDateString()}</p>
+				<p class="excerpt">{post.content}</p>
+			</div>
+		</div>
+	{/each}
+</div>
+
+<style>
+	.post-grid {
+		display: grid;
+		grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
+		gap: 24px;
+		padding: 20px 40px;
+	}
+
+	.post-card {
+		background: var(--color-white);
+		border: 2px solid var(--color-primary);
+		border-radius: 10px;
+		box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
+		transition:
+			transform 0.2s ease,
+			box-shadow 0.2s ease;
+		display: flex;
+		flex-direction: column;
+		overflow: hidden;
+	}
+	.post-card:hover {
+		transform: translateY(-4px);
+		box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
+	}
+	.post-card img {
+		width: 100%;
+		height: 180px;
+		object-fit: cover;
+	}
+	.post-card .content {
+		padding: 20px;
+	}
+	.post-card h3 {
+		margin: 0 0 8px;
+		color: var(--color-heading);
+		font-size: 1.3rem;
+	}
+	.post-card .date {
+		color: var(--color-muted);
+		font-size: 0.9rem;
+		margin-bottom: 12px;
+	}
+	.post-card .excerpt {
+		color: var(--color-subtext);
+		font-size: 1rem;
+	}
+	.date {
+		font-size: 0.9em;
+		opacity: 0.9;
+		margin-bottom: 10px;
+	}
+</style>
diff --git a/frontend/src/routes/+page.svelte b/frontend/src/routes/+page.svelte
index e4e8ce0..ead71de 100644
--- a/frontend/src/routes/+page.svelte
+++ b/frontend/src/routes/+page.svelte
@@ -1,6 +1,7 @@
 <script>
 	import { onMount, tick } from 'svelte';
 	import SideBar from '$lib/components/SideBar.svelte';
+	import PostGrid from '$lib/components/PostGrid.svelte';
 	import { fade } from 'svelte/transition';
 	import { cubicOut } from 'svelte/easing';
 
@@ -122,18 +123,7 @@
 			</div>
 
 			<!-- Blog Grid -->
-			<div class="blog-grid">
-				{#each blogs as blog}
-					<div class="blog-card">
-						<img src={blog.image} alt={blog.title} />
-						<div class="content">
-							<h3>{blog.title}</h3>
-							<p class="date">{blog.date}</p>
-							<p class="excerpt">{blog.excerpt}</p>
-						</div>
-					</div>
-				{/each}
-			</div>
+			<PostGrid />
 
 			<div id="projects-exit-anchor" class="exit-anchor snap-scroll-bottom"></div>
 		</section>
diff --git a/frontend/src/routes/PostEditor/+page.svelte b/frontend/src/routes/PostEditor/+page.svelte
new file mode 100644
index 0000000..21e0f23
--- /dev/null
+++ b/frontend/src/routes/PostEditor/+page.svelte
@@ -0,0 +1,5 @@
+<script lang="ts">
+	import PostEditor from '$lib/components/PostEditor.svelte';
+</script>
+
+<PostEditor />

From 6cd5910df0ce173440b5ef16d6c709f1859896fb Mon Sep 17 00:00:00 2001
From: micraj <mrajzer2004@gmail.com>
Date: Mon, 1 Sep 2025 19:06:56 +0100
Subject: [PATCH 10/11] Post routing

---
 backend/app/api/data.py                       | 10 +++-
 frontend/src/lib/components/PostEditor.svelte |  2 +-
 frontend/src/lib/components/PostGrid.svelte   |  8 ++--
 frontend/src/lib/components/PostList.svelte   |  2 +-
 frontend/src/routes/+page.svelte              | 48 -------------------
 frontend/src/routes/posts/[slug]/+page.svelte | 36 ++++++++++++++
 6 files changed, 51 insertions(+), 55 deletions(-)
 create mode 100644 frontend/src/routes/posts/[slug]/+page.svelte

diff --git a/backend/app/api/data.py b/backend/app/api/data.py
index 3084e24..bfb622e 100644
--- a/backend/app/api/data.py
+++ b/backend/app/api/data.py
@@ -50,7 +50,7 @@ def read_posts(db: SessionDep):
     return db.exec(select(BlogPost)).all()
 
 
-@router.get("/posts/{post_id}", response_model=BlogPost)
+@router.get("/posts/id/{post_id}", response_model=BlogPost)
 def read_post(post_id: int, db: SessionDep):
     post = db.get(BlogPost, post_id)
     if not post:
@@ -58,6 +58,14 @@ def read_post(post_id: int, db: SessionDep):
     return post
 
 
+@router.get("/posts/{post_slug}", response_model=BlogPost)
+def read_post(post_slug: str, db: SessionDep):
+    post = db.exec(select(BlogPost).where(BlogPost.slug == post_slug)).first()
+    if not post:
+        raise HTTPException(status_code=404, detail="Post not found")
+    return post
+
+
 @router.put("/posts/{post_id}", response_model=BlogPost)
 def update_post(
     post_id: int,
diff --git a/frontend/src/lib/components/PostEditor.svelte b/frontend/src/lib/components/PostEditor.svelte
index 3092ce6..cf32f15 100644
--- a/frontend/src/lib/components/PostEditor.svelte
+++ b/frontend/src/lib/components/PostEditor.svelte
@@ -11,7 +11,7 @@
 		console.log('Submitted Title:', title);
 		console.log('Submitted Cover Image:', cover_image_path);
 		console.log('Submitted Content:', content);
-		fetch('http://127.0.0.1:8000/posts/create_post', {
+		fetch('/api/posts/create_post', {
 			method: 'POST',
 			headers: {
 				'Content-type': 'application/json; charset=UTF-8'
diff --git a/frontend/src/lib/components/PostGrid.svelte b/frontend/src/lib/components/PostGrid.svelte
index 52a7f39..67cd498 100644
--- a/frontend/src/lib/components/PostGrid.svelte
+++ b/frontend/src/lib/components/PostGrid.svelte
@@ -16,7 +16,7 @@
 
 	onMount(async () => {
 		try {
-			const res = await fetch('http://127.0.0.1:8000/posts/');
+			const res = await fetch('/api/posts/');
 			if (!res.ok) throw new Error(`Failed to fetch: ${res.status}`);
 			posts = await res.json();
 		} catch (e: any) {
@@ -30,14 +30,14 @@
 <!-- Post Grid -->
 <div class="post-grid">
 	{#each posts as post}
-		<div class="post-card">
+		<a class="post-card" href={`/posts/${post.slug}`}>
 			<img src={post.cover_image} alt={post.title} />
 			<div class="content">
 				<h3>{post.title}</h3>
 				<p class="date">{new Date(post.timestamp).toLocaleDateString()}</p>
-				<p class="excerpt">{post.content}</p>
+				<!-- <p class="excerpt">{post.content}</p> -->
 			</div>
-		</div>
+		</a>
 	{/each}
 </div>
 
diff --git a/frontend/src/lib/components/PostList.svelte b/frontend/src/lib/components/PostList.svelte
index f733d58..4a7bc76 100644
--- a/frontend/src/lib/components/PostList.svelte
+++ b/frontend/src/lib/components/PostList.svelte
@@ -16,7 +16,7 @@
 
 	onMount(async () => {
 		try {
-			const res = await fetch('http://127.0.0.1:8000/posts/');
+			const res = await fetch('/api/posts/');
 			if (!res.ok) throw new Error(`Failed to fetch: ${res.status}`);
 
 			posts = await res.json();
diff --git a/frontend/src/routes/+page.svelte b/frontend/src/routes/+page.svelte
index ead71de..bf1782a 100644
--- a/frontend/src/routes/+page.svelte
+++ b/frontend/src/routes/+page.svelte
@@ -6,54 +6,6 @@
 	import { cubicOut } from 'svelte/easing';
 
 	const sections = ['welcome', 'projects', 'about'];
-
-	const blogs1 = [
-		{
-			title: 'Macropad',
-			date: '08/07/2025',
-			excerpt: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit.',
-			image: 'https://via.placeholder.com/100x80?text=Macro'
-		},
-		{
-			title: 'Self-hosted website',
-			date: '08/07/2025',
-			excerpt: 'Learn how I hosted my personal website using open-source tools.',
-			image: 'https://via.placeholder.com/100x80?text=Cloud'
-		}
-	];
-
-	const blogs = [
-		{
-			title: 'Macropad',
-			date: '08/07/2025',
-			excerpt: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit.',
-			image: 'https://via.placeholder.com/100x80?text=Macro'
-		},
-		{
-			title: 'Self-hosted website',
-			date: '08/07/2025',
-			excerpt: 'Learn how I hosted my personal website using open-source tools.',
-			image: 'https://via.placeholder.com/100x80?text=Cloud'
-		},
-		{
-			title: 'Macropad',
-			date: '08/07/2025',
-			excerpt: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit.',
-			image: 'https://via.placeholder.com/100x80?text=Macro'
-		},
-		{
-			title: 'Self-hosted website',
-			date: '08/07/2025',
-			excerpt: 'Learn how I hosted my personal website using open-source tools.',
-			image: 'https://via.placeholder.com/100x80?text=Cloud'
-		},
-		{
-			title: 'Macropad',
-			date: '08/07/2025',
-			excerpt: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit.',
-			image: 'https://via.placeholder.com/100x80?text=Macro'
-		}
-	];
 	let show = false;
 
 	onMount(() => {
diff --git a/frontend/src/routes/posts/[slug]/+page.svelte b/frontend/src/routes/posts/[slug]/+page.svelte
new file mode 100644
index 0000000..8b4213d
--- /dev/null
+++ b/frontend/src/routes/posts/[slug]/+page.svelte
@@ -0,0 +1,36 @@
+<script lang="ts">
+	import { page } from '$app/state';
+	import { onMount } from 'svelte';
+	type Post = {
+		id: number;
+		timestamp: number;
+		title: string;
+		slug: string;
+		content: string;
+		cover_image: string;
+	};
+
+	let post: Post | null = null;
+	let error: string | null = null;
+
+	onMount(async () => {
+		const slug = page.params.slug; // get the slug from URL
+		try {
+			const res = await fetch(`/api/posts/${slug}`);
+			if (!res.ok) throw new Error(`Failed to fetch: ${res.status}`);
+			post = await res.json();
+		} catch (e: any) {
+			error = e.message;
+		}
+	});
+</script>
+
+{#if post}
+	<h1>{post.title}</h1>
+	<img src={post.cover_image} alt={post.title} />
+	<p>{post.content}</p>
+{:else if error}
+	<p>{error}</p>
+{:else}
+	<p>Loading...</p>
+{/if}

From 573a7ccb860f10ce25f4988053afc693a458f098 Mon Sep 17 00:00:00 2001
From: micraj <mrajzer2004@gmail.com>
Date: Tue, 2 Sep 2025 22:19:22 +0100
Subject: [PATCH 11/11] rename post-editor site

---
 frontend/src/routes/{PostEditor => post-editor}/+page.svelte | 0
 1 file changed, 0 insertions(+), 0 deletions(-)
 rename frontend/src/routes/{PostEditor => post-editor}/+page.svelte (100%)

diff --git a/frontend/src/routes/PostEditor/+page.svelte b/frontend/src/routes/post-editor/+page.svelte
similarity index 100%
rename from frontend/src/routes/PostEditor/+page.svelte
rename to frontend/src/routes/post-editor/+page.svelte