Homepage UI Update

.gitignore

@@ -26,3 +26,6 @@ pnpm-debug.log*
 # pagefind
 
 public/pagefind
+
+pnpm-lock.yaml
+bun.lock

package.json

@@ -14,33 +14,33 @@
   },
   "dependencies": {
     "@astrojs/rss": "^4.0.14",
-    "@astrojs/sitemap": "^3.6.0",
+    "@astrojs/sitemap": "^3.6.1",
     "@resvg/resvg-js": "^2.6.2",
-    "@tailwindcss/vite": "^4.1.17",
-    "astro": "^5.16.3",
+    "@tailwindcss/vite": "^4.1.18",
+    "astro": "^5.16.8",
     "dayjs": "^1.11.19",
     "lodash.kebabcase": "^4.1.1",
     "remark-collapse": "^0.1.2",
     "remark-toc": "^9.0.0",
     "satori": "^0.15.2",
     "sharp": "^0.34.5",
-    "tailwindcss": "^4.1.17"
+    "tailwindcss": "^4.1.18"
   },
   "devDependencies": {
     "@astrojs/check": "^0.9.6",
     "@pagefind/default-ui": "^1.4.0",
-    "@shikijs/transformers": "^3.17.0",
+    "@shikijs/transformers": "^3.21.0",
     "@tailwindcss/typography": "^0.5.19",
     "@types/lodash.kebabcase": "^4.1.9",
-    "@typescript-eslint/parser": "^8.48.0",
-    "eslint": "^9.39.1",
+    "@typescript-eslint/parser": "^8.52.0",
+    "eslint": "^9.39.2",
     "eslint-plugin-astro": "^1.5.0",
     "globals": "^16.5.0",
     "pagefind": "^1.4.0",
-    "prettier": "^3.7.3",
+    "prettier": "^3.7.4",
     "prettier-plugin-astro": "^0.14.1",
     "prettier-plugin-tailwindcss": "^0.6.14",
     "typescript": "^5.9.3",
-    "typescript-eslint": "^8.48.0"
+    "typescript-eslint": "^8.52.0"
   }
 }

src/components/Footer.astro

@@ -17,9 +17,7 @@ const { noMarginTop = false } = Astro.props;
   >
     <Socials centered />
     <div class="my-2 flex flex-col items-center whitespace-nowrap sm:flex-row">
-      <span><a href={SITE.website} rel="noopener noreferrer" target="_blank"
-          >{SITE.author}</a
-        ></span>
+      <span>{SITE.author}</span>
     </div>
   </div>
 </footer>

src/components/Header.astro

@@ -37,17 +37,11 @@ const isActive = (path: string) => {
 	>
 		<div
 			id="top-nav-wrap"
-      class="relative flex w-full items-baseline justify-between bg-background p-4 sm:items-center sm:py-6"
+			class="relative flex w-full items-baseline justify-center bg-background p-4 sm:items-center sm:py-6"
 		>
-      <a
-        href="/"
-        class="absolute py-1 text-xl leading-8 font-semibold whitespace-nowrap sm:static sm:my-auto sm:text-2xl sm:leading-none"
-      >
-        {SITE.title}
-      </a>
 			<nav
 				id="nav-menu"
-        class="flex w-full flex-col items-center sm:ms-2 sm:flex-row sm:justify-end sm:space-x-4 sm:py-0"
+				class="flex w-full flex-col items-center sm:flex-row sm:justify-center sm:space-x-4 sm:py-0"
 			>
 				<button
 					id="menu-btn"
@@ -68,6 +62,11 @@ const isActive = (path: string) => {
 						"sm:mt-0 sm:flex sm:w-auto sm:gap-x-5 sm:gap-y-0",
 					]}
 				>
+					<li class="col-span-2">
+						<a href="/" class:list={{ "active-nav": isActive("/") }}>
+							Home
+						</a>
+					</li>
 					<li class="col-span-2">
 						<a href="/posts" class:list={{ "active-nav": isActive("/posts") }}>
 							Posts

src/pages/index.astro

@@ -23,8 +23,8 @@ const recentPosts = sortedPosts.filter(({ data }) => !data.featured);
 <Layout>
   <Header />
   <main id="main-content" data-layout="index">
-    <section id="hero" class="pt-8 pb-6">
-      <h1 class="my-4 inline-block text-4xl font-bold sm:my-8 sm:text-5xl">
+    <section id="hero" class="pt-2 pb-4">
+      <h1 class="my-2 inline-block text-4xl font-bold sm:my-4 sm:text-5xl">
         {SITE.title}
       </h1>
       <a