Major refactor, add about page

src/App.tsx

@@ -1,8 +1,6 @@
-import React from 'react'
 import { Route, Routes } from 'react-router-dom'
 import Main from './pages/Main'
 import About from './pages/About'
-import SelfHosting from './pages/SelfHosting'
 
 function App() {
   return (
@@ -16,10 +14,6 @@ function App() {
         path="/about"
         element={<About />}
       />
-      <Route
-        path="/about/selfhosting"
-        element={<SelfHosting />}
-      />
     </Routes>
   )
 }

src/colors.css

@@ -0,0 +1,31 @@
+:root {
+  font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;
+
+  color: var(--text-color);
+  background-color: var(--background);
+
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  -webkit-text-size-adjust: 100%;
+
+  --background: rgb(0, 0, 0);
+  --main: rgb(250, 95, 0);
+  --primary: rgb(40, 40, 40);
+  --secondary: rgb(100, 100, 100);
+  --tertiary: rgb(30, 30, 30);
+  --text-color: rgb(255, 255, 255);
+  --shadow-color: rgba(40, 40, 40, 0.5);
+  --shadow: 5px 5px 7px var(--shadow-color);
+}
+
+@media (prefers-color-scheme: light) {
+  :root {
+    --background: rgb(220, 220, 220);
+    --main: rgb(250, 95, 0);
+    --primary: rgb(255, 255, 255);
+    --secondary: rgb(170, 170, 170);
+    --tertiary: rgb(100, 100, 100);
+    --text-color: rgb(0, 0, 0);
+    --shadow: 5px 5px 7px rgba(0, 0, 0, 0.2);
+  }
+}

src/components/B.tsx

@@ -0,0 +1,14 @@
+import { ReactNode } from 'react'
+
+interface BoldProps {
+  children: ReactNode;
+  col?: string;
+}
+
+export const B = ({ children, col = "var(--textcolor)" }: BoldProps) => {
+  return (
+    <span style={{fontWeight: "bold", color: col}}>
+      {children}
+    </span>
+  )
+}

src/components/Bullet.tsx

@@ -0,0 +1,17 @@
+import { Children, ReactNode } from 'react'
+
+interface BulletProps {
+  indents?: number;
+  children: ReactNode;
+}
+
+function Bullet({ indents, children }: BulletProps) {
+
+  return (
+    <div style={{textIndent: indents ? `${indents}em` : "0em"}}>
+      &#x2022; {children}
+    </div>
+  )
+}
+
+export default Bullet;

src/components/Description.tsx

@@ -1,4 +1,4 @@
-import React, { ReactNode } from "react";
+import { ReactNode } from "react";
 import { TextProps } from "../types";
 
 export interface DescriptionProps extends TextProps {

src/components/index.ts

@@ -1,6 +1,7 @@
-export * from "./Header";
-export * from "./Title";
-export * from "./Description";
+export * from "./B";
 export * from "./ButtonRow";
-export * from "./Message";
+export * from "./Description";
 export * from "./DoubleSpace";
+export * from "./Header";
+export * from "./Message";
+export * from "./Title";

src/index.css

@@ -1,25 +1,4 @@
 @import url("https://fonts.googleapis.com/css2?family=Inter:wght@100..900&display=swap");
-
-:root {
-  font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;
-
-  color: var(--text-color);
-  background-color: var(--background);
-
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-  -webkit-text-size-adjust: 100%;
-
-  --background: rgb(0, 0, 0);
-  --main: rgb(250, 95, 0);
-  --primary: rgb(40, 40, 40);
-  --secondary: rgb(100, 100, 100);
-  --tertiary: rgb(30, 30, 30);
-  --text-color: rgb(255, 255, 255);
-  --shadow-color: rgba(40, 40, 40, 0.5);
-  --shadow: 5px 5px 7px var(--shadow-color);
-}
-
 body {
   animation: zoom-in 0.3s;
 }
@@ -53,6 +32,11 @@ body {
     color 0s;
 }
 
+.reg-link:link, .reg-link:visited {
+  color: var(--main);
+  text-decoration: none;
+}
+
 .hidden {
   display: none;
 }
@@ -173,8 +157,8 @@ body {
 }
 
 .message {
-  width: 75%;
-  margin: auto;
+  width: 100%;
+  margin: 20px auto;
   text-align: center;
   align-content: center;
 }
@@ -189,15 +173,3 @@ body {
 .small-font {
   font-size: 12px;
 }
-
-@media (prefers-color-scheme: light) {
-  :root {
-    --background: rgb(220, 220, 220);
-    --main: rgb(250, 95, 0);
-    --primary: rgb(255, 255, 255);
-    --secondary: rgb(170, 170, 170);
-    --tertiary: rgb(100, 100, 100);
-    --text-color: rgb(0, 0, 0);
-    --shadow: 5px 5px 7px rgba(0, 0, 0, 0.2);
-  }
-}

src/pages/About.tsx

@@ -1,6 +1,6 @@
-import React from 'react'
-import { Link } from 'react-router-dom'
-import { Description, Header, Message, Title, DoubleSpace, ButtonRow, Buttons, TextLink } from '../components'
+import { Link } from 'react-router-dom';
+import { B, Description, Header, Message, Title, TextLink } from '../components'
+import Bullet from '../components/Bullet'
 
 function About() {
   const links: TextLink[] = [
@@ -10,12 +10,45 @@ function About() {
     }
   ]
 
-  const buttons: Buttons[] = [
-    {
-      name: "Self-Hosting",
-      link: "/about/selfhosting",
-    }
-  ];
+  const serverLink = (
+    <Link
+      className="reg-link"
+      target="_blank"
+      to="https://git.povario.com/powermaker450/simple-review-server"
+    >
+      Server
+    </Link>
+  );
+
+  const clientLink = (
+    <Link
+      className="reg-link"
+      target="_blank"
+      to="https://git.povario.com/powermaker450/simple-review-client"
+    >
+      Client
+    </Link>
+  );
+
+  const assistantLink = (
+    <Link
+      className="reg-link"
+      target="_blank"
+      to="https://git.povario.com/powermaker450/Tailchat-Assistant"
+    >
+      Tailchat-Assistant
+    </Link>
+  );
+
+  const neovimLink = (
+    <Link
+      className="reg-link"
+      target="_blank"
+      to="https://neovim.io"
+    >
+      Neovim
+    </Link>
+  );
 
   return (
     <>
@@ -25,19 +58,54 @@ function About() {
         <Title>About</Title>
 
         <Description>
+          <p>
+            I'm <B col="var(--main)">powermaker450</B>.
+          </p>
+
           <p>
             You've probably met me online and checked out my website, I know you IRL, or you're interested in me.
           </p>
 
           <p>
-            In the wise words of Lester Crest, "don't dawdle!" and read on.
+            I got very interested in programming at young age, and while my skills have improved a lot, I'm only 16 and got a lot to learn.
+            Despite that, I'm proud of what I've done and learned so far.
+          </p>
+
+          <p>
+            You can check out some of my favorite projects, like Simple Review {serverLink} + {clientLink}, and {assistantLink}. 
           </p>
         </Description>
       </Message>
 
-      <DoubleSpace />
+      <Message>
+        <Description>
+          <p>
+            So far, I've managed to famaliarize myself with these...
+          </p>
 
-      <ButtonRow buttons={buttons} fadeIn />
+          <B>Languages:</B>
+          <Bullet>HTML/CSS</Bullet>
+          <Bullet>TypeScript/Javascript</Bullet>
+          <Bullet>Python</Bullet>
+          <Bullet>Lua (minimally, only for Neovim)</Bullet>
+
+          <br />
+
+          <B>Tools:</B>
+          <Bullet>Git</Bullet>
+          <Bullet>React</Bullet>
+          <Bullet>Material UI (for React)</Bullet>
+          <Bullet>OpenAI API</Bullet>
+          <Bullet>SQLite</Bullet>
+          <Bullet>Regular Expressions</Bullet>
+
+          <br />
+
+          <p>
+            And my main/only editor is {neovimLink}. I love it until I don't. :)
+          </p>
+        </Description>
+      </Message>
     </>
   )
 }

src/pages/Main.tsx

@@ -1,5 +1,5 @@
+import "../colors.css";
 import { useState } from "react";
-import { Link } from "react-router-dom";
 import {
   Buttons,
   ButtonRow,
@@ -48,7 +48,7 @@ function Main() {
       link: "https://github.com/powermaker450",
     },
     {
-      name: "Forgejo",
+      name: "Projects",
       link: "https://git.povario.com/powermaker450",
     },
     {
@@ -95,14 +95,12 @@ function Main() {
         <div className="head zoom-in">
           <Title noBackground glow>@powermaker450</Title>
 
-          <Description noBackground main>Professional Linux Enjoyer + Self Hosts a Lot</Description>
+          <Description noBackground main>Professional FOSS Enjoyer</Description>
         </div>
 
         <ButtonRow buttons={buttons} fadeIn />
 
         <Message>
-          <Title>Welcome!</Title>
-
           <Description>
             <p>You've reached my homepage.</p>
             <p>

src/pages/SelfHosting.tsx

@@ -1,76 +0,0 @@
-import { Link } from 'react-router-dom'
-import { Description, DoubleSpace, Header, Message, TextLink, Title } from '../components'
-
-function SelfHosting() {
-  const links: TextLink[] = [
-    {
-      text: "Back",
-      link: "/about"
-    }
-  ]
-
-  return (
-    <>
-      <Header links={links} />
-
-      <Message>
-        <Title>Self-Hosting</Title>
-
-        <Description>
-          <p>
-            Getting the more obvious stuff out of the way, I like self-hosting. I started my self-hosting journey back in
-            2021, when all I was was fed up with Netflix not having all the shows I wanted to watch.
-          </p>
-          
-          <p>
-            Eventually, that grew into something much bigger, and suddenly this machine I got from a dumpster was my key
-            to a privacy suite.
-          </p>
-          
-          <img style={{display: "block", margin: "auto", width: "350px"}} src="/public/server.png" />
-
-          <p>
-            Yep. Did I say it was from a dumpster? It's beautiful in it's own way.
-          </p>
-        </Description>
-
-        <DoubleSpace />
-
-        <Description>
-          <p>
-            Managing your own server is a learning experience in itself, and with time I learned the
-            cold, hard, basic skills of being a Linux sysadmin.
-            Not to say it hasn't paid off.
-          </p>
-          
-          <p>
-            I've learned my way around the terminal, and can comfortably surf through it without worry,
-            and if I do come across something I don't know, I'll figure out how to do it.
-            Not to mention the money saved not paying for cloud services. Money's not exactly something that get's thrown at me in my life.
-          </p>
-
-          <p>
-            Instead of the Google Suite, I use <Link className="at" to="https://nextcloud.com" target="_blank">Nextcloud</Link>.
-          </p>
-
-          <p>
-            Instead of Spotify, I use <Link className="at" to="https://navidrome.org" target="_blank">Navidrome</Link>.
-          </p>
-
-          <p>
-            Instead of paying for game hosting, I use <Link className="at" to="https://www.pufferpanel.com">Pufferpanel</Link>.
-          </p>
-
-          <p>
-            And so on. Between becoming comfortable with the ways of Linux, and saving my family money in the long run, this server
-            has been a worthwhile investment of my time and effort.
-          </p>
-        </Description>
-      </Message>
-
-      <DoubleSpace />
-    </>
-  )
-}
-
-export default SelfHosting;