sun shines in her eyes

Author: petracoding

content/_data/changelog.json

@@ -1,6 +1,8 @@
 [
   { "date": "2026-01-XX", "text": "TEMPLATE", "link": "" },
- 
+  { "date": "2026-01-03", "text": "Indie Web Contest winners announced!", "link": "/contest" },
+  { "date": "2026-01-02", "text": "Made some 88x31 buttons :) Feel free to use!", "link": "/about/blinkies" },
+
   { "date": "2025-12-29", "text": "Indie web contest voting will close in TWO DAYS!", "link": "/contest" },
   { "date": "2025-12-18", "text": "Updated/improved the code of the layout base code in the 'How to load the same layout on every page' tutorial.", "link": "/coding/layout-base-code" },
   { "date": "2025-12-16", "text": "Changed relationship status to taken! :3 + other small changes and extended indie web contest deadline!", "link": "/contest" },

content/_includes/coding.njk

@@ -200,7 +200,7 @@ testingOnLocalhost: false
         <img src="{{ nesting }}assets/img/layout/divider2.gif" alt="" aria-hidden="true" style="image-rendering: pixelated" />
         <a class="aside-contest" href="/contest">
           <img src="{{ nesting }}assets/img/layout/trophy.gif" width="80" height="85" alt="Trophy" />
-          <div><b>Indie Web Contest</b><small>Vote now!</small></div>
+          <div><b>Indie Web Contest</b><small>Winners announced!</small></div>
         </a>
       </aside>
 

content/_includes/petrapixel.njk

@@ -119,7 +119,7 @@ testingOnLocalhost: false
 
           <a class="aside-contest" href="/contest">
             <img src="{{ nesting }}assets/img/layout/trophy.gif" width="80" height="85" alt="Trophy" />
-            <div><b>Indie Web Contest</b><small>Vote now!</small></div>
+            <div><b>Indie Web Contest</b><small>Winners announced!</small></div>
           </a>
 
           <!-- ----------------- LINK BACK ----------------- -->
@@ -318,7 +318,7 @@ testingOnLocalhost: false
             <li aria-label="reading:">
               <img src="{{ nesting }}assets/img/layout/icon-book.png" alt="" title="reading:" aria-hidden="true" />
               <a href="https://www.goodreads.com/user/show/62158941-petra" target="_blank"
-                >-
+                >Main Street Vegan
                 <!--<span style="font-family: sans-serif; font-size: 0.9em">↺</span
                 >--></a
               >

content/_includes/tip-me.njk

@@ -5,13 +5,13 @@
     <p>
       I spend <b>many hours</b> of my free time creating {% if tipType %}{{ tipType }}s{% else %}pages{% endif %} like these that I publish for free. If you'd like to say thanks, please share this {%
       if tipType %}{{ tipType }}s{% else %}pages{% endif %} with others and/or <b><a href="https://ko-fi.com/petrastipjar/goal?g=0" target="_blank">buy me a coffee (donate)</a></b
-      >!
+      >! (I also have a little <a href="https://www.amazon.de/hz/wishlist/ls/3SCRJ1EMG1PZ1?type=wishlist&filter=unpurchased&sort=priority&viewType=list" target="_blank">wishlist</a>).
       <img aria-hidden="true" src="../assets/img/inline/laughing.gif" />
     </p>
     <p>
       <small
-        >This autumn I took in a stray cat that gave birth to 5 kittens in my apartment. As an unemployed uni student, the expenses (400+ eur in three months) have been rough for me. I appreciate ANY
-        help, no matter how small!
+        >Last autumn I took in a stray cat that gave birth to 5 kittens in my apartment. As an unemployed uni student, the expenses (400+ eur in three months) were rough for me. I appreciate ANY help,
+        no matter how small!
       </small>
     </p>
     <p style="display: none">

content/about/about-me.html

@@ -261,7 +261,6 @@ <h2>Dislikes <img alt="" aria-hidden="true" src="../assets/img/inline/!2.gif" al
         <li>modern design trends</li>
         <li>large submerged man-made objects</li>
         <li>bitter people</li>
-        <li>"manifestation"</li>
         <li><b>twitter</b></li>
         <li>spiders</li>
         <li><b>censorship</b></li>
@@ -663,48 +662,82 @@ <h2>Aesthetics</h2>
 
 <section>
   <h2>GPOY</h2>
