first blog more written

src/about/AboutPage.tsx

@@ -1,7 +1,6 @@
 import "./about.sass";
-import {HTMLProps, lazy} from "react";
-import {Link} from "../router/Link";
-import {Path} from "../router/router";
+import {lazy} from "react";
+import {ExternalLink} from "../router/Link";
 
 const About = lazy(() => import("./About.mdx"));
 
@@ -16,9 +15,3 @@ export default function AboutPage() {
     <div className="edge"/>
   </main>
 }
-
-function ExternalLink(props: HTMLProps<HTMLAnchorElement>) {
-  return (
-    <Link {...props} href={props.href as Path} className="external-link" target="_blank">{props.children}</Link>
-  )
-}

src/about/about.sass

@@ -2,6 +2,7 @@
 $paragraph: 20px
 $max-width: 600px
 $min-width: 400px
+$reader-bg: #27213C
 
 .about-page
   color: white
@@ -45,7 +46,7 @@ $min-width: 400px
     font-size: $paragraph * 1.1
 
 .edge
-  background: #27213C
+  background: $reader-bg
   flex-grow: 1
   min-width: 30%
 

src/articles/ArticleContext.tsx

@@ -1,28 +1,6 @@
-import {createContext, lazy, LazyExoticComponent, PropsWithChildren, useContext, useState} from "react";
-import {Path} from "../router/router";
-import {MDXContent} from "mdx/types";
-import allBlack from "../img/IMG_3095.jpg";
+import {createContext, PropsWithChildren, useContext, useState} from "react";
 import {Reader} from "./Reader";
-
-export interface Article {
-  name: string,
-  description: string,
-  // image thumbnail
-  thumbnail: Path,
-  published: Date,
-  // lazy load article content
-  article: MDXContent | LazyExoticComponent<MDXContent>
-}
-
-export const ARTICLES: Article[] = [
-  {
-    name: "My high school experience",
-    description: "My first program, winning two senior superlatives, and why (and how) I chose Georgia Tech",
-    thumbnail: allBlack,
-    published: new Date(Date.parse("3/15/2026")),
-    article: lazy(() => import("./mdx/high-school.mdx"))
-  }
-]
+import {Article} from "./articles";
 
 const articleContext =
   createContext<ReturnType<typeof useState<Article | undefined>>>([undefined, function(){}]);

src/articles/ArticlesList.tsx

