powermaker450's Server

); + + return final; +} + +export default App; diff --git a/src/components/ButtonRow.tsx b/src/components/ButtonRow.tsx new file mode 100644 index 0000000..60ae069 --- /dev/null +++ b/src/components/ButtonRow.tsx @@ -0,0 +1,44 @@ +import React, { useState } from "react"; +import "../keyframes.css"; + +export interface Buttons { + name: string; + link: string; +} + +export interface ButtonRowProps { + buttons: Buttons[]; +} + +export const ButtonRow = ({ buttons }: ButtonRowProps) => { + const [shown, changeShown] = useState(false); + + const showItems = () => { + changeShown(true); + }; + + const hideItems = () => { + changeShown(false); + }; + + return ( +

+ {buttons.map((button, index) => { + return ( + + {button.name} + + ); + })} +

+ ); +}; diff --git a/src/components/Description.tsx b/src/components/Description.tsx new file mode 100644 index 0000000..baba1c2 --- /dev/null +++ b/src/components/Description.tsx @@ -0,0 +1,9 @@ +import React, { ReactNode } from "react"; + +export interface DescriptionProps { + children: ReactNode; +} + +export const Description = ({ children }: DescriptionProps) => { + return

{children}

; +}; diff --git a/src/components/Header.tsx b/src/components/Header.tsx new file mode 100644 index 0000000..46b05b7 --- /dev/null +++ b/src/components/Header.tsx @@ -0,0 +1,30 @@ +import React from "react"; + +export interface TextLink { + text: string; + link: string; + target?: React.HTMLAttributeAnchorTarget; +} + +export interface TextLinks { + links: TextLink[]; +} + +export const Header = ({ links }: TextLinks) => { + return ( +

+ {links.map((link) => { + return ( + + {link.text} + + ); + })} +

+ ); +}; diff --git a/src/components/Message.tsx b/src/components/Message.tsx new file mode 100644 index 0000000..491e93a --- /dev/null +++ b/src/components/Message.tsx @@ -0,0 +1,9 @@ +import React, { ReactNode } from "react"; + +export interface MessageProps { + children: ReactNode; +} + +export const Message = ({ children }: MessageProps) => { + return

{children}

; +}; diff --git a/src/components/Title.tsx b/src/components/Title.tsx new file mode 100644 index 0000000..f5247ba --- /dev/null +++ b/src/components/Title.tsx @@ -0,0 +1,14 @@ +import { ReactNode } from "react"; + +export interface TitleProps { + children: ReactNode; + glow?: boolean; +} + +export const Title = ({ children, glow }: TitleProps) => { + return ( +

{children}

+ ); +}; diff --git a/src/components/index.ts b/src/components/index.ts new file mode 100644 index 0000000..5bcf561 --- /dev/null +++ b/src/components/index.ts @@ -0,0 +1,5 @@ +export * from "./Header"; +export * from "./Title"; +export * from "./Description"; +export * from "./ButtonRow"; +export * from "./Message"; diff --git a/src/index.css b/src/index.css new file mode 100644 index 0000000..3b79355 --- /dev/null +++ b/src/index.css @@ -0,0 +1,147 @@ +@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: rgba(255, 255, 255); + background-color: rgb(0, 0, 0); + + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; + -webkit-text-size-adjust: 100%; + + --main: rgb(250, 95, 0); + --primary: rgb(40, 40, 40); + --secondary: rgb(100, 100, 100); + --tertiary: rgb(30, 30, 30); + --text-color-light: rgb(0, 0, 0); + --text-color-dark: rgb(255, 255, 255); +} + +.header { + margin: 10px auto; + text-align: center; +} + +.header-link { + display: inline-block; + padding: 10px; + margin: 0 7px; + font-weight: bold; + text-decoration: none; + color: var(--text-color-dark); + transition: + text-shadow 0.25s, + transform 0.25s, + color 0s; +} + +.header-link:hover { + text-shadow: 0px 0px 12px var(--text-color-dark); + transform: translateY(-5%) scale(1.12, 1.12); +} + +.header-link:active { + color: var(--main); + text-shadow: 0px 0px 12px var(--main); +} + +.head { + text-align: center; + line-height: 3px; +} + +.profile-picture { + display: block; + margin: 0 auto; + cursor: pointer; + transition: transform 0.15s; +} + +.profile-picture:hover { + transform: scale(1.1, 1.1); +} + +.profile-picture:active { + transform: scale(0.95, 0.95); +} + +.title { + display: inline-block; + font-weight: bold; + font-size: 26px; + line-height: 0px; + transition: + color 0.6s, + text-shadow 0.6s, + transform 0.6s; +} + +.glow:hover { + transform: scale(1.12, 1.12); + color: var(--main); + text-shadow: 0px 0px 15px rgba(255, 95, 0, 1); +} + +.description { + margin: 15px 0; + font-size: 15px; +} + +.social-link-area { + margin: 25px 0; + text-align: center; +} + +.social-link-button { + display: inline-block; + font-weight: bold; + text-decoration: none; + padding: 11px 15px; + margin: 7px; + background-color: var(--primary); + color: var(--text-color-dark); + font-size: 16px; + border-radius: 20px; + transition: + background-color 0.25s, + transform 0.25s; + animation: fade-in 0.3s; +} + +.social-link-button:hover { + background-color: var(--secondary); +} + +.social-link-button:active { + background-color: var(--tertiary); + transform: scale(0.92, 0.92); +} + +.message { + width: 75%; + margin: 25px auto; + text-align: center; + padding: 17px; + background-color: var(--primary); + border-radius: 17px; +} + +@media (prefers-color-scheme: light) { + :root { + color: rgb(0, 0, 0); + background-color: rgb(255, 255, 255); + } + + .header-link { + color: var(--text-color-light); + } + + .header-link:hover { + text-shadow: 0 0 12px var(--text-color-light); + } + + button { + background-color: #f9f9f9; + } +} diff --git a/src/keyframes.css b/src/keyframes.css new file mode 100644 index 0000000..879936b --- /dev/null +++ b/src/keyframes.css @@ -0,0 +1,11 @@ +@keyframes fade-in { + 0% { + transform: scale(0.8, 0.8); + opacity: 0; + } + + 100% { + transform: scale(1, 1); + opacity: 1; + } +} diff --git a/src/main.tsx b/src/main.tsx new file mode 100644 index 0000000..8b1ddb9 --- /dev/null +++ b/src/main.tsx @@ -0,0 +1,10 @@ +import React from "react"; +import ReactDOM from "react-dom/client"; +import App from "./App"; +import "./index.css"; + +ReactDOM.createRoot(document.getElementById("root") as HTMLElement).render( + + + , +); diff --git a/src/pages/Main.tsx b/src/pages/Main.tsx new file mode 100644 index 0000000..6833ef3 --- /dev/null +++ b/src/pages/Main.tsx @@ -0,0 +1,83 @@ +import { + Buttons, + ButtonRow, + Message, + Header, + TextLink, + Title, + Description, +} from "../components"; + +export function Main() { + const links: TextLink[] = [ + { + text: "pHosting", + link: "https://hosting.povario.com", + }, + { + text: "pCloud", + link: "https://cloud.povario.com", + }, + { + text: "pSearch", + link: "https://search.povario.com", + }, + { + text: "FreeTube Web", + link: "https://tube.povario.com", + }, + ]; + + const buttons: Buttons[] = [ + { + name: "Lemmy", + link: "https://discuss.tchncs.de/u/powermaker450", + }, + { + name: "Mastodon", + link: "https://mastodon.social/@powermaker450", + }, + { + name: "Github", + link: "https://github.com/powermaker450", + }, + { + name: "Forgejo", + link: "https://git.povario.com/powermaker450", + }, + { + name: "Contact Me", + link: "mailto:contact@povario.com", + }, + ]; + + return ( + <> +

+ +

+ @powermaker450 + + Professional Linux Enjoyer + Self Hosts a Lot +

+ + + + + Welcome! + + + + +

You've reached my homepage.

+ If you were looking for something, it's probably one of the links + above. +

+ + + + ); +} diff --git a/src/pages/index.ts b/src/pages/index.ts new file mode 100644 index 0000000..9b66c37 --- /dev/null +++ b/src/pages/index.ts @@ -0,0 +1 @@ +export * from "./Main"; diff --git a/src/vite-env.d.ts b/src/vite-env.d.ts new file mode 100644 index 0000000..11f02fe --- /dev/null +++ b/src/vite-env.d.ts @@ -0,0 +1 @@ +/// diff --git a/tsconfig.json b/tsconfig.json new file mode 100644 index 0000000..3d0a51a --- /dev/null +++ b/tsconfig.json @@ -0,0 +1,21 @@ +{ + "compilerOptions": { + "target": "ESNext", + "useDefineForClassFields": true, + "lib": ["DOM", "DOM.Iterable", "ESNext"], + "allowJs": false, + "skipLibCheck": true, + "esModuleInterop": false, + "allowSyntheticDefaultImports": true, + "strict": true, + "forceConsistentCasingInFileNames": true, + "module": "ESNext", + "moduleResolution": "Node", + "resolveJsonModule": true, + "isolatedModules": true, + "noEmit": true, + "jsx": "react-jsx" + }, + "include": ["src"], + "references": [{ "path": "./tsconfig.node.json" }] +} diff --git a/tsconfig.node.json b/tsconfig.node.json new file mode 100644 index 0000000..9d31e2a --- /dev/null +++ b/tsconfig.node.json @@ -0,0 +1,9 @@ +{ + "compilerOptions": { + "composite": true, + "module": "ESNext", + "moduleResolution": "Node", + "allowSyntheticDefaultImports": true + }, + "include": ["vite.config.ts"] +} diff --git a/vite.config.ts b/vite.config.ts new file mode 100644 index 0000000..5a33944 --- /dev/null +++ b/vite.config.ts @@ -0,0 +1,7 @@ +import { defineConfig } from 'vite' +import react from '@vitejs/plugin-react' + +// https://vitejs.dev/config/ +export default defineConfig({ + plugins: [react()], +})