-  <p>Here are some images that describe me really well. They are partially stolen from other people's GPOY. (Box scrolls horizontally.)</p>
-  <div class="about-me-pages__gpoy custom-scrollbar">
-    <img src="../assets/img/me/gpoy/c.png" alt="What's your favorite sport? Uhm, Mario Kart." />
-    <img src="../assets/img/me/gpoy/d.png" alt="Love going to bed with a new, good daydream scenario fresh in my mind. Like yes girl, movie night!" />
-    <img src="../assets/img/me/gpoy/a.png" alt="So... compliment me! Um, I can't hear you. Hello? Compliments?" />
-    <img src="../assets/img/me/gpoy/b.png" alt="I don't think I'm tough enough to be a woman." />
-    <img src="../assets/img/me/gpoy/e.png" alt="Playlists are truly a combination of the two best things in the world: music, sorting things into categories." />
-    <img src="../assets/img/me/gpoy/h.png" alt="What's a good demon to name my baby after? - Yahoo Answers" />
-    <img src="../assets/img/me/gpoy/f.png" alt="Kiss each other on the mouth! (Pointing a gun)" />
-    <img src="../assets/img/me/gpoy/i.png" alt="Nothing is more important than my egomania!" />
-    <img src="../assets/img/me/gpoy/j.png" alt="My hobbies? Uh, symbolism mostly. Metaphors and implications and the like." />
-    <img src="../assets/img/me/gpoy/k.png" alt="More guys should be bi. It's 2018. It's like, get over yourselves!" />
-    <img src="../assets/img/me/gpoy/g.png" alt="Established Relationship? Ew." />
-    <img src="../assets/img/me/gpoy/l.png" alt="This is a bit embarrassing but recently I've been enjoying going to bed at 9:30" />
-    <img src="../assets/img/me/gpoy/m.png" alt="Just saw someone my age being able to perform basic tasks without needing exaact instructions. Day ruined." />
-    <img src="../assets/img/me/gpoy/0.jpg" alt="Possible Autism, Hearing Issues, Bisexual Tendencies" />
-    <img src="../assets/img/me/gpoy/n.png" alt="people be saying things so definitively. like man i think it depends" />
-    <img src="../assets/img/me/gpoy/1.jpg" alt="I like cannibalism as a metaphor for obsessive devotion, religious imagery, academic validation, being bisexual." />
+  <p>AKA "relatable images". They are partially stolen from other people's GPOY.</p>
+  <div class="about-me-pages__gpoy isotope-items">
+    <div class="gpoy"><img src="../assets/img/me/gpoy/c.png" alt="What's your favorite sport? Uhm, Mario Kart." /></div>
+    <div class="gpoy"><img src="../assets/img/me/gpoy/d.png" alt="Love going to bed with a new, good daydream scenario fresh in my mind. Like yes girl, movie night!" /></div>
+    <div class="gpoy"><img src="../assets/img/me/gpoy/a.png" alt="So... compliment me! Um, I can't hear you. Hello? Compliments?" /></div>
+    <div class="gpoy"><img src="../assets/img/me/gpoy/b.png" alt="I don't think I'm tough enough to be a woman." /></div>
+    <div class="gpoy"><img src="../assets/img/me/gpoy/e.png" alt="Playlists are truly a combination of the two best things in the world: music, sorting things into categories." /></div>
+    <div class="gpoy"><img src="../assets/img/me/gpoy/h.png" alt="What's a good demon to name my baby after? - Yahoo Answers" /></div>
+    <div class="gpoy"><img src="../assets/img/me/gpoy/f.png" alt="Kiss each other on the mouth! (Pointing a gun)" /></div>
+    <div class="gpoy"><img src="../assets/img/me/gpoy/i.png" alt="Nothing is more important than my egomania!" /></div>
+    <div class="gpoy"><img src="../assets/img/me/gpoy/j.png" alt="My hobbies? Uh, symbolism mostly. Metaphors and implications and the like." /></div>
+    <div class="gpoy"><img src="../assets/img/me/gpoy/k.png" alt="More guys should be bi. It's 2018. It's like, get over yourselves!" /></div>
+    <div class="gpoy"><img src="../assets/img/me/gpoy/g.png" alt="Established Relationship? Ew." /></div>
+    <div class="gpoy"><img src="../assets/img/me/gpoy/l.png" alt="This is a bit embarrassing but recently I've been enjoying going to bed at 9:30" /></div>
+    <div class="gpoy"><img src="../assets/img/me/gpoy/m.png" alt="Just saw someone my age being able to perform basic tasks without needing exaact instructions. Day ruined." /></div>
+    <div class="gpoy"><img src="../assets/img/me/gpoy/0.jpg" alt="Possible Autism, Hearing Issues, Bisexual Tendencies" /></div>
+    <div class="gpoy"><img src="../assets/img/me/gpoy/n.png" alt="people be saying things so definitively. like man i think it depends" /></div>
+    <div class="gpoy"><img src="../assets/img/me/gpoy/1.jpg" alt="I like cannibalism as a metaphor for obsessive devotion, religious imagery, academic validation, being bisexual." /></div>
 
