Prettier

src/App.tsx

@@ -1,21 +1,14 @@
-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";
 
 function App() {
   return (
     <Routes>
-      <Route
+      <Route path="/" index element={<Main />} />
-        path="/"
+      <Route path="/about" element={<About />} />
-        index
-        element={<Main />}
-      />
-      <Route
-        path="/about"
-        element={<About />}
-      />
     </Routes>
-  )
+  );
 }
 
-export default App
+export default App;

src/components/B.tsx

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

src/components/Bullet.tsx

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

src/components/Description.tsx

@@ -7,7 +7,11 @@ 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"}

src/components/Header.tsx

@@ -15,7 +15,8 @@ export interface TextLinks extends GenericProps {
 export const Header = ({ fadeIn, links }: TextLinks) => {
   return (
     <div className={fadeIn ? "header fade-in" : "header"}>
-      {links && links.map((link) => {
+      {links &&
+        links.map((link) => {
           return (
             <Link
               className="header-link"

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/index.css

@@ -3,11 +3,14 @@ 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 {
@@ -32,7 +35,8 @@ body {
     color 0s;
 }
 
-.reg-link:link, .reg-link:visited {
+.reg-link:link,
+.reg-link:visited {
   color: var(--main);
   text-decoration: none;
 }

src/pages/About.tsx

@@ -1,14 +1,21 @@
-import { Link } from 'react-router-dom';
+import { Link } from "react-router-dom";
-import { B, Description, Header, Message, Title, TextLink } from '../components'
+import {
-import Bullet from '../components/Bullet'
+  B,
+  Description,
+  Header,
+  Message,
+  Title,
+  TextLink,
+} from "../components";
+import Bullet from "../components/Bullet";
 
 function About() {
   const links: TextLink[] = [
     {
       text: "Back",
-      link: "/"
+      link: "/",
-    }
+    },
-  ]
+  ];
 
   const serverLink = (
     <Link
@@ -41,11 +48,7 @@ function About() {
   );
 
   const neovimLink = (
-    <Link
+    <Link className="reg-link" target="_blank" to="https://neovim.io">
-      className="reg-link"
-      target="_blank"
-      to="https://neovim.io"
-    >
       Neovim
     </Link>
   );
@@ -63,25 +66,26 @@ function About() {
           </p>
 
           <p>
-            You've probably met me online and checked out my website, I know you IRL, or you're interested in me.
+            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.
+            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}. 
+            You can check out some of my favorite projects, like Simple Review{" "}
+            {serverLink} + {clientLink}, and {assistantLink}.
           </p>
         </Description>
       </Message>
 
       <Message>
         <Description>
-          <p>
+          <p>So far, I've managed to famaliarize myself with these...</p>
-            So far, I've managed to famaliarize myself with these...
-          </p>
 
           <B>Languages:</B>
           <Bullet>HTML/CSS</Bullet>
@@ -107,7 +111,7 @@ function About() {
         </Description>
       </Message>
     </>
-  )
+  );
 }
 
 export default About;

src/pages/Main.tsx

@@ -30,8 +30,8 @@ function Main() {
     },
     {
       text: "About",
-      link: "/about"
+      link: "/about",
-    }
+    },
   ];
 
   const buttons: Buttons[] = [
@@ -70,7 +70,17 @@ function Main() {
   return (
     <>
       <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 }}>
@@ -87,15 +97,21 @@ 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 FOSS Enjoyer</Description>
+          <Description noBackground main>
+            Professional FOSS Enjoyer
+          </Description>
         </div>
 
         <ButtonRow buttons={buttons} fadeIn />