From c86cc3cd714d3a7aca0cbb7d2e5d6c0b1b9bd653 Mon Sep 17 00:00:00 2001
From: sirlilpanda <me@sirlilpanda.studio>
Date: Fri, 27 Mar 2026 22:41:38 +1300
Subject: [PATCH] new style

---
 src/assets/git.svg                           |  10 +
 src/assets/gitea.svg                         |  11 +
 src/components/BaseHead.astro                |  12 +
 src/components/Footer.astro                  |  34 +-
 src/components/HamburgerIcon.astro           |  86 +++
 src/components/Header.astro                  | 600 +++++++++++++++++--
 src/components/HeaderLink.astro              |  36 +-
 src/components/Icon.astro                    |   4 +-
 src/components/skillCard.astro               | 124 ++++
 src/env.d.ts                                 |   9 +
 src/pages/about.astro                        |  64 --
 src/pages/{blog => articles}/[...slug].astro |   1 +
 src/pages/{blog => articles}/index.astro     |   2 +-
 src/pages/guestBook/index.astro              |  99 +++
 src/pages/index.astro                        | 191 ++++--
 src/pages/pictures/index.astro               |  99 +++
 src/styles/global.css                        |  52 +-
 17 files changed, 1192 insertions(+), 242 deletions(-)
 create mode 100644 src/assets/git.svg
 create mode 100644 src/assets/gitea.svg
 create mode 100644 src/components/HamburgerIcon.astro
 create mode 100644 src/components/skillCard.astro
 delete mode 100644 src/pages/about.astro
 rename src/pages/{blog => articles}/[...slug].astro (99%)
 rename src/pages/{blog => articles}/index.astro (98%)
 create mode 100644 src/pages/guestBook/index.astro
 create mode 100644 src/pages/pictures/index.astro

