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;