<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>altalenae</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" type="image/x-icon" href="images/spiral.webp">
<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Inconsolata" />
<link rel="stylesheet" href="system7.css">
<link rel="stylesheet" href="c_index.css">
<link rel="stylesheet" href="https://serenitysrest.neocities.org/webring/star-trek-fans-webring/onionring.css" />              
</head>
<body>
<header class="header">
  <input type="checkbox" id="menu-toggle" class="menu-btn" />
  <label for="menu-toggle" class="menu-icon"> <span class="menu-text">menu</span> </label>
  <ul class="menu">
    <li class="menu-deco">✸</li>
    <li><a href="about.html">About</a></li>
    <li><a href="sitemap.html">Sitemap</a></li>
    <li><a href="sources.html">Sources</a></li>
    <li><a href="https://neocities.org/site/altalenae" target="_blank" rel="noopener noreferrer">Neocities</a></li>
  </ul>
</header>
<div class="wrapper">
  <div class="holy-grail-grid">
    <section class="left-sidebar">
      <div class="window" id="info">
        <div class="title-bar">
          <button class="close" aria-label="Close"></button>
          <h1 class="title">Hello!</h1>
          <button class="resize" aria-label="Resize"></button>
        </div>
        <div class="separator"></div>
        <p>welcome to <strong>altalenae</strong>!</p>
        <p>this is my personal website, it's still very much a work in progress but i hope you find something interesting to look at while i chip away at it</p>
        <p>- em</p>
      </div>
      <div class="window" id="hyper">
        <div class="title-bar">
          <button class="close" aria-label="Close"></button>
          <h1 class="title"></h1>
          <button class="resize" aria-label="Resize"></button>
        </div>
        <div class="separator"></div>
        <div class="details">
          <p>Source: <a href="https://link.springer.com/chapter/10.1007/978-3-319-16925-5_10" target="_blank"><em>Data, Metadata, and Ted</em></a></p>
        </div>
        <img src="images/hypertext.jpg" alt="Drawing of white cards connected by black arrows under the title 'ordinary' hypertext."></div>
      <div class="window" id="updates-window">
        <div class="title-bar">
          <button aria-label="Close" class="close"></button>
          <h1 class="title">Updates</h1>
          <button aria-label="Resize" class="resize"></button>
        </div>
        <div class="separator"></div>
        <div style="max-height: 170px; overflow: scroll;">
        <ul id="updates">
              <li>02.06 <a href="commonplace.html">commonplace update</a></li>
              <li>28.05 home card arrows work!!</li>
           	  <li>22.05 <a href="observations.html">observations</a> page is up!</li>
           	  <li>05.05 <a href="commonplace.html">commonplace update</a></li>
           	  <li>24.04 april <a href="https://altalenae.neocities.org/bookshelf#tab=3">bookbug review</a></li>
           	  <li>17.04 <a href="shrines/startrek.html">star trek page!</a></li>
           	  <li>01.04 <a href="https://altalenae.neocities.org/filmtv#tab=3">new movie review</a></li>
           	  <li>31.03 <a href="shrines/baseline.html">baseline test shrine!</a></li>
           	  <li>22.03 <a href="commonplace.html">commonplace update</a></li>
           	  <li>21.03 <a href="https://altalenae.neocities.org/filmtv#tab=3">new movie review</a></li>
           	  <li>14.03 <a href="recipes.html#mugs">mug collection!</a></li>           	
           	  <li>10.03 spring <a href="tarot.html">tarot spread</a> + new  <a href="blog.html">blog post ✶</a></li>
           	  <li>07.03 february <a href="https://altalenae.neocities.org/bookshelf#tab=3">bookbug review</a></li>
           	  <li>06.03 spring <a href="depot.html">depot</a> exhibit!</li>
           	  <li>03.02 <a href="#todo-window">webrings</a> now here as well</li>
           	  <li>01.02 <a href="emcore.html">emcore moodboard</a> is upp</li>
           	  <li>20.01 new <a href="https://altalenae.neocities.org/bookshelf#tab=4">book review</a></li>
           	  <p><strong>2025</strong></p>
           	  <li>31.12 <a href="commonplace.html">commonplace page</a> is up!</li>
           	  <li>26.12 <a href="https://altalenae.neocities.org/filmtv#tab=3">new tv show review</a></li>
           	  <li>20.12 winter <a href="tarot.html">tarot spread</a></li>
           	  <li>13.12 winter <a href="depot.html">depot</a> exhibit!</li>
           	  <li>12.12 index is finally centered</li>
           	  <li>08.12 <a href="shrines/jigsaw.html">new jigsaw shrine!</a></li>
           	  <li>05.11 <a href="blog.html">october blog post ✶</a></li>
           	  <li>02.11 <a href="https://altalenae.neocities.org/filmtv#tab=4">media tracker</a> &amp; <a href="https://altalenae.neocities.org/bookshelf#tab=4">new book review</a></li>
           	  <li>26.10 <a href="bookshelf.html">bookshelf</a> and <a href="filmtv.html">media</a> are now responsive</li>
           	  <li>14.10 <a href="tarot.html">autumn tarot spread</a></li>
           	  <li>08.10 <a href="blog.html">new blog post ✶</a></li>
           	  <li>04.10 <a href="blog.html">september blog post ✶</a></li>
           	  <li>23.09 <a href="https://altalenae.atabook.org/">guestbook</a>!!</li>
           	  <li>21.09 redesigned <a href="about.html">about</a> page</li>
           	  <li>06.09 september <a href="tarot.html">tarot</a> spread</li>
           	  <li>03.09 updated neighborhood <a href="links.html">links</a> + <a href="blog.html">new blog post ✶</a></li>
           	  <li>30.08 <a href="blog.html">new blog post ✶</a></li>
           	  <li>18.08 <a href="shrines.html">new shrines page</a> + <a href="shrines/nostalgia.html">chidhood nostalgia shrine</a>!</li>
           	  <li>13.08 <a href="recipe.html">recipe page</a> redesign yippee</li>
           	  <li>09.08 <a href="https://altalenae.neocities.org/filmtv#tab=4">new movie review</a></li>
           	  <li>01.08 <a href="blog.html">new blog post ✶</a></li>
           	  <li>25.07 <a href="tarot.html">new tarot spread</a></li>
           	  <li>23.07 <a href="links.html">links</a>, <a href="graphics.html">graphics</a> and <a href="sources.html">sources</a> are mobile friendly now</li>
           	  <li>19.07 <a href="about.html">about page redesign!</a></li>
           	  <li>13.07 <a href="https://altalenae.neocities.org/filmtv#tab=4">new movie review</a></li>
           	  <li>13.07 <a href="graphics.html">graphics page is up!</a></li>
           	  <li>11.07 <a href="blog.html">new blog post ✶</a></li>
           	  <li>25.06 <a href="https://altalenae.neocities.org/bookshelf#tab=3">bookbug page</a>  is up!</li>
           	  <li>25.06 <a href="#status">status window</a>  right here →</li>
           	  <li>21.06 <a href="lists.html">lists page</a> is up!</li>
           	  <li>20.06 <a href="https://altalenae.neocities.org/filmtv#tab=4">two new movie reviews</a></li>
           	  <li>20.06 updated <a href="links.html">links</a> (neighbours)</li>
           	  <li>15.06 <a href="artjournal.html">art journal page</a> is up!</li>
           	  <li>10.06 <a href="https://altalenae.neocities.org/bookshelf#tab=4">new book reviews</a></li>
           	  <li>04.06 <a href="blog.html">new blog post ✶</a></li>
           	  <li>01.06 <a href="tarot.html">tarot page</a> is up!</li>
           	  <li>31.05 <a href="blog.html">new blog post ✶</a></li>
           	  <li>27.04 <a href="blog.html">new blog post ✶</a></li>
           	  <li>11.04 <a href="https://altalenae.neocities.org/filmtv#tab=3">youtube section</a> is up</li>
           	  <li>11.04 <a href="https://altalenae.neocities.org/filmtv#tab=4">new film review!</a></li>
           	  <li>05.04 added some favorite <a href="https://altalenae.neocities.org/filmtv#tab=1">tv shows</a></li>
           	  <li>02.04 added <a href="https://altalenae.neocities.org/bookshelf#tab=1">article link</a></li>
           	  <li>30.03 <a href="blog.html">new blog post ✶</a></li>
           	  <li>23.03 <a href="https://altalenae.neocities.org/bookshelf#tab=1">added article link</a></li>
           	  <li>23.03 <a href="https://altalenae.neocities.org/bookshelf#tab=4">first book review!</a></li>
           	  <li>20.03 <a href="blog.html">new blog post ✶</a></li>
           	  <li>20.03 <a href="depot.html">art depot</a> is up!</li>
           	  <li>19.03 added home button in <a href="sources.html">sources</a></li>
           	  <li>16.03 <a href="blog.html">blog page</a> is up!</li>
           	  <li>15.03 <a href="links.html">links</a> is up + <a href="links.html#button">my button</a>!! </li>
           	  <li>14.03 you can now see what home card pages are active by hovering over the labels</li>
           	  <li>13.03 <a href="index.html">home page</a> clean up</li>
           	  <li>12.03 new <a href="sources.html">sources</a> layout</li>
           	  <li>11.03 <a href="filmtv.html">new movie review</a></li>
           	  <li>10.03 <a href="bookshelf.html">bookshelf.html</a> is up!</li>
           	  <li>05.03 first tv review <a href="https://altalenae.neocities.org/filmtv#tab=4">here</a> </li>
           	  <li>02.03 <a href="filmtv.html">filmtv.html</a> is up!</li>
           	  <li>26.02 new album in <a href="music.html">music.html</a></li>
             	<li>23.02 <a href="recipes.html">recipes.html</a> is up</li>
             	<li>22.02 <a href="music.html">music.html</a> is up</li>
             	<li>21.02 home page is scrollable!</li>
             	<li>20.02 <a href="poetry/poetry.html">poetry.html</a> is up</li>
             	<li>20.02 <a href="sources.html">sources.html</a> is up</li>
             	<li>20.02 <a href="about/about.html">about.html</a> is up</li>
          	</ul></div>
      </div>
    </section>
    <main class="main-content">
      <div class="home-card">
  <div class="rectangle">

    <div class="title-container">
      <img src="images/home.png" alt="" class="side-image">
      <div class="title">Home Card</div>
      <img src="images/home.png" alt="" class="side-image">
    </div>

    <div class="grid-container">
      
      <div class="grid-item">
        <a href="depot.html"><img src="images/depot.png" alt=""></a>
        <p><a href="depot.html">Depot</a></p>
      </div>

      <div class="grid-item">
        <a href="music.html"><img src="images/19.png" alt=""></a>
        <p><a href="music.html">Music</a></p>
      </div>

      <div class="grid-item">
        <a href="poetry/poetry.html"><img src="images/HC4.png" alt=""></a>
        <p><a href="poetry/poetry.html">Poetry</a></p>
      </div>

      <div class="grid-item">
        <a href="bookshelf.html"><img src="images/bookshelf.png" alt=""></a>
        <p><a href="bookshelf.html">Bookshelf</a></p>
      </div>

      <div class="grid-item">
        <a href="filmtv.html"><img src="images/cereal.png" alt=""></a>
        <p><a href="filmtv.html">Film&Tv</a></p>
      </div>

      <div class="grid-item">
        <a href="recipes.html"><img src="images/jam.png" alt=""></a>
        <p><a href="recipes.html">Recipes</a></p>
      </div>

      <div class="grid-item">
        <a href="tarot.html"><img src="images/moon.png" alt=""></a>
        <p><a href="tarot.html">Tarot</a></p>
      </div>

      <div class="grid-item">
        <a href="shrines.html"><img src="images/shrines/70.png" alt=""></a>
        <p><a href="shrines.html">Shrines</a></p>
      </div>

      <div class="grid-item">
        <a href="blog.html"><img src="images/coffee.png" alt=""></a>
        <p><a href="blog.html">Blog</a></p>
      </div>

      <div class="grid-item">
        <a href="commonplace.html"><img src="images/81.png" alt=""></a>
        <p><a href="commonplace.html">Commonplace</a></p>
      </div>	

      <div class="grid-item">
        <a href="observations.html"><img src="images/obsv/pocket.png" alt=""></a>
        <p><a href="observations.html">Notes</a></p>
      </div>

      <div class="grid-item">
        <a href="artjournal.html"><img src="images/87.png" alt=""></a>
        <p><a href="artjournal.html">Art</a></p>
      </div>
		
		<div class="grid-item">
        <a href="about.html"><img src="images/snoopy.png" alt=""></a>
        <p><a href="about.html">About</a></p>
      </div>	
		
		 <div class="grid-item">
        <a href="lists.html"><img src="images/Communication36.png" alt=""></a>
        <p><a href="lists.html">Lists</a></p>
      </div>
		
	      <div class="grid-item">
        <a href="graphics.html"><img src="images/graph/Treasures76.png" alt=""></a>
        <p><a href="graphics.html">Graphics</a></p>
      </div>	
		
		      <div class="grid-item">
        <a href="links.html"><img src="images/181.png" alt=""></a>
        <p><a href="links.html">Links</a></p>
      </div>

      <div class="grid-item">
        <a href="https://altalenae.atabook.org/"><img src="images/Communication48.png" alt=""></a>
        <p><a href="https://altalenae.atabook.org/">Guestbook</a></p>
      </div>
		
	<div class="grid-item">
        <a href="sources.html"><img src="images/100.png" alt=""></a>
        <p><a href="sources.html">Sources</a></p>
      </div>	

	<div class="grid-item">
        <a href="sitemap.html"><img src="images/99.png" alt=""></a>
        <p><a href="sitemap.html">Sitemap</a></p>
      </div>	
	

    </div>