@@ -1,7 +1,8 @@
-import {Article, ARTICLES, useArticle} from "./ArticleContext";
+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";
 
 
 export function ArticlesList() {
@@ -10,7 +11,7 @@ export function ArticlesList() {
     <section className="articles">
       {
         ARTICLES.map(a =>
-          <BlogBox key={a.name} article={a}/>
+          <BlogBox key={a.name} article={a} />
         )
       }
     </section>

src/articles/Reader.tsx

@@ -1,13 +1,14 @@
 import {useArticle} from "./ArticleContext";
 import {motion} from "framer-motion";
-import {useAnimate, animate as animateClass} from "motion/react";
+import {animate as animateClass, useAnimate} from "motion/react";
 import {useEffect} from "react";
 import {AnimateDirection, 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();
@@ -30,12 +31,12 @@ export function Reader() {
 
   function handleClose() {
     Promise.all([
-      animate(scope.current, READER.initial),
-      animateClass(".read-box", ARTICLE.initial!)
-    ]).then(() => setPost(undefined));
+        animate(scope.current, READER.initial),
+        animateClass(".reader > section", ARTICLE.initial)
+      ]
+    ).then(() => setPost(undefined));
   }
 
-
   return post ? (
     <motion.article
       key="reader"
@@ -44,8 +45,10 @@ export function Reader() {
       animate={READER.animate}
       onClick={handleClose}
       className="reader link">
-        <motion.section className="read-box"  initial={{top: "-100%"}} animate={{top: "50%"}} onClick={e => e.stopPropagation()}>
-          <post.article/>
+        <motion.section initial={{top: "-100%"}} animate={{top: "50%"}} onClick={e => e.stopPropagation()}>
+          <post.article components={{
+           'a': ExternalLink
+          }}/>
         </motion.section>
     </motion.article>
   ) : <></>;

src/articles/articles.ts

@@ -0,0 +1,24 @@
+import {Path} from "../router/router";
+import {MDXContent} from "mdx/types";
+import {lazy, LazyExoticComponent} from "react";
+import allBlack from "../img/IMG_3095.jpg";
+
+export interface Article {
+  name: string,
+  description: string,
+  // image thumbnail
+  thumbnail: Path,
+  published: Date,
+  // lazy load article content
+  article: LazyExoticComponent<MDXContent>
+}
+
+export const ARTICLES: Article[] = [
+  {
+    name: "My high school experience",
+    description: "My first program, winning two senior superlatives, and why (and how) I chose Georgia Tech",
+    thumbnail: allBlack,
+    published: new Date(Date.parse("3/15/2026")),
+    article: lazy(() => import("./mdx/high-school.mdx"))
+  }
+]

src/articles/list.sass

@@ -1,30 +1,6 @@
 @use "../nav/nav"
 $entry-width: 400px
 
-article
-  padding: 0 nav.$padding
-  img
-    width: 500px
-  h1
-    font-size: 30px
-  p
-    font-size: 20px
-
-.art-ctr
-  display: flex
-  flex-direction: row
-  min-height: 100vh
-
-  button
-    display: flex
-    flex-direction: column
-    max-width: $entry-width
-    margin: nav.$padding * 2
-    &>div
-      background: #282c34
-    color: white
-    padding: 0
-
 .thumbnail
   width: $entry-width
   height: 400px
@@ -62,26 +38,26 @@ article
   align-items: center
   flex-wrap: wrap
 
-.reader
-  font-family: Neuton, serif
-  border: 2px solid black
-  &, > section
-    position: fixed
-    top: 50%
-    left: 50%
-    transform: translate(-50%, -50%)
-
-  overflow: scroll
-  z-index: 9999
-  width: 100vw
+.art-ctr
+  display: flex
+  flex-direction: row
   min-height: 100vh
-  background: rgba(0,0,0,0.5)
-  > section
-    margin-top: nav.$padding
-    background: white
-    color: black
-    min-width: 50vw
-    max-width: 800px
-    min-height: 75vh
-    h1
-      font-size: xxx-large
+
+  ul
+    display: flex
+    flex-direction: column
+    align-items: flex-start
+    justify-items: center
+
+    li
+      font-size: 20px
+
+  button
+    display: flex
+    flex-direction: column
+    max-width: $entry-width
+    margin: nav.$padding * 2
+    &>div
+      background: #282c34
+    color: white
+    padding: 0

src/articles/mdx/high-school.mdx

@@ -1,24 +1,66 @@
 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";
 
 # My high school experience
 
 <img src={allBlack} width={500} alt="turtleneck thumbnail"/>
 
-My coding journey started with Code Combat, a Python coding RPG game.
-I wrote my program during FBLA regionals freshman year, using C# and Windows Forms.
-The event taught me how to implement client-requested features and EF-Core SQL mapping.
+My first coding experience was in middle school playing Code Combat.
+You could say Python is the first language I learned, not particularly uncommon.
+That was probably the most fun I ever had in a middle school classroom.
+I was way ahead of class and even played in my free time.
 
-I also did plenty of hackathons in my high school career,
-including [HackIMSA](https://devpost.com/software/examin),
-[NHacks VII](https://devpost.com/software/examin),
-[PantherHack](https://devpost.com/software/examin),
-[Hack3](https://devpost.com/software/mura),
-[10piHacks](https://devpost.com/software/dormup).
+## High School Extracurriculars
 
-**I did many clubs and as a result was always busy. My favorite clubs include:**
-- CS Clubs
-- Science Olympiad
-- Science Team (WYSE)
+The first time I competed in my software engineering skills was FBLA. I did the Computer Programming event, which
+required us to setup a spreadsheet app that could record data and export into various formats. Funny thing is that
+my dad pulled an all-nighter to finish it. It was written in C# and using Windows Forms for desktop support.
 
-Since freshman year, I enjoyed doing side projects to improve my coding ability to solve real world problems.
-My first one was finishing the FBLA Computer Programming app. I finished the app according to the rubric.
+I didn't do well in the event but was inspired to fix it based on the rubric they provided. This is where I learned C#
+and also their web support. [GitHub repo here](https://github.com/tymur999/CommunityServiceDBTracker).
+After C#, I learned React to grind and spam hackathons with my friends. Our stack included React or Next.js, Firebase, with
+Typescript. [My Devpost](https://devpost.com/tymur999) hosts all my hackathon projects, which include:
+- [DormUp](https://devpost.com/software/dormup) - roommate finder app
+- [ExamIn](https://devpost.com/software/examin) - Quizlet x APClassroom
+- [Mura](https://devpost.com/software/mura) - YouTube spin-off for learning
+- [RecycleBot](https://devpost.com/software/recyclebot-zmr3tx) - my first solo project
+
+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.
+
+## Programming Hobby
+
+<div className="row">
+    <Nextcloud/>
+</div>
+
+I began to experiment with Ubuntu on an old computer, and I enjoyed its ease of use and up-to-date repositories.
+I've been daily-driving Linux distros since 5 years ago. I decided to self-host all my applications
+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.
+
+
+## The Graduation
+
+<div className="row">
+    <img src={style} width={500} alt="style superlative"/>
+    <img src={savvy} width={500} alt="tech savvy superlative"/>
+</div>
+
+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.
+
+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.
+While men tend to be logical, I like to feel my way through everything and listen to my gut.
+
+I applied to various schools, around 21+. I had some issues because I maxed out CommonApp, so I applied to some
+schools directly on their websites. Unfortunately, I didn't get into University Of Illinois for CS+Math.
+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

@@ -0,0 +1,46 @@
+@use "../nav/nav"
+@use "../about/about"
+
+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
+  min-height: 100vh
+  background: rgba(0,0,0,0.5)
+
+  &, > section
+    position: fixed
+    top: 50%
+    left: 50%
+    transform: translate(-50%, -50%)
+
+
+  > section
+    background: white
+    color: black
+    min-height: 75vh
+    width: 800px
+
+.external-link
+  color: inherit !important
+
+.row
+  margin: 30px 0
+  display: flex
+  flex-direction: row
+  justify-content: center
+
+
+.row>*
+  width: 33%

src/img/Gitea-Logo.wine.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="800" width="1200" viewBox="-18.77673 -19.385925 162.73166 116.31555"><path d="M22.1597.5C12.613.473-.1796 7.2982.5279 24.404c1.1056 26.729 25.4566 29.2084 35.1917 29.423 1.068 5.0136 12.5218 22.3057 21.0018 23.2167h37.1528c22.2776-1.6678 38.9607-75.7567 26.5932-76.0382-46.7816 2.4769-49.9952 2.1384-88.5998 0C29.3726.9789 25.8953.5107 22.1596.5zm2.4913 9.459c1.3514 13.6926 3.5559 21.7035 8.0182 33.9434-11.3829-1.5047-21.0698-5.2244-22.8515-19.1099C8.8667 17.3813 12.2081 9.625 24.651 9.959z" fill="#609926" stroke="#428f29"/><g transform="translate(-5.5503 -33.1175)" fill="#fff"><rect ry="5.4826" transform="rotate(25.915)" y="18.2916" x="87.5087" height="34.7621" width="34.7621"/><path d="M79.805 57.359l3.241 1.61V35.2557h-3.2626z"/></g><g transform="translate(-5.5503 -33.1175)"><circle cx="49.0647" cy="90.0778" r="3.4745" transform="rotate(-19.796)" fill="#609926"/><circle cx="36.8104" cy="102.1049" r="3.4745" transform="rotate(-19.796)" fill="#609926"/><circle cx="46.4843" cy="111.4393" r="3.4745" transform="rotate(-19.796)" fill="#609926"/><path fill="#609926" d="M79.5402 58.9355l2.4017 1.1726-11.961 24.4975-2.4017-1.1727z"/><path d="M76.5581 68.1163c12.9759 6.3954 13.013 4.102 4.8909 20.9073" fill="none" stroke="#609926" stroke-width="2.68"/></g></svg>

src/img/Nextcloud 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 327.41"><defs><style>.cls-1{fill:#0082c9;}</style></defs><path class="cls-1" d="M500.22,336.29c-51.8,0-95.7,35.12-109.31,82.53a73.91,73.91,0,0,0-67.16-43C283.36,375.8,250,409.16,250,450a74.09,74.09,0,0,0,141.35,31.17,113.24,113.24,0,0,0,108.87,82.53c51.36,0,95.26-34.68,109.31-81.65A73.93,73.93,0,0,0,750,449.55c0-40.82-33.36-73.75-74.19-73.75a73.9,73.9,0,0,0-66.28,41.71C595.48,371,552,336.29,500.22,336.29Zm0,43.46A70.24,70.24,0,1,1,430,450,69.89,69.89,0,0,1,500.22,379.75Zm-176,39.51A30.73,30.73,0,1,1,293.46,450,30.54,30.54,0,0,1,324.19,419.26Zm351.62,0A30.73,30.73,0,1,1,645.08,450C645.52,432.87,658.69,419.26,675.81,419.26Z" transform="translate(-250 -336.29)"/><g id="g4571"><path class="cls-1" d="M377.84,616c12.19,0,19,8.67,19,21.68a2.29,2.29,0,0,1-2.27,2.27H361.74c.2,11.56,8.26,18.17,17.55,18.17a19.28,19.28,0,0,0,12-4.13c1.23-.83,2.27-.62,2.89.62l.62,1a2.06,2.06,0,0,1-.62,2.89,25.6,25.6,0,0,1-15.08,5c-13.42,0-23.74-9.71-23.74-23.75C355.54,624.89,365.45,616,377.84,616Zm12.6,19.41c-.41-9.5-6.2-14.25-12.8-14.25-7.64,0-14.25,5-15.7,14.25Z" transform="translate(-250 -336.29)"/><path class="cls-1" d="M458.79,622.61v-15.9a2.06,2.06,0,0,1,2.27-2.27h1.65c1.45,0,2.07.83,2.07,2.27v10.74h9.29a2.07,2.07,0,0,1,2.27,2.27v.62c0,1.45-.83,2.07-2.27,2.07h-9.29v22.71c0,10.53,6.4,11.77,9.91,12,1.86.2,2.48.62,2.48,2.27v1.24c0,1.44-.62,2.06-2.48,2.06-9.91,0-15.9-6-15.9-16.72Z" transform="translate(-250 -336.29)"/><path class="cls-1" d="M506.07,616a23.33,23.33,0,0,1,15.08,5.16c1,.82,1.24,1.86.2,3.1l-.62,1c-.82,1.24-1.85,1.24-3.09.41-2.07-1.44-6-4.13-11.36-4.13-9.91,0-17.76,7.44-17.76,18.38,0,10.74,7.85,18.17,17.76,18.17a19.07,19.07,0,0,0,12.8-4.75c1.24-.82,2.07-.62,2.89.62l.62.83a2.3,2.3,0,0,1-.62,3.09,25.37,25.37,0,0,1-16.1,5.79c-13.42,0-23.75-9.71-23.75-23.75C482.33,625.92,492.65,616,506.07,616Z" transform="translate(-250 -336.29)"/><path class="cls-1" d="M533.54,601.35c0-1.45-.83-2.28.62-2.28h1.65c1.44,0,3.72.83,3.72,2.28V650.7c0,5.78,2.68,6.4,4.74,6.6,1,0,1.86.62,1.86,2.07v1.45a2,2,0,0,1-2.27,2.27c-3.72,0-10.32-1.24-10.32-11.15Z" transform="translate(-250 -336.29)"/><path class="cls-1" d="M575.87,616c13.21,0,24,10.11,24,23.54a24,24,0,0,1-47.91,0C551.91,626.12,562.65,616,575.87,616Zm0,42.12c9.7,0,17.55-7.85,17.55-18.58,0-10.33-7.85-18-17.55-18a17.8,17.8,0,0,0-17.76,18C558.32,650.08,566.16,658.13,575.87,658.13Z" transform="translate(-250 -336.29)"/><path class="cls-1" d="M678.91,616a16.31,16.31,0,0,1,14.86,9.08H694a26.9,26.9,0,0,1-.21-3.51V601.14c0-1.45-.62-2.27.83-2.27h1.65c1.45,0,3.72.82,3.72,2.27V660c0,1.44-.62,2.27-2.07,2.27h-1.44c-1.45,0-2.27-.62-2.27-2.06v-3.51a10.19,10.19,0,0,1,.41-2.9h-.21a16.85,16.85,0,0,1-15.69,9.5c-12.18,0-19.82-9.7-19.82-23.74-.42-14,8-23.54,20-23.54Zm.2,42.12c7.64,0,14.66-5.37,14.66-18.38,0-9.29-4.75-18.17-14.45-18.17-8.05,0-14.66,6.61-14.66,18.17C664.87,650.9,670.65,658.13,679.11,658.13Z" transform="translate(-250 -336.29)"/><path class="cls-1" d="M302.06,662.47h1.65A2.06,2.06,0,0,0,306,660.2V616c0-7,7.64-12,16.32-12s16.31,5,16.31,12V660.4a2.06,2.06,0,0,0,2.27,2.27h1.65c1.45,0,2.07-.82,2.07-2.27V615.59c0-11.77-11.77-17.55-22.51-17.55h0c-10.32,0-22.09,5.78-22.09,17.55V660.2C300,661.64,300.62,662.47,302.06,662.47Z" transform="translate(-250 -336.29)"/><path class="cls-1" d="M646.69,617H645a2.07,2.07,0,0,0-2.27,2.27v25c0,7-4.54,13.42-13.42,13.42-8.67,0-13.42-6.4-13.42-13.42v-25a2.07,2.07,0,0,0-2.27-2.27H612c-1.44,0-2.06.83-2.06,2.27V646c0,11.77,8.67,17.55,19.41,17.55h0c10.74,0,19.41-5.78,19.41-17.55V619.31a1.84,1.84,0,0,0-2.07-2.27Z" transform="translate(-250 -336.29)"/><path id="path4165-9" class="cls-1" d="M442.27,616.83a2.18,2.18,0,0,0-1.45,1l-8.26,9.91-6.19,7.43-9.5-11.36-5.16-6.19a1.8,1.8,0,0,0-1.45-.83,3.33,3.33,0,0,0-1.65.62l-1.24,1c-1,.83-1,1.86-.2,3.1l8.25,9.91,7,8.26-10.12,12.19h0l-5.16,6.19a2.31,2.31,0,0,0,.2,3.3l1.24,1c1,.82,2.07.62,3.1-.42l8.26-9.91,6.19-7.43,9.5,11.36h0l5.16,6.19a1.94,1.94,0,0,0,3.1.21l1.24-1c1-.82,1-1.85.21-3.09l-8.26-9.91-7-8.26L440.2,628h0l5.17-6.19a2.33,2.33,0,0,0-.21-3.31l-1.24-1.23a1.71,1.71,0,0,0-1.65-.42Z" transform="translate(-250 -336.29)"/></g></svg>

src/nav/Menu.tsx

@@ -1,7 +1,8 @@
 import "./menu.sass";
 import {animate, motion} from "framer-motion";
 import {useEffect} from "react";
-import {ARTICLES, useArticle} from "../articles/ArticleContext";
+import {useArticle} from "../articles/ArticleContext";
+import {ARTICLES} from "../articles/articles";
 
 
 const hidden = -999;

src/router/Link.tsx

@@ -26,4 +26,10 @@ export function Link(props: {href: Path, children : ReactNode, target?: '_blank'
   return <a {...props} onClick={onClick} className={className}>
     {children}
    </a>
-}
+}
+
+export function ExternalLink(props: HTMLProps<HTMLAnchorElement>) {
+  return (
+    <Link {...props} href={props.href as Path} className="external-link" target="_blank">{props.children}</Link>
+  )
+}