+ {links && links.map((link) => {
return (
-
{link.text}
-
+
);
})}
diff --git a/src/components/Message.tsx b/src/components/Message.tsx
index 491e93a..096fcc1 100644
--- a/src/components/Message.tsx
+++ b/src/components/Message.tsx
@@ -2,8 +2,15 @@ import React, { ReactNode } from "react";
export interface MessageProps {
children: ReactNode;
+ className?: string;
}
-export const Message = ({ children }: MessageProps) => {
- return {children}
;
+export const Message = ({ className, children }: MessageProps) => {
+ return (
+
+ {children}
+
+ );
};
diff --git a/src/components/Title.tsx b/src/components/Title.tsx
index f5247ba..aa00fa8 100644
--- a/src/components/Title.tsx
+++ b/src/components/Title.tsx
@@ -1,14 +1,31 @@
import { ReactNode } from "react";
+import { TextProps } from "../types";
-export interface TitleProps {
+export interface TitleProps extends TextProps {
children: ReactNode;
+ noBackground?: boolean;
glow?: boolean;
}
-export const Title = ({ children, glow }: TitleProps) => {
+export const Title = ({ children, noBackground, glow }: TitleProps) => {
+ const determineClasses = () => {
+ let result = "title";
+
+ if (noBackground) {
+ result += " no-background"
+ }
+
+ if (glow) {
+ result += " glow";
+ }
+
+ return result;
+ }
+
return (
+
-
);
};
diff --git a/src/components/index.ts b/src/components/index.ts
index 5bcf561..3de50de 100644
--- a/src/components/index.ts
+++ b/src/components/index.ts
@@ -3,3 +3,4 @@ export * from "./Title";
export * from "./Description";
export * from "./ButtonRow";
export * from "./Message";
+export * from "./DoubleSpace";
diff --git a/src/index.css b/src/index.css
index f29ae8d..7eb58a7 100644
--- a/src/index.css
+++ b/src/index.css
@@ -24,6 +24,17 @@ body {
animation: zoom-in 0.3s;
}
+.at:link, .at:visited {
+ color: var(--main);
+ font-weight: bold;
+ text-decoration: none;
+ transition: opacity 0.15s, transform 0.15s;
+}
+
+.at:hover {
+ opacity: 0.6;
+}
+
.header {
margin: 10px auto;
text-align: center;
@@ -107,6 +118,10 @@ body {
color 0.6s,
text-shadow 0.6s,
transform 0.6s;
+ padding: 42px 96px;
+ background-color: var(--primary);
+ border-radius: 17px;
+ box-shadow: var(--shadow);
}
.glow:hover {
@@ -116,12 +131,17 @@ body {
}
.description {
- margin: 15px 0;
+ display: inline-block;
+ max-width: 50%;
font-size: 15px;
+ padding: 24px 48px;
+ background-color: var(--primary);
+ border-radius: 17px;
+ box-shadow: var(--shadow);
}
.social-link-area {
- margin: 25px 0;
+ margin: 10px 0;
text-align: center;
}
@@ -154,12 +174,20 @@ body {
.message {
width: 75%;
- margin: 25px auto;
+ margin: auto;
text-align: center;
- padding: 17px;
- background-color: var(--primary);
- border-radius: 17px;
- box-shadow: var(--shadow);
+ align-content: center;
+}
+
+.no-background {
+ padding: 0;
+ background-color: transparent;
+ box-shadow: none;
+ text-shadow: var(--shadow);
+}
+
+.small-font {
+ font-size: 12px;
}
@media (prefers-color-scheme: light) {
diff --git a/src/keyframes.css b/src/keyframes.css
index 9ea4f48..625419d 100644
--- a/src/keyframes.css
+++ b/src/keyframes.css
@@ -85,3 +85,11 @@
opacity: 0;
}
}
+
+.zoom-in {
+ animation: zoom-in 0.3s;
+}
+
+.fade-in {
+ animation: fade-in 0.3s;
+}
diff --git a/src/main.tsx b/src/main.tsx
index 8b1ddb9..195728e 100644
--- a/src/main.tsx
+++ b/src/main.tsx
@@ -1,10 +1,13 @@
import React from "react";
import ReactDOM from "react-dom/client";
+import { BrowserRouter } from "react-router-dom";
import App from "./App";
import "./index.css";
ReactDOM.createRoot(document.getElementById("root") as HTMLElement).render(
{children}
+{children}
+ 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. +
+
- 
-
+ Self-Hosting
+
+
+ 
+
+
+
+
+
+
+
+
- - Stop that! -
+
+ 
-
- @powermaker450
+
- Welcome!
-
-
-
-
-
+ Welcome!
+
+
+
+
+
);
}
+
+export default Main;
diff --git a/src/pages/SelfHosting.tsx b/src/pages/SelfHosting.tsx
new file mode 100644
index 0000000..3b0a5e3
--- /dev/null
+++ b/src/pages/SelfHosting.tsx
@@ -0,0 +1,76 @@
+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 (
+ <>
+
+ Professional Linux Enjoyer + Self Hosts a Lot
-
-
- You've reached my homepage.
-- If you were looking for something, it's probably one of the links - above. +
+
+
+
+
+ + Stop that!
- - +
+ @powermaker450
+
+ Professional Linux Enjoyer + Self Hosts a Lot
+
+
+ You've reached my homepage.
++ If you were looking for something, it's probably one of the links + above. +
++ 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. +
+