update homepage & format

hyperz111 · hyperz111 · commit 8f5350605412 · 2025-11-22T02:13:12.000+07:00
diff --git a/src/app.html b/src/app.html
@@ -6,8 +6,6 @@
 		%sveltekit.head%
 	</head>
 	<body data-sveltekit-preload-data="hover">
-		<div class="flex h-dvh flex-col">
-			%sveltekit.body%
-		</div>
+		<div class="flex h-dvh flex-col">%sveltekit.body%</div>
 	</body>
 </html>
diff --git a/src/components/Footer.svelte b/src/components/Footer.svelte
@@ -2,6 +2,6 @@
 	let { text } = $props();
 </script>
 
-<footer class="p-4 bg-neutral-900 text-white">
+<footer class="bg-neutral-900 p-4 text-white">
 	<p class="text-xs">{text}</p>
 </footer>
diff --git a/src/components/Navbar.svelte b/src/components/Navbar.svelte
@@ -8,7 +8,7 @@
 	const toggle = (state) => () => (opened = state);
 </script>
 
-<nav class="fixed top-0 left-0 flex w-dvw items-center justify-between p-4 bg-neutral-900 text-white">
+<nav class="fixed top-0 left-0 flex w-dvw items-center justify-between bg-neutral-900 p-4 text-white">
 	<a class="font-black" href="/">Hyper-Z11</a>
 	<button class="flex md:hidden" onclick={toggle(true)}><Icon icon="three-dots-vertical" class="h-5 w-5" /></button>
 	<ul class="hidden flex-row gap-4 md:flex">
@@ -30,7 +30,7 @@
 			out:fade></button>
 
 		<ul
-			class="fixed top-0 right-0 z-100 flex h-dvh flex-col gap-4 bg-neutral-900 text-white w-35 p-5"
+			class="fixed top-0 right-0 z-100 flex h-dvh w-35 flex-col gap-4 bg-neutral-900 p-5 text-white"
 			in:slide={{ axis: "x" }}
 			out:slide={{ axis: "x" }}>
 			<li class="flex items-center justify-between">
diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte
@@ -25,7 +25,7 @@
 
 <Navbar menu={navbarMenu} />
 
-<main class="grow p-3 pt-16 bg-neutral-800 text-white">
+<main class="grow bg-neutral-800 p-3 pt-16 text-white">
 	<div class="container mx-auto">
 		{@render children()}
 	</div>
diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
@@ -3,9 +3,6 @@
 	import Head from "$components/Head.svelte";
 	import projects from "./projects.json";
 
-	const bornYear = 2011;
-	let yearsOld = $state(new Date().getFullYear() - bornYear);
-
 	const profiles = [
 		{
 			name: "GitHub",
@@ -28,7 +25,7 @@
 <div class="flex flex-col gap-2 md:flex-row">
 	<div>
 		<img class="mx-auto max-h-fit max-w-3xs rounded border-4 border-neutral-600" src="/favicon.png" alt="Profile" />
-		<ul class="flex my-2 flex-row gap-2 mx-auto w-fit flex-wrap-reverse justify-center">
+		<ul class="mx-auto my-2 flex w-fit flex-row flex-wrap-reverse justify-center gap-2">
 			{#each profiles as { name, icon, url } (url)}
 				<li><a href={url} class="flex items-center gap-1"><Icon {icon} />{name}</a></li>
 			{/each}
@@ -38,10 +35,10 @@
 		<section id="about">
 			<h2>About</h2>
 			<p class="**:inline">
-				Hello, i'm <b>Hyper-Z11</b> (he/him). The {yearsOld} years old beginner programmer. My real name is
+				Hello, i'm <b>Hyper-Z11</b> (he/him). The beginner programmer. My real name is
 				<b>Firjatullah Zeroun</b>. I'm from
-				<a href="https://en.wikipedia.org/wiki/Indonesia"><b><Icon icon="pin-map" class="mx-1" />Indonesia</b></a>. I like coding as my
-				hobby and contributing to open source projects if i want.
+				<a href="https://en.wikipedia.org/wiki/Indonesia"><b><Icon icon="pin-map" class="mx-1" />Indonesia</b></a>. I like
+				coding as my hobby and contributing to open source projects if i want.
 			</p>
 		</section>
 
diff --git a/src/routes/blogs/+page.svelte b/src/routes/blogs/+page.svelte
@@ -20,7 +20,7 @@
 		<div class="py-2">
 			<h3 class="text-3xl font-extrabold">{title}</h3>
 			<p class="my-1 text-sm text-gray-400">{formatDate(date)}</p>
-			<p class="my-2 text-md">{description}</p>
+			<p class="text-md my-2">{description}</p>
 			<a class="text-blue-500 hover:text-blue-400" href="/blogs/{slug}">Read more</a>
 		</div>
 	{/each}
