diff --git a/.gitignore b/.gitignore
index 6635cf5..76498b8 100644
--- a/.gitignore
+++ b/.gitignore
@@ -8,3 +8,11 @@ node_modules
 !.env.example
 vite.config.js.timestamp-*
 vite.config.ts.timestamp-*
+
+
+
+src/routes/api
+src/routes/components
+static/spotify-test-artwork.png
+
+server/
\ No newline at end of file
diff --git a/Dockerfile b/Dockerfile
index 08d31a6..e30aeec 100644
--- a/Dockerfile
+++ b/Dockerfile
@@ -3,6 +3,7 @@ FROM oven/bun:latest
 # ENV ADDRESS_HEADER="X-Forwarded-For"
 # ENV PROTOCOL_HEADER="X-Forwarded-Proto"
 ENV HOST_HEADER="Host"
+ENV NODE_ENV="development"
 COPY . .
 
 RUN bun i --no-cache -f --no-save
diff --git a/LICENSE b/LICENSE
new file mode 100644
index 0000000..d6dd6ed
--- /dev/null
+++ b/LICENSE
@@ -0,0 +1,42 @@
+# LICENSE
+
+Unless otherwise stated, all content on this site and in
+this repository is licensed under the Creative Commons CC0 1.0 Universal License.
+
+The following items represent trademarks or copyrighted material
+and are  thus excempt from this repository's licensing:
+
+- static/avatar.png
+- static/banner.png
+- static/bluesky.svg ([Source](https://bsky.app/))
+- static/codeberg.svg ([Source](https://codeberg.org/))
+- static/discord.svg ([Source](https://discord.com/branding))
+- static/github.svg ([Source](https://github.com/logos))
+- static/keyoxide.png ([Source](https://keyoxide.org/))
+- static/lastfm.svg ([Source](https://www.last.fm/brand))
+- static/spotify.svg ([Source](https://developer.spotify.com/branding-guidelines/))
+- static/telegram.svg ([Source](https://telegram.org/brand_guidelines))
+- static/twitter.svg ([Source](https://about.twitter.com/en_us/company/brand-resources.html))
+- static/wetdry.world.png ([Source](https://wetdry.world/))
+- static/spotify-test-artwork.png
+
+The following items come from Google's Material Design Icons
+and are licensed under the Apache License Version 2.0:
+
+- static/no-download.svg
+- static/download.svg
+- static/web.svg
+
+The following items are direct derivatives of [surfbryce/beautiful-lyrics](https://github.com/surfbryce/beautiful-lyrics) 
+and thus licensed under the MIT License:
+
+- src/lib/beautiful-lyrics/*
+- src/components/parts/SpotifyContainer.svelte
+- src/components/parts/lyrics/*
+
+The following items are imported from Google Fonts, and despite appearing on
+the website, should not be considered part of this repository or its license:
+
+- [Google Fonts - Rubik](https://fonts.googleapis.com/css2?family=Rubik:ital,wght@0,400;0,700;1,400&display=swap)
+
+Any externally loaded content (such as images, fonts, etc.) is not covered by this license.
diff --git a/bun.lockb b/bun.lockb
index e32ef2f..f927346 100755
Binary files a/bun.lockb and b/bun.lockb differ
diff --git a/package.json b/package.json
index c7e8e54..f1a2034 100644
--- a/package.json
+++ b/package.json
@@ -16,8 +16,10 @@
     "@sveltejs/kit": "^2.0.0",
     "@sveltejs/vite-plugin-svelte": "^3.0.0",
     "@types/eslint": "8.56.0",
+    "@types/luxon": "^3.3.7",
     "@typescript-eslint/eslint-plugin": "^6.0.0",
     "@typescript-eslint/parser": "^6.0.0",
+    "bun-types": "^1.0.20",
     "eslint": "^8.56.0",
     "eslint-config-prettier": "^9.1.0",
     "eslint-plugin-svelte": "^2.35.1",
@@ -33,8 +35,11 @@
   "dependencies": {
     "@catppuccin/palette": "^0.2.0",
     "@emotion/css": "^11.11.2",
+    "@svelte-plugins/tooltips": "^3.0.0",
     "@sveltejs/adapter-cloudflare": "^3.0.1",
+    "luxon": "^3.4.4",
     "sass": "^1.69.5",
     "svelte-adapter-bun": "^0.5.1"
-  }
+  },
+  "license": "CC0-1.0"
 }
diff --git a/src/app.html b/src/app.html
index 72d42d8..2fe0c7d 100644
--- a/src/app.html
+++ b/src/app.html
@@ -9,6 +9,7 @@
 			@import url('https://fonts.googleapis.com/css2?family=Rubik:ital,wght@0,400;0,700;1,400&display=swap');
 			* {
 				font-family: 'Rubik', sans-serif;
+				-webkit-tap-highlight-color: transparent;
 			}
 		</style>
 		%sveltekit.head%
diff --git a/src/components/CatppuccinTabber.svelte b/src/components/CatppuccinTabber.svelte
index 6be6d1f..42b76d7 100644
--- a/src/components/CatppuccinTabber.svelte
+++ b/src/components/CatppuccinTabber.svelte
@@ -1,8 +1,9 @@
 <script lang="ts">
-	import pallete from '$lib/colors';
+	import palette from '$lib/colors';
 	import ProjectCard from './parts/ProjectCard.svelte';
-
-	let activeTab = 'projects';
+	import Block from './parts/Block.svelte';
+	import Timestamp from './parts/Timestamp.svelte';
+	let activeTab = 'about';
 
 	let getSetActiveTab = (tabName: string) => {
 		return () => {
@@ -13,7 +14,7 @@
 
 <div
 	class="surface"
-	style="background-color:{pallete.colors.surface0.hex}; --text-color:{pallete.colors.text.hex};"
+	style="background-color:{palette.colors.surface0.hex}; --text-color:{palette.colors.text.hex};"
 >
 	<div id="navbar">
 		<div
@@ -43,9 +44,52 @@
 			</div>
 		</div>
 	</div>
-	<div id="rest">
+	<div id="rest"
+	class="{activeTab}"
+	
+	>
 		{#if activeTab === 'about'}
-			hi (about)
+			<!-- 
+
+			 -->
+			<Block>
+				<span>hi! im aenri, a kitty cat <br /> 
+					<Timestamp date="07-02-2005" content="that's been alive for %%!"/>
+					<!-- that's been alive for 18 years! -->
+				</span>
+				
+			</Block>
+			<Block>
+				I'm attending ISU for computer 
+				<br /> science and gender studies! 
+				<Block bg={palette.colors.surface2.hex}>
+					<span>I should be graduating 
+					<br /> <Timestamp date="06-20-2026" content="in the next %%!"/></span>
+				</Block>
+			</Block>
+			<Block>
+				<Block bg={palette.colors.surface2.hex}>
+					<span>i've been on estrogen <br /> for <Timestamp date="10-20-2023" content="the last %%!"/></span>
+				</Block>
+
+				and
+
+				<Block bg={palette.colors.surface2.hex}>
+					<span>i've been with my partners <br /> for <Timestamp date="05-29-2023" content="the last %%!"/></span>
+				</Block>
+			</Block>
+			<Block>
+				<span style="padding-bottom:10px;font-weight:bold">Site Links</span>
+				<Block bg={palette.colors.surface2.hex}>
+					nothing yet!
+					<!-- <span class="site-link"> my <a href="">opinions</a> </span>
+
+					<span class="site-link"> my <a href="">blog</a> </span>
+
+					<span class="site-link"> my <a href="">api status</a> </span> -->
+				</Block>
+			</Block>
+			 
 		{:else if activeTab === 'projects'}
 			<ProjectCard
 				name="Genesis"
@@ -164,15 +208,39 @@
 
 	#rest {
 		color: var(--text-color);
-		// display: flex;
-		// flex-flow: row wrap;
-        display: grid;
-        grid-gap: 10px;
-        grid-template-columns: repeat(auto-fill, minmax(250px,1fr));
-		align-content: space-between;
-		padding: 25px;
-		gap: 25px;
-		justify-content: stretch;
-		column-count: 2;
+
+        &.projects {
+			display: grid;
+			grid-gap: 10px;
+			grid-template-columns: repeat(auto-fill, minmax(250px,1fr));
+			align-content: space-between;
+			padding: 25px;
+			gap: 25px;
+			justify-content: stretch;
+			column-count: 2;
+		}
+		&.about {
+			gap: 25px;
+
+			@media (max-width: 768px) {
+				display: flex;
+				flex-direction: column;
+				align-items: center;
+				padding:15px;
+			}
+			@media (min-width: 768px) {
+				display: grid;
+				grid-gap: 10px;
+				grid-template-columns: repeat(auto-fill, minmax(300px,1fr));
+				align-content: space-between;
+				justify-content: stretch;
+				column-count: 2;
+				padding: 25px;
+			}
+		}
+	}
+	.site-link, .site-link a {
+		// text-decoration: none;
+		color: var(--text-color);
 	}
 </style>
diff --git a/src/components/parts/Block.svelte b/src/components/parts/Block.svelte
new file mode 100644
index 0000000..680cb8f
--- /dev/null
+++ b/src/components/parts/Block.svelte
@@ -0,0 +1,38 @@
+<script lang="ts">
+    import palette from "$lib/colors";
+
+    export let bg = palette.colors.surface1.hex;
+
+    export let style = "";
+</script>
+
+<style lang="scss">
+    // this is a block, a small container with some padding and a border radius that can be used to wrap other elements. it will not be the main element of a page, but rather a child of one.
+    .block {
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
+        align-items: center;
+        gap: 15px;
+        padding: 20px;
+        border-radius: 30px;
+
+        background: var(--bg);
+        color: var(--fg);
+        fill: var(--fg);
+
+        font-size: 20px;
+        max-width: calc(100% - 80px);
+    }
+
+    span {
+        margin: 0px;
+    }
+
+</style>
+
+<div class="block" style="--bg:{bg};--fg:{palette.colors.text.hex};{style}">
+    <slot>
+
+    </slot>
+</div>
\ No newline at end of file
diff --git a/src/components/parts/Centered.svelte b/src/components/parts/Centered.svelte
new file mode 100644
index 0000000..2cadcb8
--- /dev/null
+++ b/src/components/parts/Centered.svelte
@@ -0,0 +1,31 @@
+<style lang="scss">
+
+    // center the content on the page
+
+    #root-container {
+        display: flex;
+        flex-direction: row;
+        gap: 50px;
+        align-items: center;
+        justify-content: center;
+        @media (max-width: 768px) {
+            min-height: calc(100vh - 50px);
+            max-width: calc(100vw - 50px);
+            padding: 25px;
+
+        }
+
+        @media (min-width: 768px) {
+            min-height: calc(100vh - 100px);
+            max-width: calc(100vw - 100px);
+            padding: 50px;
+
+        }
+        position: absolute;
+    }
+
+</style>
+
+<div id="root-container">
+    <slot></slot>
+</div>
\ No newline at end of file
diff --git a/src/components/parts/LyricsContainer.svelte b/src/components/parts/LyricsContainer.svelte
new file mode 100644
index 0000000..651f398
--- /dev/null
+++ b/src/components/parts/LyricsContainer.svelte
@@ -0,0 +1,18 @@
+<script lang="ts">
+  // hi`
+</script>
+
+<style lang="scss">
+  #lyrics-container {
+    display: flex;
+    flex-direction: column;
+    min-height: 215px;
+    align-items: flex-start;
+  }
+</style>
+
+
+
+<div id="lyrics-container">
+
+</div>
\ No newline at end of file
diff --git a/src/components/parts/SocialItem.svelte b/src/components/parts/SocialItem.svelte
index 5258b5d..8050dc6 100644
--- a/src/components/parts/SocialItem.svelte
+++ b/src/components/parts/SocialItem.svelte
@@ -23,10 +23,14 @@
 
         font-size: 20px;        
         font-weight: bold;
+
     }
     img {
         max-height: 25px;
     }
+    a {
+        text-decoration: none;
+    }
 </style>
 
 <a href={link} target="_blank" rel="noopener noreferrer">
diff --git a/src/components/parts/SpotifyContainer.svelte b/src/components/parts/SpotifyContainer.svelte
new file mode 100644
index 0000000..02965ba
--- /dev/null
+++ b/src/components/parts/SpotifyContainer.svelte
@@ -0,0 +1,150 @@
+<script lang="ts">
+    import palette from "$lib/colors";
+	import { get, writable, type Readable, type Writable } from "svelte/store";
+    import { browser } from '$app/environment';
+	import LyricsContainer from "./LyricsContainer.svelte";
+
+
+    export let sourceImageUrl: string;
+
+    export let songName: string;
+    export let artistName: string;
+    export let albumName: string;
+
+    export let progress: number; // 0-1
+    export let maxShownLines = 7; // if this is not an odd number i die in real life
+    export let lyrics: Writable<string[]> = writable([]);
+
+
+    let percent = (n: number) => `${n * 100}%`;
+    let lyr: string[] = [];
+
+
+
+
+    //! All of this will be dynamic in the future, for now im just testing the elements
+</script>
+
+<style lang="scss">
+    #spotify-container {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        justify-content: center;
+        width: 100%;
+        max-width: 400px;
+        height: 100%;
+        max-height: min-content;
+        border-radius: 25px 25px 50px 50px;
+        gap: 50px;
+        background: #ffffff40;
+        color: var(--fg);
+        padding: 15px;
+    }
+    .col {
+        flex: 1;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        justify-content: center;
+        gap: 10px;
+    }
+    .row {
+        flex: 1;
+        display: flex;
+        flex-direction: row;
+        align-items: center;
+        justify-content: center;
+        gap: 10px;
+    }
+    #lyrics  {
+        align-items: flex-start;
+        font-weight: 600;
+        font-size: 20px;
+        gap: 10px;
+        & * {
+            margin: 0px;
+        }
+    }
+    #progress-bar {
+        width: 100%;
+        min-height: 10px;
+        background: #ffffff40;
+        border-radius: 10px;
+        align-items: flex-start;
+        align-content: flex-start;
+        gap: 0px;
+    }
+    #progress-bar-inner {
+        min-height: 10px;
+        height: 100%;
+        background: var(--fg);
+        border-radius: 10px;
+        flex: unset;
+        align-self: first baseline;
+    }
+    #text-data {
+        gap: 0px;
+        align-items: flex-start;
+        & > *, & > * > * {
+            margin: 0px;
+        }
+    }
+    #song-name {
+        font-size: 24px;
+        font-weight: 700;
+    }
+    #artist-name {
+        font-size: 16px;
+        font-weight: 700;
+    }
+    #album-art, #album-art > img {
+        width: 100px;
+        height: 100px;
+        border-radius: 20px;
+        flex: unset;
+    }
+
+    #metadata {
+        align-content: space-between;
+        // align-items: flex-start;
+        gap: 10px;
+        width: 100%
+    }
+    #song-info {
+        align-items: flex-start;
+    }
+    #root {
+        width: 100%;
+        height: 100%;
+        max-height: min-content;
+        gap: 10px;
+    }
+
+    
+</style>
+
+<div id="spotify-container" style="--fg:{palette.colors.text.hex};">
+    <div id="root" class="col">
+        <div id="metadata" class="row">
+            <div id="album-art" class="col">
+                <img src={sourceImageUrl} alt="Album Art"/>
+            </div>
+            <div id="song-info" class="col">
+                <div id="text-data" class="col">
+                    <div id="song-name" class="row">
+                        <span>{songName}</span>
+                    </div>
+                    <div id="artist-name" class="row">
+                        <span>{artistName} - {albumName}</span>
+                    </div>
+
+                </div>
+                <div id="progress-bar" class="col">
+                    <div id="progress-bar-inner" style="width: {percent(progress)}"></div>
+                </div>
+            </div>
+        </div>
+        <LyricsContainer />
+    </div>
+</div>
\ No newline at end of file
diff --git a/src/components/parts/Timestamp.svelte b/src/components/parts/Timestamp.svelte
new file mode 100644
index 0000000..41453c3
--- /dev/null
+++ b/src/components/parts/Timestamp.svelte
@@ -0,0 +1,25 @@
+<script lang="ts">
+    import { Tooltip } from "@svelte-plugins/tooltips";
+    import { DateTime } from 'luxon';
+    
+    export let date: string;
+    export let content: string = "%%";
+</script>
+
+<style lang="scss">
+    .timestamp {
+        background-color:  rgba(255,255,255,0.2);
+        padding: 2px;
+        border-radius: 5px;
+        display: inline;
+    }
+</style>
+<Tooltip content={date} align="center">
+    <span class="timestamp" >
+        {
+            content.replace("%%", (DateTime.fromJSDate(new Date(date)).toRelative({
+                
+            }) as string).replace(/( ago)|(in )/, ''))
+        }
+    </span>
+</Tooltip>
diff --git a/static/download_FILL0_wght400_GRAD0_opsz24.svg b/static/download_FILL0_wght400_GRAD0_opsz24.svg
deleted file mode 100644
index 6a171ea..0000000
--- a/static/download_FILL0_wght400_GRAD0_opsz24.svg
+++ /dev/null
@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 -960 960 960" width="24"><path d="M480-320 280-520l56-58 104 104v-326h80v326l104-104 56 58-200 200ZM240-160q-33 0-56.5-23.5T160-240v-120h80v120h480v-120h80v120q0 33-23.5 56.5T720-160H240Z"/></svg>
\ No newline at end of file