diff --git a/src/assets/git.svg b/src/assets/git.svg
new file mode 100644
index 0000000..2ca2f56
--- /dev/null
+++ b/src/assets/git.svg
@@ -0,0 +1,10 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="92pt" height="92pt" viewBox="0 0 92 92">
+    <defs>
+        <clipPath id="a">
+            <path d="M0 .113h91.887V92H0Zm0 0"/>
+        </clipPath>
+    </defs>
+    <g clip-path="url(#a)">
+        <path style="stroke:none;fill-rule:nonzero;fill:#fff;fill-opacity:1" d="M90.156 41.965 50.036 1.848a5.918 5.918 0 0 0-8.372 0l-8.328 8.332 10.566 10.566a7.03 7.03 0 0 1 7.23 1.684 7.034 7.034 0 0 1 1.669 7.277l10.187 10.184a7.028 7.028 0 0 1 7.278 1.672 7.04 7.04 0 0 1 0 9.957 7.05 7.05 0 0 1-9.965 0 7.044 7.044 0 0 1-1.528-7.66l-9.5-9.497V59.36a7.04 7.04 0 0 1 1.86 11.29 7.04 7.04 0 0 1-9.957 0 7.04 7.04 0 0 1 0-9.958 7.06 7.06 0 0 1 2.304-1.539V33.926a7.049 7.049 0 0 1-3.82-9.234L29.242 14.272 1.73 41.777a5.925 5.925 0 0 0 0 8.371L41.852 90.27a5.925 5.925 0 0 0 8.37 0l39.934-39.934a5.925 5.925 0 0 0 0-8.371"/>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/src/assets/gitea.svg b/src/assets/gitea.svg
new file mode 100644
index 0000000..cb5b6ee
--- /dev/null
+++ b/src/assets/gitea.svg
@@ -0,0 +1,11 @@
+<svg version="1.1" id="main_outline" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" style="enable-background:new 0 0 640 640;" xml:space="preserve" viewBox="5.67 143.05 628.65 387.55"> 
+    <g>
+        <path id="teabag" style="fill:#FFFFFF" d="M395.9,484.2l-126.9-61c-12.5-6-17.9-21.2-11.8-33.8l61-126.9c6-12.5,21.2-17.9,33.8-11.8   c17.2,8.3,27.1,13,27.1,13l-0.1-109.2l16.7-0.1l0.1,117.1c0,0,57.4,24.2,83.1,40.1c3.7,2.3,10.2,6.8,12.9,14.4   c2.1,6.1,2,13.1-1,19.3l-61,126.9C423.6,484.9,408.4,490.3,395.9,484.2z"></path>
+        <g>
+            <g>
+                <path style="fill:#609926" d="M622.7,149.8c-4.1-4.1-9.6-4-9.6-4s-117.2,6.6-177.9,8c-13.3,0.3-26.5,0.6-39.6,0.7c0,39.1,0,78.2,0,117.2     c-5.5-2.6-11.1-5.3-16.6-7.9c0-36.4-0.1-109.2-0.1-109.2c-29,0.4-89.2-2.2-89.2-2.2s-141.4-7.1-156.8-8.5     c-9.8-0.6-22.5-2.1-39,1.5c-8.7,1.8-33.5,7.4-53.8,26.9C-4.9,212.4,6.6,276.2,8,285.8c1.7,11.7,6.9,44.2,31.7,72.5     c45.8,56.1,144.4,54.8,144.4,54.8s12.1,28.9,30.6,55.5c25,33.1,50.7,58.9,75.7,62c63,0,188.9-0.1,188.9-0.1s12,0.1,28.3-10.3     c14-8.5,26.5-23.4,26.5-23.4s12.9-13.8,30.9-45.3c5.5-9.7,10.1-19.1,14.1-28c0,0,55.2-117.1,55.2-231.1     C633.2,157.9,624.7,151.8,622.7,149.8z M125.6,353.9c-25.9-8.5-36.9-18.7-36.9-18.7S69.6,321.8,60,295.4     c-16.5-44.2-1.4-71.2-1.4-71.2s8.4-22.5,38.5-30c13.8-3.7,31-3.1,31-3.1s7.1,59.4,15.7,94.2c7.2,29.2,24.8,77.7,24.8,77.7     S142.5,359.9,125.6,353.9z M425.9,461.5c0,0-6.1,14.5-19.6,15.4c-5.8,0.4-10.3-1.2-10.3-1.2s-0.3-0.1-5.3-2.1l-112.9-55     c0,0-10.9-5.7-12.8-15.6c-2.2-8.1,2.7-18.1,2.7-18.1L322,273c0,0,4.8-9.7,12.2-13c0.6-0.3,2.3-1,4.5-1.5c8.1-2.1,18,2.8,18,2.8     l110.7,53.7c0,0,12.6,5.7,15.3,16.2c1.9,7.4-0.5,14-1.8,17.2C474.6,363.8,425.9,461.5,425.9,461.5z"></path> 			
+                <path style="fill:#609926" d="M326.8,380.1c-8.2,0.1-15.4,5.8-17.3,13.8c-1.9,8,2,16.3,9.1,20c7.7,4,17.5,1.8,22.7-5.4     c5.1-7.1,4.3-16.9-1.8-23.1l24-49.1c1.5,0.1,3.7,0.2,6.2-0.5c4.1-0.9,7.1-3.6,7.1-3.6c4.2,1.8,8.6,3.8,13.2,6.1     c4.8,2.4,9.3,4.9,13.4,7.3c0.9,0.5,1.8,1.1,2.8,1.9c1.6,1.3,3.4,3.1,4.7,5.5c1.9,5.5-1.9,14.9-1.9,14.9     c-2.3,7.6-18.4,40.6-18.4,40.6c-8.1-0.2-15.3,5-17.7,12.5c-2.6,8.1,1.1,17.3,8.9,21.3c7.8,4,17.4,1.7,22.5-5.3     c5-6.8,4.6-16.3-1.1-22.6c1.9-3.7,3.7-7.4,5.6-11.3c5-10.4,13.5-30.4,13.5-30.4c0.9-1.7,5.7-10.3,2.7-21.3     c-2.5-11.4-12.6-16.7-12.6-16.7c-12.2-7.9-29.2-15.2-29.2-15.2s0-4.1-1.1-7.1c-1.1-3.1-2.8-5.1-3.9-6.3c4.7-9.7,9.4-19.3,14.1-29     c-4.1-2-8.1-4-12.2-6.1c-4.8,9.8-9.7,19.7-14.5,29.5c-6.7-0.1-12.9,3.5-16.1,9.4c-3.4,6.3-2.7,14.1,1.9,19.8     C343.2,346.5,335,363.3,326.8,380.1z"></path> 		
+            </g> 	
+        </g> 
+    </g> 
+</svg>
\ No newline at end of file
diff --git a/src/components/BaseHead.astro b/src/components/BaseHead.astro
index 4a4384c..3ef4679 100644
--- a/src/components/BaseHead.astro
+++ b/src/components/BaseHead.astro
@@ -15,6 +15,7 @@ interface Props {
 const canonicalURL = new URL(Astro.url.pathname, Astro.site);
 
 const { title, description, image = FallbackImage } = Astro.props;
+
 ---
 
 <!-- Global Metadata -->
@@ -56,3 +57,14 @@ const { title, description, image = FallbackImage } = Astro.props;
 <meta property="twitter:title" content={title} />
 <meta property="twitter:description" content={description} />
 <meta property="twitter:image" content={new URL(image.src, Astro.url)} />
+<script is:inline>
+	
+	if (sessionStorage.getItem("theme")) {
+		document.documentElement.setAttribute("data-theme", sessionStorage.getItem("theme"));
+	} else {
+		sessionStorage.setItem("theme", "light")
+		document.documentElement.setAttribute("data-theme", "light");
+	} 
+		
+
+</script>
\ No newline at end of file
diff --git a/src/components/Footer.astro b/src/components/Footer.astro
index 96c2fce..1aee648 100644
--- a/src/components/Footer.astro
+++ b/src/components/Footer.astro
@@ -3,33 +3,10 @@ const today = new Date();
 ---
 
 <footer>
-	&copy; {today.getFullYear()} Your name here. All rights reserved.
+	&copy; {today.getFullYear()} sirlilpanda. All rights reserved.
 	<div class="social-links">
-		<a href="https://m.webtoo.ls/@astro" target="_blank">
-			<span class="sr-only">Follow Astro on Mastodon</span>
-			<svg
-				viewBox="0 0 16 16"
-				aria-hidden="true"
-				width="32"
-				height="32"
-				astro-icon="social/mastodon"
-				><path
-					fill="currentColor"
-					d="M11.19 12.195c2.016-.24 3.77-1.475 3.99-2.603.348-1.778.32-4.339.32-4.339 0-3.47-2.286-4.488-2.286-4.488C12.062.238 10.083.017 8.027 0h-.05C5.92.017 3.942.238 2.79.765c0 0-2.285 1.017-2.285 4.488l-.002.662c-.004.64-.007 1.35.011 2.091.083 3.394.626 6.74 3.78 7.57 1.454.383 2.703.463 3.709.408 1.823-.1 2.847-.647 2.847-.647l-.06-1.317s-1.303.41-2.767.36c-1.45-.05-2.98-.156-3.215-1.928a3.614 3.614 0 0 1-.033-.496s1.424.346 3.228.428c1.103.05 2.137-.064 3.188-.189zm1.613-2.47H11.13v-4.08c0-.859-.364-1.295-1.091-1.295-.804 0-1.207.517-1.207 1.541v2.233H7.168V5.89c0-1.024-.403-1.541-1.207-1.541-.727 0-1.091.436-1.091 1.296v4.079H3.197V5.522c0-.859.22-1.541.66-2.046.456-.505 1.052-.764 1.793-.764.856 0 1.504.328 1.933.983L8 4.39l.417-.695c.429-.655 1.077-.983 1.934-.983.74 0 1.336.259 1.791.764.442.505.661 1.187.661 2.046v4.203z"
-				></path></svg
-			>
-		</a>
-		<a href="https://twitter.com/astrodotbuild" target="_blank">
-			<span class="sr-only">Follow Astro on Twitter</span>
-			<svg viewBox="0 0 16 16" aria-hidden="true" width="32" height="32" astro-icon="social/twitter"
-				><path
-					fill="currentColor"
-					d="M5.026 15c6.038 0 9.341-5.003 9.341-9.334 0-.14 0-.282-.006-.422A6.685 6.685 0 0 0 16 3.542a6.658 6.658 0 0 1-1.889.518 3.301 3.301 0 0 0 1.447-1.817 6.533 6.533 0 0 1-2.087.793A3.286 3.286 0 0 0 7.875 6.03a9.325 9.325 0 0 1-6.767-3.429 3.289 3.289 0 0 0 1.018 4.382A3.323 3.323 0 0 1 .64 6.575v.045a3.288 3.288 0 0 0 2.632 3.218 3.203 3.203 0 0 1-.865.115 3.23 3.23 0 0 1-.614-.057 3.283 3.283 0 0 0 3.067 2.277A6.588 6.588 0 0 1 .78 13.58a6.32 6.32 0 0 1-.78-.045A9.344 9.344 0 0 0 5.026 15z"
-				></path></svg
-			>
-		</a>
-		<a href="https://github.com/withastro/astro" target="_blank">
-			<span class="sr-only">Go to Astro's GitHub repo</span>
+		<a href="https://github.com/sirlilpanda" target="_blank">
+			<span class="sr-only">Go to my Github i barely use it anymore but have fun</span>
 			<svg viewBox="0 0 16 16" aria-hidden="true" width="32" height="32" astro-icon="social/github"
 				><path
 					fill="currentColor"
@@ -42,9 +19,9 @@ const today = new Date();
 <style>
 	footer {
 		padding: 2em 1em 6em 1em;
-		background: linear-gradient(var(--gray-gradient)) no-repeat;
-		color: rgb(var(--gray));
 		text-align: center;
+		position: sticky;
+		top: 0;
 	}
 	.social-links {
 		display: flex;
@@ -52,6 +29,7 @@ const today = new Date();
 		gap: 1em;
 		margin-top: 1em;
 	}
+
 	.social-links a {
 		text-decoration: none;
 		color: rgb(var(--gray));
diff --git a/src/components/HamburgerIcon.astro b/src/components/HamburgerIcon.astro
new file mode 100644
index 0000000..825e12f
--- /dev/null
+++ b/src/components/HamburgerIcon.astro
@@ -0,0 +1,86 @@
+---
+// code taken from here
+// thank you Author: Mikael Ainalem
+// https://www.sliderrevolution.com/resources/css-hamburger-menu/
+
+interface Props {
+    width: number,
+    height: number,
+}
+
+const { width, height } = Astro.props;
+---
+
+<!-- thank you Mikael Ainalem for this really cool hamburger menu -->
+<svg class="ham hamRotate ham8" viewBox="0 0 100 100" width={width} height={height} onclick="this.classList.toggle('active')">
+    <path
+          class="line top"
+          d="m 30,33 h 40 c 3.722839,0 7.5,3.126468 7.5,8.578427 0,5.451959 -2.727029,8.421573 -7.5,8.421573 h -20" />
+    <path
+          class="line middle"
+          d="m 30,50 h 40" />
+    <path
+          class="line bottom"
+          d="m 70,67 h -40 c 0,0 -7.5,-0.802118 -7.5,-8.365747 0,-7.563629 7.5,-8.634253 7.5,-8.634253 h 20" />
+</svg>
+
+
+<style>
+    .ham {
+        cursor: pointer;
+        -webkit-tap-highlight-color: transparent;
+        transition: transform 400ms;
+        -moz-user-select: none;
+        -webkit-user-select: none;
+        -ms-user-select: none;
+        user-select: none;
+    }
+    
+    .hamRotate.active {
+        transform: rotate(45deg);
+    }
+    
+    .ham8 .top {
+        stroke-dasharray: 40 160;
+    }
+    
+    .ham8 .middle {
+        stroke-dasharray: 40 142;
+        transform-origin: 50%;
+        transition: transform 400ms, stroke 500ms ease;
+    }
+    
+    .ham8 .bottom {
+        stroke-dasharray: 40 85;
+        transform-origin: 50%;
+        transition: transform 400ms, stroke-dashoffset 400ms, stroke 500ms ease;
+    }
+    
+    .ham8.active .top {
+        stroke-dashoffset: -64px;
+        stroke: var(--accent);
+
+    }
+    
+    .ham8.active .middle {
+        transform: rotate(90deg);
+        stroke: var(--accent);
+
+    }
+
+    .ham8.active .bottom {
+        stroke-dashoffset: -64px;
+        stroke: var(--accent);
+    }
+
+    .line {
+        fill:none;
+        transition: 
+        stroke-dasharray 400ms, 
+        stroke-dashoffset 400ms,
+        stroke 500ms ease;
+        stroke: var(--text-color);
+        stroke-width: 4;
+        stroke-linecap:round;
+    }
+</style>
\ No newline at end of file
diff --git a/src/components/Header.astro b/src/components/Header.astro
index d731f48..1051603 100644
--- a/src/components/Header.astro
+++ b/src/components/Header.astro
@@ -1,88 +1,562 @@
 ---
 import { SITE_TITLE } from '../consts';
 import HeaderLink from './HeaderLink.astro';
+import Icon from './Icon.astro'
+import HambugerIcon from './HamburgerIcon.astro'
 ---
 
-<header>
-	<nav>
-		<h2><a href="/">{SITE_TITLE}</a></h2>
-		<div class="internal-links">
-			<HeaderLink href="/">Home</HeaderLink>
-			<HeaderLink href="/blog">Blog</HeaderLink>
-			<HeaderLink href="/about">About</HeaderLink>
+
+<header id="header-bar">
+	<div class="background">
+		<div class="window-frame-wrapper", id="window-frame-wrapper">
+			<div class="frame-top", id="frame-top"/>
+			<div class="frame-bottom", id="frame-bottom"/>
 		</div>
-		<div class="social-links">
-			<a href="https://m.webtoo.ls/@astro" target="_blank">
-				<span class="sr-only">Follow Astro on Mastodon</span>
-				<svg viewBox="0 0 16 16" aria-hidden="true" width="32" height="32"
-					><path
-						fill="currentColor"
-						d="M11.19 12.195c2.016-.24 3.77-1.475 3.99-2.603.348-1.778.32-4.339.32-4.339 0-3.47-2.286-4.488-2.286-4.488C12.062.238 10.083.017 8.027 0h-.05C5.92.017 3.942.238 2.79.765c0 0-2.285 1.017-2.285 4.488l-.002.662c-.004.64-.007 1.35.011 2.091.083 3.394.626 6.74 3.78 7.57 1.454.383 2.703.463 3.709.408 1.823-.1 2.847-.647 2.847-.647l-.06-1.317s-1.303.41-2.767.36c-1.45-.05-2.98-.156-3.215-1.928a3.614 3.614 0 0 1-.033-.496s1.424.346 3.228.428c1.103.05 2.137-.064 3.188-.189zm1.613-2.47H11.13v-4.08c0-.859-.364-1.295-1.091-1.295-.804 0-1.207.517-1.207 1.541v2.233H7.168V5.89c0-1.024-.403-1.541-1.207-1.541-.727 0-1.091.436-1.091 1.296v4.079H3.197V5.522c0-.859.22-1.541.66-2.046.456-.505 1.052-.764 1.793-.764.856 0 1.504.328 1.933.983L8 4.39l.417-.695c.429-.655 1.077-.983 1.934-.983.74 0 1.336.259 1.791.764.442.505.661 1.187.661 2.046v4.203z"
-					></path></svg
-				>
-			</a>
-			<a href="https://twitter.com/astrodotbuild" target="_blank">
-				<span class="sr-only">Follow Astro on Twitter</span>
-				<svg viewBox="0 0 16 16" aria-hidden="true" width="32" height="32"
-					><path
-						fill="currentColor"
-						d="M5.026 15c6.038 0 9.341-5.003 9.341-9.334 0-.14 0-.282-.006-.422A6.685 6.685 0 0 0 16 3.542a6.658 6.658 0 0 1-1.889.518 3.301 3.301 0 0 0 1.447-1.817 6.533 6.533 0 0 1-2.087.793A3.286 3.286 0 0 0 7.875 6.03a9.325 9.325 0 0 1-6.767-3.429 3.289 3.289 0 0 0 1.018 4.382A3.323 3.323 0 0 1 .64 6.575v.045a3.288 3.288 0 0 0 2.632 3.218 3.203 3.203 0 0 1-.865.115 3.23 3.23 0 0 1-.614-.057 3.283 3.283 0 0 0 3.067 2.277A6.588 6.588 0 0 1 .78 13.58a6.32 6.32 0 0 1-.78-.045A9.344 9.344 0 0 0 5.026 15z"
-					></path></svg
-				>
-			</a>
-			<a href="https://github.com/withastro/astro" target="_blank">
-				<span class="sr-only">Go to Astro's GitHub repo</span>
-				<svg viewBox="0 0 16 16" aria-hidden="true" width="32" height="32"
-					><path
-						fill="currentColor"
-						d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.012 8.012 0 0 0 16 8c0-4.42-3.58-8-8-8z"
-					></path></svg
-				>
+		<div class="sky", id="sky"/>
+	</div>
+	<div class="header-bar-wrapper">
+		<div class="">
+			<a href="/" class="header-icon">
+				<Icon height={72} width={72} />
 			</a>
+			<div class="theme-toggle" id="theme-toggle" onclick="handle_theme_toggle()">
+				<div class="clock-face">
+					<div class="clock-display" id="clock-display">12 : 23</div>
+				</div>
+			</div>
 		</div>
-	</nav>
+		<div class="hamburger-menu-button" onclick="handle_nav()" id="hamburger-menu-button">
+			<HambugerIcon height={52} width={52} />
+		</div>
+
+		<nav id="nav">
+			<HeaderLink href="/">Home()</HeaderLink>
+			<HeaderLink href="/articles">Articles()</HeaderLink>
+			<HeaderLink href="/guestBook">guestBook()</HeaderLink>
+			<HeaderLink href="/pictures">pictures()</HeaderLink>
+		</nav>
+	</div>
 </header>
-<style>
-	header {
-		margin: 0;
-		padding: 0 1em;
-		background-color: rgba(rgb(var(--background)), 0.2);
-		/* background: var(--background-colour); */
-		backdrop-filter: blur(5px);
-		box-shadow: var(--box-shadow);
-		position: sticky;
+<ul>
+	<li>
+		<a href="https://onio.neocities.org" title="Visit Onio Café">
+			<img src="https://onio.neocities.org/thebutton.gif" alt="Come Chat With Us!" width="88" height="31">
+		</a>
+	</li>
+</ul>
+
+<script is:inline>
+	/* Hamburger button management */
+    let opened = false;
+
+    /* Set the width of the side navigation to 250px */
+    function handle_nav() {
+        if (opened === true) {
+            document.getElementById("nav").classList.remove("active");
+            console.log("closed");
+            opened = false;
+        } else {
+            document.getElementById("nav").classList.add("active");
+            document.getElementById("hamburger-menu-button").focus();
+            console.log("opened");
+            opened = true;
+        }
+    }
+
+	const slat_spaceing = 180;
+	let number_of_slats = 0;
+	function position_window_frame() {
+		const header = document.getElementById("header-bar");
+		const window_frame = document.getElementById("window-frame-wrapper");
+		const header_bounding_box = header.getBoundingClientRect();
+		console.log(header_bounding_box)
+		const frame_bottom = document.getElementById("frame-bottom");
+		const frame_bottom_bounding_box = frame_bottom.getBoundingClientRect();;
+		const em = parseFloat(getComputedStyle(header).fontSize);
+ 
+		number_of_slats = Math.ceil(header_bounding_box.width / slat_spaceing);
+		console.log(`number of slats ${number_of_slats}`)
+
+		for (let i = 0; i < number_of_slats; i++) {
+			const slat = document.createElement('div');
+			place_window_slats(slat, i, header_bounding_box, em)
+			window_frame.appendChild(slat)
+		}
+
+		frame_bottom.style.top = `${header_bounding_box.bottom - frame_bottom_bounding_box.height}px`;
 	}
-	h2 {
-		margin: 0;
-		font-size: 1em;
+	position_window_frame()
+	function place_window_slats(slat, i, bound_box, em) {
+		// console.log(`i ${i}`)
+		// console.log(slat)
+		slat.className = "slat"
+		slat.style.position = "absolute";
+		slat.style.height = `${bound_box.height}px`;
+		slat.style.width = `${em*0.5}px`; 
+		slat.style.backgroundColor = "var(--frame-colour)"
+		slat.style.zIndex = "1"
+		slat.style.left = `${slat_spaceing * i}px`
 	}
 
-	h2 a,
-	h2 a.active {
-		text-decoration: none;
+	function remove_slats() {
+		const window_frame = document.getElementById("window-frame-wrapper");
+		
+		for (let child of window_frame.children) {
+			if (child.className == "slat") {
+				child.remove()
+			}
+		}
 	}
-	nav {
+
+	const number_of_stars = 300;
+	function fill_stars() {
+
+		// get the size of the header
+		const header = document.getElementById("header-bar");
+
+		// header.style.background = "red";
+		const header_bounding_box = header.getBoundingClientRect();
+		console.log(header_bounding_box.width)
+		console.log(header_bounding_box.width/2)
+		let stars = document.getElementById("sky")
+		stars.setAttribute("width", header_bounding_box.width);
+		stars.setAttribute("height", header_bounding_box.height);
+	
+		for (let i = 0; i < number_of_stars; ++i) {
+			const star = document.createElement('div');
+			place_star(star, header_bounding_box)
+			console.log(star.style.top)
+			stars.appendChild(star)
+		}
+	}
+	fill_stars()
+
+	function place_star(star, header_bounding_box) {
+		star.classList.add('star');
+		star.style.background = "white"
+		
+		const star_size = Math.random() * 2 + 1;
+		star.className = 'star';
+		star.style.position = "absolute";
+		star.style.width = `${star_size}px`
+		star.style.height = `${star_size}px`
+		// multiply by 3
+		const center_offset = Math.random() * header_bounding_box.width/2;
+		star.style.left = `${header_bounding_box.width/2}px`
+		star.style.top = `${header_bounding_box.height}px`
+		star.style.boxShadow = "0px 0px 14px white"
+		star.style.borderRadius = "100%"
+		star.style.transition = "250ms"
+		star.style.animationDuration = `${Math.random() * 20 + 10}s`;
+
+		const ani_duration = (Math.random() * 30000 + 30000);
+		const ani_start_time = ani_duration * Math.random(); 
+
+		const orbit_keyframes = new KeyframeEffect(
+			star,
+			[
+				{transform : `rotate(0deg) translateX(${center_offset}px) rotate(0deg)`},
+				{transform : `rotate(-180deg) translateX(${center_offset}px) rotate(0deg)`}
+			],
+			{
+				duration : ani_duration, // in ms
+				iterations : "Infinity",
+				iterationStart : ani_start_time
+			}
+		)
+
+		const twinkle_keyframes = new KeyframeEffect(
+			star,
+			[
+				{opacity: 0.8},
+				{opacity: 0.3},
+				{opacity: 0.8}
+			],
+			{
+				duration : ani_duration, // in ms
+				iterations : "Infinity",
+				iterationStart : ani_start_time
+			}
+		)
+
+		const orbit_animation = new Animation(orbit_keyframes, document.timeline);
+		const twinkle_animation = new Animation(twinkle_keyframes, document.timeline);
+		orbit_animation.play()
+		twinkle_animation.play()
+	}
+
+	function hide_stars() {
+		let stars = document.getElementById("sky")
+		
+		for (let child of stars.children) {
+			if (child.className == "star") {
+				child.style.display = "none";
+			}
+		}
+	}
+
+	function show_stars() {
+		let stars = document.getElementById("sky")
+		
+		for (let child of stars.children) {
+			if (child.className == "star") {
+				child.style.display = "unset";
+			}
+		}
+	}
+
+
+	function replace_stars() {
+	let stars = document.getElementById("sky")
+		const header = document.getElementById("header-bar");
+		const header_bounding_box = header.getBoundingClientRect();
+
+		for (let child of stars.children) {
+			if (child.className == "star") {
+				place_star(child, header_bounding_box)
+			}
+		}
+	}
+
+	function place_cloud(cloud, bound_box) {
+		cloud.className = "cloud"
+		
+		// cloud.style.left = `${Math.random() * bound_box.width}px`
+		cloud.style.top = `${Math.random() * bound_box.height}px`
+		cloud.style.position = "absolute";
+
+		// random circles around the top half of the cloud
+		const number_of_parts = Math.random() * 8 + 3;
+		for (let i = 0; i < number_of_parts; i++) {
+			const fluff = document.createElement('div')
+			fluff.style.backgroundColor = "white"
+			fluff.style.position = "absolute";
+
+			fluff.style.borderRadius = "100%"
+			const fluff_size = Math.random() * 75 + 20
+			
+			fluff.style.width = `${fluff_size}px`
+			fluff.style.height = `${fluff_size}px`
+
+			const angle = Math.random() * 180
+			const rad = Math.random() * 20 + 3
+			fluff.style.top = `${rad*Math.sin(angle)}px`
+			fluff.style.left = `${rad*Math.cos(angle)}px`
+			fluff.style.boxShadow = "0px 0px 5px white"
+
+			const ani_duration = (Math.random() * 15000 + 5000);
+			const ani_start_time = ani_duration * Math.random();
+
+			const wiggle_keyframes = new KeyframeEffect(
+				fluff,
+				[
+					{transform : `translateX(0px) translateY(0px)`},
+					{transform : `translateX(${Math.random() * 5 + 3}px) translateY(${Math.random() * 5 + 2}px)`},
+					{transform : `translateX(0px) translateY(0px)`}
+				],
+				{
+					duration : ani_duration, // in ms
+					iterations : "Infinity",
+					iterationStart : ani_start_time
+				}
+			)
+
+			const wiggle_animation = new Animation(wiggle_keyframes, document.timeline);
+			wiggle_animation.play()
+
+			cloud.appendChild(fluff);
+		}
+		const travel_ani_duration = (Math.random() * 300000 + 100000);
+		const travel_ani_start_time = travel_ani_duration * Math.random();
+		const travel_keyframes = new KeyframeEffect(
+			cloud,
+			[
+				{transform : `translateX(-100px) translateY(-100px)`},
+				{transform : `translateX(${bound_box.width}px) translateY(${Math.random() * bound_box.height}px)`}
+			],
+			{
+				duration : travel_ani_duration, // in ms
+				iterations : "Infinity",
+				iterationStart : travel_ani_start_time
+			}
+		)
+
+			const travel_animation = new Animation(travel_keyframes, document.timeline);
+			travel_animation.play()
+	}
+
+	function hide_cloud() {
+		let sky = document.getElementById("sky")
+	
+		for (let child of sky.children) {
+			if (child.className == "cloud") {
+				child.style.display = "none";
+			}
+		}
+	}
+	function show_cloud() {
+		let sky = document.getElementById("sky")
+		
+		for (let child of sky.children) {
+			if (child.className == "cloud") {
+				child.style.display = "unset";
+			}
+		}
+	}
+
+	const number_of_clouds = 20;
+	function fill_sky() {
+		// get the size of the header
+		const header = document.getElementById("header-bar");
+		const header_bounding_box = header.getBoundingClientRect();
+		console.log(header_bounding_box)
+		let sky = document.getElementById("sky")
+		sky.setAttribute("width", header_bounding_box.width);
+		sky.setAttribute("height", header_bounding_box.height);
+
+		for (let i = 0; i < number_of_clouds; ++i) {
+			const cloud = document.createElement('div');
+			place_cloud(cloud, header_bounding_box)
+			sky.appendChild(cloud)
+		}
+	}
+	fill_sky()
+	
+	function light_mode() {
+		hide_stars()
+		show_cloud()
+	}
+
+	function dark_mode() {
+		show_stars()
+		hide_cloud()
+	}
+
+
+	let theme = document.documentElement.getAttribute("data-theme");
+
+	function handle_theme_toggle() {
+		console.log("clicked")
+		if (theme === "dark") {
+			theme = "light"
+			light_mode()
+			document.documentElement.setAttribute("data-theme", "light");
+			sessionStorage.setItem("theme", "light");
+			console.log("light mode")
+			return;
+		}
+		if (theme === "light") {
+			theme = "dark"
+			dark_mode()
+			document.documentElement.setAttribute("data-theme", "dark");
+			sessionStorage.setItem("theme", "dark");
+			console.log("dark mode")
+			return;
+		}
+	}
+	console.log(`theme : ${theme}`)
+	if (theme === "dark") {
+		dark_mode()
+		theme = "dark";
+	} else {
+		light_mode()
+		theme = "light";
+	}
+
+
+	addEventListener("resize", (event) => {
+		remove_slats()
+		position_window_frame()
+
+		replace_stars()
+	})
+
+	function update_clock() {
+		let display = document.getElementById("clock-display");
+		let current_time = new Date()
+		display.innerHTML = `${current_time.getHours()} : ${current_time.getMinutes().toString().padStart(2, "0")}`
+	}
+	update_clock()
+
+	window.setInterval(update_clock, 1000)
+</script>
+
+<style>
+
+	:root {
+		--header-height: 4em;
+	}
+
+	.theme-toggle {
+		position: absolute;
+		transform: translateY(-0.5em) translateX(0.5em);
+		z-index: 99;
+	}
+
+	.theme-toggle:hover {
+		cursor: pointer;
+
+	}
+
+	.clock-face {
 		display: flex;
+		flex-direction: row;;
+		padding: 0.2em;
+		border-radius: 20% 20% 0% 0%;
+		background-color: #202020;
+	}
+
+	.clock-display {
+		border-radius: 20%;
+		background-color: #101010;
+		padding-left: 0.1em;
+		padding-right: 0.1em;
+		padding-top: 0.1em;
+		color: red;
+		text-shadow: 0px 0px 5px red;
+	}
+
+	.slat {
+		background-color: var(--frame-colour);
+	}
+	
+	.frame-top {
+		position: absolute;
+		height: 0.5em;
+		width: 100%;
+		background-color: var(--frame-colour);
+		z-index: 4;
+	}
+	
+	.frame-bottom {
+		position: absolute;
+		height: 0.5em;
+		width: 100%;
+		background-color: var(--frame-colour);
+		z-index: 1;
+	}
+
+	.sky {
+		position: absolute;
+		width: 100vw;
+		min-height: 10em;
+		overflow: hidden;
+	}
+
+	.background {
+		/* position: absolute; */
+		/* clip-path: rect(0% 100% 100% 0%); */
+		width: 100vw;
+		min-height: 10em;
+		transition: background 250ms;
+		background: var(--sky-colour);
+	}
+
+	header {
+		min-height: 10em;
+		width: 100vw;
+		/* background: linear-gradient(360deg,rgba(8, 0, 26, 1) 0%, rgba(7, 0, 20, 1) 37%, rgba(0, 0, 0, 1) 100%); */
+	}
+
+	.header-bar-wrapper {
+		z-index: 99;
+		min-height: 10em;
+		position: absolute;
+		transform: translateY(-10em);
+		width: 100vw;
+		display: flex;
+		flex-direction: row;
 		align-items: center;
 		justify-content: space-between;
+		/* justify-content: space-evenly; */
+		height: var(--header-height);
+		margin: 0;
+		box-shadow: 0 2px 8px rgba(var(--text-color), 5%);
+		transition: 100ms;
 	}
-	nav a {
-		padding: 1em 0.5em;
-		color: var(--black);
-		border-bottom: 4px solid transparent;
-		text-decoration: none;
+
+
+	nav, nav.active {
+		width: auto;
 	}
-	nav a.active {
-		text-decoration: none;
-		border-bottom-color: var(--accent);
+	nav {
+		padding-right: 2em;
 	}
-	.social-links,
-	.social-links a {
+
+	.header-icon {
+		margin-left: 1em;
+		z-index: 4;
+		transform: rotateZ(-4deg);
+		background-color: rgba(250, 235, 215, 0.2);
 		display: flex;
+		align-items: center;
+		margin-top: 1.5em;
+		margin-bottom: 1.5em;
+		transition: 150ms;
 	}
+
+	.header-icon:hover {
+		transform: translateY(-0.2em) rotateZ(-2deg);
+		box-shadow: 19px 29px 70px -19px rgba(80,80,80,0.75);
+	}
+
+	.hamburger-menu-button {
+		display: none;
+	}
+
+	.Icon {
+		background-color: antiquewhite;
+	}
+
 	@media (max-width: 720px) {
+
+
+		.theme-toggle {
+			position: absolute;
+			transform: translateY(-0.72em) translateX(0.5em);
+			z-index: 99;
+		}
+		/* Mobile styles */
+		
+
+		.hamburger-menu-button {
+			float: right;
+			max-height: 64px;
+			fill: var(--text-color);
+			color: var(--text-color);
+			display: flex;
+			align-items: center;
+			transition: 250ms;
+			margin-top: 1.5em;
+			margin-bottom: 1.5em;
+			z-index: 89;
+			display: unset;
+		}
+
+		nav {
+			height: 100%;
+			width: 0; 
+			top: 0;
+			right: 0;
+			position: fixed;
+			max-width: 100%;
+			z-index: 88; 
+			background-color: rgb(from var(--header-color) r g b / 0.4);
+        	backdrop-filter: blur(16px);
+			overflow-x: hidden; 
+			padding-top: var(--header-height); 
+			padding-bottom: 100%;
+			padding-right: 0em;
+			transition: 250ms; 
+			transition-timing-function: cubic-bezier(0.445, 0.05, 0.55, 0.95);
+		}
+
+		nav.active {
+			width: 250px;
+		}
+
 		.social-links {
 			display: none;
 		}
-	}
-</style>
+	}	
+</style>
\ No newline at end of file
diff --git a/src/components/HeaderLink.astro b/src/components/HeaderLink.astro
index 41da846..bef598d 100644
--- a/src/components/HeaderLink.astro
+++ b/src/components/HeaderLink.astro
@@ -16,9 +16,43 @@ const isActive = href === pathname || href === '/' + (subpath?.[0] || '');
 	a {
 		display: inline-block;
 		text-decoration: none;
+		color: var(--text-color);
+        transition: 250ms;
+
+		padding: 0.5em 0.5em;
+        color: var(--text-color);
+        border-top: 3px solid transparent;
+        border-bottom: 3px solid transparent;
+        text-decoration: none;
 	}
+
 	a.active {
 		font-weight: bolder;
-		text-decoration: underline;
+		text-decoration: none;
+        border-bottom-color: var(--accent);
+	}
+
+    a:hover {
+        color: var(--accent);
+        transition: 250ms;	
+    }
+
+
+	@media (max-width: 720px) {
+
+		a {
+			padding-left: 1em;
+        	display: block;	
+			padding: 0.5em 0.5em;
+			color: var(--text-color);
+			border-top: 3px solid transparent;
+			border-bottom: 3px solid transparent;
+			text-decoration: none;
+		}
+
+		a.active {
+			text-decoration: none;
+			border-bottom-color: var(--accent);
+		}
 	}
 </style>
diff --git a/src/components/Icon.astro b/src/components/Icon.astro
index 0f6e84f..114aa81 100644
--- a/src/components/Icon.astro
+++ b/src/components/Icon.astro
@@ -33,7 +33,7 @@ const { height = 36, width = 36 } = Astro.props;
 </svg>
 
 <style>
-	svg {
+	/* svg {
 		border: 1px solid purple;
-	}
+	} */
 </style>
\ No newline at end of file
diff --git a/src/components/skillCard.astro b/src/components/skillCard.astro
new file mode 100644
index 0000000..647aaf0
--- /dev/null
+++ b/src/components/skillCard.astro
@@ -0,0 +1,124 @@
+---
+// Import the global.css file here so that it is included on
+// all pages through the use of the <BaseHead /> component.
+
+interface Props {
+	title: string;
+	description: string;
+	image?: string;
+    skill_level: string;
+}
+
+const { title, description, image, skill_level, } = Astro.props;
+---
+
+
+
+<div class="box">
+    <div class="grid_wrapper"> 
+        <!-- 2,3 -->
+        <img src={image} alt="">
+        <div class="title">{title}</div>
+        <div class="skill_level">{skill_level}</div>
+        <div class="description"><slot /></div>
+    </div>
+</div>
+
+
+
+<style>
+
+    .box > .grid_wrapper {
+        display: grid;
+        grid-template-columns: auto auto auto;
+        gap: 0px;
+    }
+
+    .box {
+        margin-top: 2em;
+        background-color: var(--skill-card-colour);
+        width: 80%;
+        margin-right: auto;
+        margin-left: auto;
+        border-radius: 3em;
+        border-width: 1em;
+        border-color: var(--skill-card-colour);
+		transition-duration: 400ms;
+        padding-right: 0.5em;
+    }
+
+    .box:hover {
+        box-shadow: 10px 10px 8px #000000;
+        transform: translate(0, -0.5em);
+    }
+
+    @keyframes exp-bar {
+        0%   {background: linear-gradient(#e66465, #9198e5)}
+        100%   {background: linear-gradient(#9198e5, #e66465)}
+    }
+
+    @keyframes gradient {
+        0% {
+            background-position: 0% 50%;
+        }
+        50% {
+            background-position: 100% 50%;
+        }
+        100% {
+            background-position: 0% 50%;
+        }
+    }
+
+    .grid_wrapper img {
+        height: 80%;
+        max-width: 100px;
+        max-height: 100px;
+        margin-top: auto;
+        margin-bottom: auto;
+        margin-right: 0.25em;
+        grid-row: 1 / span 2;
+    }
+
+    .grid_wrapper .description {
+        /* background-color: blue; */
+        width: auto;
+        grid-column: 2 / span 3; 
+    }
+
+    .grid_wrapper .title {
+        color: var(--title-colour);
+        width: 5em;
+    }
+
+    .grid_wrapper .title:after {
+        content: ":";
+        /* width: 5em; */
+    }
+
+
+    .grid_wrapper .skill_level {
+        border-radius: 4em;
+        height: auto;
+        text-align: center;
+        min-width: fit-content;
+        min-height: fit-content;
+        color: #000000;
+        background: linear-gradient(-24deg, #00ff00, #94ff7e, #acff4e, #27ff88);
+        background-size: 400% 400%;
+        grid-column: 3 / span 3; 
+        width: auto;
+        transition: 250ms;
+    }
+
+
+	@media (max-width: 760px) {
+        .grid_wrapper .skill_level {
+            animation: gradient 2s linear infinite reverse;
+        }
+    }
+
+    .box:hover .skill_level {
+        animation: gradient 2s linear infinite reverse;
+    }
+
+</style>    
\ No newline at end of file
diff --git a/src/env.d.ts b/src/env.d.ts
index 723a7cf..c8fccd5 100644
--- a/src/env.d.ts
+++ b/src/env.d.ts
@@ -7,4 +7,13 @@ type Runtime = import("@astrojs/cloudflare").Runtime<Env>;
 
 declare namespace App {
 	interface Locals extends Runtime {}
+}
+
+interface Window {
+  theme: {
+    setTheme: (theme: "auto" | "dark" | "light") => void;
+    getTheme: () => "auto" | "dark" | "light";
+    getSystemTheme: () => "light" | "dark";
+    getDefaultTheme: () => "auto" | "dark" | "light";
+  };
 }
\ No newline at end of file
diff --git a/src/pages/about.astro b/src/pages/about.astro
deleted file mode 100644
index 6b16b8c..0000000
--- a/src/pages/about.astro
+++ /dev/null
@@ -1,64 +0,0 @@
----
-import AboutHeroImage from '../assets/blog-placeholder-about.jpg';
-import Layout from '../layouts/BlogPost.astro';
-export const prerender = true;
----
-
-<Layout
-	title="About Me"
-	description="Lorem ipsum dolor sit amet"
-	pubDate={new Date('August 08 2021')}
-	heroImage={AboutHeroImage}
->
-	<p>
-		Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut
-		labore et dolore magna aliqua. Vitae ultricies leo integer malesuada nunc vel risus commodo
-		viverra. Adipiscing enim eu turpis egestas pretium. Euismod elementum nisi quis eleifend quam
-		adipiscing. In hac habitasse platea dictumst vestibulum. Sagittis purus sit amet volutpat. Netus
-		et malesuada fames ac turpis egestas. Eget magna fermentum iaculis eu non diam phasellus
-		vestibulum lorem. Varius sit amet mattis vulputate enim. Habitasse platea dictumst quisque
-		sagittis. Integer quis auctor elit sed vulputate mi. Dictumst quisque sagittis purus sit amet.
-	</p>
-
-	<p>
-		Morbi tristique senectus et netus. Id semper risus in hendrerit gravida rutrum quisque non
-		tellus. Habitasse platea dictumst quisque sagittis purus sit amet. Tellus molestie nunc non
-		blandit massa. Cursus vitae congue mauris rhoncus. Accumsan tortor posuere ac ut. Fringilla urna
-		porttitor rhoncus dolor. Elit ullamcorper dignissim cras tincidunt lobortis. In cursus turpis
-		massa tincidunt dui ut ornare lectus. Integer feugiat scelerisque varius morbi enim nunc.
-		Bibendum neque egestas congue quisque egestas diam. Cras ornare arcu dui vivamus arcu felis
-		bibendum. Dignissim suspendisse in est ante in nibh mauris. Sed tempus urna et pharetra pharetra
-		massa massa ultricies mi.
-	</p>
-
-	<p>
-		Mollis nunc sed id semper risus in. Convallis a cras semper auctor neque. Diam sit amet nisl
-		suscipit. Lacus viverra vitae congue eu consequat ac felis donec. Egestas integer eget aliquet
-		nibh praesent tristique magna sit amet. Eget magna fermentum iaculis eu non diam. In vitae
-		turpis massa sed elementum. Tristique et egestas quis ipsum suspendisse ultrices. Eget lorem
-		dolor sed viverra ipsum. Vel turpis nunc eget lorem dolor sed viverra. Posuere ac ut consequat
-		semper viverra nam. Laoreet suspendisse interdum consectetur libero id faucibus. Diam phasellus
-		vestibulum lorem sed risus ultricies tristique. Rhoncus dolor purus non enim praesent elementum
-		facilisis. Ultrices tincidunt arcu non sodales neque. Tempus egestas sed sed risus pretium quam
-		vulputate. Viverra suspendisse potenti nullam ac tortor vitae purus faucibus ornare. Fringilla
-		urna porttitor rhoncus dolor purus non. Amet dictum sit amet justo donec enim.
-	</p>
-
-	<p>
-		Mattis ullamcorper velit sed ullamcorper morbi tincidunt. Tortor posuere ac ut consequat semper
-		viverra. Tellus mauris a diam maecenas sed enim ut sem viverra. Venenatis urna cursus eget nunc
-		scelerisque viverra mauris in. Arcu ac tortor dignissim convallis aenean et tortor at. Curabitur
-		gravida arcu ac tortor dignissim convallis aenean et tortor. Egestas tellus rutrum tellus
-		pellentesque eu. Fusce ut placerat orci nulla pellentesque dignissim enim sit amet. Ut enim
-		blandit volutpat maecenas volutpat blandit aliquam etiam. Id donec ultrices tincidunt arcu. Id
-		cursus metus aliquam eleifend mi.
-	</p>
-
-	<p>
-		Tempus quam pellentesque nec nam aliquam sem. Risus at ultrices mi tempus imperdiet. Id porta
-		nibh venenatis cras sed felis eget velit. Ipsum a arcu cursus vitae. Facilisis magna etiam
-		tempor orci eu lobortis elementum. Tincidunt dui ut ornare lectus sit. Quisque non tellus orci
-		ac. Blandit libero volutpat sed cras. Nec tincidunt praesent semper feugiat nibh sed pulvinar
-		proin gravida. Egestas integer eget aliquet nibh praesent tristique magna.
-	</p>
-</Layout>
diff --git a/src/pages/blog/[...slug].astro b/src/pages/articles/[...slug].astro
similarity index 99%
rename from src/pages/blog/[...slug].astro
rename to src/pages/articles/[...slug].astro
index 652abf6..2836688 100644
--- a/src/pages/blog/[...slug].astro
+++ b/src/pages/articles/[...slug].astro
@@ -16,6 +16,7 @@ const post = Astro.props;
 const { Content } = await render(post);
 ---
 
+
 <BlogPost {...post.data}>
 	<Content />
 </BlogPost>
diff --git a/src/pages/blog/index.astro b/src/pages/articles/index.astro
similarity index 98%
rename from src/pages/blog/index.astro
rename to src/pages/articles/index.astro
index a3347cf..634fdb9 100644
--- a/src/pages/blog/index.astro
+++ b/src/pages/articles/index.astro
@@ -95,7 +95,7 @@ const posts = (await getCollection('blog')).sort(
 					{
 						posts.map((post) => (
 							<li>
-								<a href={`/blog/${post.id}/`}>
+								<a href={`/articles/${post.id}/`}>
 									{post.data.heroImage && (
 										<Image width={720} height={360} src={post.data.heroImage} alt="" />
 									)}
diff --git a/src/pages/guestBook/index.astro b/src/pages/guestBook/index.astro
new file mode 100644
index 0000000..0c15019
--- /dev/null
+++ b/src/pages/guestBook/index.astro
@@ -0,0 +1,99 @@
+---
+import BaseHead from '../../components/BaseHead.astro';
+import Header from '../../components/Header.astro';
+import Footer from '../../components/Footer.astro';
+
+import { drizzle } from "drizzle-orm/d1";
+import { GuestLog } from "../../schema";
+import { env } from "cloudflare:workers";
+
+export const prerender = false
+
+const db = drizzle(env.DB);
+
+if (Astro.request.method === 'POST') {
+    // Parse form data
+    const formData = await Astro.request.formData();
+    console.log(formData);
+    const name = formData.get('name');
+    const message = formData.get('message');
+    const website_link = formData.get('website_link');
+  
+    if (
+  		typeof name === 'string' && 
+  		typeof website_link === 'string' && 
+  		typeof message === 'string' &&
+  		name !== "" &&
+  		message !== "" 
+  	) {
+
+		if (message.length >= 255) {
+			return;
+		}
+
+      	await db.insert(GuestLog).values([{ 
+			name : name, 
+			message	: message,
+			website_link : website_link,
+			date_viewed : new Date(),
+		}]);
+    }
+}
+
+let guest_logs : {id: number; name: string; message: string | null; date: Date;}[] = [];
+try {
+guest_logs = await db
+	.select()
+	.from(GuestLog)
+	.orderBy(GuestLog.date);
+} catch (err) {
+	console.log(err);
+}
+
+guest_logs.forEach(log => {
+	console.log(log)
+});
+
+---
+
+<!doctype html>
+<html lang="en">
+	<head>
+		<BaseHead title="guest book" description="a guest book of everyone who have visited my site" />
+	</head>
+	<body>
+		<Header />
+		<main>
+			<section>
+			<h1>sign the <span style="background-color: blueviolet;">guest</span> book</h1>
+			<form method="POST" style="display: grid">
+				<label for="name">Name</label>
+				<input id="name" name="name" />
+
+				<label for="website_link">Website link(optional)</label>
+				<input id="website_link" name="website_link" />
+
+				<label for="message">message</label>
+				<textarea id="message" name="message"></textarea>
+
+				<button type="submit">Submit</button>
+			</form>
+
+			<h1>guest book</h1>
+			<ul>
+			{
+				guest_logs.map((log) => (
+					<li>
+						<p>[{log.date.toDateString()}] {log.name} 
+							{log.website_link? (<a href={log.website_link}>{log.website_link}</a>) : ""}
+							: {log.message}</p>
+					</li>
+				))
+			}
+			</ul>
+
+			</section>
+		</main>
+		<Footer />
+	</body>
+</html>
diff --git a/src/pages/index.astro b/src/pages/index.astro
index f4b91a9..47bbade 100644
--- a/src/pages/index.astro
+++ b/src/pages/index.astro
@@ -1,56 +1,31 @@
 ---
 import BaseHead from '../components/BaseHead.astro';
-import Footer from '../components/Footer.astro';
 import Header from '../components/Header.astro';
+import Footer from '../components/Footer.astro';
 import Icon from '../components/Icon.astro';
+import { getCollection } from 'astro:content';
+import FormattedDate from '../components/FormattedDate.astro';
+import { Image } from 'astro:assets';
 
 import { SITE_DESCRIPTION, SITE_TITLE } from '../consts';
 
 import SkillCard from '../components/skillCard.astro'
 import { desc } from "drizzle-orm";
 import { drizzle } from "drizzle-orm/d1";
-import { GuestLog } from "../schema";
 import { env } from "cloudflare:workers";
+import { GuestLog } from "../schema";
 
 export const prerender = false
-
 const db = drizzle(env.DB);
 
-if (Astro.request.method === 'POST') {
-    // Parse form data
-    const formData = await Astro.request.formData();
-    console.log(formData);
-    const name = formData.get('name');
-    const message = formData.get('message');
-    const website_link = formData.get('website_link');
-  
-    if (
-  		typeof name === 'string' && 
-  		typeof website_link === 'string' && 
-  		typeof message === 'string' &&
-  		name !== "" &&
-  		message !== "" 
-  	) {
-
-		if (message.length >= 255) {
-			return;
-		}
-
-      	await db.insert(GuestLog).values([{ 
-			name : name, 
-			message	: message,
-			website_link : website_link,
-			date_viewed : new Date(),
-		}]);
-    }
-}
-
 let guest_logs : {id: number; name: string; message: string | null; date: Date;}[] = [];
 try {
 guest_logs = await db
 	.select()
 	.from(GuestLog)
-	.orderBy(GuestLog.date);
+	.orderBy(GuestLog.date)
+	.limit(20);
+
 } catch (err) {
 	console.log(err);
 }
@@ -58,6 +33,15 @@ guest_logs = await db
 guest_logs.forEach(log => {
 	console.log(log)
 });
+
+
+const posts = (await getCollection('blog')).sort(
+	(a, b) => b.data.pubDate.valueOf() - a.data.pubDate.valueOf(),
+);
+
+
+
+
 ---
 
 <!doctype html>
@@ -68,65 +52,91 @@ guest_logs.forEach(log => {
 	<body>
 		<Header />
 		<main>
-			<div class="IntroHeader"></div>
-			<h1 class="greeting">Hello!!, im sirlilpanda</h1>
-			<Icon />
-
+			<!-- <div class="IntroHeader"></div> -->
+			<div class="greeting-wrapper">
+				<h1 class="greeting">Hello!!, im sirlilpanda</h1>
+				<Icon height={128} width={128}/>
+			</div>
 			
 			<h1 id="about_me">About me</h1>
 			<p1>
-				im an insane computer engineer who has to many hobbies and projects for me to actually work on. 
-				That is just the best way to describe me you think of a hobby ive probably dabbled in it.
+				just a friendly neighborhood technomancer
 			</p1>
+			
+			<p>
+				click the clock in the corner if you want to change to dark mode. <br/>
+				im still not full happy with the look of this website and will contiune to make changes.
+			</p>
 
-			<h1>guest book</h1>
-			<ul>
+			<h3>check out my lastest <a href={`/articles/${posts[0].id}/`}>blog post</a></h3>
+			<div class="preview-post">
+				<a href={`/articles/${posts[0].id}/`}>
+					{posts[0].data.heroImage && (
+						<Image width={720} height={360} src={posts[0].data.heroImage} alt="" />
+					)}
+					<h4 class="title">{posts[0].data.title}</h4>
+					<p class="date">
+						<FormattedDate date={posts[0].data.pubDate} />
+					</p>
+					<p>{posts[0].data.description}</p>
+				</a>
+			</div>
+
+
+			<h3>consider adding to the <a href="/guestBook">guestbook</a></h3>
+			<h5>heres what others had to say already</h5>
+			<ul class="lastest-guestbook-logs">
 			{
 				guest_logs.map((log) => (
 					<li>
-						<p>[{log.date.toDateString()}] {log.name} 
-							{log.website_link? (<a href={log.website_link}>{log.website_link}</a>) : ""}
-							: {log.message}</p>
+						<p class="title">[{log.date.toDateString()}] {log.name} 
+							{log.website_link? (<a href={log.website_link}>{log.website_link}</a>) : ""}:</p>
+						<p class="message">{log.message}</p>
 					</li>
 				))
 			}
 			</ul>
-			<h1>sign the <span style="background-color: blueviolet;">guest</span> book</h1>
-			<form method="POST" style="display: grid">
-				<label for="name">Name</label>
-				<input id="name" name="name" />
 
-				<label for="website_link">Website link(optional)</label>
-				<input id="website_link" name="website_link" />
+			
+
+			<h3>take my button, i will be collecting some soon too!</h3>
+
+				<textarea class="button-copy">
+&lt;a href="https://sirlilpanda.studio" title="Visit sirlilpandas website"&gt;
+&lt;img 
+	src="https://sirlilpanda.studio/public/panda.gif" 
+	alt="check out a man driven to insanity" 
+	width=88 height=31
+&gt;
+&lt;/a&gt;
+				</textarea>
 
-				<label for="message">message</label>
-				<textarea id="message" name="message"></textarea>
 
-				<button type="submit">Submit</button>
-			</form>
-				
 			<a href="https://sirlilpanda.studio" title="Visit sirlilpandas website">
-				<img src="panda_big.gif" alt="check out a man driven to insanity" width={88*4} height={31*4}>
+				<img 
+				src="panda_big.gif" alt="check out a man driven to insanity" width={88*4} height={31*4}>
 			</a>
+			
+
 
-			<a href="https://onio.neocities.org" title="Visit Onio Café">
-				<img src="https://onio.neocities.org/thebutton.gif" alt="Come Chat With Us!" width="88" height="31">
-			</a>
 
 		</main>
 		<Footer />
 	</body>
 </html>
 
-
 <style>
-	.IntroHeader {
-		display: flexbox;
+
+	.button-copy {
+		font-size: 1em;
+		color: var(--text-color);
+		height: 10em;
+		background: var(--background-colour);
+
 	}
 
 
-
- @keyframes gradient {
+ 	@keyframes gradient {
         0% {
             background-position: 0% 90%;
         }
@@ -163,4 +173,57 @@ guest_logs.forEach(log => {
 		font-size: 2.5em;
 	}
 
+	.preview-post {
+		border-radius: 2em;
+		padding-top: 1em;
+		padding-left: 1em;
+		padding-right: 1em;
+		background: var(--background-colour);
+		border-style: solid;
+		border-color: blanchedalmond;
+		box-shadow: var(--box-shadow);
+		margin-bottom: 5em;
+	}
+
+	.Icon {
+		padding-right: 2em;		
+	}
+
+	.greeting-wrapper {
+		display: flex;
+		flex-direction: row;
+		justify-content: space-between;
+	}
+
+	.lastest-guestbook-logs {
+		border-radius: 2em;
+		padding: 1em;
+		background: var(--background-colour);
+		border-style: solid;
+		border-color: blanchedalmond;
+		box-shadow: var(--box-shadow);
+		margin-bottom: 5em;
+	}
+
+	ul > li {
+		margin-top: 1em;
+		border-radius: 1em;
+		padding-left: 1em;
+		padding-right: 1em;
+		border-style: solid;
+		border-color: blanchedalmond;
+		transition: 250ms;
+		background: var(--background-colour);
+	}
+
+	ul > li:hover {
+		transform: translateY(-0.5em);
+		box-shadow: var(--box-shadow);
+	}
+
+	ul > li:nth-of-type(odd) {
+		background: var(--main-background-colour);
+	}
+
+
 </style>
\ No newline at end of file
diff --git a/src/pages/pictures/index.astro b/src/pages/pictures/index.astro
new file mode 100644
index 0000000..0c15019
--- /dev/null
+++ b/src/pages/pictures/index.astro
@@ -0,0 +1,99 @@
+---
+import BaseHead from '../../components/BaseHead.astro';
+import Header from '../../components/Header.astro';
+import Footer from '../../components/Footer.astro';
+
+import { drizzle } from "drizzle-orm/d1";
+import { GuestLog } from "../../schema";
+import { env } from "cloudflare:workers";
+
+export const prerender = false
+
+const db = drizzle(env.DB);
+
+if (Astro.request.method === 'POST') {
+    // Parse form data
+    const formData = await Astro.request.formData();
+    console.log(formData);
+    const name = formData.get('name');
+    const message = formData.get('message');
+    const website_link = formData.get('website_link');
+  
+    if (
+  		typeof name === 'string' && 
+  		typeof website_link === 'string' && 
+  		typeof message === 'string' &&
+  		name !== "" &&
+  		message !== "" 
+  	) {
+
+		if (message.length >= 255) {
+			return;
+		}
+
+      	await db.insert(GuestLog).values([{ 
+			name : name, 
+			message	: message,
+			website_link : website_link,
+			date_viewed : new Date(),
+		}]);
+    }
+}
+
+let guest_logs : {id: number; name: string; message: string | null; date: Date;}[] = [];
+try {
+guest_logs = await db
+	.select()
+	.from(GuestLog)
+	.orderBy(GuestLog.date);
+} catch (err) {
+	console.log(err);
+}
+
+guest_logs.forEach(log => {
+	console.log(log)
+});
+
+---
+
+<!doctype html>
+<html lang="en">
+	<head>
+		<BaseHead title="guest book" description="a guest book of everyone who have visited my site" />
+	</head>
+	<body>
+		<Header />
+		<main>
+			<section>
+			<h1>sign the <span style="background-color: blueviolet;">guest</span> book</h1>
+			<form method="POST" style="display: grid">
+				<label for="name">Name</label>
+				<input id="name" name="name" />
+
+				<label for="website_link">Website link(optional)</label>
+				<input id="website_link" name="website_link" />
+
+				<label for="message">message</label>
+				<textarea id="message" name="message"></textarea>
+
+				<button type="submit">Submit</button>
+			</form>
+
+			<h1>guest book</h1>
+			<ul>
+			{
+				guest_logs.map((log) => (
+					<li>
+						<p>[{log.date.toDateString()}] {log.name} 
+							{log.website_link? (<a href={log.website_link}>{log.website_link}</a>) : ""}
+							: {log.message}</p>
+					</li>
+				))
+			}
+			</ul>
+
+			</section>
+		</main>
+		<Footer />
+	</body>
+</html>
diff --git a/src/styles/global.css b/src/styles/global.css
index 49750f7..075af1a 100644
--- a/src/styles/global.css
+++ b/src/styles/global.css
@@ -11,7 +11,6 @@
 	--gray-dark: 34, 41, 57;
 	--gray-gradient: rgba(var(--gray-light), 50%), #fff;
 
-
 	--yellow-light-theme: #f5c300;
 	--pink-light-theme: #a4036f;
 	--blue-light-theme: #048ba8;
@@ -19,7 +18,7 @@
 	--text-color-light-theme: #101010;
 	--title-color-light-theme: var(--yellow-light-theme);
 	--link-color-light-theme: var(--blue-light-theme);
-	--background-light-theme: #ffffff;
+	--background-light-theme: #cfffc0;
 	--header-light-theme: #f2f8ff;
 	--gray-light-theme: rgb(34, 41, 57);
 
@@ -43,23 +42,27 @@
 		0 16px 32px rgba(var(--black), 33%);
 
 	--box-shadow-lighter: 0 2px 6px rgba(var(--black), 50%), 0 8px 24px rgba(var(--black), 20%);
-
-
-	/* --accent: #2337ff;
-	--accent-dark: #000d8a;
-	--black: 15, 18, 25;
-	--gray: 96, 115, 159;
-	--gray-light: 229, 233, 240;
-	--gray-dark: 34, 41, 57;
-	--gray-gradient: rgba(var(--gray-light), 50%), #fff;
-	--box-shadow:
-		0 2px 6px rgba(var(--gray), 25%), 0 8px 24px rgba(var(--gray), 33%),
-		0 16px 32px rgba(var(--gray), 33%); */
 }
 
-@media (prefers-color-scheme: dark) {
+:root[data-theme="light"] {
+	/* defaults to dark theme */
+		--yellow : var(--yellow-light-theme);
+		--pink : var(--pink-light-theme);
+		--blue : var(--blue-light-theme);
+		--green : var(--green-light-theme);
+		--text-color: var(--text-color-light-theme);
+		--title-color: var(--title-color-light-theme);
+		--link-color: var(--link-color-light-theme);
+		--background-colour : var(--background-light-theme);
+		--header-color: var(--header-light-theme);
+		--gray: var(--gray-light-theme);
+		--sky-colour : linear-gradient(#3f67b5, #6baadf, #b5d1e8);
+		--frame-colour : #c2c2c2;
+		--main-background-colour : #fffeab;
+}
+
+:root[data-theme="dark"] {
 	/* defaults to dark theme */
-	:root {
 		--yellow : var(--yellow-dark-theme);
 		--pink : var(--pink-dark-theme);
 		--blue : var(--blue-dark-theme);
@@ -70,8 +73,9 @@
 		--background-colour : var(--background-dark-theme);
 		--header-color: var(--header-dark-theme);
 		--gray: var(--gray-dark-theme);
-	}
-		
+		--sky-colour: linear-gradient(360deg,rgba(8, 0, 26, 1) 0%, rgba(7, 0, 20, 1) 37%, rgba(0, 0, 0, 1) 100%);
+		--frame-colour : #1a1a1e;
+		--main-background-colour : #3b3b3b;
 }
 
 
@@ -94,7 +98,8 @@ body {
 	margin: 0;
 	padding: 0;
 	text-align: left;
-	background: linear-gradient(var(--gray-gradient)) no-repeat;
+	background-color: var(--background-colour);
+	/* background: linear-gradient(var(--gray-gradient)) no-repeat; */
 	background-size: 100% 600px;
 	word-wrap: break-word;
 	overflow-wrap: break-word;
@@ -102,12 +107,20 @@ body {
 	font-size: 20px;
 	line-height: 1.7;
 }
+
 main {
+	z-index: 4;
 	width: 720px;
 	max-width: calc(100% - 2em);
 	margin: auto;
 	padding: 3em 1em;
+	background-color: var(--main-background-colour);
+	border-radius: 2em;
+	border-style: solid;
+	border-color: blanchedalmond;
 }
+
+
 h1,
 h2,
 h3,
@@ -145,6 +158,7 @@ a:hover {
 }
 p {
 	margin-bottom: 1em;
+	color: var(--text-color);
 }
 .prose p {
 	margin-bottom: 2em;