From eccdea5013f568136280ac298b6cfe1acfe7c750 Mon Sep 17 00:00:00 2001
From: tymur999 <tymur.arsent@gmail.com>
Date: Wed, 8 Apr 2026 13:59:05 -0500
Subject: [PATCH] high school blog completed

---
 src/articles/ArticlesList.tsx      |  4 +--
 src/articles/Reader.tsx            | 26 +++++------------
 src/articles/list.sass             | 15 ++++++++--
 src/articles/mdx/high-school.mdx   | 15 ++++++----
 src/articles/reader.sass           | 45 ++++++++++++++----------------
 src/img/Kubernetes Logo Vector.svg |  1 +
 6 files changed, 52 insertions(+), 54 deletions(-)
 create mode 100644 src/img/Kubernetes Logo Vector.svg

diff --git a/src/articles/ArticlesList.tsx b/src/articles/ArticlesList.tsx
index 6662cb2..ffcca76 100644
--- a/src/articles/ArticlesList.tsx
+++ b/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>
diff --git a/src/articles/Reader.tsx b/src/articles/Reader.tsx
index 446409d..56afe99 100644
--- a/src/articles/Reader.tsx
+++ b/src/articles/Reader.tsx
@@ -1,25 +1,15 @@
 import {useArticle} from "./ArticleContext";
-import {motion} from "framer-motion";
-import {animate as animateClass, useAnimate} from "motion/react";
+import {animate, motion} from "framer-motion";
 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),
-        animateClass(".reader > section", ARTICLE.initial)
+        animate(".reader", READER.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
           }}/>
-        </motion.section>
-    </motion.article>
+        </article>
+    </motion.section>
   ) : <></>;
 }
\ No newline at end of file
diff --git a/src/articles/list.sass b/src/articles/list.sass
index d98ed96..5c59168 100644
--- a/src/articles/list.sass
+++ b/src/articles/list.sass
@@ -1,9 +1,15 @@
 @use "../nav/nav"
+@use "../index"
 $entry-width: 400px
+.blog-box
+  display: flex
+  flex-direction: column
+
+  .thumbnail
+    height: 400px
 
 .thumbnail
-  width: $entry-width
-  height: 400px
+  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
 
diff --git a/src/articles/mdx/high-school.mdx b/src/articles/mdx/high-school.mdx
index d945cad..af374c3 100644
--- a/src/articles/mdx/high-school.mdx
+++ b/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.
\ No newline at end of file
diff --git a/src/articles/reader.sass b/src/articles/reader.sass
index e98016c..5d9c685 100644
--- a/src/articles/reader.sass
+++ b/src/articles/reader.sass
@@ -1,36 +1,34 @@
 @use "../nav/nav"
 @use "../about/about"
-
-article
-  font-family: Neuton, serif
-  p
-    font-size: large
-  section
-    margin: 0 100px
-    padding: nav.$padding
-
+@use "../index"
 
 .reader
-  font-family: Neuton, serif
-  border: 2px solid black
-  overflow: scroll
   z-index: 9999
-  width: 100vw
-  min-height: 100vh
+  font-family: Neuton, serif
   background: rgba(0,0,0,0.5)
+  width: 100vw
+  height: 100vh
+  position: fixed
+  top: 0
+  left: 0
 
-  &, > section
-    position: fixed
-    top: 50%
-    left: 50%
-    transform: translate(-50%, -50%)
+  p
+    font-size: large
 
+  display: flex
 
-  > section
+  > 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
-    width: 800px
+    height: 90vh
+    max-width: 600px
 
 .external-link
   color: inherit !important
@@ -41,6 +39,5 @@ article
   flex-direction: row
   justify-content: center
 
-
 .row>*
