hi new build

.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/

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

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.

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"
 }

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%

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>

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>

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>

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>

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">