add to about page

package-lock.json

@@ -8,6 +8,8 @@
       "name": "blog",
       "version": "0.1.0",
       "dependencies": {
+        "@fontsource/inter": "^5.2.8",
+        "@fontsource/neuton": "^5.2.7",
         "@fortawesome/fontawesome-svg-core": "^7.2.0",
         "@fortawesome/free-brands-svg-icons": "^7.2.0",
         "@fortawesome/free-regular-svg-icons": "^7.2.0",
@@ -2480,6 +2482,24 @@
         "node": "^12.22.0 || ^14.17.0 || >=16.0.0"
       }
     },
+    "node_modules/@fontsource/inter": {
+      "version": "5.2.8",
+      "resolved": "https://registry.npmjs.org/@fontsource/inter/-/inter-5.2.8.tgz",
+      "integrity": "sha512-P6r5WnJoKiNVV+zvW2xM13gNdFhAEpQ9dQJHt3naLvfg+LkF2ldgSLiF4T41lf1SQCM9QmkqPTn4TH568IRagg==",
+      "license": "OFL-1.1",
+      "funding": {
+        "url": "https://github.com/sponsors/ayuhito"
+      }
+    },
+    "node_modules/@fontsource/neuton": {
+      "version": "5.2.7",
+      "resolved": "https://registry.npmjs.org/@fontsource/neuton/-/neuton-5.2.7.tgz",
+      "integrity": "sha512-5XYm0eAoFFxdTmVpyWNnnLu/tW2h6jkhnx8MjGSpNgCcDBxKbc025pZXNPeqrXIJMM8khyQmpzQ1s3522V0BTQ==",
+      "license": "OFL-1.1",
+      "funding": {
+        "url": "https://github.com/sponsors/ayuhito"
+      }
+    },
     "node_modules/@fortawesome/fontawesome-common-types": {
       "version": "7.2.0",
       "resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-common-types/-/fontawesome-common-types-7.2.0.tgz",

package.json

@@ -3,6 +3,8 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
+    "@fontsource/inter": "^5.2.8",
+    "@fontsource/neuton": "^5.2.7",
     "@fortawesome/fontawesome-svg-core": "^7.2.0",
     "@fortawesome/free-brands-svg-icons": "^7.2.0",
     "@fortawesome/free-regular-svg-icons": "^7.2.0",

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 <>
+  return <main>
-    Hello
+    <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 {