added posts source

.gitea/workflows/pipeline.yml

@@ -0,0 +1,41 @@
+name: Deploy on push
+
+on:
+  push:
+    branches: [ "main" ]
+
+jobs:
+  deploy:
+    runs-on: ubuntu-latest
+    if: contains(gitea.event.head_commit.message, '[deploy]')
+
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v4
+
+      - name: Install ssh + rsync
+        run: |
+          sudo apt-get update
+          sudo apt-get install -y openssh-client rsync
+
+      - name: Setup SSH
+        env:
+          SSH_PRIVATE_KEY: ${{ secrets.SSH_PRIVATE_KEY }}
+        run: |
+          mkdir -p ~/.ssh
+          echo "$SSH_PRIVATE_KEY" > ~/.ssh/id_ed25519
+          chmod 600 ~/.ssh/id_ed25519
+          ssh-keyscan -p 22 "rchou.org" >> ~/.ssh/known_hosts
+          chmod 644 ~/.ssh/known_hosts
+
+      - name: Rsync to server
+        env:
+          SSH_TARGET_DIR: /home/cab/docker/blog/src
+          RSYNC_SOURCE: .
+        run: |
+          rsync -rz --delete \
+            --no-times --no-perms --no-owner --no-group \
+            --omit-dir-times --mkpath \
+            -e "ssh -i ~/.ssh/id_ed25519 -p 22" \
+            "$RSYNC_SOURCE"/ "deploy@rchou.org:${SSH_TARGET_DIR}/"
+

assets/site.webmanifest

@@ -0,0 +1 @@
+{"name":"","short_name":"","icons":[{"src":"/android-chrome-192x192.png","sizes":"192x192","type":"image/png"},{"src":"/android-chrome-512x512.png","sizes":"512x512","type":"image/png"}],"theme_color":"#ffffff","background_color":"#ffffff","display":"standalone"}

blog/css/blog.css

@@ -0,0 +1,168 @@
+body {
+  font-family: 'IBM Plex Mono', monospace;
+  font-family: 'IBM Plex Sans', sans-serif;
+  margin: 0;
+  color: white;
+  background-color: #111;
+  text-align: left;
+}
+
+.mid {
+  width: 650px;
+  margin: auto;
+  position: relative;
+}
+
+@media screen and (max-width: 650px) {
+  .mid {
+    width: 100%;
+  }
+}
+
+h1 {
+  text-align: left;
+  font-size: 3.5rem;
+}
+
+h2 {
+  text-align: left;
+  font-size: 2.8rem;
+}
+
+hr {
+  width: 650px;
+  color: white;
+}
+
+@media screen and (max-width: 650px) {
+  hr {   
+    width: 100%;
+  }
+}
+
+p {
+  font-size: 1.2rem;
+}
+
+a {
+  text-decoration: none;
+  font-size: 1.2rem;
+}
+
+ /* unvisited link */
+a:link {
+  color: white;
+}
+
+/* visited link */
+a:visited {
+  color: white;
+}
+
+/* mouse over link */
+a:hover {
+  color: #62bd69;
+}
+
+/* selected link */
+a:active {
+  color: #62bd69;
+}
+
+ul {
+  font-size: 1.2rem;
+  text-align: left;
+  list-style-position: outside;
+}
+
+.movie-container {
+  display: flex;
+  align-items: center;
+  padding: 20px;
+  border-radius: 10px;
+  width: 674px;
+  margin:20px auto 20px auto;
+  position: relative;
+  background-color: #222;
+}
+
+@media screen and (max-width: 650px) {
+  .movie-container {
+    width: 100%;
+  }
+}
+
+.poster {
+  flex: 0 0 auto;
+  margin-right: 20px;
+}
+
+.poster img {
+  width: 200px;
+  height: 300px;
+  object-fit: cover;
+  border-radius: 10px;
+}
+
+.review {
+  flex: 1 1 auto;
+}
+
+.review h2 {
+  font-size: 24px;
+  margin-bottom: 10px;
+}
+
+.review p {
+  font-size: 16px;
+  line-height: 1.5;
+  margin-bottom: 0;
+}
+
+.footer {
+  margin: auto;
+  width: 650px;
+  background: #222;
+  padding: 2rem;
+}
+
+@media screen and (max-width: 650px) {
+  .footer {   
+    width: 100%;
+  }
+}
+
+.social-links {
+  text-align: center;
+  display: flex;
+  justify-content: center;
+  margin-bottom: 20px;
+  font-size: 1.2rem;
+}
+
+.social-links a {
+  color: white;
+  margin: 0px 5px 0px 5px;
+  text-decoration: none;
+  transition: color 0.3s ease;
+}
+
+.social-links p {
+  margin: 0px 5px 0px 5px;
+}
+
+.social-links a:nth-child(2):hover {
+  color:#d1479e;
+}
+
+.social-links a:nth-child(3):hover {
+  color:#4ba2c4;
+}
+
+.social-links a:nth-child(4):hover {
+  color:#1DB954;
+}
+
+.social-links a:nth-child(5):hover {
+  color:#d1c649;
+}

