diff --git a/precipice/archives/404page.html b/precipice/archives/404page.html
index a285e3c..eb372e4 100644
--- a/precipice/archives/404page.html
+++ b/precipice/archives/404page.html
@@ -19,7 +19,7 @@
 	<summary>click for navigation</summary>
 	<nav>
 	<p><small>Click the links below to explore the different histories of each page & this website.</small></p>
-	 <a href="/precipice/map/">prelude</a>
+	 <a href="/precipice/archives/">prelude</a>
 	 <a href="mainpage.html">main page</a>
 	 <a href="404page.html">404 page</a>
 	 <a href="archives.html">archives</a>
@@ -37,16 +37,23 @@
 	<h1><span class="sketch-highlight">404 page</span></h1>
 	<h2>aka <mark>the fever dream pages</mark></h2>
 	
-	<p>Typically, the 404 page on most websites are rather boring: they tend to display the error code, tell you the page is not found and link back to the main website. Occassionally, they might include a cute image of their mascot holding up some kind of 404 sign. However, in January 2023 I chanced upon <a href="https://5amgirlfriend.neocities.org/notfound/house404">5amgirlfriend's 404 page</a> which chronicles the day of "maid-chan", the purported housemaid of 5amgirlfriend. I adored it, its warmth and how it turned the 404 page from something purely perfunctory to something <i>more</i>. So tickled by this idea, I wanted something <i>more</i> for my 404 page as well.</p>
+	<p>Typically, the 404 page on most websites are rather boring: they tend to display the error code, tell you the page is not found and link back to the main website. Occassionally, they might include a cute image of their mascot holding up some kind of 404 sign. However, in January 2023 I chanced upon <a href="https://5amgirlfriend.neocities.org/notfound/house404">5amgirlfriend's 404 page</a> which outlines the day of "maid-chan", the purported housemaid of 5amgirlfriend. I adored it, its warmth, and how it morphed the 404 page from something purely perfunctory to something <i>more</i>. It gave the 404 page personality, and its something I still think about from time to time. So tickled by this idea, I wanted something <i>more</i> for my 404 page as well.</p>
 	
 	<h3>version 1.0 › may 2023 — ???</h3>
-	<p>In some ways, the 404 page is a liminal space — a transitory place between the "wrong" or non-existent page, and the "right" page. I wanted to lean heavily into that and underscore its liminality; rather than being a page one typically quickly navigates away from, I wanted to draw out the duration of time one spent in this space. I settled on a (very short) text-based adventure, as those websites I also often associated with liminal spaces with how barebones they often looked. It was also a good opportunity to write a short "story" — something I enjoyed doing.</p>
+	<p>In some ways, the 404 page is a liminal space — a transitory place between the "wrong" or non-existent page you've found yourself on, and the "right" page its trying to steer you towards. I wanted to lean heavily into that and underscore its liminality; rather than being a page one typically quickly navigates away from, I wanted to draw out the duration of time one spent in this space, should one choose to do so. I settled on a (very short) text-based adventure, in part, because the bareboned nature of text-based websites often reminded me of liminal spaces as well. I also enjoyed writing, weaving words in a way that hopefully elicits emotions and draws out visceral, physiological sensations.</p>
 	
-	<p>The short adventure itself involves the concepts of warped time; a space in which time doesn't move and instead is still for as long as you wanted to remain in it. In some ways, I was drawn to the idea of respite, of pausing time as a way to get a breather from everything else. Perhaps it's a reflection of my psyche at the time of writing: a yearning to have a space just like that to settle for a little while, a refuge from the stressors of life. It's called the fever dream pages because of this — reading and writing it makes me feel like I'm in one.</p>
+	<p>The short adventure itself involves the concepts of warped time; a space in which time doesn't move and instead is still for as long as you wanted to remain in it. Like sitting in a park without a clock, listening to the ducks and watching the stillness of the trees. In some ways, I was drawn to the idea of respite, of pausing time as a way to get a breather from everything else. Perhaps it's a reflection of my psyche at the time of writing: a yearning to have a space just like that to settle for a little while, a refuge from the stressors of life. It's called the fever dream pages because of this — writing and reading it made and makes me feel like I'm in one, free from the tethers of reality.</p>
+	
+	<figure>
+	<img src="images/404-v1.jpg">
+	<figcaption><span>The main 404 page</span>, a short text-based adventure, motivated by the liminality of 404 pages. Screenshot taken 25 December 2023.</figcaption>
+	</figure>
+	
+	<p>As it stands, the 404 page, or rather pages, consists of four separate HTML files. Originally I intended for the short adventure to be something longer, with more winding paths and branches to follow, but I was coding and writing it at a point in time where I didn't feel like I had too much time to spare. I thus settled on the current length, though I am not opposed to extending it in the future.</p>
+	
+	<p>The layout itself is simple to not draw attention away from the contents of the writing, and I made use of <a href="https://1linelayouts.glitch.me/">1-Line Layouts</a>' <i>Clamping My Style</i> template.  I also made use of the <code>details</code> element to allow visitors to decide what to do by clicking on the <code>summary</code>, and have the adventure respond to their choices by displaying the details on-click. At any point in time, the reader can choose to leave by clicking on the "Turn back and head home" link.</p>
 	
-	<p>Originally I intended for the short adventure to be something longer, with more winding paths and branches to follow, but I was coding and writing it at a point in time where I didn't feel like I had too much time to spare. I thus settled on the current length, though I am not opposed to extending it in the future.</p>
 	
-	<p>The layout itself is simple, and I made use of <a href="https://1linelayouts.glitch.me/">1-Line Layouts</a>' <i>Clamping My Style</i> template.  I also made use of the <code>details</code> element to allow visitors to decide what to do by clicking on the <code>summary</code>, and have the adventure respond to their choices by displaying the details on-click.</p>
 	</main>
 </div>
 	