-    <img src="../assets/img/me/gpoy/3.jpg" alt="Cannibalism as a metaphor for love, save me." />
-    <img src="../assets/img/me/gpoy/4.jpg" alt="My subtitles. I can't hear without my subtitles..." />
-    <img src="../assets/img/me/gpoy/5.jpg" alt="Yay, making lists and categorizing items!" />
-    <img src="../assets/img/me/gpoy/8.jpg" alt="I've emailed. I've textem them as well. I'll send them another email." />
-    <img src="../assets/img/me/gpoy/o.jpg" alt="Fruit should not be hot." />
-    <img src="../assets/img/me/gpoy/7.jpg" alt="I literally get embarrassed doing anything" />
-    <img src="../assets/img/me/gpoy/dec1.jpg" alt="Better lock in and fix and do everything" />
-    <img src="../assets/img/me/gpoy/9.webp" alt="When you stop being shy around new people but you start getting annoying..." />
-    <img src="../assets/img/me/gpoy/6.jpg" width="260" alt="I am normal and can be trusted with affection" />
-    <img src="../assets/img/me/gpoy/may1.png" alt="I choose not to drink." />
-    <img src="../assets/img/me/gpoy/may3.png" alt="My hobbies include daydreaming about romance and loving the color pink" />
-    <img src="../assets/img/me/gpoy/may2.png" alt="Little miss 'Lemme make a list'" />
-    <img src="../assets/img/me/gpoy/may7.png" alt="Wow! This Woman Won't Pursue Anything Unless She's Perfect At It On the First Try" />
-    <img src="../assets/img/me/gpoy/may4.jpg" alt="we need irl subtitles. what are you guys even saying" />
-    <img src="../assets/img/me/gpoy/may5.jpg" alt="ever since i was a little girl i knew i wanted to be on the computer a lot" />
-    <img src="../assets/img/me/gpoy/may6.PNG" alt="i don't reconcile with anything because i don't give a shit" />
-    <img src="../assets/img/me/gpoy/10.jpg" alt="i am sick and twisted." />
+    <div class="gpoy"><img src="../assets/img/me/gpoy/3.jpg" alt="Cannibalism as a metaphor for love, save me." /></div>
+    <div class="gpoy"><img src="../assets/img/me/gpoy/4.jpg" alt="My subtitles. I can't hear without my subtitles..." /></div>
+    <div class="gpoy"><img src="../assets/img/me/gpoy/5.jpg" alt="Yay, making lists and categorizing items!" /></div>
+    <div class="gpoy"><img src="../assets/img/me/gpoy/8.jpg" alt="I've emailed. I've textem them as well. I'll send them another email." /></div>
+    <div class="gpoy"><img src="../assets/img/me/gpoy/o.jpg" alt="Fruit should not be hot." /></div>
+    <div class="gpoy"><img src="../assets/img/me/gpoy/7.jpg" alt="I literally get embarrassed doing anything" /></div>
+    <div class="gpoy"><img src="../assets/img/me/gpoy/dec1.jpg" alt="Better lock in and fix and do everything" /></div>
+    <div class="gpoy"><img src="../assets/img/me/gpoy/9.webp" alt="When you stop being shy around new people but you start getting annoying..." /></div>
+    <div class="gpoy"><img src="../assets/img/me/gpoy/6.jpg" width="260" alt="I am normal and can be trusted with affection" /></div>
+    <div class="gpoy"><img src="../assets/img/me/gpoy/may1.png" alt="I choose not to drink." /></div>
+    <div class="gpoy"><img src="../assets/img/me/gpoy/may3.png" alt="My hobbies include daydreaming about romance and loving the color pink" /></div>
+    <div class="gpoy"><img src="../assets/img/me/gpoy/may2.png" alt="Little miss 'Lemme make a list'" /></div>
+    <div class="gpoy"><img src="../assets/img/me/gpoy/may7.png" alt="Wow! This Woman Won't Pursue Anything Unless She's Perfect At It On the First Try" /></div>
+    <div class="gpoy"><img src="../assets/img/me/gpoy/may4.jpg" alt="we need irl subtitles. what are you guys even saying" /></div>
+    <div class="gpoy"><img src="../assets/img/me/gpoy/may5.jpg" alt="ever since i was a little girl i knew i wanted to be on the computer a lot" /></div>
+    <div class="gpoy"><img src="../assets/img/me/gpoy/may6.PNG" alt="i don't reconcile with anything because i don't give a shit" /></div>
+    <div class="gpoy"><img src="../assets/img/me/gpoy/10.jpg" alt="i am sick and twisted." /></div>
 