blog/css/style.css

@@ -0,0 +1,273 @@
+body {
+  font-family: 'IBM Plex Mono', monospace;
+  font-family: 'IBM Plex Sans', sans-serif;
+  margin: 0;
+  color: white;
+  background-color: #111;
+  text-align: left;
+}
+
+.mid {
+  width: 650px;
+  margin: auto;
+  position: relative;
+}
+
+@media screen and (max-width: 650px) {
+  .mid {   
+    width: 100%;
+  }
+}
+
+h1 {
+  text-align: left;
+  font-size: 3.5rem;
+}
+
+h2 {
+  text-align: left;
+  font-size: 2.8rem;
+}
+
+hr {
+  width: 650px;
+  color: white;
+}
+
+@media screen and (max-width: 650px) {
+  hr {   
+    width: 100%;
+  }
+}
+
+p {
+  font-size: 1.2rem;
+}
+
+a {
+  text-decoration: none;
+  font-size: 1.2rem;
+}
+
+ /* unvisited link */
+a:link {
+  color: white;
+}
+
+/* visited link */
+a:visited {
+  color: white;
+}
+
+/* mouse over link */
+a:hover {
+  color: #62bd69;
+}
+
+/* selected link */
+a:active {
+  color: #62bd69;
+}
+
+ul {
+  font-size: 1.2rem;
+  text-align: left;
+  list-style-position: outside;
+}
+
+@import url(https://fonts.googleapis.com/css?family=Open+Sans:400italic);
+blockquote{
+  font-size: 1.4em;
+  width: 650px;
+  margin: 50px auto;
+  font-family: Open Sans;
+  font-style: italic;
+  color: darkgray;
+  padding: 1.2em 30px 1.2em 30px;
+  border-left: 8px solid #62bd69 ;
+  line-height: 1.6;
+  text-align: center;
+  position: relative;
+  background: #222;
+}
+
+@media screen and (max-width: 650px) {
+  blockquote {   
+width: 100%;
+  }
+}
+
+blockquote::before{
+  font-family: Arial;
+  content: "\201C";
+  color: #62bd69;
+  font-size: 4em;
+  position: absolute;
+  left: 10px;
+  top: -10px;
+}
+
+blockquote::after{
+  content: '';
+}
+
+blockquote span{
+  display: block;
+  color: white;
+  font-style: normal;
+  font-weight: bold;
+  margin-top: 1em;
+}
+
+.footer {
+  margin: auto;
+  width: 650px;
+  background: #222;
+  padding: 2rem;
+}
+
+@media screen and (max-width: 650px) {
+  .footer {   
+    width: 100%;
+  }
+}
+
+.social-links {
+  text-align: center;
+  display: flex;
+  justify-content: center;
+  margin-bottom: 20px;
+}
+
+.social-links a {
+  color: white;
+  margin: 0px 5px 0px 5px;
+  text-decoration: none;
+  transition: color 0.3s ease;
+}
+
+.social-links p {
+  font-size: 1.2rem;
+  margin: 0px 5px 0px 5px;
+}
+
+.social-links a:nth-child(2):hover {
+  color:#d1479e;
+}
+
+.social-links a:nth-child(3):hover {
+  color:#4ba2c4;
+}
+
+.social-links a:nth-child(4):hover {
+  color:#1DB954;
+}
+
+.social-links a:nth-child(5):hover {
+  color:#d1c649;
+}
+
+* {
+  box-sizing: border-box;
+}
+
+img {
+  vertical-align: middle;
+}
+
+/* Position the image container (needed to position the left and right arrows) */
+.container {
+  width: 650px;
+  margin: auto;
+  position: relative;
+}
+
+@media screen and (max-width: 650px) {
+  .container {   
+    width: 100%;
+  }
+}
+
+/* Hide the images by default */
+.mySlides {
+  display: none;
+}
+
+/* Add a pointer when hovering over the thumbnail images */
+.cursor {
+  cursor: pointer;
+}
+
+/* Next & previous buttons */
+.prev,
+.next {
+  cursor: pointer;
+  position: absolute;
+  top: 40%;
+  width: auto;
+  padding: 16px;
+  margin-top: -50px;
+  color: white;
+  background-color: rgba(0, 0, 0, 0.4);
+  font-weight: bold;
+  font-size: 20px;
+  border-radius: 0 3px 3px 0;
+  user-select: none;
+  -webkit-user-select: none;
+}
+
+/* Position the "next/prev button" to the right/left */
+.prev {
+  left: 0;
+  border-radius: 3px 0 0 3px;
+}
+
+.next {
+  right: 0;
+  border-radius: 3px 0 0 3px;
+}
+
+/* On hover, add a black background color with a little bit see-through */
+.prev:hover,
+.next:hover {
+  background-color: rgba(0, 0, 0, 0.8);
+}
+
+/* Number text (1/3 etc) */
+.numbertext {
+  color: #f2f2f2;
+  font-size: 12px;
+  padding: 8px 12px;
+  position: absolute;
+  top: 0;
+}
+
+/* Container for image text */
+.caption-container {
+  text-align: center;
+  background-color: #222;
+  padding: 2px 16px;
+  color: white;
+}
+
+.row:after {
+  content: "";
+  display: table;
+  clear: both;
+}
+
+/* 10 columns side by side */
+.column {
+  float: left;
+  width: 10%;
+}
+
+/* Add a transparency effect for thumnbail images */
+.demo {
+  opacity: 0.3;
+}
+
+.active,
+.demo:hover {
+  opacity: 1;
+}

blog/favicon/about.txt

@@ -0,0 +1,6 @@
+This favicon was generated using the following graphics from Twitter Twemoji:
+
+- Graphics Title: 1f331.svg
+- Graphics Author: Copyright 2020 Twitter, Inc and other contributors (https://github.com/twitter/twemoji)
+- Graphics Source: https://github.com/twitter/twemoji/blob/master/assets/svg/1f331.svg
+- Graphics License: CC-BY 4.0 (https://creativecommons.org/licenses/by/4.0/)

blog/favicon/site.webmanifest

@@ -0,0 +1 @@
+{"name":"","short_name":"","icons":[{"src":"/android-chrome-192x192.png","sizes":"192x192","type":"image/png"},{"src":"/android-chrome-512x512.png","sizes":"512x512","type":"image/png"}],"theme_color":"#ffffff","background_color":"#ffffff","display":"standalone"}

blog/index.html

@@ -0,0 +1,191 @@
+<!DOCTYPE html>
+<html>
+<head>
+<title>ryan's website</title>
+<meta charset="utf-8" />
+<meta name="color-scheme" content="dark light" />
+<meta name="robots" content="noindex" />
+<meta name="viewport" content="width=device-width, initial-scale=1" />
+
+<link href="./css/style.css" rel="stylesheet" type="text/css">
+
+<link rel="apple-touch-icon" sizes="180x180" href="./favicon/apple-touch-icon.png"/>
+<link rel="icon" type="image/png" sizes="32x32" href="./favicon/favicon-32x32.png"/>
+<link rel="icon" type="image/png" sizes="16x16" href="./favicon/favicon-16x16.png"/>
+<link rel="manifest" href="./favicon/site.webmanifest"/>
+
+<link rel="preconnect" href="https://fonts.googleapis.com">
+<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+<link href="https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@500&family=IBM+Plex+Sans&display=swap" rel="stylesheet">
+<meta name="viewport" content="width=device-width, initial-scale=1">
+</head>
+
+<body>
+<div class="mid"><h1>
+ryan's fanclub
+</h1></div>
+
+<hr>
+<div class="mid"><p>
+welcome to my lil' digital garden 🌱
+<br>
+<br>
+i don't really post on my insta so you guys get a website instead.
+<br>
+because i'm just a little nerd.
+<br>
+that sits in his room all day.
+<br>
+sometimes i read books.
+<br>
+or watch movies and listen to music.
+</p></div>
+<hr>
+
+<div class="mid"><a href="./blog/"><h2>
+blog
+</h2></li></div>
+
+<div class="mid"><ul>
+  <li><a href="./blog/movie/">
+i do movie reviews
+  </a></li>
+  <li><a href="./blog/music.html">
+and also music reviews
+  </a></li>
+  <li><a href="./blog/thoughts.html">
+and other random thoughts
+  </a></li>
+</ul></div>
+
+
+<div class="mid"><h2>reviews</h2></div>
+
+<blockquote>
+<span>
+"he's okay occasionally i guess"
+</span>
+-kristal hui, jan 3. 2022
+</blockquote>
+
+<blockquote>
+<span>
+"so u did not like me for 9 months "
+</span>
+-alana, mar 4. 2023
+</blockquote>
+
+<div class="mid"><h2>pics</h2></div>
+
+<div class="container">
+  <div class="mySlides">
+    <div class="numbertext">1 / 10</div>
+    <img src="./img/img1.jpg" style="width:100%">
+  </div>
+
+  <div class="mySlides">
+    <div class="numbertext">2 / 10</div>
+    <img src="./img/img2.jpg" style="width:100%">
+  </div>
+
+  <div class="mySlides">
+    <div class="numbertext">3 / 10</div>
+    <img src="./img/img3.jpg" style="width:100%">
+  </div>
+    
+  <div class="mySlides">
+    <div class="numbertext">4 / 10</div>
+    <img src="./img/img4.jpg" style="width:100%">
+  </div>
+
+  <div class="mySlides">
+    <div class="numbertext">5 / 10</div>
+    <img src="./img/img5.jpg" style="width:100%">
+  </div>
+    
+  <div class="mySlides">
+    <div class="numbertext">6 / 10</div>
+    <img src="./img/img6.jpg" style="width:100%">
+  </div>
+    
+  <div class="mySlides">
+    <div class="numbertext">7 / 10</div>
+    <img src="./img/img7.jpg" style="width:100%">
+  </div>
+    
+  <div class="mySlides">
+    <div class="numbertext">8 / 10</div>
+    <img src="./img/img8.jpg" style="width:100%">
+  </div>
+    
+  <div class="mySlides">
+    <div class="numbertext">9 / 10</div>
+    <img src="./img/img9.jpg" style="width:100%">
+  </div>
+    
+  <div class="mySlides">
+    <div class="numbertext">10 / 10</div>
+    <img src="./img/img10.jpg" style="width:100%">
+  </div>
+    
+  <a class="prev" onclick="plusSlides(-1)">❮</a>
+  <a class="next" onclick="plusSlides(1)">❯</a>
+
+  <div class="caption-container">
+    <p id="caption"></p>
+  </div>
+
+  <div class="row">
+    <div class="column">
+      <img class="demo cursor" src="./img/img1.jpg" style="width:100%" onclick="currentSlide(1)" alt="in da pow">
+    </div>
+    <div class="column">
+      <img class="demo cursor" src="./img/img2.jpg" style="width:100%" onclick="currentSlide(2)" alt="shining lights">
+    </div>
+    <div class="column">
+      <img class="demo cursor" src="./img/img3.jpg" style="width:100%" onclick="currentSlide(3)" alt="tatiana">
+    </div>
+    <div class="column">
+      <img class="demo cursor" src="./img/img4.jpg" style="width:100%" onclick="currentSlide(4)" alt="alana's hat">
+    </div>
+    <div class="column">
+      <img class="demo cursor" src="./img/img5.jpg" style="width:100%" onclick="currentSlide(5)" alt="teddy">
+    </div>    
+    <div class="column">
+      <img class="demo cursor" src="./img/img6.jpg" style="width:100%" onclick="currentSlide(6)" alt="uhm.. hi!">
+    </div>
+    <div class="column">
+      <img class="demo cursor" src="./img/img7.jpg" style="width:100%" onclick="currentSlide(7)" alt="got new piercings">
+    </div>
+    <div class="column">
+      <img class="demo cursor" src="./img/img8.jpg" style="width:100%" onclick="currentSlide(8)" alt="meow">
+    </div>
+    <div class="column">
+      <img class="demo cursor" src="./img/img9.jpg" style="width:100%" onclick="currentSlide(9)" alt="travis scott bear">
+    </div>
+    <div class="column">
+      <img class="demo cursor" src="./img/img10.jpg" style="width:100%" onclick="currentSlide(10)" alt="my melody girlie">
+    </div>
+  </div>
+</div>
+
+<footer class="footer social-links">
+<p>
+find me on: 
+</p>
+<a href="https://www.instagram.com/ryabchow/?hl=en" target="_blank" "rel=noopener noreferer">
+insta
+</a>
+<a href="https://www.instagram.com/cabbbbyy/?hl=en" target="_blank" "rel=noopener noreferer">
+priv
+</a>
+<a href="https://open.spotify.com/user/r491f76w3rn3j4c2ccegjksfi" target="_blank" "rel=noopener noreferer">
+spotify
+</a>
+<a href="https://t.snapchat.com/2PXXop3d" target="_blank" "rel=noopener noreferer">
+snap
+</a>
+</footer>
+<script src="./script.js"></script>
+</body>
+</html>

blog/script.js

@@ -0,0 +1,28 @@
+let slideIndex = 1;
+showSlides(slideIndex);
+
+function plusSlides(n) {
+  showSlides(slideIndex += n);
+}
+
+function currentSlide(n) {
+  showSlides(slideIndex = n);
+}
+
+function showSlides(n) {
+  let i;
+  let slides = document.getElementsByClassName("mySlides");
+  let dots = document.getElementsByClassName("demo");
+  let captionText = document.getElementById("caption");
+  if (n > slides.length) {slideIndex = 1}
+  if (n < 1) {slideIndex = slides.length}
+  for (i = 0; i < slides.length; i++) {
+    slides[i].style.display = "none";
+  }
+  for (i = 0; i < dots.length; i++) {
+    dots[i].className = dots[i].className.replace(" active", "");
+  }
+  slides[slideIndex-1].style.display = "block";
+  dots[slideIndex-1].className += " active";
+  captionText.innerHTML = dots[slideIndex-1].alt;
+}

index.html

@@ -0,0 +1,32 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Ryan's Blog</title>
+    <link rel="stylesheet" href="styles.css">
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link href="https://fonts.googleapis.com/css2?family=Spectral:ital,wght@0,200;0,300;0,400;0,500;0,600;0,700;0,800;1,200;1,300;1,400;1,500;1,600;1,700;1,800&display=swap" rel="stylesheet">
+    <link rel="apple-touch-icon" sizes="180x180" href="./assets/apple-touch-icon.png">
+    <link rel="icon" type="image/png" sizes="32x32" href="./assets/favicon-32x32.png">
+    <link rel="icon" type="image/png" sizes="16x16" href="./assets/favicon-16x16.png">
+    <link rel="manifest" href="./assets/site.webmanifest">
+</head>
+<body>
+    <main-header>
+        <h1>My Blog</h1>
+        <p>A collection of my posts.</p>
+    </main-header>
+    <main>
+        <section id="post-list">
+            <!-- Blog posts will be dynamically added here -->
+        </section>
+    </main>
+    <footer>
+        <p>© 2025 Ryan Chou</p>
+    </footer>
+    <script src="script.js"></script>
+</body>
+</html>
+

post.html

@@ -0,0 +1,32 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Yap Sesh</title>
+    <link rel="stylesheet" href="styles.css">
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link href="https://fonts.googleapis.com/css2?family=Spectral:ital,wght@0,200;0,300;0,400;0,500;0,600;0,700;0,800;1,200;1,300;1,400;1,500;1,600;1,700;1,800&display=swap" rel="stylesheet">
+    <link rel="apple-touch-icon" sizes="180x180" href="./assets/apple-touch-icon.png">
+    <link rel="icon" type="image/png" sizes="32x32" href="./assets/favicon-32x32.png">
+    <link rel="icon" type="image/png" sizes="16x16" href="./assets/favicon-16x16.png">
+    <link rel="manifest" href="./assets/site.webmanifest">
+</head>
+<body>
+    <header>
+        <a href="index.html">
+            <img src="assets/cabby.jpg" alt="Home" class="home-button">
+        </a>
+    </header>
+    <main id="content">
+        <article id="post"></article>
+    </main>
+    <footer>
+        <p>© 2025 Ryan Chou</p>
+    </footer>
+    <script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>
+    <script src="script.js"></script>
+</body>
+</html>
+

posts/post1.md

@@ -0,0 +1,28 @@
+#### Meaningful Action
+### wow this is barely comprehensible
+## Jan 23, 2025
+---
+
+[Mirror neurons](https://www.wikiwand.com/en/articles/Mirror_neuron). Their entire role is to evoke the emotional response that we perceive in another being. They are considered a foundation for empathetic understanding. Your brain is, in essence, simulating the other person’s experience.
+
+Yet once our bodies shift into flight or flight response, meaningful learning becomes almost impossible. In that heightened state, we can certainly feel emotions like anger, relief, or righteousness, but our minds are geared towards immediate survival. Not deeper reflection or growth. Harmful responses, often rationalized as fair or just, only reinforce this dynamic. When someone does something harmful, we might think that harming them in return will bring resolution, but in reality, it just perpetuates the cycle of pain.
+
+Harm is never going to help. It’s hard to understand and embody in a culture as addicted to harm as ours is under the guise of punishment and fairness. By perpetrating the harm, or even by witnessing it, not a single human being’s emotional response is going to be “Wow! I better bravely and vulnerably heal all my most painful internalized multi-generational traumas so that I never have any harmful thoughts or actions that might slip out in a way that would result in my community harming me.” If I’m on the offense, then I’m not the cornered one. I’m safe. I would also conceal my wounds as much as possible by performing adherents to community norms to avoid harm in a way that makes our wounds feel disconnected and distant, but actually doesn’t heal them and makes it harder for us to access them.
+
+Thanks to our mirror neurons, witnessing or enacting harm impacts us on a visceral level. We instinctively experience a measure of that harm ourselves. Many people today, especially men, distance ourselves from that by adopting this tough “Well they got this coming for them” attitude. But these men are terrified. They have no idea what repair would actually look like. They have no idea what successful conflict mediation looks like, what forgiveness looks like, what community looks like. They’ve never seen anything other than deeply wounded people who are addicted to punishing others as thinly veiled attempts to validate the harm that they’ve experienced. Reactive harm is never constructive, even if they are ideologically correct. All it leads to is them repressing their true ideologies in public, and would guarantee to bury those incorrect thought patterns and make them express them in more insidious ways against others who are more vulnerable. This is the cycle of harm. When we, as a culture, use punishment to suppress behavior, we don’t solve underlying believes or even make that behavior go away. We just make it harder for anyone to see or access or change.
+
+This doesn’t mean we should tolerate damaging behavior. We should address it in ways that actually help the community heal. The fact that people can’t even imagine what intervention without punishment is evidence of how deeply normalized how punishment is in our community. No part of this is saying we should tolerate minimize downplay or excuse problematic behavior. I’m saying we need to break our internalized cycles of violence to the point where we can actually address the believes that lead to the behavior, instead of just making ourselves feel safe and superior by defaulting to punishment, making the perpetrator identify as a victim now.
+
+Nowadays on the internet, we are crafting a shared narrative and understanding of the world. When we see things that are mistaken, we feel a strong pressure to correct them. The way you treat other, imperfect people, is the way you treat yourself, an imperfect person. You're telling yourself that the world is dangerous and that you better not get caught you’ll be crucified too. When you go after other people, you’re going after yourself, and reinforcing the idea that you have to be perfect or else you’ll never be safe or loved. You’re locking yourself into your own wounds, and cutting off opportunities for growth and healing. Punishment is not educating. You do not deserve to suffer, life is not suffering.
+
+That’s all easier said than done. Considering current events, we are clearly moving towards a fascist society.
+
+Karl Marx states,
+
+> “Under no pretext should arms and ammunition be surrendered; any attempt to disarm the workers must be frustrated, by force if necessary.”
+
+Collective self-defense. If the ruling class uses violence to suppress us, we have a right, maybe a duty, to defend ourselves.
+
+I personally struggle with the distinction between self-defense and retaliatory violence. I’m still in the process of healing and growing myself. I’m still learning to stop fighting in the TikTok comments, and have an open diaglog with someone face to face. I understand that if someone in my community is facing oppression, stepping in is a form of solidarity.
+
+What’s clear is that something needs to be done. If a kid grows up in an abusive household, the kid will grow up hating the parent that abused them, and the parent that sat back and let it happen just as much. We must reject passive complicity. Standing idly by when people are harmed can enable further violence. We must move beyond performative activism in online echo chambers. Engage with people in real life. Listen to your neighbors, attend local events. Find tangile ways to make life better in your immediate community. Personal involvment humanizes both you and those who might be drawn to harmful beliefs.

posts/post2.md

@@ -0,0 +1,18 @@
+#### Scars, Sadness, and Soulmates
+### Healing isn't a prerequisite for love, being human is.
+## Jan 26, 2025
+---
+
+If you’ve ever felt like you’re not “healed enough” or “whole enough” to love or be loved, you aren’t alone. Culture has this misconception in which you shouldn’t date unless you’re perfectly stitched together, free of scars, immune of the bouts of sadness that makes us human.
+
+Why?????
+
+Why is it acceptable to lean on friends and community when we’re struggling, but not a romantic partner? **Why is love the one connection behind a paywall, locked behind the unrealistic expectation of being spotless and ideal?**
+
+You don’t need to be perfect to deserve love. Love isn’t about presenting yourself as some flawless version of who you think you should be. It’s about showing up. Scars, struggles, and all. And letting someone see you. Because in love, we heal. We grow. We transform. The beauty of romance is that it holds up a mirror to the parts of ourselves we didn’t even know needed attention, and through that reflection, we can become more whole.
+
+Love is powerful because it doesn’t require us to be ready, it helps us become ready. Love accepts every inch of who you are, and you deserve that. A love that listens when you share your ugliest truths and doesn’t flinch. A love that chooses you, fights for you, and celebrats the divine light in you, even when you can’t see it yourself.
+
+You deserve to be caressed, considered, and held in all your humanity. You deserve love that reminds you, every single day, that you are enough. Exactly as you are. And if you want that, it’s okay to want it. It’s okay to open yourself to it. Because no mattery where you’re at in your healing, you are worthy of love.
+
+Always.

posts/post3.md

@@ -0,0 +1,34 @@
+#### Hemming the Divide
+### Everything I create lives on a screen.
+## Jul 28, 2025
+---
+
+Growing up as a CS major in a hyper digitized world, I’ve often found myself caught in a quiet discomfort,, a creeping sense of detachment from the physical world. Everything I create lives on screens. It runs in the cloud, floats in GitHub repos, is parsed, compiled, and rendered in pixels. It’s a strange dissonance: I’m building things, but I never touch them.
+
+Lately, I’ve been thinking about this more seriously, especially through the lens of Marx and his critique of the division of labor. For Marx, the division of labor was both a historical necessity and a source of alienation. In the capitalist mode of production, labor becomes fragmented. Workers are separated from the product of their work, and work itself becomes divorced from the full spectrum of human creativity.
+
+>“The worker therefore only feels himself outside his work, and in his work feels outside himself.”
+
+— Karl Marx, Economic and Philosophic Manuscripts of 1844
+
+The more I read, the more I feel implicated. Not in a self flagellating way, but in a deeply personal, uneasy way. As a programmer, I’m rewarded for thinking: for abstract problem solving, systems design, optimization. I am, by all accounts, doing “mental labor.” And I’ve started to notice how this classification, this distinction between mental and manual work, carries a moral weight in how society values people.
+
+I’ll be honest: sometimes I find myself buying into it. I’ve caught myself thinking, “At least I’m not flipping burgers.” Or nodding along when my dad, who now lives in Taiwan/China, says he hires people to run errands so he can use that time to “think.” Because thinking, to him, is high-status. It’s intellectual. Clean. Efficient.
+
+But that’s exactly what scares me. Because it creates a hierarchy of value where brain beats body. Where abstraction beats creation. And where I, and people like me, start to believe that we're worth more. Not because we contribute more, but because our contribution is seen as more “intelligent.”
+
+It wasn’t always like this. Think about the artisan. The shoemaker. The woodworker. The tailor. People who not only conceived of something but also made it. There was no distinction between designer and laborer. No sharp line between the thinker and the doer. You needed both. You sketched, measured, cut, stitched, refined. The idea didn’t exist without the hand.
+
+And I think that’s what I’m craving. Not just a hobby, but a reintegration. A way to stitch myself back into a more holistic relationship with labor.
+
+That’s why I want to sew.
+
+Not just because I thrift and want my clothes to fit better (though I do), and not just because embroidery looks cool (though it does). I want to sew because I’m tired of existing in the abstract. I want to think of something and then make it, not by clicking, but by touching. I want to bring something into existence with my hands, not just my mind.
+
+There’s something radical about that. Especially now, when even “eco friendliness” has been co-opted by consumerism. People flaunt their green products, their recycled cotton hoodies and stainless steel water bottles, as though buying better is the same as living better. But we’re still buying. We’re still outsourcing. Still alienated from the process.
+
+Repairing, reusing, repurposing, these aren’t just sustainable acts. They’re political ones. They resist the logic of disposability. They refuse the idea that labor is something to be offloaded to someone “lower” on the chain.
+
+So this is my quiet rebellion. A needle, a thread, a pile of thrifted clothes. It’s not much. But it’s a start.
+
+I want to learn to sew because I want to remember that making isn’t beneath me. That labor, real labor, with cuts and pricks and mess, isn’t lesser than thinking. That I am not better because I work with my brain. I am just incomplete without my hands.

posts/template.md

@@ -0,0 +1,16 @@
+#### Title
+### Excerpt
+## Date
+---
+
+yap
+** bold **
+* italic *
+> quote
+`code`
+- list
+- list
+1. one
+2. two
+---
+[link](link.com)

script.js

@@ -0,0 +1,53 @@
+document.addEventListener("DOMContentLoaded", function () {
+    let lastScrollY = window.scrollY;
+    const header = document.querySelector("header");
+
+    window.addEventListener("scroll", () => {
+        if (window.scrollY > lastScrollY) {
+            // Scrolling down
+            header.classList.add("hide-header");
+        } else {
+            // Scrolling up
+            header.classList.remove("hide-header");
+        }
+        lastScrollY = window.scrollY;
+    });
+
+    // Dynamically load posts on the home page
+    if (document.getElementById("post-list")) {
+        const posts = [
+            { title: "Hemming", date: "Jul 28, 2025", excerpt: "Everything I create lives on screens", file: "post3.md" },
+            { title: "Scars, Sadness, and Soulmates", date: "Jan 26, 2025", excerpt: "Healing isn't a prerequisite for love, being human is.", file: "post2.md" },
+            { title: "Meaningful Action", date: "Jan 23, 2025", excerpt: "wow this is barely comprehensible", file: "post1.md" },
+        ];
+
+        const postList = document.getElementById("post-list");
+        posts.forEach(post => {
+            const postElement = document.createElement("div");
+            postElement.classList.add("post-card");
+            postElement.innerHTML = `
+                <h4>${post.title}</h4>
+                <h3>${post.date}</h3>
+                <p>${post.excerpt}</p>
+            `;
+
+            postElement.addEventListener("click", () => {
+                window.location.href = `post.html?file=posts/${post.file}`;
+            });
+
+            postList.appendChild(postElement);
+        });
+    }
+
+    // Load specific post content on the post page
+    const urlParams = new URLSearchParams(window.location.search);
+    const postFile = urlParams.get("file");
+    if (postFile) {
+        fetch(postFile)
+            .then(response => response.text())
+            .then(text => {
+                document.getElementById("post").innerHTML = marked.parse(text);
+            });
+    }
+});
+

styles.css

@@ -0,0 +1,161 @@
+html, body {
+    font-family: 'Spectral', serif;
+    line-height: 1.6;
+    margin: 0;
+    padding: 0;
+    background: #121212; /* Dark background */
+    color: #eee; /* Light text */
+    display: flex;
+    flex-direction: column;
+    height: 100%;
+}
+
+/* Header */
+main-header {
+    text-align: center;
+    padding: 10px;
+    background: black; /* Dark header */
+    position: sticky;
+    z-index: 100;
+    top: 0;
+}
+
+header {
+    text-align: center;
+    padding: 10px;
+    background: black; /* Dark header */
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    transition: transform 0.3s ease-in-out;
+}
+
+.hide-header {
+    transform: translateY(-100%);
+}
+
+/* Main Content */
+main {
+    max-width: 700px;
+    margin: 40px auto;
+    padding: 20px;
+    background: #121212; /* Dark content background */
+    flex: 1;
+}
+
+/* Buttons */
+button {
+    font-size: 1rem;
+    padding: 10px 20px;
+    border: none;
+    border-radius: 5px;
+    background: #007BFF;
+    color: white;
+    cursor: pointer;
+    margin: 10px;
+}
+
+button:hover {
+    background: #0056b3;
+}
+
+/* Footer */
+footer {
+    text-align: center;
+    padding: 20px;
+    margin-top: 40px;
+    background: #1e1e1e;
+}
+
+h4 {
+    font-size: 32px;
+    margin: 0;
+    padding: 0;
+    padding-top: 45px;
+}
+h3 {
+    font-size: 18px;
+    color: grey;
+    margin: 0;
+    padding: 0;
+}
+h2 {
+    font-size: 11px;
+    color: grey;
+    margin: 0;
+    padding: 0;
+}
+p {
+    font-size: 19px;
+    line-height: 1.6;
+}
+a {
+    color: #eee; /* Light text */
+    text-decoration: underline;
+}
+a:hover {
+    text-decoration: none;
+}
+blockquote {
+    margin-top: 10px;
+    margin-bottom: 10px;
+    margin-left: 15px;
+    padding-left: 15px;
+    border-left: 3px solid #ccc;
+}
+
+/* Home Page: Clickable Post Cards */
+.post-card {
+    background: #1e1e1e;
+    padding: 20px;
+    border-radius: 8px;
+    margin-bottom: 20px;
+    cursor: pointer;
+    transition: background 0.3s ease, transform 0.2s ease;
+    box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.4);
+}
+
+.post-card p {
+    margin: 0;
+}
+
+.post-card h4 {
+    padding-top: 0;
+}
+
+.post-card:hover {
+    background: #292929;
+    transform: translateY(-2px);
+}
+
+.post-card h2 {
+    margin: 0;
+    color: #ffffff;
+}
+
+.post-card .post-date {
+    font-size: 0.9em;
+    color: #aaa;
+}
+
+.post-card .post-excerpt {
+    color: #ccc;
+}
+
+/* Home button (circular image) */
+.home-button {
+    width: 50px; /* Adjust size as needed */
+    height: 50px;
+    border-radius: 50%; /* Makes it circular */
+    object-fit: cover; /* Ensures image fills circle */
+    border: 2px solid #ccc; /* Optional: adds a subtle border */
+    cursor: pointer;
+    transition: transform 0.2s ease, opacity 0.2s ease;
+}
+
+.home-button:hover {
+    transform: scale(1.1); /* Slight zoom effect */
+    opacity: 0.8;
+}
+