Updated archives

precipice/archives/aboutpage.html

@@ -32,7 +32,7 @@ <h2>aka <mark>the page i yap about myself</mark></h2>
 	<p>I never had a separate "about" page because I thought my professional page covered that aspect, and in my head it seemed weird to have two about pages. <i>However,</i> I caved because I kept seeing all these really cute and personal "about me" pages, and I wanted one too. (I especially wanted a place for those 88x31 buttons!)</p>
 	<p>It may seem kind of weird that it took me this long to create a cozier version of an about page, but I guess I had never seen myself participating much in the personal-web community beyond doing my own thing. This changed as I started to learn more about webrings and cliques, and I wanted to dip my toes in it... In the end, a professional biography is a lot more corporate and business-like, while this separate page would allow me to express myself more freely!</p>
 
-	<h3>version 1.0 › aug 2024 — ???</h3>
+	<h3>version 1.0 › august 2024 — ???</h3>
 	<p>I knew I wanted something soft, pink and frilly for my personal about page. From the beginning, I had in mind the particular lace border I ended up using in my design from Lovecandied, a now-defuct Japanese web sozai (web material) page I used to trawl as a kid. It didn't matter that the website was in Japanese — somehow my ten-year-old self figured it out. However, the website has been dead for awhile at this point, and I had to heavily rely on the Wayback Machine to find what I wanted! It's kind of sad visiting the site via the Wayback Machine; because although it's preserved a lot of the website across multiple years, there are many broken image tags, meaning tons of beautiful pixel art I admired have been lost to time.</p>
 
 	<figure>

precipice/archives/archives.html

@@ -31,7 +31,7 @@ <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>
+	<h3>version 1.0 › december 2023 — august 2024</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" alt="A screenshot of the archives page. On the left, there is a narrow strip of neon green with the rotated words 'click for navigation'. To its right, there is a column with neon green buttons on a white background, linking to the various pages of the archives. To the right of that is the main article with black text on white background. Some header texts have been additionally styled with the same neon green accent colours.">
@@ -47,7 +47,9 @@ <h3>version 1.0 › december 2023 — ???</h3>
 
 	<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>
 