-    <!-- <img src="../assets/img/me/gpoy/TODO.jpg" alt="TODO" /> -->
+    <div class="gpoy"><img src="../assets/img/me/gpoy/dec5.jpg" alt="does anybody want to lovebomb me? i'm cute and easily manipulated" /></div>
+    <div class="gpoy"><img src="../assets/img/me/gpoy/dec1.jpg" alt="Better lock in tomorrow and fix everything" /></div>
+    <div class="gpoy"><img src="../assets/img/me/gpoy/dec2.jpg" alt="I love the word 'also'. I have more things to say." /></div>
+    <div class="gpoy"><img src="../assets/img/me/gpoy/dec4.jpg" alt="i'm a writer. but i don't write." /></div>
+    <div class="gpoy"><img src="../assets/img/me/gpoy/dec3.jpg" alt="girl help, i'm having creation ideas above my skill level" /></div>
+    <div class="gpoy"><img src="../assets/img/me/gpoy/dec7.jpg" alt="i need to make a list or sort things into categories" /></div>
+    <div class="gpoy"><img src="../assets/img/me/gpoy/dec6.jpg" alt="sorry for being intense about everything. it'll happen again" /></div>
+    <div class="gpoy"><img src="../assets/img/me/gpoy/dec8.jpg" alt="ever since i was little i knew i wanted to imagine fictional scenarios" /></div>
+    <div class="gpoy"><img src="../assets/img/me/gpoy/dec9.jpg" alt="a windy day will make you feel like you're in a better world" /></div>
+    <div class="gpoy"><img src="../assets/img/me/gpoy/dec10.jpg" alt="time to get dressed! but: who am i and what do i look like?" /></div>
+    <!-- <div class="gpoy"><img src="../assets/img/me/gpoy/TODO.jpg" alt="TODO" /></div> -->
 
-    <img src="../assets/img/me/gpoy/9.jpg" alt="outfit repeater, meal repeater, movie rewatcher, i know what i like" />
-    <img src="../assets/img/me/gpoy/2.jpg" alt="The world is a cruel and unjust place. Minutes later: Omg, Dan Avidan" />
-    <img src="../assets/img/me/gpoy/dan the man.jpg" alt="5/5 stars, love danny gonzalez" />
-    <img src="../assets/img/me/gpoy/dan the man2.jpg" alt="me whenever something goes wrong: watches danny gonzalez and drew gooden" />
+    <div class="gpoy"><img src="../assets/img/me/gpoy/9.jpg" alt="outfit repeater, meal repeater, movie rewatcher, i know what i like" /></div>
+    <div class="gpoy"><img src="../assets/img/me/gpoy/2.jpg" alt="The world is a cruel and unjust place. Minutes later: Omg, Dan Avidan" /></div>
+    <div class="gpoy"><img src="../assets/img/me/gpoy/dan the man.jpg" alt="5/5 stars, love danny gonzalez" /></div>
+    <div class="gpoy"><img src="../assets/img/me/gpoy/dan the man2.jpg" alt="me whenever something goes wrong: watches danny gonzalez and drew gooden" /></div>
   </div>
 </section>
+
+<!-- Isotope: -->
+<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
+<script src="https://unpkg.com/isotope-layout@3/dist/isotope.pkgd.min.js"></script>
+<script src="https://unpkg.com/imagesloaded@5/imagesloaded.pkgd.min.js"></script>
+<script>
+  document.addEventListener("DOMContentLoaded", function () {
+    const options = {
+      itemSelector: ".gpoy",
+      percentPosition: true,
+      layoutMode: "masonry",
+      sortBy: "random",
+      masonry: {
+        // use element for option
+        columnWidth: ".gpoy",
+      },
+    };
+
+    let $isotope = $(".isotope-items").isotope(options);
+    $isotope.imagesLoaded().progress(function () {
+      $isotope.isotope(options);
+    });
+  });
+</script>