diff --git a/assets/scss/base/mixins.scss b/assets/scss/base/mixins.scss
index 1f6390d..42ea976 100644
--- a/assets/scss/base/mixins.scss
+++ b/assets/scss/base/mixins.scss
@@ -18,4 +18,25 @@
 	outline: solid;
 	outline-color: var(--primary-accent);
 	outline-offset: 4px;
+}
+
+@function css-function( $function, $values... ) {
+	@return 
+		 $function
+		 + unquote( '(' )
+		 + $values
+		 + unquote( ')' )
+	;
+}
+
+@function css-min( $values... ) {
+	@return css-function( min, $values );
+}
+
+@function css-max( $values... ) {
+	@return css-function( max, $values );
+}
+
+@function css-clamp( $values... ) {
+	@return css-function( clamp, $values );
 }
\ No newline at end of file
diff --git a/assets/scss/content/index.scss b/assets/scss/content/index.scss
index bc8043f..2d2277e 100644
--- a/assets/scss/content/index.scss
+++ b/assets/scss/content/index.scss
@@ -14,7 +14,6 @@
 		}
 		position: relative;
 		margin-bottom: 2em;
-
 	}
 	.subtitle {
 		font-size: 1.5em;
@@ -22,54 +21,70 @@
 		margin-bottom: 0.5em;
 		margin-top: 2em;
 	}
-	#bio {
-		.title:before {
-			content: 'bio';
-		}
-		.blurb {
-			line-height: 1.4;
-			font-size: 1.1em;
-		}
+	.quotes {
+		color: #555;
+		padding: 2rem;
+		font-size: 1.25rem;
+		display: flex;
+		flex-flow: column;
+		justify-content: space-around;
+		line-height: 1.5;
+		gap: 4rem;
+		font-family: monospace;
 	}
-	#skills {
-		.container {
-			display: grid;
-			grid-template-columns: repeat(auto-fit,minmax(15em,1fr));
-			gap: 2em;
-		}
-		.title {grid-column: 1 / -1;}
-		.title:before {
-			content: 'skills';
-		}
-		.card {
-			display: grid;
-			grid-template-areas: "img" "title" "desc";
-			grid-template-rows: auto auto 1fr;
-			&__title {
-				grid-area: title;
-				font-weight: 700;
-				font-size: 1.1em;
-				line-height: 1.2;
-				margin: 0.5em 0;
-			}
-			&__desc {
-				grid-area: desc;
-				line-height: 1.4;
-			}
-			&__img {
-				width: 100%;
-				aspect-ratio: 16/9;
-				object-fit: contain;
-				grid-area: img;
-				border-radius: 1em;
-			}
-			&.sysadm .card__img {padding: 1em;}
+
+	#summary .container {
+		display: grid;
+		grid-template-columns: 1fr;
+		@media (min-width: 40rem) {
+			grid-template-columns: 18rem 1fr;
 		}
 	}
 
-	#contact {
-		.title:before {
-			content: 'contact';
+	#birdsounds {
+		background: black;
+		color: white;
+		text-align: center;
+		> img {
+			max-height: 100vh;
+			height: 100%;
+			max-width: 100%;
+			object-fit: contain;
+			object-position: center bottom;
+		}
+		> div {
+			display: flex;
+			flex-flow: column;
+			align-items: center;
+		}
+		div img {
+			margin: 2rem 0;
+		}
+		display: flex;
+		flex-flow: column;
+		align-items: center;
+		@media (min-width: 40rem) {
+			> img {
+				height: 20rem;
+			}
+			flex-flow: row-reverse;
+			justify-content: space-between;
+			max-width: 40rem;
+		}
+		a {
+			color: white;
+			position: relative;
+			&:after {
+				content: '↗';
+				position: absolute;
+				right: -1em;
+				top: -1em;
+				color: white;
+			}
 		}
 	}
+	#updates {
+		line-height: 1.5;
+		font-size: 1.25rem;
+	}
 }
\ No newline at end of file
diff --git a/layouts/index.html b/layouts/index.html
index e479ad1..accd5a8 100644
--- a/layouts/index.html
+++ b/layouts/index.html
@@ -1,8 +1,7 @@
 {{ define "main" }}
 <main id="index">
-	<header class="" id="under-construction">
+	<header class="section" id="summary">
 		<div class="container">
-			<h1 class="title" style="margin-bottom: 0; margin-top: 1.5rem;">site under construction</h1>
 			<article class="vcard h-card">
 				<div class="banner"><img src="/images/people/avatar.png" alt="me" class="photo u-photo"></div>
 				<dl>
@@ -20,7 +19,30 @@
 					<dd class="note p-note">i have approximate knowledge of many things. perpetual student. (nb/ace/they)</dd>
 				</dl>
 			</article>
+			<div class="quotes">
+				<blockquote>
+					<p>it's scary how much you know.</p>
+				</blockquote>
+				<blockquote style="text-align: right">
+					<p>you're the first person i've met that keeps a spreadsheet of their lightbulbs.</p>
+				</blockquote>
+				<blockquote style="text-align: center">
+					<p>VERY MUCH not garbage [...] a worthwhile human</p>
+				</blockquote>
+			</div>
 		</div>
 	</header>
+	<section class="container" id="birdsounds">
+		<div class="">
+			<img src="/images/logos/koken_y.png" alt="birdsounds.media logo">
+			<a href="https://birdsounds.media" class="">view my photos</a>
+		</div>
+		<img src="/images/soulpunx.jpg" alt="#soulpunx">
+	</section>
+	<section class="section" id="updates">
+		<div class="container">
+			<p>currently: working on my websites, trying to do some documentation for an untitled social app project, and looking for work. check out the "work" tab of this site for my elevator pitch.</p>
+		</div>
+	</section>
 </main>
 {{ end }}
diff --git a/static/images/logos/koken_y.png b/static/images/logos/koken_y.png
new file mode 100644
index 0000000..d37f791
Binary files /dev/null and b/static/images/logos/koken_y.png differ
diff --git a/static/images/soulpunx.jpg b/static/images/soulpunx.jpg
new file mode 100644
index 0000000..1bfc321
Binary files /dev/null and b/static/images/soulpunx.jpg differ