-	<p>In August 2024, I decided to use <code>iframe</code> for the navigation side: it was too tedious to keep manually changing it every time I added a new page! Using <code>iframe</code> would allow me to edit just one file and have it be reflected across all the pages — it's a wonder I didn't think of it before. I also added a new favicon in September 2024 (I hadn't realized the links to my favicon never worked for my archives pages), using a <a href="https://icons8.com/icon/u1n0NJVoEwJ1/repository">book icon from icons8</a>.</p>
+	<h3>version 1.1 › august 2024 — ???</h3>
+	<p>In August 2024, I decided to use <code>iframe</code> for the navigation side: it was too tedious to keep manually changing it every time I added a new page! Using <code>iframe</code> would allow me to edit just one file and have it be reflected across all the pages — it's a wonder I didn't think of it before. I also added a "back to top" button in the bottom right corner of every page for accessibility purposes.</p>
+	<p>I also added a new favicon in September 2024 (I hadn't realized the links to my favicon never worked for my archives pages), using a <a href="https://icons8.com/icon/u1n0NJVoEwJ1/repository">book icon from icons8</a>.</p>
 	</main>
 </div>
 

precipice/archives/bookbug.html

@@ -0,0 +1,49 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+	<meta charset="UTF-8">
+	<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
+	<meta name="robots" content="noai, noimageai">
+	<title>archives › bookbug page</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>
+	<iframe src="navigation.html" class="frame"></iframe>
+	</nav>
+	 </details>
+	</div>
+	<a href="#top" title="back to top?" alt="back to top?"><div class="backtop">top?</div></a>
+
+	<main>	
+	<h1><span class="sketch-highlight">bookbug page</span></h1>
+	<h2>aka <mark>in my intellectual era</mark></h2>
+
+	<p>I chanced upon the <a href="https://bookbug.neocities.org/">Bookbug club</a>, which is a monthly online book club for personal websites. I've always loved reading, but I've never actually been part of a book club before! I did participate in a "book club" with some online friends before, but it only lasted for one book, and I was so nervous about the whole thing. There's something quite daunting about sharing and writing my opinions on books I've read, as I've noted in my <a href="/precipice/bookshelf">bookshelf page</a>, but I wanted to push myself out of my comfort zone. I thought it'd also be fun to not only try to be more critical in my reading, but to also translate those thoughts into a piece of cohesive writing.</p>
+
+	<h3>version 1.0 › september 2024 — ???</h3>
+	<p>I opted for a really simple design (that somehow still took a lot of time fixing) using <code>flexbox</code>. Honestly, I almost gave up with the flexbox and thought of using CSS grids instead, but I persevered and made it work! I wanted to make each review look a bit like index cards you'd pull out from a filing cabinet, thus the black rounded tabs with the corresponding book month. In a way, because of the chronological and structured nature of book reading in the book club, I thought this was a cute way to design the page. The <code>transform: rotate();</code> property honestly gave me such a difficult time, but I had it figured out in the end after realizing you could choose the pivot about which you rotated the divs.</p>
+
+	<p>The adorable worm was drawn by maple and can be obtained from the bookbug website! I thought it was a lovely illustration that I simply had to use, and the link colours of the page were taken from this illustration. Because the worm reminded me of having a nice picnic and reading under the tree, I chose a green plaid background that's reminiscent of picnic mats.</p>
+
+	<figure>
+	<img src="images/bookbug-v1.jpg" alt="A screenshot of my bookbug page.">
+	<figcaption><span>Version 1.0 of the landing page for my bookbug page.</span> Screenshot taken on 27 September 2024.</figcaption>
+	</figure>
+	<p>Because I used flexboxes, the responsive design came along really easily. I just had to <code>unset</code> the rotation transformations on some of the divs and change how some of the elements <code>flex-wrap</code>, but at this point I've had quite a bit of practice with the latter after all the pages I've coded for this website that it was not difficult.</p>
+	</main>
+</div>
+
+  </body>
+</html>
+

precipice/archives/bookshelf.html

@@ -38,14 +38,14 @@ <h3>version 1.0 › 2022 — 2023</h3>
 	<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">
+	<img src="images/bookshelf-v1.jpg" alt="">
 	<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">
+	<img src="images/bookshelf-v1-responsive.jpg" alt="">
 	<figcaption><mark>The responsive version of the layout</mark>, which rearranges the boxes into a single column.</figcaption>
 	</figure>
 
@@ -58,7 +58,7 @@ <h3>version 2.0 › july 2024 — ???</h3>
 	<p>Personally, I always feel shy sharing my opinions of works of art so publicly. Knowledge of what I love would now be exposed to the world, and left at the mercy of dissidents or critics who hate the work, and I'd be left feeling unjustified in my enjoyment of something. But I've been working on overcoming these fears, and this interpretation of my bookshelf is a manifestation of that! Taste, after all, is subjective, and difference in opinion is something I should fear less.</p>
 
 	<figure>
-	<img src="images/bookshelf-v2.jpg">
+	<img src="images/bookshelf-v2.jpg" alt="">
 	<figcaption><mark>Version 2.0 of my bookshelf</mark>.</figcaption>
 	</figure>
 

precipice/archives/bus.html

@@ -32,8 +32,20 @@ <h2>aka <mark>the links page!</mark></h2>
 	<p>How often is it that you find links / blogroll pages nowadays? I hadn't really thought about it, until I did. It was a common thing to find on personal blogs in the 2000s to early 2010s. I'd been learning more about webrings and cliques, when I thought about how much old websites used to link to each other. Nowadays, I think it's much harder to find a special page dedicated to outgoing links; in fact, most social media apps and pages tend to want to keep you on the platform, rather than usher you out and beautiful door. Anyway, you can <a href="https://www.are.na/block/29858943">read more of my thoughts on this on my are.na block</a>.</p>
 
 	<h3>version 1.0 › aug 2024 — ???</h3>
-	<p>Still under construction!</p>
-	<p>I made my own 88x31 button because of this bus stop page, and it was really fun! The pixel art bunny took me a few hours though, and the rest took a couple more hours, tragically.</p>
+	<p>I don't remember how or why I drew the connection between outgoing links and a bus stop, but it seemed like a fitting connection. My page for outgoing links would be like a bus stop, providing a way to find different landmarks on the internet (i.e. other people's pages and communities!). You could either choose where to go specifically, or let webrings take you to some random website, akin to taking a random bus with no specific direction in mind.</p>
+	<figure>
+	<img src="images/bus-v1.jpg" alt="Screenshot of my bus stop page, with green background and white boxes in front of it containing text. There is the unfinished pixel art of the bus stop at the top of the page.">
+	<figcaption><mark>Version 1.0 of my bus stop page</mark>, a simple single column design. Screenshot taken 27 September 2024.</figcaption>
+	</figure>
+	<p>The single column design was pretty straightforward to do with <code>margin: auto;</code> to center the white divs and <code>max-width</code> with <code>width: 100%;</code> for a quick responsive design. Despite that, I was actually heavily debating between having it be horizontal scrolling (to mimic walking across a space) or vertical scrolling for a long time. I ended up choosing the vertical scrolling (after flip flopping between the two designs) because, although less thematic, worked much better with the heading link jumps.</p>
+	<p>The main feature of the page is, of course, a pixel art of a bus stop. As of writing this, I'm still in the midst of working on it! I wanted to pace myself as this was (and still is) the biggest pixel art I've attempted yet. I didn't want to rush myself to finish it, and I think having it develop over time is something nice to be able to look back on. I have the main bus stop mapped out, but slowly adding details to the piece.</p>
+	<figure>
+	<img src="https://amalinalai.github.io/precipice/busstop/lina-button.gif" alt="My 88x31 button with a rabbit on the right and 'Lina's Home' writen in the middle.">
+	<figcaption><mark>Version 1.0 of my bookshelf</mark>.</figcaption>
+	</figure>
+	<p>I made a quick repeating tile pixel pattern for the background, meant to look like a (clover) grass field!</p>
+	<p>I also my own 88x31 button because of this bus stop page, and it was really fun! The pixel art bunny took me a few hours though, and the rest took a couple more hours, tragically.</p>
+
 
 	</main>
 </div>

precipice/archives/map.html

@@ -49,16 +49,19 @@ <h3>version 1.0 › 2022 — 2024</h3>
 
 	<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>
 
-	<h3>version 2.0 › 2024 — ???</h3>
+	<h3>version 2.0 › 2024 — august 2024</h3>
 	<p>Maintaining the same skeleton of the previous version, I changed up the design of my map of the internet in 2 ways: (1) making a new, planet orbit-based design, (2) modifying the landmarks and refreshing the old links with more relevant ones.</p>
+
 	<p>I still kept with the pixel art, but I wanted to work with the idea of how the attractive forces between two bodies decrease exponentially with distance. Thus, my landmarks orbit around my source at different distances. Made with the <a href="https://lospec.com/palette-list/paperback-2">paperback-2</a> palette.</p>
 
 	<figure>
 	<img src="images/map-v2.jpg">
 	<figcaption><span>Version 2.1 of my map of the internet</span>, inspired by space and pixel art. Screenshot taken 5 August 2024.</figcaption>
 	</figure>
 
-	<p>In version 2.2, I added an additional link for the bus stop page of my website by adding a little UFO in the top lefthand corner of the image.</p>
+	<h3>version 2.2 › august 2024 — ???</h3>
+	<p>I can't remember why I had version 2.1! I think it was probably fixing up some wrong code in the navigation. The design quickly shuffled into version 2.2, where I added an additional link for the bus stop page of my website by adding a little UFO in the top lefthand corner of the image.</p>
+	<p>I like to think of the bus stop as an additional way for me to explore the internet, outside of my other rings of comfort!</p>
 	</main>
 </div>
 

precipice/archives/navigation.html

@@ -15,12 +15,16 @@
 		 <a href="404page.html" target="_top">404 page</a>
 		 <a href="aboutpage.html" target="_top">about me page</a>
 		 <a href="archives.html" target="_top">archives</a>
+		 <a href="bookbug.html" target="_top">bookbug</a>
 		 <a href="bookshelf.html" target="_top">bookshelf</a>
 		 <a href="bus.html" target="_top">bus stop</a>
 		 <a href="guestbook.html" target="_top">guestbook</a>
+		 <a href="ohmygirl.html" target="_top">oh my girl</a>
 		 <a href="map.html" target="_top">map of the internet</a>
 		 <a href="pen.html" target="_top">pen collection</a>
 		 <a href="precipice.html" target="_top">precipice</a>
+		 <a href="sewing.html" target="_top">sewing room</a>
+		 <a href="tamagotchi.html" target="_top">tamagotchi</a>
 		 <a href="toybox.html" target="_top">toybox</a>
 		 <a href="tsp.html" target="_top">the slow press portfolio</a>
 		 <br>