diff --git a/public/server.png b/public/server.png
deleted file mode 100644
index 1ff210b..0000000
Binary files a/public/server.png and /dev/null differ
diff --git a/src/App.tsx b/src/App.tsx
index 69101f9..8e3e85e 100644
--- a/src/App.tsx
+++ b/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={ }
/>
- }
- />
)
}
diff --git a/src/colors.css b/src/colors.css
new file mode 100644
index 0000000..49aa786
--- /dev/null
+++ b/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);
+ }
+}
diff --git a/src/components/B.tsx b/src/components/B.tsx
new file mode 100644
index 0000000..4717e05
--- /dev/null
+++ b/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 (
+
+ {children}
+
+ )
+}
diff --git a/src/components/Bullet.tsx b/src/components/Bullet.tsx
new file mode 100644
index 0000000..9f01526
--- /dev/null
+++ b/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 (
+
+ • {children}
+
+ )
+}
+
+export default Bullet;
diff --git a/src/components/Description.tsx b/src/components/Description.tsx
index 771c36c..b989dc9 100644
--- a/src/components/Description.tsx
+++ b/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 {
diff --git a/src/components/index.ts b/src/components/index.ts
index 3de50de..33ba125 100644
--- a/src/components/index.ts
+++ b/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";
diff --git a/src/index.css b/src/index.css
index 7eb58a7..36854fe 100644
--- a/src/index.css
+++ b/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);
- }
-}
diff --git a/src/pages/About.tsx b/src/pages/About.tsx
index d017998..9a4e3d7 100644
--- a/src/pages/About.tsx
+++ b/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 = (
+
+ Server
+
+ );
+
+ const clientLink = (
+
+ Client
+
+ );
+
+ const assistantLink = (
+
+ Tailchat-Assistant
+
+ );
+
+ const neovimLink = (
+
+ Neovim
+
+ );
return (
<>
@@ -25,19 +58,54 @@ function About() {
About
+
+ I'm powermaker450 .
+
+
You've probably met me online and checked out my website, I know you IRL, or you're interested in me.
- 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.
+
+
+
+ You can check out some of my favorite projects, like Simple Review {serverLink} + {clientLink}, and {assistantLink}.
-
+
+
+
+ So far, I've managed to famaliarize myself with these...
+
-
+ Languages:
+ HTML/CSS
+ TypeScript/Javascript
+ Python
+ Lua (minimally, only for Neovim)
+
+
+
+ Tools:
+ Git
+ React
+ Material UI (for React)
+ OpenAI API
+ SQLite
+ Regular Expressions
+
+
+
+
+ And my main/only editor is {neovimLink}. I love it until I don't. :)
+
+
+
>
)
}
diff --git a/src/pages/Main.tsx b/src/pages/Main.tsx
index 8d61d3b..5022bea 100644
--- a/src/pages/Main.tsx
+++ b/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() {
@powermaker450
- Professional Linux Enjoyer + Self Hosts a Lot
+ Professional FOSS Enjoyer
- Welcome!
-
You've reached my homepage.
diff --git a/src/pages/SelfHosting.tsx b/src/pages/SelfHosting.tsx
deleted file mode 100644
index 3b0a5e3..0000000
--- a/src/pages/SelfHosting.tsx
+++ /dev/null
@@ -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 (
- <>
-
-
-
- Self-Hosting
-
-
-
- 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.
-
-
-
- Eventually, that grew into something much bigger, and suddenly this machine I got from a dumpster was my key
- to a privacy suite.
-
-
-
-
-
- Yep. Did I say it was from a dumpster? It's beautiful in it's own way.
-
-
-
-
-
-
-
- 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.
-
-
-
- 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.
-
-
-
- Instead of the Google Suite, I use Nextcloud.
-
-
-
- Instead of Spotify, I use Navidrome.
-
-
-
- Instead of paying for game hosting, I use Pufferpanel.
-
-
-
- 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.
-
-
-
-
-
- >
- )
-}
-
-export default SelfHosting;