high school blog completed

src/articles/ArticlesList.tsx

@@ -1,7 +1,6 @@
 import {useArticle} from "./ArticleContext";
 import "./list.sass";
 import {ReactComponent as BoxSvg} from "../img/blog-box.svg";
-import {Reader} from "./Reader";
 import {Article, ARTICLES} from "./articles";
 
 
@@ -16,7 +15,6 @@ export function ArticlesList() {
       }
     </section>
     <section className="spacer"/>
-    <Reader/>
   </main>
 }
 
@@ -26,7 +24,7 @@ function BlogBox(props: { article: Article }) {
 
   return (
     <button className="link" onClick={() => setReading(article)}>
-      <div>
+      <div className="blog-box">
         <img className="thumbnail" alt={`${name} thumbnail`} src={thumbnail}/>
         <div className="titles">
           <h1>

src/articles/Reader.tsx

@@ -1,25 +1,15 @@
 import {useArticle} from "./ArticleContext";
-import {motion} from "framer-motion";
+import {animate, motion} from "framer-motion";
-import {animate as animateClass, useAnimate} from "motion/react";
 import {useEffect} from "react";
-import {AnimateDirection, AnimateFade, AnimateTemplate} from "../animations";
+import {AnimateFade, AnimateTemplate} from "../animations";
 import "./reader.sass";
 import {ExternalLink} from "../router/Link";
 
 const READER : AnimateTemplate = AnimateFade();
-const ARTICLE : AnimateTemplate = AnimateDirection("top", "50%");
 
 export function Reader() {
-  const [ scope, animate ] = useAnimate<HTMLElement>();
   const [post, setPost] = useArticle();
 
-  useEffect(() => {
-    if(post && scope.current) {
-      animate(scope.current, READER.animate);
-      animateClass(".read-box", ARTICLE.animate!);
-    }
-  }, [post, scope]);
-
   useEffect(() => {
     function pressEscape(e: KeyboardEvent) {
       e.key === "Escape" && handleClose();
@@ -31,25 +21,23 @@ export function Reader() {
 
   function handleClose() {
     Promise.all([
-        animate(scope.current, READER.initial),
+        animate(".reader", READER.initial),
-        animateClass(".reader > section", ARTICLE.initial)
       ]
     ).then(() => setPost(undefined));
   }
 
   return post ? (
-    <motion.article
+    <motion.section
       key="reader"
-      ref={scope}
       initial={READER.initial}
       animate={READER.animate}
       onClick={handleClose}
       className="reader link">
-        <motion.section initial={{top: "-100%"}} animate={{top: "50%"}} onClick={e => e.stopPropagation()}>
+        <article onClick={e => e.stopPropagation()}>
           <post.article components={{
            'a': ExternalLink
           }}/>
+        </article>
     </motion.section>
-    </motion.article>
   ) : <></>;
 }

src/articles/list.sass

@@ -1,9 +1,15 @@
 @use "../nav/nav"
+@use "../index"
 $entry-width: 400px
+.blog-box
+  display: flex
+  flex-direction: column
 
   .thumbnail
-  width: $entry-width
     height: 400px
+
+.thumbnail
+  max-width: $entry-width
   object-fit: cover
   object-position: 0 0
 
@@ -12,10 +18,13 @@ $entry-width: 400px
   width: 33%
   flex-grow: 1
 
+@media screen and (max-width: index.$phone)
+  .spacer
+    display: none
+
 .titles
   font-family: Neuton, serif
   margin: 10px
-  gap: 15px
   display: flex
   align-items: center
 

src/articles/mdx/high-school.mdx

@@ -2,10 +2,11 @@ import allBlack from "../../img/IMG_3095.jpg";
 import style from "../../img/2026-04-07-20-45-39-165.jpg";
 import savvy from "../../img/2026-04-07-20-44-35-818.jpg";
 import {ReactComponent as Nextcloud} from "../../img/Nextcloud Logo Vector.svg";
+import {ReactComponent as K8s} from "../../img/Kubernetes Logo Vector.svg";
 
 # My high school experience
 
-<img src={allBlack} width={500} alt="turtleneck thumbnail"/>
+<img className="thumbnail" src={allBlack} alt="turtleneck thumbnail"/>
 
 My first coding experience was in middle school playing Code Combat.
 You could say Python is the first language I learned, not particularly uncommon.
@@ -29,12 +30,13 @@ Typescript. [My Devpost](https://devpost.com/tymur999) hosts all my hackathon pr
 
 Not to flex, but every submission after my first hackathon has won some award.
 Nonetheless, hackathons helped us get comfortable with React in a short time limit.
-But of course, I like to be different, so this is some my take on an abstract design.
+But of course, I like to be different, so this is my take on an abstract design.
-
+I'm proud of not using Bootstrap, that's so 2015.
 ## Programming Hobby
 
 <div className="row">
     <Nextcloud/>
+    <K8s/>
 </div>
 
 I began to experiment with Ubuntu on an old computer, and I enjoyed its ease of use and up-to-date repositories.
@@ -42,6 +44,9 @@ I've been daily-driving Linux distros since 5 years ago. I decided to self-host
 through Kubernetes and Docker. I made a goal for myself to remove Big Brother companies from my stack,
 so replace Google Drive with Nextcloud, etc. My life goal is to be independent, and that extends to my data.
 
+Additionally, I did a startup in high school with my friends called [Kiwoon Learning](https://kiwoonlearning.web.app/). The goal was to educate
+high school students on investing and financial independence. I worked on the backend and a bit of the frontend.
+No longer was it a side personal project, [Kiwoon](https://kiwoonlearning.web.app/) taught me how to develop an application for a hundred or so real users.
 
 ## The Graduation
 
@@ -52,7 +57,8 @@ so replace Google Drive with Nextcloud, etc. My life goal is to be independent,
 
 On my graduation, I won the senior superlatives for best style and most tech savvy.
 I took the pictures with my friend Rahil who also won most tech savvy.
-We decided to duo the tech-savvy and then he took my picture outside some pines.
+We decided to duo the tech-savvy, and for best style, he took my picture outside some pines.
+In fact, I think the animation on the TV is my old personal website.
 
 I also won the Visionary Scholarship, which boosted my confidence in my creative abilities.
 It really taught me to trust my intuition, like nothing else.
@@ -63,6 +69,5 @@ schools directly on their websites. Unfortunately, I didn't get into University
 That's wild since I got into Georgia Tech out-of-state but the state school denied me.
 The Princeton interview stressed me out, but I was deferred and then rejected, which I still treat as an accomplishment.
 
-
 My top two choices were Michigan State and Georgia Tech, mostly because MSU was so cheap.
 I chose Georgia Tech at the end because a Georgia Tech degree just looks too good to pass up.

src/articles/reader.sass

@@ -1,36 +1,34 @@
 @use "../nav/nav"
 @use "../about/about"
-
+@use "../index"
-article
-  font-family: Neuton, serif
-  p
-    font-size: large
-  section
-    margin: 0 100px
-    padding: nav.$padding
-
 
 .reader
-  font-family: Neuton, serif
-  border: 2px solid black
-  overflow: scroll
   z-index: 9999
-  width: 100vw
+  font-family: Neuton, serif
-  min-height: 100vh
   background: rgba(0,0,0,0.5)
-
+  width: 100vw
-  &, > section
+  height: 100vh
   position: fixed
-    top: 50%
+  top: 0
-    left: 50%
+  left: 0
-    transform: translate(-50%, -50%)
 
+  p
+    font-size: large
 
-  > section
+  display: flex
+
+  > article
+    display: flex
+    flex-direction: column
+    align-items: center
+    border-radius: 15px
+    margin: auto
+    padding: 15px
+    overflow-y: scroll
     background: white
     color: black
-    min-height: 75vh
+    height: 90vh
-    width: 800px
+    max-width: 600px
 
 .external-link
   color: inherit !important
@@ -41,6 +39,5 @@ article
   flex-direction: row
   justify-content: center
 
-
 .row>*
-  width: 33%
+  width: 50%