<div class="arrow-container">
  <button id="prevPage" aria-label="Previous page">
    <img src="images/173.png" alt="Previous">
  </button>

  <span id="pageIndicator">1/1</span>

  <button id="nextPage" aria-label="Next page">
    <img src="images/172.png" alt="Next">
  </button>
</div>

  </div>

  <div class="rectangle rect1"></div>
  <div class="rectangle rect2"></div>
  <div class="rectangle rect3"></div>
</div>
      
      <!-- blinkies -->
      <div class="buttons"> 
		    <img src="images/anlucas3.gif" alt="world wide web connecting people since 1991.">
           	<img src="images/asexuals_now.gif" alt="Asexuals now!">
           	<img src="images/css2.gif" alt="Made with cascade styling sheets.">
           	<img src="images/html3.webp" alt="html3.">
           	<img src="images/seedyourtorrents.gif" alt="Sharing is caring… seed your torrents!">
           	<img src="images/believe.png" alt="I want to believe."> 
		  <a href="https://neocities.org/" target="_blank"><img src="images/neo.gif" alt="Neocities the web is yours."></a>
		           	<img src="images/bestviewed16bit.gif" alt="Best viewed 1024x768 16bit color.">
           	<img src="images/mobile.gif" alt="Not mobile friendly.">
           	<a href="https://www.tumblr.com/riding-with-the-wild-hunt/767435793628348416/a-whole-bunch-of-gazan-mutual-aid-projects-and?source=share" target="_blank"><img src="images/freepalestine.gif" alt="Free palestine!!"></a>
           	<a href="https://archive.org/" target="_blank"><img src="images/internetarchive.gif" alt="Internet Archive."></a>
           	<img src="images/neko.gif" alt="Neko '98 scape nyan!"></div>
    </main>
    <aside class="right-sidebar">
      <div class="window" id="lab">
        <div class="title-bar">
          <button class="close" aria-label="Close"></button>
          <h1 class="title"></h1>
          <button class="resize" aria-label="Resize"></button>
        </div>
        <div class="separator"></div>
        <div class="details">
          <p>Source: <a href="https://quadriformisratio.wordpress.com/2013/07/01/an-eternal-way-of-confusion/" target="_blank"> <em>An eternal way of confusion</em></a></p>
        </div>
        <img src="images/labyrinths.jpg" alt="Drawing of four ancient labyrinth symbols."> </div>
      <div class="window" id="osage">
        <div class="title-bar">
          <button class="close" aria-label="Close"></button>
          <h1 class="title"></h1>
          <button class="resize" aria-label="Resize"></button>
        </div>
        <div class="separator"></div>
        <div class="details">
          <p>Source: <a href="http://www.stringfigures.info/cfj/osage-diamonds.html" target="_blank"><em>Osage Diamonds</em></a></p>
        </div>
        <img src="images/cradle.jpg" alt="Drawing of two hands in a cat's cradle position."> </div>
      <div class="window rings" id="todo-window">
        <div class="title-bar">
          <button aria-label="Close" class="close"></button>
          <h1 class="title">Webrings</h1>
          <button aria-label="Resize" class="resize"></button>
        </div>
        <div class="separator"></div>
        <div style="overflow: scroll;">
          <div id='cdr' style="margin-top: -.7rem;"> 
            <script type="text/javascript" src="https://cdring.neocities.org/cdring/onionring-variables.js"></script> 
            <script type="text/javascript" src="https://cdring.neocities.org/cdring/onionring-widget.js"></script> 
          </div>
          <div id="star-trek-fans-ww">
                <script type="text/javascript" src="https://serenitysrest.neocities.org/webring/star-trek-fans-webring/onionring-variables.js"></script>
                <script type="text/javascript" src="https://serenitysrest.neocities.org/webring/star-trek-fans-webring/onionring-widget.js"></script>
            </div>
          <div id="PikRing">
            <link rel="stylesheet" href="pikring.css">
            <script type="text/javascript" src="https://nickolox.com/pikring/pikring-variables.js"></script> 
            <script type="text/javascript" src="https://nickolox.com/pikring/pikring-widget.js"></script> 
          </div>
          <div id="null"> 
            <script src='https://nuthead.neocities.org/ring/ring.js'></script> 
          </div>
          <div id='cdr' style="margin-top: -1rem;"> <a href="https://bungle.online/clique"><img src="images/byn.png" alt="Angel resting upon a computer"></a> </div>
        </div>
      </div>
    </aside>
    <footer class="footer">
      <div class="window" id="status">
        <div class="title-bar">
          <button aria-label="Close" class="close"></button>
          <h1 class="title">Status</h1>
          <button aria-label="Resize" class="resize"></button>
        </div>
        <div class="separator"></div>
        <div style="max-height: 95px; overflow: hidden; padding: 10px;">
          <iframe
                  src="https://petrapixel.neocities.org/widgets/statuscafe?center=0&marquee=0&font-family=monospace&font-size=14px&color=%23565673&linkColor=%230000fa&username=altalenae&hideUsername=0&timeColor=%236d0fba"
                  frameborder="0"
                  title="Status.Cafe Status"> </iframe>
        </div>
      </div>
    </footer>
  </div>
