add to about page

src/about/AboutPage.tsx

@@ -1,5 +1,51 @@
+import "./about.scss";
+import openingImage from "../img/IMG_20240725_175449_803.jpg";
+import rainbow from "../img/IMG-0186.jpg";
+import japanese from "../img/IMG_20230531_000224_01.jpg";
+import {PropsWithChildren} from "react";
+
 export default function AboutPage() {
-  return <>
-    Hello
-  </>
+  return <main>
+    <div className="edge">
+
+    </div>
+    <section className="about-container">
+      <img src={openingImage} alt="Tymur Arsentiev" className="self"/>
+      <h1 className="title">Welcome to my blog and personal website!</h1>
+      <p>
+        For the longest time, I never had a personal website to show my skills.
+        I'm a longtime coder, project after project, but have never considered making a place to share my thoughts.
+        After a while, I was inspired by my <ExternalLink href="https://medium.com/@tymur.arsent">Medium</ExternalLink> and
+        &nbsp;<ExternalLink  href="https://substack.com/@timsnodocmartins">Substack</ExternalLink> account to begin journaling my thoughts on my own.
+      </p>
+      <p>
+        I like to take pride in my uniqueness as a web developer.
+        I don't go for trends, I consider myself <i>the trendsetter.</i>&nbsp;
+        My website design was definitely influenced by my fashion sense.
+      </p>
+      <h2>Fashion Rebel</h2>
+      <div className="clothing">
+        <img src={rainbow} alt="Rainbow colored clothing"/>
+        <img src={japanese} alt="Purple shirt with Japanese text"/>
+      </div>
+      <p>
+        Clothes shopping is a great knack of mine. I'm skilled in finding all kinds of weird clothes to wear.
+        I like doing stuff that makes me stand out, as you can see from the gallery.
+      </p>
+      <p>
+        My store of choice is <ExternalLink href="https://www.ebay.com/usr/tymur999">Ebay</ExternalLink>, where I love thrifting out-of-this-world outfits for a low price.
+        EBay is a place for me to liquidate my assets, which is random items around the house.
+        My favorite thing about Ebay is that they have almost every clothing brand, typically at reduced prices due to use.
+      </p>
+    </section>
+    <div className="edge">
+
+    </div>
+  </main>
+}
+
+function ExternalLink(props: PropsWithChildren & { href: string }) {
+  return (
+    <a href={props.href} className="link external-link" target="_blank">{props.children}</a>
+  )
 }

src/about/about.scss

@@ -0,0 +1,66 @@
+@import "../nav/nav.scss";
+
+main {
+  color: white;
+  display: flex;
+  justify-content: center;
+}
+
+.title {
+  text-align: center;
+  margin: $padding;
+}
+
+.self {
+  width: 100%;
+  border-bottom: white 4px solid;
+}
+
+.about-container {
+  margin-top: 2 * $padding;
+  flex-shrink: 1;
+  max-width: 75%;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  font-family: Neuton;
+
+  img:not(.self) {
+    border: 2px white solid;
+  }
+
+  p {
+    text-indent: 2 * $padding;
+    margin: 10px;
+    max-width: 600px;
+    line-height: 40px;
+    font-size: 20px;
+  }
+
+  h1 {
+    font-size: 40px;
+  }
+  h2 {
+    font-size: 30px;
+  }
+}
+
+.edge {
+  background:#27213C;
+  flex-grow: 1;
+}
+
+.clothing {
+  margin: 15px 0;
+  display: flex;
+  flex-direction: row;
+  justify-content: center;
+}
+
+.clothing>img {
+  width: 33%;
+}
+
+.external-link {
+  text-decoration: underline !important;
+}

src/index.scss

@@ -3,12 +3,12 @@ body {
   width: 100%;
   height: 100%;
   background: black;
-  overflow: hidden;
   font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
     'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
     sans-serif;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
+  color: white;
 }
 
 code {

src/index.tsx

@@ -3,6 +3,12 @@ import ReactDOM from 'react-dom/client';
 import './index.scss';
 import {RouterProvider} from "./router/RouterContext";
 import {Route} from "./router/Route";
+import "@fontsource/inter"; // Defaults to weight 400
+import "@fontsource/inter/400.css"; // Specify weight
+import "@fontsource/inter/400-italic.css"; // Specify weight and style
+import "@fontsource/neuton"; // Defaults to weight 400
+import "@fontsource/neuton/400.css"; // Specify weight
+import "@fontsource/neuton/400-italic.css"; // Specify weight and style
 
 const Canvas = React.lazy(() => import("./index/Canvas"));
 const About = React.lazy(() => import("./about/AboutPage"));

src/index/canvas.scss

@@ -7,10 +7,13 @@ main {
   background: black;
   color: white;
   z-index: -999;
+  overflow: hidden;
 }
 
 .welcome {
   text-align: center;
   position: absolute;
   top: calc(50% + 50px);
+  font-family: Neuton;
+  font-size: 30px;
 }

src/nav/nav.scss

@@ -50,4 +50,8 @@ nav>a{
   display: flex;
   flex-grow: 1;
   gap: 15px;
+}
+
+.nav {
+  font-family: Inter;
 }

src/router/Link.tsx

@@ -9,7 +9,7 @@ export function Link(props: {className?: string, href: Path, replace?: boolean }
   const router = useRouter();
 
    function onClick(event: React.MouseEvent) {
-        event.preventDefault();
+//        event.preventDefault();
         if(replace) {
           router.replacePage(props.href);
         } else {