diff --git a/precipice/archives/archives.css b/precipice/archives/archives.css
index 38883a9..7ea6231 100644
--- a/precipice/archives/archives.css
+++ b/precipice/archives/archives.css
@@ -93,7 +93,7 @@ nav {
 	height: 100vh;
 	width: 180px;
 	border-right: 1px solid #000;
-	overflow-y: scroll;
+	overflow-y: auto;
 }
 
 nav > a:link, nav > a:visited {
@@ -122,13 +122,13 @@ main {
 	margin-left: 240px;
 }
 
-main > p { line-height: 200%; }
+main > p, main > ol, main > ul { line-height: 200%; }
 
 mark { background-color: Chartreuse; }
 
 figure { max-width: 100%; height: auto; margin-top: 30px; margin-bottom: 30px; text-align: center; }
 
-figure > img { max-width: 100%; height: auto; padding: 3px; box-shadow: 2px 2px 20px Chartreuse;}
+figure > img { max-width: 100%; height: auto; box-shadow: 1px 1px 20px Chartreuse; }
 
 figcaption { font-style: italic; font-size: small; line-height: 100%; margin-top: 20px; text-align: center; }
 
diff --git a/precipice/archives/archives.html b/precipice/archives/archives.html
new file mode 100644
index 0000000..e30fcb3
--- /dev/null
+++ b/precipice/archives/archives.html
@@ -0,0 +1,62 @@
+<html>
+  <head>
+	<meta charset="UTF-8">
+	<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
+	<meta name="robots" content="noai, noimageai">
+	<title>archives › archives (!)</title>
+	
+	<link rel="stylesheet" href="archives.css" type="text/css" media="all">
+	<link rel="apple-touch-icon" sizes="180x180" href="favicon_io/apple-touch-icon.png">
+	<link rel="icon" type="image/png" sizes="32x32" href="favicon_io/favicon-32x32.png">
+	<link rel="icon" type="image/png" sizes="16x16" href="favicon_io/favicon-16x16.png">
+	<link rel="manifest" href="/site.webmanifest">
+  </head>
+  <body>
+	
+	<div class="container">
+	<div class="left">
+	<details>
+	<summary>click for navigation</summary>
+	<nav>
+	<p><small>Click the links below to explore the different histories of each page & this website.</small></p>
+	 <a href="/precipice/archives/">prelude</a>
+	 <a href="mainpage.html">main page</a>
+	 <a href="404page.html">404 page</a>
+	 <a href="archives.html">archives</a>
+	 <a href="bookshelf.html">bookshelf</a>
+	 <a href="map.html">map of the internet</a>
+	 <a href="pen.html">pen collection</a>
+	 <a href="precipice.html">precipice</a>
+	 <a href="toybox.html">toybox</a>
+	 <a href="tsp.html">the slow press portfolio</a>
+	</nav>
+	 </details>
+	</div>
+	
+	<main>
+	<h1><span class="sketch-highlight">archives</span></h1>
+	<h2>aka <mark>this page!!!!</mark></h2>
+	
+	<p>Yes, hi, hello. As I mentioned in my prelude, this page is for me to not only document how this website changes across time, but also keep a record of the things I was inspired by and how I achieved certain aspects of my layouts on this webpage. I am not an expert coder, so much of it typically involves a lot of stackoverflow, web searching and reading guides.</p>
+	
+	<h3>version 1.0 › december 2023 — ???</h3>
+	<p>I took heavy inspiration from <a href="https://handmade-web.net/resources.html">Handmade Web's menu</a> on mobile (the rotated menu text, and clicking to open), as well as <a href="https://100r.co/site/home.html">100r.co</a>'s use of the <code>details</code> tag to implement their navigation. I wanted to combine this two, and see how I could implement a sideways navigation using the <code>details</code> tag. It took some fiddling, learning how the <code>rotate</code> and <code>transform-origin</code> properties work so I could rotate the navigation button (that's actually the <code>summary</code> tag) how I wanted.</p>
+	<figure>
+	<img src="images/archives-v1.jpg">
+	<figcaption><span>Version 1.0 of my archives page</span>, screenshot taken 25 December 2023.</figcaption>
+	</figure>
+	
+	<p>Overall, I took my main page code as a base code to building this page. The responsive design of this page was a little more involved, as it required me to reset the rotation of the <code>summary</code> tag. I also didn't want the navigation pane to pop up by the side anymore, since it would take up valuable space on the screen for mobile devices, so I coded it to appear above the main text using the <code>z-index</code> property.</p>
+	
+	<figure>
+	<img src="images/archives-v1-responsive.jpg">
+	<figcaption><span>Responsive version of the layout</span>, screenshot taken 25 December 2023. Achieving this required a bit more coding that my other layouts thus far.</figcaption>
+	</figure>
+	
+	<p>The choice of <code>Chartreuse</code> as a colour was frankly arbitrary; I'd initially wanted yellow but didn't quite like how it looked with the highlighting I used for the headers, so I went to look at the default list of CSS defined colours and picked this one! Though I almost went with a blue or pink instead. On the note of highlighted text, I took the sketch highlight code I used for the main header from <a href="https://alvarotrigo.com/blog/css-highlight-text/">a blog post on alvarotrigo</a> on how to highlight text with CSS (see example 7).</p>
+	</main>
+</div>
+	
+  </body>
+</html>
+
diff --git a/precipice/archives/bookshelf.html b/precipice/archives/bookshelf.html
index 2c3d1cc..4349649 100644
--- a/precipice/archives/bookshelf.html
+++ b/precipice/archives/bookshelf.html
@@ -19,7 +19,7 @@
 	<summary>click for navigation</summary>
 	<nav>
 	<p><small>Click the links below to explore the different histories of each page & this website.</small></p>
-	 <a href="/precipice/map/">prelude</a>
+	 <a href="/precipice/archives/">prelude</a>
 	 <a href="mainpage.html">main page</a>
 	 <a href="404page.html">404 page</a>
 	 <a href="archives.html">archives</a>
@@ -37,15 +37,27 @@
 	<h1><span class="sketch-highlight">bookshelf</span></h1>
 	<h2>aka <mark>... the bookshelf lol</mark></h2>
 	
-	<p>The bookshelf, as its name might lead one to deduce, is a place for me to keep a list of books I want to read, am reading, and have read.</p>
+	<p>The bookshelf, as its name might lead one to deduce, is a place for me to keep track of books I want to read, am reading, and have read. Recently though, these lists have become somewhat outdated and obsolete, as I have a list written on a physical whiteboard by my bed.</p>
 	
 	<h3>version 1.0 › 2022 — 2023</h3>
-	<p>The layout was heavily inspired by Nico Chilla's are.na channel, <a href="https://www.are.na/nico-chilla/website-as-a-collection-of-boxes"><i>website as a collection of boxes</i></a> which houses links to different websites whose layout consists of boxes, often arranged in some ordered, grid-like fashion. Moreover, I'd chosen to write the contents of the webpage in Malay, a language I'd spent half my life studying in school but still struggling to understand and use. This choice to use a non-English language was inspired by <a href="http://tiana.land/">Tiana Dueck's page</a> written in Dutch and her motivation behind it. I hope to someday become better at Malay, and I have every intention of writing more of my pages in Malay.</p>
+	<p>The layout was heavily inspired by Nico Chilla's are.na channel, <a href="https://www.are.na/nico-chilla/website-as-a-collection-of-boxes"><i>website as a collection of boxes</i></a> which houses links to different websites whose layout consists of rectangles, often arranged in some ordered, grid-like fashion. Moreover, I'd chosen to write the contents of the webpage in Malay, a language I'd spent half my life studying in school but still struggling to understand and use. This choice to use a non-English language was inspired by <a href="http://tiana.land/">Tiana Dueck's page</a> written in Dutch and her motivation behind it. I hope to someday become better at Malay, and I have every intention of writing more of my pages in Malay.</p>
 	
-	<p>My own rendition was simply four square boxes stacked to form another square in two rows and two columns, achieved using the <code>flex-wrap: wrap;</code> property on the outer container <code>div</code>. In the event where the screen size got too small, the square boxes would reorganize themselves into a single column. I had a lot of help from <a href="https://css-tricks.com/snippets/css/a-guide-to-flexbox/">css-trick's guide to flexbox</a>.</p>
+	<p>My own rendition was simply four square boxes stacked in two rows and two columns to form another, larger square. I'd achieved this using the <code>flex-wrap: wrap;</code> property on the outer container <code>div</code>. In the event where the screen size got too small, the square boxes would reorganize themselves into a single column. I had a lot of help from <a href="https://css-tricks.com/snippets/css/a-guide-to-flexbox/">css-tricks' guide to flexbox</a> while figuring out flexboxes.</p>
+	
+	<figure>
+	<img src="images/bookshelf-v1.jpg">
+	<figcaption><mark>Version 1.0 of my bookshelf</mark>, a series of boxes stacked.</figcaption>
+	</figure>
+	
+	<p>Within my to-read list, I'd tried to make the list look like stacked books with a few <code>inline div</code> elements. Although it works, I think I could find a way to execute this better.</p>
+	
+	<figure>
+	<img src="images/bookshelf-v1-responsive.jpg">
+	<figcaption><mark>The responsive version of the layout</mark>, which rearranges the boxes into a single column.</figcaption>
+	</figure>
 	
 	<h3>version 1.5 › 2023 — ???</h3>
-	<p>When 2023 came around, I didn't know how to include both my 2022 and 2023 lists of books I've read without it being overwhelming, long and hard to scroll through in such a tiny box. I ended up simply removing the books I've read section. A part of me really wants to re-do this page; I rarely update my webpages and so the part of what books I'm currently reading feel like a chore to update, and somewhat redundant in the face of my lack of consistency in updating it.</p>
+	<p>When 2023 came around, I didn't know how to include both my 2022 and 2023 lists of books I've read without it being overwhelming, long and hard to scroll through in such a tiny box. I ended up simply removing the books I've read section. A part of me really wants to re-do this entire page; I rarely update my webpages and so the part of what books I'm currently reading feel like a chore to update, and somewhat redundant given my lack of consistency in updating it.</p>
 	
 	</main>
 </div>
diff --git a/precipice/archives/images/404-v1.jpg b/precipice/archives/images/404-v1.jpg
new file mode 100644
index 0000000..bb4f6de
Binary files /dev/null and b/precipice/archives/images/404-v1.jpg differ
diff --git a/precipice/archives/images/archives-v1-responsive.jpg b/precipice/archives/images/archives-v1-responsive.jpg
new file mode 100644
index 0000000..ca489c0
Binary files /dev/null and b/precipice/archives/images/archives-v1-responsive.jpg differ
diff --git a/precipice/archives/images/archives-v1.jpg b/precipice/archives/images/archives-v1.jpg
new file mode 100644
index 0000000..cd2da1e
Binary files /dev/null and b/precipice/archives/images/archives-v1.jpg differ
diff --git a/precipice/archives/images/bookshelf-v1-responsive.jpg b/precipice/archives/images/bookshelf-v1-responsive.jpg
new file mode 100644
index 0000000..da83263
Binary files /dev/null and b/precipice/archives/images/bookshelf-v1-responsive.jpg differ
diff --git a/precipice/archives/images/bookshelf-v1.jpg b/precipice/archives/images/bookshelf-v1.jpg
new file mode 100644
index 0000000..bf821f2
Binary files /dev/null and b/precipice/archives/images/bookshelf-v1.jpg differ
diff --git a/precipice/archives/images/map-v1.jpg b/precipice/archives/images/map-v1.jpg
new file mode 100644
index 0000000..500f5f8
Binary files /dev/null and b/precipice/archives/images/map-v1.jpg differ
diff --git a/precipice/archives/images/precipice-v1.jpg b/precipice/archives/images/precipice-v1.jpg
new file mode 100644
index 0000000..23f6860
Binary files /dev/null and b/precipice/archives/images/precipice-v1.jpg differ
diff --git a/precipice/archives/images/toybox-v1.jpg b/precipice/archives/images/toybox-v1.jpg
new file mode 100644
index 0000000..ac8674b
Binary files /dev/null and b/precipice/archives/images/toybox-v1.jpg differ
diff --git a/precipice/archives/images/tsp-portfolio-v1.jpg b/precipice/archives/images/tsp-portfolio-v1.jpg
new file mode 100644
index 0000000..e5caa9e
Binary files /dev/null and b/precipice/archives/images/tsp-portfolio-v1.jpg differ
diff --git a/precipice/archives/index.html b/precipice/archives/index.html
index 15a63ab..a4a1194 100644
--- a/precipice/archives/index.html
+++ b/precipice/archives/index.html
@@ -19,7 +19,7 @@
 	<summary>click for navigation</summary>
 	<nav>
 	<p><small>Click the links below to explore the different histories of each page & this website.</small></p>
-	 <a href="/precipice/map/">prelude</a>
+	 <a href="/precipice/archives/">prelude</a>
 	 <a href="mainpage.html">main page</a>
 	 <a href="404page.html">404 page</a>
 	 <a href="archives.html">archives</a>
@@ -42,32 +42,32 @@ <h2>aka <mark>what came before</mark> & <mark>why this exists</mark></h2>
 	<p>Before this website, I've had a myriad of other webpages, now long lost to my habit of deleting things I no longer thought relevant in my life. My first interest in web design and coding started with my first blog on <a href="https://blogger.com">Blogger</a> when I was around the age of ten. I cycled through a few different blogs, deleting them when I wanted to dispose of that identity I had crafted for myself.</p>
 	
 	<h3>the 2010s...</h3>
-	<p>When I was thirteen or so, I apparently had a <a href="https://www.livejournal.com/">Livejournal</a> where I posted a single piece of writing. I'd completely forgotten about it until I received an email about its impending deletion due to its inactivity about a decade later. Years later, I moved to <a href="https://wordpress.com">WordPress</a>. I had a website for my writing, another for my art portfolio (as part of a school assignment), and a final one which I used to privately write about my various opinions on different matters. They were soon deleted after many years, when I decided I wanted to keep my writing truly private and to myself. And through all these formative years of my life, I was also active on <a href="https://tumblr.com">Tumblr</a>. With Wordpress, I didn't quite have the flexibility I had with Blogger in terms of how my blog looked like, which I think was one of the grievances I had towards the platform.</p>
+	<p>When I was thirteen or so, I apparently had a <a href="https://www.livejournal.com/">Livejournal</a> where I posted a single piece of writing. I'd completely forgotten about it until I received an email about its impending deletion due to its inactivity about a decade later. When I was around fourteen or fifteen, I moved to <a href="https://wordpress.com">WordPress</a>. I had a website for my writing, another for my art portfolio (as part of a school assignment), and a final one which I used to privately write about my various opinions on different matters. They were soon deleted after many years, when I decided I wanted to keep my writing truly private and to myself. And through all these formative years of my life, I was also active on <a href="https://tumblr.com">Tumblr</a>, having multiple blogs and sideblogs dedicated to different interests I had at that time. With Wordpress, I didn't quite have the flexibility I had with Blogger in terms of how my blog looked like, which I think was one of the grievances I had towards the platform.</p>
 	
-	<p>Later on, I found out about <a href="https://neocities.org/">Neocities</a>, and coded a webpage for my art portfolio. That was later taken down too, for reasons I can't quite remember. For years after, my only internet presence came in the form of my Instagram account — open to few close friends only. I would use it as a journaling space of sorts; somewhere to write my thoughts and how I feel, chronicle my days, or even just post photos I wanted to keep.</p>
-	
-	
-	<h3>the 2020s...</h3>
-	<p>At the end of 2021, I decided to leave the platform. Doing so, I dedicated my time towards <a href="https://are.na">are.na</a> instead, where I found a place of nourishment and a safehaven to explore and collect ideas. I found myself with a deep-seated regret at not being a better archivist of my digital self, though I could not blame myself. And through the rabbit holes I followed on are.na, I reconnected with my desire to handcode websites in purely CSS and HTML — a callback to my childhood coding layouts for blogger.</p>
+	<p>Later on, I found out about <a href="https://neocities.org/">Neocities</a>, and coded a webpage for my art portfolio. That was later taken down too, for reasons I can't quite remember. For years after, my only internet presence came in the form of my Instagram account — open to a few close friends only. I would use it as a journaling space of sorts; somewhere to write my thoughts and how I feel, chronicle my days, or even just post photos I wanted to keep.</p>
 	
 	<figure>
 	<img src="images/neocities-portfolio.jpg">
 	<figcaption><span>My art portfolio, hosted on Neocities.</span> I recall being extremely proud of myself for coding the filters.</figcaption>
 	</figure>
 	
-	<p>I think I had another <a href="https://pages.github.com/">Github page</a> at some point (the same platform I'm currently hosting this website on), but it was shortlived. In 2022, I made another Neocities account, this time with the intention to share the space with my partner. We'd called it beansontoast, and I poured time into making a few pages for the site. Thinking it was a cute idea that beans on toast could also mean cat beans on toast, i.e. a cat paw on a piece of toast, I made a little front page which had a toast image with a cat paw sticking out from the corner of the image. On hover, this image would change to one where the cat paw is closer to said toast, as though it was reaching out.</p>
+	<h3>the 2020s...</h3>
+	<p>At the end of 2021, I decided to leave Instagram. My discontent with the platform and its data mining practices, and increasing number of ads and suggested content and an overall dissatisfaction with how it seemed to draw hours of my life away mindlessly scrolling pushed me over the edge. I deleted the application and it was surprisingly easy to let go. After leaving, I dedicated my time towards <a href="https://are.na">are.na</a> instead, where I cultivated a place of nourishment and a safehaven to explore and collect ideas. I found myself with a deep-seated regret at not being a better archivist of my digital self, though I could not blame myself. And through the rabbit holes I followed on are.na, I reconnected with my desire to handcode websites in purely CSS and HTML — a callback to my childhood coding layouts for blogger.</p>
+	
+	
+	<p>I think I had another <a href="https://pages.github.com/">Github page</a> at some point (the same platform I'm currently hosting this website on), but it was shortlived. I remember wanting to devote it to my study of <a href="https://en.wikipedia.org/wiki/Toki_Pona">Toki Pona</a>, but I had never been good with studying languages anyway, and soon my interest fizzled out, and along with it, the website.  In 2022, I made another Neocities account, this time with the intention to share the space with my partner. We'd called it beansontoast, and I poured time into making a few pages for the site, tending to it like one would a small front garden. Both of us came up with the name, thinking it cute that beans on toast could also mean cat beans on toast, i.e. a cat paw on a piece of toast. In honour of its name, I made a little front page which had a toast image with a cat paw sticking out from the corner of the image. On hover, this image would change to one where the cat paw is closer to said toast, as though it was reaching out.</p>
 	
 	<figure>
 	<img src="images/beansontoast.gif">
 	<figcaption><span>Front page of beansontoast,</span> the Neocities website I intended to share with my partner. We thought it was cute to have it also mean cat beans (paws).</figcaption>
 	</figure>
 	
-	<p>Some of the pages you see on this current domain (<a href="/precipice/map">map of the internet</a>, <a href="/precipice/bookshelf">bookshelf</a> and <a href="precipice/toybox">toybox</a>) were part of that Neocities website. I had every intention to teach my partner to code his space on the website, but it never really did come to fruition. Moreover, I think I didn't quite like how Neocities publicised everytime you made a change on your website, and how it tallied up the number of views you had to your page. In the end, I decided to take the website down, but not before downloading its contents.</p>
+	<p>Some of the pages you see on this current domain (<a href="/precipice/map">map of the internet</a>, <a href="/precipice/bookshelf">bookshelf</a> and <a href="precipice/toybox">toybox</a>) were part of that Neocities website. I had every intention to teach my partner to code his space on the website, but it never really did come to fruition due to our busy schedules. Moreover, I didn't quite like how Neocities publicised every time you made a change on your website, and how it tallied up the number of views you had to your page as it made me anxious to see these statistics. In the end, I decided to take the website down with permission from my partner, but not before downloading its contents.</p>
 	
-	<p>Just before the end of that website's life, this came to be. This was originally intended to be a purely professional website, but I decided to upload whatever I had made for beansontoast onto this, carving this little corner of the internet for myself. I think what had bothered me too at that time was feeling like my digital presence was highly fragmented and all over the place, which was another factor that had pushed me to delete the beansontoast website. In the end, allowing both my professional and personal sides to coexist on this single domain felt like a comforting resolution to whatever I was feeling.</p>
+	<p>Just before the end of that website's life, this came to be. This was originally intended to be a purely professional website, but I decided to upload whatever I had made for beansontoast onto this, carving this little corner of the internet for myself. I think what had bothered me too at that time was feeling like my digital presence was highly fragmented and all over the place, which was another factor that had pushed me to delete the beansontoast website. In the end, allowing both my professional and personal sides to coexist on this single domain felt like a comforting resolution to whatever I was feeling. I know some people might frown upon having such a deeply personal facet of my life coexist with my front-facing professional image in such close proximity, thinking it "unprofessional", but I live by the ethic that my life and who I am is more than just my work. My entire website is like an open field — free to explore should you please, though not obligated, and ruled by nothing else except my nature. I choose which pages spring from the soil, tend to the ground with my own hands.</p>
 	
 	<h3>welcome to the archives!!</h3>
-	<p>As I said, a part of me felt deeply regretful for not having better chronicled all previous iterations of my digital presence, and I wanted to remedy that with this one. I am reminded of how personal websites I used to visit when I was younger sometimes had a page dedicated to their site's old layouts. I wanted to do something similar for mine: this is where you find yourself right now. An archive to chronicle the history of most pages on this site and how they've looked like and changed over time. With that, I also wanted to document the inspiration, impetus and sometimes process of creating the layouts I have.</p>
+	<p>As I said, a part of me felt deeply regretful for not having better chronicled all previous iterations of my digital presence, and I wanted to remedy that with this one. I am reminded of how personal websites I used to visit when I was younger sometimes had a page dedicated to their site's old layouts. I wanted to do something similar for mine: this is where you find yourself right now. An archive to trace the history of most pages on this site and how they've looked like and changed over time. With that, I also want to document the inspiration, impetus and sometimes process behind creating the layouts on this website. This page is for me more than anything, but regardless, I hope you enjoy your stay here.</p>
 	
 	<p>For additional context, the entire website is static, hand-coded and will rely minimally on anything beyond CSS and HTML. Expect solutions that are pure HTML & CSS, instead of Javascript-dependent ones, for things I wish to implement in my layouts.</p>
 	
diff --git a/precipice/archives/mainpage.html b/precipice/archives/mainpage.html
index 7751995..52772fb 100644
--- a/precipice/archives/mainpage.html
+++ b/precipice/archives/mainpage.html
@@ -19,7 +19,7 @@
 	<summary>click for navigation</summary>
 	<nav>
 	<p><small>Click the links below to explore the different histories of each page & this website.</small></p>
-	 <a href="/precipice/map/">prelude</a>
+	 <a href="/precipice/archives/">prelude</a>
 	 <a href="mainpage.html">main page</a>
 	 <a href="404page.html">404 page</a>
 	 <a href="archives.html">archives</a>
@@ -37,7 +37,7 @@
 	<h1><span class="sketch-highlight">main page</span></h1>
 	<h2>aka <mark>the professional page(s)</mark></h2>
 	
-	<p>As mentioned, this entire website / domain was originally intended to be for my professional digital identity as I embarked on my PhD. It was early 2023, and I had just come back from a conference where I realised that email exchange was one way of making connections, but having a website allowed others to also find you easily and have your credentials on hand. Delighted at the opportunity to code my own layout and craft my own space, I created a domain and started working on it. The professional side of this domain, which I dub the main page is actually a collection of a few pages pertaining to me as a PhD student with similar layouts.</p>
+	<p>As mentioned, this entire website / domain was originally intended to be for my professional digital identity as I embarked on my PhD. It was early 2023, and I had just come back from a conference where I realised that email exchange was one way of making connections, but having a website allowed others to also find you easily and have your credentials on hand. Delighted at the opportunity to code my own layout and craft my own space, I created a domain and started working on it. The professional side of this domain, which I dub the main page, is actually a collection of a few pages pertaining to my identity as a PhD student, all with similar layouts.</p>
 	
 	<h3>version 1.0 › early 2023</h3>
 	<p>I looked to a lot of other scientists to what information they included in their websites. Obviously, as I had no publications yet, I stuck to a main page with a short introduction, a page for my CV and another for presentations.</p>
@@ -47,7 +47,7 @@ <h3>version 1.0 › early 2023</h3>
 	<figcaption><span>Version 1.0 of my professional page.</span> I was extremely interested in simple and lightweight web design at that time, and opted for something simple. However, I think the font size was too big especially on large screens.</figcaption>
 	</figure>
 	
-	<p>At that point in time, I was deeply enamoured by lightweight and brutalist web design, so I went with a simple layout I could easily make responsive as well. The first version had a font size that was marginally too big, an photo I had to Photoshop a friend out of, and less words about myself. I remember the horizontal line on the header was something I drew from <a href="https://100r.co/site/home.html">100r.co</a>. I also wasn't sure if adding a link to my personal site (hosted on the same domain) was considered 'professional' enough to do, so I decided against it.</p>
+	<p>At that point in time, I was deeply enamoured by lightweight and brutalist web design, so I went with a simple layout I could easily make responsive as well. I also drew inspiration from many older scientists whose websites look (probably almost exactly) like when they were first made in the early 2000s. The first version had a font size that was marginally too big, an photo I had to Photoshop a friend out of, and less words about myself. I remember the horizontal line on the header was something I drew from <a href="https://100r.co/site/home.html">100r.co</a>. I also wasn't sure if adding a link to my personal site (hosted on the same domain) was considered 'professional' enough to do, so I oscillated between including it and not through the few early iterations of it.</p>
 	
 	<figure>
 	<img src="images/mainpage-v1-responsive.jpg">
@@ -60,7 +60,7 @@ <h3>version 1.0 › early 2023</h3>
 	</ol>
 	
 	<h3>version 1.0+++ › 2023 — ???</h3>
-	<p>Over time, I slowly refined my page. Modifying the content, reducing the font size, adding more links, changing out the main image, etc. I even changed how the links looked and added hover transitions. Overall though, the layout remained the same. I'm not sure I have any intention of changing it, as I am quite happy with how it looks and works right now. :-)</p>
+	<p>Over time, I slowly refined my page by modifying the content, reducing the font size, adding more links, changing out the main image, etc. I even changed how the links looked and added hover transitions. Overall though, the general layout remained the same. I'm not sure I have any intention of changing it, as I am quite happy with how it looks and works right now. :-)</p>
 	
 	<figure>
 	<img src="images/mainpage-v1-plus.jpg">
diff --git a/precipice/archives/map.html b/precipice/archives/map.html
new file mode 100644
index 0000000..3a14c69
--- /dev/null
+++ b/precipice/archives/map.html
@@ -0,0 +1,63 @@
+<html>
+  <head>
+	<meta charset="UTF-8">
+	<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
+	<meta name="robots" content="noai, noimageai">
+	<title>archives › map of the internet</title>
+	
+	<link rel="stylesheet" href="archives.css" type="text/css" media="all">
+	<link rel="apple-touch-icon" sizes="180x180" href="favicon_io/apple-touch-icon.png">
+	<link rel="icon" type="image/png" sizes="32x32" href="favicon_io/favicon-32x32.png">
+	<link rel="icon" type="image/png" sizes="16x16" href="favicon_io/favicon-16x16.png">
+	<link rel="manifest" href="/site.webmanifest">
+  </head>
+  <body>
+	
+	<div class="container">
+	<div class="left">
+	<details>
+	<summary>click for navigation</summary>
+	<nav>
+	<p><small>Click the links below to explore the different histories of each page & this website.</small></p>
+	 <a href="/precipice/archives/">prelude</a>
+	 <a href="mainpage.html">main page</a>
+	 <a href="404page.html">404 page</a>
+	 <a href="archives.html">archives</a>
+	 <a href="bookshelf.html">bookshelf</a>
+	 <a href="map.html">map of the internet</a>
+	 <a href="pen.html">pen collection</a>
+	 <a href="precipice.html">precipice</a>
+	 <a href="toybox.html">toybox</a>
+	 <a href="tsp.html">the slow press portfolio</a>
+	</nav>
+	 </details>
+	</div>
+	
+	<main>
+	<h1><span class="sketch-highlight">map of the internet</span></h1>
+	<h2>aka <mark>charting my way on these digital seas</mark></h2>
+	
+	<p>As elaborated on the page itself, the map of the internet was created following <a href="http://tiana.land/map/1/">Tiana Dueck's guide</a>. There are many ways to think of it, sometimes I think of it as an anchor. It's almost like a bookmarks page, linking to places on the internet I want to revisit again, but more curated, placed in a way that aligns with what I want my web experience to be like. I'd like to someday re-do the map again, and reorganize, prune, and add links in a way that works for me today.</p>
+	
+	<h3>version 1.0 › 2022 — ???</h3>
+	<p>Part of my inspiration for this was Chinese painting scrolls and how the act of unscrolling and moving downwards through the scroll acts like the passage of time, or telling a tale. I also thought about how it would parallel the top-down scroll of a web page. In Tiana Dueck's guide, she mentions deciding our hierarchy of places on the map and visualising that in terms of proximity; mapping the path we'd like to take across the internet from our source / home. I place my source, or home, at the top of the page, and slowly work downwards as I get further.</p>
+	
+	<figure>
+	<img src="images/map-v1.jpg">
+	<figcaption><span>Version 1.0 of my map of the internet</span>, partly inspired by Chinese painting scrolls, and partly inspired by pixel art. Screenshot taken 25 December 2023.</figcaption>
+	</figure>
+	
+	<p>At the same time when I was creating this page, I was also very much interested in 1-bit pixel art (still am, at the time of writing this in December 2023), thanks to <a href="https://www.youtube.com/@BJGpixel">Brandon James Greer's videos</a>. I decided to try my hand at it, in an isometric perspective. The process took a couple of days, but I'm still immensely proud of how it looks like, given that it's my first attempt at 1-bit pixel art.</p>
+	
+	<figure>
+	<img src="/precipice/map/pixel-map-2x.png">
+	<figcaption><span>Full image of the map.</span> My first attempt at 1-bit pixel art, learning from Brandon's videos and tips.</figcaption>
+	</figure>
+	
+	<p>As with some of my other layouts, this one was again made using <a href="https://1linelayouts.glitch.me/">1-Line Layouts</a>' <i>Clamping My Style</i> template. Most of the responsive aspect of the design was came naturally by just allowing the elements to resize to pages on their own. The only issues was handling the hitboxes for links on the map image itself, which I found the solution for on <a href="https://stackoverflow.com/a/53597608">stackoverflow here</a> (bless) and used in conjuction with a <a href="https://zaneray.com/responsive-image-map/">responsive image map generator</a>.</p>
+	</main>
+</div>
+	
+  </body>
+</html>
+
diff --git a/precipice/archives/precipice.html b/precipice/archives/precipice.html
new file mode 100644
index 0000000..8cb90d0
--- /dev/null
+++ b/precipice/archives/precipice.html
@@ -0,0 +1,56 @@
+<html>
+  <head>
+	<meta charset="UTF-8">
+	<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
+	<meta name="robots" content="noai, noimageai">
+	<title>archives › precipice</title>
+	
+	<link rel="stylesheet" href="archives.css" type="text/css" media="all">
+	<link rel="apple-touch-icon" sizes="180x180" href="favicon_io/apple-touch-icon.png">
+	<link rel="icon" type="image/png" sizes="32x32" href="favicon_io/favicon-32x32.png">
+	<link rel="icon" type="image/png" sizes="16x16" href="favicon_io/favicon-16x16.png">
+	<link rel="manifest" href="/site.webmanifest">
+  </head>
+  <body>
+	
+	<div class="container">
+	<div class="left">
+	<details>
+	<summary>click for navigation</summary>
+	<nav>
+	<p><small>Click the links below to explore the different histories of each page & this website.</small></p>
+	 <a href="/precipice/archives/">prelude</a>
+	 <a href="mainpage.html">main page</a>
+	 <a href="404page.html">404 page</a>
+	 <a href="archives.html">archives</a>
+	 <a href="bookshelf.html">bookshelf</a>
+	 <a href="map.html">map of the internet</a>
+	 <a href="pen.html">pen collection</a>
+	 <a href="precipice.html">precipice</a>
+	 <a href="toybox.html">toybox</a>
+	 <a href="tsp.html">the slow press portfolio</a>
+	</nav>
+	 </details>
+	</div>
+	
+	<main>
+	<h1><span class="sketch-highlight">precipice</span></h1>
+	<h2>aka <mark>the landing page for the personal corner of this website</mark></h2>
+	
+	<p>The precipice was mainly named that because I like the sound of the world, and it just felt <i>right</i> somehow to call the personal corner of this website a precipice. In a way, like an edge to jump over into the unknown, to lose yourself in the slow growing trails I'm leaving behind as I add more to this corner of the website. I guess with a "personal" site, I feel freer to create whatever pages I want. It doesn't have to serve a public-facing purpose like my main page; it can be whatever I want it to be, for myself only. This is probably the oldest page on the website I've coded, since it was the first page I made for the original beansontoast Neocities website.</p>
+	
+	<h3>version 1.0 › 2022 — ???</h3>
+	<p>I'd apparently picked out the colours from the sleeping red panda photo I use as my display picture for are.na. (I don't actually remember this, but this is what I have written from 27 May 2022 in one of my notebooks). The photo is from my trip to the zoo, where we spotted a red panda high up in the trees taking a well-deserved nap. Originally, the page had been in French, because I was learning the language at that time, but it felt disingenuous to continue having it up in French because I was nowhere past being an absolute beginner in the language. On the page itself, I detail why I even started my personal website.</p>
+	
+	<figure>
+	<img src="images/precipice-v1.jpg">
+	<figcaption><span>Version 1.0 of the landing page for my personal site.</span> Screenshot taken on 25 December 2023.</figcaption>
+	</figure>
+	
+	<p>The page itself is simple, unabashedly based on <a href="https://1linelayouts.glitch.me/">1-Line Layouts</a>' <i>Clamping My Style</i> template. The responsive aspect of the design was straightforward, I didn't have to do anything special as the <code>div</code> elements are set to resize on their own.</p>
+	</main>
+</div>
+	
+  </body>
+</html>
+
diff --git a/precipice/archives/toybox.html b/precipice/archives/toybox.html
new file mode 100644
index 0000000..0963d85
--- /dev/null
+++ b/precipice/archives/toybox.html
@@ -0,0 +1,61 @@
+<html>
+  <head>
+	<meta charset="UTF-8">
+	<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
+	<meta name="robots" content="noai, noimageai">
+	<title>archives › toybox</title>
+	
+	<link rel="stylesheet" href="archives.css" type="text/css" media="all">
+	<link rel="apple-touch-icon" sizes="180x180" href="favicon_io/apple-touch-icon.png">
+	<link rel="icon" type="image/png" sizes="32x32" href="favicon_io/favicon-32x32.png">
+	<link rel="icon" type="image/png" sizes="16x16" href="favicon_io/favicon-16x16.png">
+	<link rel="manifest" href="/site.webmanifest">
+  </head>
+  <body>
+	
+	<div class="container">
+	<div class="left">
+	<details>
+	<summary>click for navigation</summary>
+	<nav>
+	<p><small>Click the links below to explore the different histories of each page & this website.</small></p>
+	 <a href="/precipice/archives/">prelude</a>
+	 <a href="mainpage.html">main page</a>
+	 <a href="404page.html">404 page</a>
+	 <a href="archives.html">archives</a>
+	 <a href="bookshelf.html">bookshelf</a>
+	 <a href="map.html">map of the internet</a>
+	 <a href="pen.html">pen collection</a>
+	 <a href="precipice.html">precipice</a>
+	 <a href="toybox.html">toybox</a>
+	 <a href="tsp.html">the slow press portfolio</a>
+	</nav>
+	 </details>
+	</div>
+	
+	<main>
+	<h1><span class="sketch-highlight">toybox</span></h1>
+	<h2>aka <mark>living my childhood dreams hehe</mark></h2>
+	
+	<p>Growing up on the internet, I remember pixel adoptables being a thing — they were pixel art characters or objects made by other people that you could "adopt" by uploading it to your own webpage and linking back to the original artist. Often times, these adoptables would be put together on a specific page on a person's website known as the "toybox". I never had pixel adoptables on my own page until now. In a way, it's like allowing myself the chance to live a part of my childhood that I didn't get to. Moreover, as many of these pages I grew up with start to disappear because of the loss of these communities due to centralized social media platforms, and just everyone generally growing up and getting older, I wanted somewhere safe to keep these parts of my childhood I look back fondly upon.</p>
+	
+	<h3>version 1.0 › 2022 — ???</h3>
+	<p>Clearly, I was inspired by Tamagotchis, another aspect of my childhood I look back fondly upon. My Tamagotchi was secondhand, but I'd treasured it dearly, and still have it today. I settled on making pixel art since these adoptables were often in pixel art as well. I think one can tell from my uneven edges that I'm nowhere near an expert at pixel art; again this is one of my first few early attempts at this new medium and I have a lot to learn! But it came out okay.</p>
+	
+	<figure>
+	<img src="images/toybox-v1.jpg">
+	<figcaption><span>Version 1.0 of my toybox</span>, made after a Tamagotchi. Screenshot taken 25 December 2023.</figcaption>
+	</figure>
+	
+	<p>You could navigate by clicking on the Tamagotchi buttons, or via linked texts within the "screen" of the Tamagotchi. As a callback to how I remember many of these websites used to achieve their navigation, I made use of an <code>iframe</code> for the "screen" of the Tamagotchi, which would change when navigating to different adoptable categories.</p>
+	
+	<p>This one was again made using <a href="https://1linelayouts.glitch.me/">1-Line Layouts</a>' <i>Clamping My Style</i> template, and the responsive design for this page was achieved using the same solutions as the one I used for version 1.0 of my map of the internet:</p>
+	<ul><li><a href="https://stackoverflow.com/a/53597608">stackoverflow here</a>, and</li>
+	<li><a href="https://zaneray.com/responsive-image-map/">responsive image map generator</a></li></ul>
+	
+	</main>
+</div>
+	
+  </body>
+</html>
+
diff --git a/precipice/archives/tsp.html b/precipice/archives/tsp.html
index 0d94923..9b0f908 100644
--- a/precipice/archives/tsp.html
+++ b/precipice/archives/tsp.html
@@ -19,7 +19,7 @@
 	<summary>click for navigation</summary>
 	<nav>
 	<p><small>Click the links below to explore the different histories of each page & this website.</small></p>
-	 <a href="/precipice/map/">prelude</a>
+	 <a href="/precipice/archives/">prelude</a>
 	 <a href="mainpage.html">main page</a>
 	 <a href="404page.html">404 page</a>
 	 <a href="archives.html">archives</a>
@@ -37,10 +37,15 @@
 	<h1><span class="sketch-highlight">the slow press portfolio</span></h1>
 	<h2>aka <mark>chronicling my designs!</mark></h2>
 	
-	<p>As I added more information about myself to my professional page, I wanted to add a page to showcase all the spreads I've designed for The Slow Press. Art has always been a part of my life, and I wanted some place to safekeep the things I was doing outside of my research and science.</p>
+	<p>As I added more information about myself to my professional page, I wanted to add a page to showcase all the spreads I've designed for The Slow Press. Art has always been a significant part of my life, and I wanted some place to safekeep the things I was doing outside of my research and science. The Slow Press has been the vessel for much of my creative output through the recent years, and it's always nice to look back and see how my style has shifted and how I've grown in a new medium. Looking back at the thumbnails of my older designs, I feel the tinge of embarassment (cue <i>"that doesn't look as good as I remembered."</i>) warm my cheeks, but I am nevertheless challenging myself to be open, and more importantly, accepting that perfection is impossible, and growth will continue to happen no matter our age.</p>
 	
 	<h3>version 1.0 › march 2023 — forever, probably</h3>
-	<p>Frankly, the webpage is was designed to be purely functional, consisting of an outer <code>div</code> which houses my text and a table showcasing my works. I didn't bother with making it a responsive design, and I don't think I have any intention to. Pretty sure I also referenced this <a href="https://stackoverflow.com/questions/73412670/use-tdhover-tbodyhover-and-rowspan-together">stackoverflow question</a> to highlight a table row on hover.</p>
+	<p>Frankly, the webpage is was designed to be purely functional, consisting of an outer <code>div</code> which houses my text and a <code>table</code> showcasing my works. I didn't bother with making it a responsive design, and I don't think I have any intention to. I'm pretty sure I also referenced this <a href="https://stackoverflow.com/questions/73412670/use-tdhover-tbodyhover-and-rowspan-together">stackoverflow question</a> to highlight a table row on hover.</p>
+	
+	<figure>
+	<img src="images/tsp-portfolio-v1.jpg">
+	<figcaption><span>My portfolio for The Slow Press.</span> Screenshot taken on 25 December 2023. It's a simple, purely functional design.</figcaption>
+	</figure>
 	</main>
 </div>
 	
diff --git a/precipice/toybox/index.html b/precipice/toybox/index.html
index 81995ce..0b57b37 100644
--- a/precipice/toybox/index.html
+++ b/precipice/toybox/index.html
@@ -5,9 +5,9 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 	<meta name="robots" content="noai, noimageai">
     <title>toybox</title>
-	<link rel="apple-touch-icon" sizes="180x180" href="/lina/favicon/apple-touch-icon.png">
-	<link rel="icon" type="image/png" sizes="32x32" href="/lina/favicon/favicon-32x32.png">
-	<link rel="icon" type="image/png" sizes="16x16" href="/lina/favicon/favicon-16x16.png">
+	<link rel="apple-touch-icon" sizes="180x180" href="/precipice/favicon/apple-touch-icon.png">
+	<link rel="icon" type="image/png" sizes="32x32" href="/precipice/favicon/favicon-32x32.png">
+	<link rel="icon" type="image/png" sizes="16x16" href="/precipice/favicon/favicon-16x16.png">
 	<link rel="manifest" href="/site.webmanifest">
 	<link href="toybox.css" rel="stylesheet" type="text/css" media="all">