</div>
	
<script>	
document.addEventListener("DOMContentLoaded", () => {
  const container = document.querySelector(".grid-container");
  const items = Array.from(container.querySelectorAll(".grid-item"));

  const prevBtn = document.getElementById("prevPage");
  const nextBtn = document.getElementById("nextPage");

  const pageIndicator = document.getElementById("pageIndicator");	

  let currentPage = 0;
  let itemsPerPage = 1;

  function getColumns() {
    const styles = getComputedStyle(container);
    return styles.gridTemplateColumns.split(" ").length;
  }

  function calculateItemsPerPage() {
    const item = items[0];
    if (!item) return;

    const cols = getColumns();

    const containerHeight = container.clientHeight;
    const rowHeight = item.offsetHeight || 100;

    let rows = Math.max(1, Math.floor(containerHeight / rowHeight));

    itemsPerPage = rows * cols;

    itemsPerPage = Math.floor(itemsPerPage / cols) * cols;
  }

  function getMaxPage() {
    return Math.max(0, Math.ceil(items.length / itemsPerPage) - 1);
  }

  function renderPage() {
  const start = currentPage * itemsPerPage;
  const end = start + itemsPerPage;

  items.forEach((item, i) => {
    item.classList.toggle("active", i >= start && i < end);
  });

  const maxPage = getMaxPage();

  prevBtn.disabled = currentPage <= 0;
  nextBtn.disabled = currentPage >= maxPage;

  pageIndicator.textContent = `${currentPage + 1}/${maxPage + 1}`;
}

  function nextPage() {
    if (currentPage < getMaxPage()) {
      currentPage++;
      renderPage();
    }
  }

  function prevPage() {
    if (currentPage > 0) {
      currentPage--;
      renderPage();
    }
  }

  nextBtn.addEventListener("click", nextPage);
  prevBtn.addEventListener("click", prevPage);

  window.addEventListener("resize", () => {
    calculateItemsPerPage();

    const maxPage = getMaxPage();
    if (currentPage > maxPage) currentPage = maxPage;

    renderPage();
  });

  calculateItemsPerPage();
  renderPage();
});
</script>
</body>
</html>
