looking not too bad, added emoji reacts

src/components/AccountDetails.svelte

···
 </script>
 
 <div id="account-details">
-	<hr />
-	<p>Logged in as {user.name}</p>
+	<hr class="w-md" />
+	<p>logged in as {user.name}</p>
 </div>
 
 <style>

src/components/EmojiReact.svelte

···
+<script>
+	let { emotes } = $props();
+</script>
+
+<div class="emoticons">
+	{#each emotes as emote (emote.id)}
+		<span class="emote">{emote.name}</span>
+	{/each}
+</div>
+
+<style>
+	.emoticons {
+		position: absolute;
+		bottom: -1rem;
+		left: 1rem;
+		width: 100%;
+	}
+	.emote {
+		font-size: 1.25rem;
+		background: var(--sunrise-white);
+		border: 2px solid var(--sunrise-pink);
+		color: var(--sunrise-navy);
+		border-radius: 50%;
+		margin-left: -0.5rem;
+		display: inline-block;
+		width: 2rem;
+		height: 2rem;
+		text-align: center;
+	}
+</style>

src/components/Porthole.svelte

···
 <script lang="ts">
-	let { lexicon, children } = $props();
+	import EmojiReact from './EmojiReact.svelte';
+	import BskyPost from './lexicons/BskyPost.svelte';
+	import Leaflet from './lexicons/Leaflet.svelte';
+
+	let { lexicon, author, content } = $props();
 </script>
 
-<div class="porthole col-span-2">
-	<h1 class="text-lg font-bold">{lexicon}</h1>
-	{@render children()}
+<div class="porthole relative my-5">
+	<h1 style="color: {lexicon.color}" class="inline text-lg font-bold">{lexicon.name}</h1>
+	<img src={lexicon.logo} alt="{lexicon.name} Logo" class="logo" />
+	{#if lexicon.name == 'app.bsky.feed.post'}
+		<BskyPost post={{ text: content.text, createdAt: content.createdAt }} />
+	{:else if lexicon.name == 'pub.leaflet.document'}
+		<Leaflet {content} />
+	{/if}
+
+	<p class="absolute right-4 bottom-4">
+		created by <a class="accentlink" href="/profile/{author}">{author}</a>
+	</p>
+	<EmojiReact
+		emotes={[
+			{ id: 1, name: '😤' },
+			{ id: 2, name: '😢' },
+			{ id: 3, name: '😂' }
+		]}
+	/>
 </div>
 
 <style>
+	.accentlink {
+		color: var(--sunrise-purple);
+		text-decoration: underline;
+	}
+
 	.porthole {
-		border: 0.5rem solid var(--sunrise-orange);
+		color: var(--sunrise-navy);
+		background: var(--sunrise-white);
+
+		border: 0.5rem solid var(--sunrise-purple);
 		max-width: 60vw;
 		padding: 1rem;
 		border-radius: 40px;
 		corner-shape: superellipse(1.5);
-		box-shadow: 0 0 1rem 0rem var(--sunrise-purple);
+		/*box-shadow: 0 0 1rem 0rem var(--sunrise-purple);*/
+		position: relative;
+	}
+
+	.logo {
+		display: inline-block;
+		width: 1.125rem;
+		height: 1.125rem;
 	}
 </style>

src/components/Sidebar.svelte

···
 	let { children } = $props();
 </script>
 
-<div class="sidebar">
+<div class="sidebar h-min">
 	{@render children()}
 </div>
 

src/components/lexicons/BskyPost.svelte

···
+<script>
+	let { post } = $props();
+</script>
+
+<div class="bsky-post">
+	<p>{post.text}</p>
+	<p>posted at {post.createdAt}</p>
+</div>

src/components/lexicons/Leaflet.svelte

···
+<script lang="ts">
+	let { content } = $props();
+</script>
+
+<p>Ah this is a post am on the profile page for {content.text}</p>

src/routes/+page.svelte

···
 				user={{ name: 'goose.art', email: '[e-mail]', joined: '2022-01-01' }}
 			/>
 		</Sidebar>
-		<Porthole lexicon="Bluesky">
-			<h2 class="align-center">I am in the hole</h2>
-		</Porthole>
+		<div class="col-span-2">
+			<Porthole
+				lexicon={{
+					name: 'app.bsky.feed.post',
+					color: '#3471F6',
+					logo: 'https://upload.wikimedia.org/wikipedia/commons/7/7a/Bluesky_Logo.svg'
+				}}
+				author="goose.art"
+				content={{ text: 'I am in the hole', createdAt: '2022-01-01T00:00:00Z' }}
+			/>
+
+			<Porthole
+				lexicon={{
+					name: 'pub.leaflet.document',
+					color: '#6E9340',
+					logo: 'https://raw.githubusercontent.com/hyperlink-academy/leaflet/refs/heads/main/public/Logos/Logo%20Color%2064x64.svg'
+				}}
+				author="bees"
+				content={{ text: 'I am in the hole', createdAt: '2022-01-01T00:00:00Z' }}
+			/>
+		</div>
 	</div>
 </div>

src/routes/layout.css

···
 
 body {
 	background-color: light-dark(var(--sunrise-blue), var(--sunrise-navy));
+	/*background: linear-gradient(to bottom, var(--sunrise-blue), var(--sunrise-navy));*/
+	background-repeat: no-repeat;
+	background-attachment: fixed;
 	color: light-dark(var(--sunrise-navy), var(--sunrise-white));
 }
-
-.porthole {
-	background: var(--sunrise-white);
-	border: 1px solid var(--sunrise-orange);
-	color: light-dark(var(--sunrise-blue), var(--sunrise-navy));
-}

src/routes/profile/[username]/+page.svelte

···
+<script lang="ts">
+	import { page } from '$app/stores';
+</script>
+
+<p>Ah i am on the profile page for {$page.params.username}</p>