Prettier

src/App.tsx

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

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,10 @@
+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,16 @@
+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 {
@@ -7,11 +7,15 @@ export interface DescriptionProps extends TextProps {
   noBackground?: boolean;
 }
 
-export const Description = ({ noBackground, main, children }: DescriptionProps) => {
+export const Description = ({
+  noBackground,
+  main,
+  children,
+}: DescriptionProps) => {
   return (
     <div
       className={noBackground ? "description no-background" : "description"}
-      style={main ? {margin: "14px"} : {}}
+      style={main ? { margin: "14px" } : {}}
     >
       {children}
     </div>

src/components/Header.tsx

@@ -15,18 +15,19 @@ export interface TextLinks extends GenericProps {
 export const Header = ({ fadeIn, links }: TextLinks) => {
   return (
     <div className={fadeIn ? "header fade-in" : "header"}>
-      {links && links.map((link) => {
+      {links &&
-        return (
+        links.map((link) => {
-          <Link
+          return (
-            className="header-link"
+            <Link
-            key={link.text}
+              className="header-link"
-            to={link.link}
+              key={link.text}
-            target={link.target ?? "_self"}
+              to={link.link}
-          >
+              target={link.target ?? "_self"}
-            {link.text}
+            >
-          </Link>
+              {link.text}
-        );
+            </Link>
-      })}
+          );
+        })}
     </div>
   );
 };

src/components/Message.tsx

@@ -6,11 +6,5 @@ export interface MessageProps {
 }
 
 export const Message = ({ className, children }: MessageProps) => {
-  return (
+  return <div className={"message zoom-in" + " " + className}>{children}</div>;
-    <div
-      className={"message zoom-in" + " " + className}
-    >
-      {children}
-    </div>
-  );
 };

src/components/Title.tsx

@@ -12,7 +12,7 @@ export const Title = ({ children, noBackground, glow }: TitleProps) => {
     let result = "title";
 
     if (noBackground) {
-      result += " no-background"
+      result += " no-background";
     }
 
     if (glow) {
@@ -20,10 +20,9 @@ export const Title = ({ children, noBackground, glow }: TitleProps) => {
     }
 
     return result;
-  }
+  };
 
   return (
-
     <div>
       <p className={determineClasses()}>{children}</p>
     </div>

src/components/index.ts

@@ -1,6 +1,7 @@
-export * from "./Header";
+export * from "./B";
-export * from "./Title";
-export * from "./Description";
 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,34 +1,16 @@
 @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;
 }
 
-.at:link, .at:visited {
+.at:link,
+.at:visited {
   color: var(--main);
   font-weight: bold;
   text-decoration: none;
-  transition: opacity 0.15s, transform 0.15s;
+  transition:
+    opacity 0.15s,
+    transform 0.15s;
 }
 
 .at:hover {
@@ -53,6 +35,12 @@ body {
     color 0s;
 }
 
+.reg-link:link,
+.reg-link:visited {
+  color: var(--main);
+  text-decoration: none;
+}
+
 .hidden {
   display: none;
 }
@@ -173,8 +161,8 @@ body {
 }
 
 .message {
-  width: 75%;
+  width: 100%;
-  margin: auto;
+  margin: 20px auto;
   text-align: center;
   align-content: center;
 }
@@ -189,15 +177,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,22 +1,58 @@
-import React from 'react'
+import { Link } from "react-router-dom";
-import { Link } from 'react-router-dom'
+import {
-import { Description, Header, Message, Title, DoubleSpace, ButtonRow, Buttons, TextLink } from '../components'
+  B,
+  Description,
+  Header,
+  Message,
+  Title,
+  TextLink,
+} from "../components";
+import Bullet from "../components/Bullet";
 
 function About() {
   const links: TextLink[] = [
     {
       text: "Back",
-      link: "/"
+      link: "/",
-    }
+    },
-  ]
-
-  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 (
     <>
       <Header links={links} />
@@ -26,20 +62,56 @@ function About() {
 
         <Description>
           <p>
-            You've probably met me online and checked out my website, I know you IRL, or you're interested in me.
+            I'm <B col="var(--main)">powermaker450</B>.
           </p>
 
           <p>
-            In the wise words of Lester Crest, "don't dawdle!" and read on.
+            You've probably met me online and checked out my website, I know you
+            IRL, or you're interested in me.
+          </p>
+
+          <p>
+            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>
     </>
-  )
+  );
 }
 
 export default About;

src/pages/Main.tsx

@@ -1,5 +1,5 @@
+import "../colors.css";
 import { useState } from "react";
-import { Link } from "react-router-dom";
 import {
   Buttons,
   ButtonRow,
@@ -30,8 +30,8 @@ function Main() {
     },
     {
       text: "About",
-      link: "/about"
+      link: "/about",
-    }
+    },
   ];
 
   const buttons: Buttons[] = [
@@ -48,7 +48,7 @@ function Main() {
       link: "https://github.com/powermaker450",
     },
     {
-      name: "Forgejo",
+      name: "Projects",
       link: "https://git.povario.com/powermaker450",
     },
     {
@@ -69,11 +69,21 @@ function Main() {
 
   return (
     <>
-      <div id="loader" style={{display: displayed === "" ? "none" : "flex"}}>
+      <div id="loader" style={{ display: displayed === "" ? "none" : "flex" }}>
-        <img src="/three-dots.svg" height={48} style={{display: "block", marginLeft: "auto", marginRight: "auto", marginTop: "20%", width: "50%"}}/>
+        <img
+          src="/three-dots.svg"
+          height={48}
+          style={{
+            display: "block",
+            marginLeft: "auto",
+            marginRight: "auto",
+            marginTop: "20%",
+            width: "50%",
+          }}
+        />
       </div>
 
-      <div id="main" style={{display: displayed}}>
+      <div id="main" style={{ display: displayed }}>
         <Header links={links} fadeIn />
 
         <div className="easter-egg-box">
@@ -87,22 +97,26 @@ function Main() {
             height={130}
             src="/potato.png"
           />
-          <p className={checkTimesClicked() ? "easter-egg" : "easter-egg hidden"}>
+          <p
+            className={checkTimesClicked() ? "easter-egg" : "easter-egg hidden"}
+          >
             Stop that!
           </p>
         </div>
 
         <div className="head zoom-in">
-          <Title noBackground glow>@powermaker450</Title>
+          <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;