-  width: 33%
+  width: 50%
diff --git a/src/img/Kubernetes Logo Vector.svg b/src/img/Kubernetes Logo Vector.svg
new file mode 100644
index 0000000..f140ef9
--- /dev/null
+++ b/src/img/Kubernetes Logo Vector.svg	
@@ -0,0 +1 @@
+<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 500 486.89"><defs><style>.cls-1{fill:#326de6;}.cls-2{fill:#fff;}</style></defs><path class="cls-1" d="M409.64,735.68a38.15,38.15,0,0,1-30.07-14.54L266.42,580.5a38,38,0,0,1-7.44-33L299.39,372a38.26,38.26,0,0,1,21-26.18L484,267.55a38.35,38.35,0,0,1,33.62,0l163.59,77.91a38.24,38.24,0,0,1,21,26.19L742.63,547.2a39,39,0,0,1-7.43,33L622,720.81A39.12,39.12,0,0,1,592,735.36l-182.34.32Z" transform="translate(-250 -256.56)"/><path class="cls-2" d="M500.48,271.75a31.62,31.62,0,0,1,13.26,2.91l163.59,77.92c8.4,4.2,14.87,12,16.81,21l40.41,175.55a30.21,30.21,0,0,1-6.14,26.51L615.26,716.29A30.82,30.82,0,0,1,591,727.92H409.64a30.81,30.81,0,0,1-24.25-11.63L272.24,575.65a32.36,32.36,0,0,1-6.15-26.51l40.42-175.55a30.86,30.86,0,0,1,16.81-21l163.59-78.24a38.84,38.84,0,0,1,13.57-2.59Zm0-15.19h0a48.93,48.93,0,0,0-20,4.52L316.85,339.32a45.81,45.81,0,0,0-25.22,31.36L251.22,546.23a45.85,45.85,0,0,0,9,39.44L373.43,726.31a45.67,45.67,0,0,0,35.89,17.13H590.68a45.67,45.67,0,0,0,35.89-17.13L739.73,585.67a45.62,45.62,0,0,0,9-39.44L708.37,370.68a45.81,45.81,0,0,0-25.22-31.36L520.21,261.08a46.4,46.4,0,0,0-19.73-4.52Z" transform="translate(-250 -256.56)"/><path class="cls-2" d="M664.4,535.24h-.33c-.32,0-.64,0-.64-.32-.65,0-1.3-.33-1.94-.33a44.82,44.82,0,0,0-6.15-.64,11.86,11.86,0,0,1-3.23-.33h-.32c-6.79-.64-12.29-1.29-17.46-2.91a6.33,6.33,0,0,1-3.56-3.55c0-.33-.32-.33-.32-.65h0l-4.2-1.29A127.83,127.83,0,0,0,624,479.63a133,133,0,0,0-18.1-42.35l3.23-2.91v-.65a7.35,7.35,0,0,1,1.62-4.85c3.88-3.55,8.73-6.46,14.55-10h0c1-.64,1.94-1,2.91-1.61a47.7,47.7,0,0,0,5.49-3.24c.33-.32,1-.64,1.62-1.29.32-.32.65-.32.65-.65h0c4.52-3.88,5.49-10.34,2.26-14.55a9.21,9.21,0,0,0-7.44-3.55,12,12,0,0,0-7.11,2.58h0l-.65.65c-.64.32-1,1-1.61,1.29a52.57,52.57,0,0,0-4.2,4.53,14.69,14.69,0,0,1-2.27,2.26h0A82,82,0,0,1,602,416.91a5.19,5.19,0,0,1-2.91,1,4.14,4.14,0,0,1-1.94-.32h-.65l-3.88,2.59a155.43,155.43,0,0,0-13.25-12.29A129.13,129.13,0,0,0,511.8,381l-.32-4.21-.65-.64c-1-1-2.26-1.94-2.59-4.21-.32-5.17.33-11,1-17.45v-.33a11.59,11.59,0,0,1,.65-3.23c.32-1.94.65-3.88,1-6.14v-2.91h0c0-5.82-4.53-10.67-10-10.67a10.37,10.37,0,0,0-7.11,3.23,10.25,10.25,0,0,0-2.91,7.44h0v2.58a18.75,18.75,0,0,0,1,6.15c.32,1,.32,1.94.64,3.23v.32c.65,6.47,1.62,12.29,1,17.46-.32,2.26-1.61,3.23-2.58,4.2l-.65.65h0l-.32,4.2a164.16,164.16,0,0,0-17.46,2.59,124.57,124.57,0,0,0-64,36.21l-3.24-2.26h-.64c-.65,0-1.3.32-1.94.32a5.19,5.19,0,0,1-2.91-1c-4.21-2.91-8.41-7.11-12.94-12h0a14.63,14.63,0,0,0-2.26-2.27,54.14,54.14,0,0,0-4.2-4.52c-.32-.33-1-.65-1.62-1.3-.32-.32-.64-.32-.64-.64h0a11.29,11.29,0,0,0-7.12-2.59,9.19,9.19,0,0,0-7.43,3.56c-3.24,4.2-2.27,10.67,2.26,14.55h0c.32,0,.32.32.65.32.64.32,1,1,1.61,1.29a47.8,47.8,0,0,0,5.5,3.24,13.2,13.2,0,0,1,2.91,1.61h0c5.82,3.56,10.67,6.47,14.55,10,1.61,1.62,1.61,3.24,1.61,4.85v.65h0l3.24,2.91a11.15,11.15,0,0,0-1.62,2.59A125.89,125.89,0,0,0,376,524.25l-4.21,1.29c0,.32-.32.32-.32.65a7.55,7.55,0,0,1-3.56,3.55c-4.85,1.62-10.67,2.27-17.46,2.91h-.32a10.76,10.76,0,0,0-3.23.33,44.53,44.53,0,0,0-6.14.64c-.65,0-1.3.33-1.94.33a1.19,1.19,0,0,0-1,.32h0c-5.82,1.29-9.38,6.79-8.41,12,1,4.53,5.17,7.44,10.35,7.44a7,7,0,0,0,2.58-.33h0c.33,0,.65,0,.65-.32.65,0,1.29-.32,1.94-.32a31.45,31.45,0,0,0,5.82-2.27c1-.32,1.94-1,2.91-1.29H354c6.14-2.26,11.64-4.2,16.81-4.85h.65a7.16,7.16,0,0,1,4.2,1.62c.33,0,.33.32.65.32h0l4.52-.65a127.83,127.83,0,0,0,42.36,60.78,129.71,129.71,0,0,0,13.9,9.38l-1.94,4.2c0,.33.32.33.32.65a6.6,6.6,0,0,1,.65,5.17,91.11,91.11,0,0,1-8.41,15.2v.32c-.64,1-1.29,1.62-1.94,2.59-1.29,1.61-2.26,3.23-3.55,5.17a6.63,6.63,0,0,0-1,1.62,1.11,1.11,0,0,1-.33.64h0c-2.58,5.5-.64,11.64,4.21,13.9a8.54,8.54,0,0,0,3.88,1,11.61,11.61,0,0,0,9.7-6.14h0a1.12,1.12,0,0,1,.32-.64,7,7,0,0,1,1-1.62c1-2.26,1.29-3.88,1.94-5.82l1-2.91h0c2.26-6.47,3.88-11.64,6.79-16.16,1.29-1.94,2.91-2.27,4.2-2.91.32,0,.32,0,.65-.33h0l2.26-4.2a126.19,126.19,0,0,0,45.26,8.41,117,117,0,0,0,28.13-3.24A143.19,143.19,0,0,0,547,625.76l1.94,3.56c.32,0,.32,0,.65.32a6,6,0,0,1,4.2,2.91c2.59,4.53,4.53,10,6.79,16.17V649l1,2.91a40.12,40.12,0,0,0,1.94,5.82c.32.65.64,1,1,1.62a1.12,1.12,0,0,0,.32.64h0a11,11,0,0,0,9.7,6.14,8.57,8.57,0,0,0,3.88-1,9.64,9.64,0,0,0,4.85-5.81,11.66,11.66,0,0,0-.65-8.09h0c0-.32-.32-.32-.32-.64a7,7,0,0,0-1-1.62,28.7,28.7,0,0,0-3.56-5.17c-.64-1-1.29-1.62-1.94-2.59V641c-3.55-5.5-6.79-10.35-8.4-15.2-.65-2.26,0-3.55.32-5.17,0-.32.32-.32.32-.65h0l-1.61-3.88a128.25,128.25,0,0,0,56.25-70.8l3.88.65c.32,0,.32-.33.65-.33,1.29-.64,2.26-1.61,4.2-1.61h.65c5.17.65,10.67,2.58,16.81,4.85h.32c1,.32,1.94,1,2.91,1.29a30.75,30.75,0,0,0,5.82,2.26c.65,0,1.29.33,1.94.33a1.2,1.2,0,0,1,1,.32h0a7.21,7.21,0,0,0,2.59.32,10.87,10.87,0,0,0,10.34-7.43c0-3.88-3.55-9-9.37-10.67ZM514.71,519.4l-14.23,6.79-14.22-6.79-3.56-15.2,9.7-12.28h15.84l9.7,12.28-3.23,15.2Zm84.38-33.63a101.89,101.89,0,0,1,2.26,32.66L551.89,504.2a8.75,8.75,0,0,1-6.14-10.34,7.66,7.66,0,0,1,1.94-3.56l39.12-35.24a103.85,103.85,0,0,1,12.28,30.71Zm-27.8-50.11-42.35,30.07a8.61,8.61,0,0,1-11.32-1.94,7.22,7.22,0,0,1-1.62-3.56l-2.91-52.69a98.15,98.15,0,0,1,58.2,28.12Zm-93.76-26.51c3.56-.64,6.79-1.29,10.35-1.94L485,458.94a8.85,8.85,0,0,1-8.73,8.41,7.73,7.73,0,0,1-3.88-1l-43-30.72a98.69,98.69,0,0,1,48.17-26.51Zm-63.69,45.91,38.47,34.27a8.6,8.6,0,0,1,1,12,6.39,6.39,0,0,1-3.88,2.59l-50.11,14.55a104.08,104.08,0,0,1,14.55-63.37Zm-8.73,87.62L456.52,534a8.7,8.7,0,0,1,9.05,6.79,9.32,9.32,0,0,1-.32,5.17h0l-19.73,47.52a102,102,0,0,1-40.41-50.75Zm118,64.33a105.47,105.47,0,0,1-22.64,2.59,109.66,109.66,0,0,1-32.65-5.17l25.54-46.24c2.59-2.91,6.79-4.2,10.35-2.26a13.79,13.79,0,0,1,3.88,3.56h0l24.89,44.94c-2.91,1-6.14,1.61-9.37,2.58Zm63-44.94a102.53,102.53,0,0,1-31,31.36l-20.37-48.81a8.71,8.71,0,0,1,4.53-10,10.42,10.42,0,0,1,4.53-1l51.72,8.73a65.11,65.11,0,0,1-9.37,19.72Z" transform="translate(-250 -256.56)"/></svg>
\ No newline at end of file