added index

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>
+