space/my-portfolio
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

A new Era

Browse Source
This commit is contained in:
Space-Banane
2025-11-23 00:50:49 +01:00
parent 6d9f7560ba
commit 24f5958558
23 changed files with 2115 additions and 7211 deletions
Download Patch File Download Diff File Expand all files Collapse all files

84
.eslintrc.cjs
View File

@@ -1,84 +0,0 @@
/**
* This is intended to be a basic starting point for linting in your app.
* It relies on recommended configs out of the box for simplicity, but you can
* and should modify this configuration to best suit your team's needs.
*/
/** @type {import('eslint').Linter.Config} */
module.exports = {
root: true,
parserOptions: {
ecmaVersion: "latest",
sourceType: "module",
ecmaFeatures: {
jsx: true,
},
},
env: {
browser: true,
commonjs: true,
es6: true,
},
ignorePatterns: ["!**/.server", "!**/.client"],
// Base config
extends: ["eslint:recommended"],
overrides: [
// React
{
files: ["**/*.{js,jsx,ts,tsx}"],
plugins: ["react", "jsx-a11y"],
extends: [
"plugin:react/recommended",
"plugin:react/jsx-runtime",
"plugin:react-hooks/recommended",
"plugin:jsx-a11y/recommended",
],
settings: {
react: {
version: "detect",
},
formComponents: ["Form"],
linkComponents: [
{ name: "Link", linkAttribute: "to" },
{ name: "NavLink", linkAttribute: "to" },
],
"import/resolver": {
typescript: {},
},
},
},
// Typescript
{
files: ["**/*.{ts,tsx}"],
plugins: ["@typescript-eslint", "import"],
parser: "@typescript-eslint/parser",
settings: {
"import/internal-regex": "^~/",
"import/resolver": {
node: {
extensions: [".ts", ".tsx"],
},
typescript: {
alwaysTryTypes: true,
},
},
},
extends: [
"plugin:@typescript-eslint/recommended",
"plugin:import/recommended",
"plugin:import/typescript",
],
},
// Node
{
files: [".eslintrc.cjs"],
env: {
node: true,
},
},
],
};

27
.gitignore vendored
View File

@@ -1,5 +1,24 @@
node_modules
# Logs
logs
*.log
npm-debug.log*
yarn-debug.log*
yarn-error.log*
pnpm-debug.log*
lerna-debug.log*
/.cache
/build
.env
node_modules
dist
dist-ssr
*.local
# Editor directories and files
.vscode/*
!.vscode/extensions.json
.idea
.DS_Store
*.suo
*.ntvs*
*.njsproj
*.sln
*.sw?

73
README.md Normal file
View File

@@ -0,0 +1,73 @@
# React + TypeScript + Vite
This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.
Currently, two official plugins are available:
- [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react) uses [Babel](https://babeljs.io/) (or [oxc](https://oxc.rs) when used in [rolldown-vite](https://vite.dev/guide/rolldown)) for Fast Refresh
- [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react-swc) uses [SWC](https://swc.rs/) for Fast Refresh
## React Compiler
The React Compiler is not enabled on this template because of its impact on dev & build performances. To add it, see [this documentation](https://react.dev/learn/react-compiler/installation).
## Expanding the ESLint configuration
If you are developing a production application, we recommend updating the configuration to enable type-aware lint rules:
```js
export default defineConfig([
globalIgnores(['dist']),
{
files: ['**/*.{ts,tsx}'],
extends: [
// Other configs...
// Remove tseslint.configs.recommended and replace with this
tseslint.configs.recommendedTypeChecked,
// Alternatively, use this for stricter rules
tseslint.configs.strictTypeChecked,
// Optionally, add this for stylistic rules
tseslint.configs.stylisticTypeChecked,
// Other configs...
],
languageOptions: {
parserOptions: {
project: ['./tsconfig.node.json', './tsconfig.app.json'],
tsconfigRootDir: import.meta.dirname,
},
// other options...
},
},
])
```
You can also install [eslint-plugin-react-x](https://github.com/Rel1cx/eslint-react/tree/main/packages/plugins/eslint-plugin-react-x) and [eslint-plugin-react-dom](https://github.com/Rel1cx/eslint-react/tree/main/packages/plugins/eslint-plugin-react-dom) for React-specific lint rules:
```js
// eslint.config.js
import reactX from 'eslint-plugin-react-x'
import reactDom from 'eslint-plugin-react-dom'
export default defineConfig([
globalIgnores(['dist']),
{
files: ['**/*.{ts,tsx}'],
extends: [
// Other configs...
// Enable lint rules for React
reactX.configs['recommended-typescript'],
// Enable lint rules for React DOM
reactDom.configs.recommended,
],
languageOptions: {
parserOptions: {
project: ['./tsconfig.node.json', './tsconfig.app.json'],
tsconfigRootDir: import.meta.dirname,
},
// other options...
},
},
])
```

18
app/entry.client.tsx
View File

@@ -1,18 +0,0 @@
/**
* By default, Remix will handle hydrating your app on the client for you.
* You are free to delete this file if you'd like to, but if you ever want it revealed again, you can run `npx remix reveal` ✨
* For more information, see https://remix.run/file-conventions/entry.client
*/
import { RemixBrowser } from "@remix-run/react";
import { startTransition, StrictMode } from "react";
import { hydrateRoot } from "react-dom/client";
startTransition(() => {
hydrateRoot(
document,
<StrictMode>
<RemixBrowser />
</StrictMode>
);
});

140
app/entry.server.tsx
View File

@@ -1,140 +0,0 @@
/**
* By default, Remix will handle generating the HTTP Response for you.
* You are free to delete this file if you'd like to, but if you ever want it revealed again, you can run `npx remix reveal` ✨
* For more information, see https://remix.run/file-conventions/entry.server
*/
import { PassThrough } from "node:stream";
import type { AppLoadContext, EntryContext } from "@remix-run/node";
import { createReadableStreamFromReadable } from "@remix-run/node";
import { RemixServer } from "@remix-run/react";
import { isbot } from "isbot";
import { renderToPipeableStream } from "react-dom/server";
const ABORT_DELAY = 5_000;
export default function handleRequest(
request: Request,
responseStatusCode: number,
responseHeaders: Headers,
remixContext: EntryContext,
// This is ignored so we can keep it in the template for visibility. Feel
// free to delete this parameter in your app if you're not using it!
// eslint-disable-next-line @typescript-eslint/no-unused-vars
loadContext: AppLoadContext
) {
return isbot(request.headers.get("user-agent") || "")
? handleBotRequest(
request,
responseStatusCode,
responseHeaders,
remixContext
)
: handleBrowserRequest(
request,
responseStatusCode,
responseHeaders,
remixContext
);
}
function handleBotRequest(
request: Request,
responseStatusCode: number,
responseHeaders: Headers,
remixContext: EntryContext
) {
return new Promise((resolve, reject) => {
let shellRendered = false;
const { pipe, abort } = renderToPipeableStream(
<RemixServer
context={remixContext}
url={request.url}
abortDelay={ABORT_DELAY}
/>,
{
onAllReady() {
shellRendered = true;
const body = new PassThrough();
const stream = createReadableStreamFromReadable(body);
responseHeaders.set("Content-Type", "text/html");
resolve(
new Response(stream, {
headers: responseHeaders,
status: responseStatusCode,
})
);
pipe(body);
},
onShellError(error: unknown) {
reject(error);
},
onError(error: unknown) {
responseStatusCode = 500;
// Log streaming rendering errors from inside the shell. Don't log
// errors encountered during initial shell rendering since they'll
// reject and get logged in handleDocumentRequest.
if (shellRendered) {
console.error(error);
}
},
}
);
setTimeout(abort, ABORT_DELAY);
});
}
function handleBrowserRequest(
request: Request,
responseStatusCode: number,
responseHeaders: Headers,
remixContext: EntryContext
) {
return new Promise((resolve, reject) => {
let shellRendered = false;
const { pipe, abort } = renderToPipeableStream(
<RemixServer
context={remixContext}
url={request.url}
abortDelay={ABORT_DELAY}
/>,
{
onShellReady() {
shellRendered = true;
const body = new PassThrough();
const stream = createReadableStreamFromReadable(body);
responseHeaders.set("Content-Type", "text/html");
resolve(
new Response(stream, {
headers: responseHeaders,
status: responseStatusCode,
})
);
pipe(body);
},
onShellError(error: unknown) {
reject(error);
},
onError(error: unknown) {
responseStatusCode = 500;
// Log streaming rendering errors from inside the shell. Don't log
// errors encountered during initial shell rendering since they'll
// reject and get logged in handleDocumentRequest.
if (shellRendered) {
console.error(error);
}
},
}
);
setTimeout(abort, ABORT_DELAY);
});
}

37
app/root.tsx
View File

@@ -1,37 +0,0 @@
import {
Links,
Meta,
Outlet,
Scripts,
ScrollRestoration,
} from "@remix-run/react";
import type { LinksFunction } from "@remix-run/node";
import "./tailwind.css";
export const links: LinksFunction = () => [
];
export function Layout({ children }: { children: React.ReactNode }) {
return (
<html lang="en">
<head>
<meta charSet="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="icon" href="https://cdn.reversed.dev/pictures/cat.png" type="image/png" />
<Meta />
<Links />
<script defer src="https://not-a-tracker.reversed.dev/script.js" data-website-id="7d28af45-d984-428e-af79-fb4dc7e91492"></script>
</head>
<body>
{children}
<ScrollRestoration />
<Scripts />
</body>
</html>
);
}
export default function App() {
return <Outlet />;
}

302
app/routes/_index.tsx
View File

@@ -1,302 +0,0 @@
import type { MetaFunction } from "@remix-run/node";
import { useEffect, useState } from "react";
import { json } from "@remix-run/node";
import { useLoaderData, Link } from "@remix-run/react";
export const meta: MetaFunction = () => {
return [
{ title: "Paul W." },
{ name: "description", content: "This is my Profile!" },
{
name: "keywords",
content: "Paul W, Paul W Portfolio, Paul W Profile, Paul W Remix",
},
];
};
export default function Index() {
const [status, setStatus] = useState("");
const [border_status, setBorderStatus] = useState("border-gray-700");
useEffect(() => {
if (status === "online") {
setBorderStatus("border-green-500");
} else if (status === "offline") {
setBorderStatus("border-gray-500");
} else if (status === "dnd") {
setBorderStatus("border-red-600");
} else if (status === "idle") {
setBorderStatus("border-yellow-500");
} else {
setBorderStatus("border-gray-700");
}
}, [status]);
useEffect(() => {
fetch(
"https://shsf-api.reversed.dev/api/exec/6/c084ec4a-1b20-491e-ab2e-67c5fa8881e6"
)
.then((res) => res.json())
.then((data) => {
setStatus(data.status);
})
.catch((err) => {
console.error(err);
setStatus("offline");
});
}, []);
return (
<div className="relative flex min-h-screen flex-col items-center justify-center p-8 overflow-hidden">
<div className="absolute inset-0 z-0">
<div className="h-full w-full bg-black">
<div
className="absolute inset-0"
style={{
backgroundImage:
"linear-gradient(#ffffff15 1px, transparent 1px), linear-gradient(90deg, #ffffff15 1px, transparent 1px)",
backgroundSize: "20px 20px",
}}
/>
</div>
</div>
<div className="relative z-10 flex flex-col items-center gap-8 mt-12 max-w-6xl w-full">
{/* Hero */}
<div className="text-center space-y-6">
<div className="space-y-2">
<h1
className="text-5xl md:text-6xl font-bold bg-gradient-to-r from-blue-400 to-purple-500 bg-clip-text text-transparent"
style={{ lineHeight: "normal" }}
>
Hey, I'm Paul!
</h1>
<h2 className="text-3xl md:text-4xl text-gray-400">
also known as{" "}
<span className="font-semibold text-gray-200">Space</span>
</h2>
</div>
<div
className={`w-48 h-48 mx-auto overflow-hidden rounded-full border-4 transition-colors duration-300 ${border_status}`}
>
<img
src="https://cdn.reversed.dev/pictures/20250405_120402.png"
alt="Paul W"
className="object-cover rounded-full shadow-lg scale-125"
/>
</div>
<div>
<p className="text-2xl text-gray-300">A Self-proclaimed Developer</p>
</div>
</div>
{/* About Section */}
<section className="w-full">
<h2 className="text-3xl font-bold mb-8 text-center text-gray-100 bg-gradient-to-r from-blue-500 to-purple-500 bg-clip-text text-transparent">
About Me
</h2>
<div
className="p-8 rounded-xl border border-gray-700 bg-white/5 backdrop-blur-lg
flex flex-col md:flex-row gap-8 items-center"
>
<div className="flex-1 space-y-6">
<p className="text-gray-300 text-lg leading-relaxed">
Hi! I'm <span className="underline font-bold">Paul</span>, a
passionate developer from <span className="font-bold">Germany</span> 🇩🇪.
<span className="block mt-4">
I specialize in JavaScript/TypeScript development, building fun backend systems, experimenting with frontend, and occasionally breaking TypeScript.
</span>
<span className="block mt-4">
I'm a big fan of open-source projects and I hope I can make a small but meaningful impact through my work.
</span>
</p>
</div>
</div>
</section>
{/* Projects Section */}
<section className="w-full">
<h2 className="text-3xl font-bold mb-2 text-center text-gray-100 bg-gradient-to-r from-blue-500 to-purple-500 bg-clip-text text-transparent">
Projects
</h2>
<p className="text-gray-300 text-lg mb-4 text-center">
Here are some of my favorite projects. Some are open-source, some are not.
</p>
<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6 sm:gap-8 text-center">
{projects.map((project, index) => (
<div
key={index}
className="p-6 rounded-xl border border-gray-700 bg-gray-800
transform transition-all duration-300 hover:scale-105 hover:shadow-xl
backdrop-blur-sm hover:bg-opacity-90"
>
{project.image && (
<div className="mb-6 items-center justify-center flex flex-col">
<img
src={project.image}
alt={project.name}
className="h-40 w-40 object-cover rounded-full shadow-lg
outline outline-gray-600 outline-2 hover:outline-blue-500
transition-all duration-300"
/>
</div>
)}
<h3 className="text-xl font-bold mb-3 text-gray-100">
{project.name}
</h3>
<p className=" text-gray-400 text-base mb-4">
{project.description}
</p>
<div className="flex flex-wrap justify-center gap-3 mt-4">
<a
href={
project.link +
"?utm_source=portfolio&utm_medium=referral&ref=space"
}
target="_blank"
className="inline-flex items-center px-4 py-2 bg-gradient-to-r from-blue-500 to-purple-500
text-white rounded-lg font-medium transition-all duration-300
hover:from-blue-600 hover:to-purple-600 hover:shadow-lg hover:scale-105"
>
<span>Visit Project</span>
<svg
className="w-4 h-4 ml-2"
fill="none"
stroke="currentColor"
viewBox="0 0 24 24"
>
<path
strokeLinecap="round"
strokeLinejoin="round"
strokeWidth="2"
d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14"
/>
</svg>
</a>
{project.open_source && (
<a
href={project.open_source.link}
target="_blank"
className="inline-flex items-center px-4 py-2 bg-gray-800
text-gray-200 rounded-lg font-medium transition-all duration-300
hover:bg-gray-700 hover:shadow-lg hover:scale-105 border border-gray-600"
>
<svg
className="w-4 h-4 mr-2"
fill="currentColor"
viewBox="0 0 24 24"
>
<path d="M12 0c-6.626 0-12 5.373-12 12 0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23.957-.266 1.983-.399 3.003-.404 1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576 4.765-1.589 8.199-6.086 8.199-11.386 0-6.627-5.373-12-12-12z" />
</svg>
<span>Source Code</span>
</a>
)}
</div>
</div>
))}
</div>
</section>
{/* Contact */}
<section className="w-full">
<h2 className="text-3xl font-bold mb-2 text-center text-gray-100 bg-gradient-to-r from-blue-500 to-purple-500 bg-clip-text text-transparent">
Contact
</h2>
<div
className="p-6 rounded-xl border border-gray-700 bg-white/5 backdrop-blur-lg
transform transition-all duration-300 hover:scale-105 hover:shadow-xl"
>
<p className="text-gray-300 text-lg text-center">
Feel free to reach out to me via Discord or Email. I usually respond quicker to emails.
</p>
<div className="flex flex-col sm:flex-row gap-3 justify-center mt-6">
<a
href="mailto:space@reversed.dev"
className="px-6 py-2 bg-gradient-to-r from-blue-500 to-purple-500
text-white rounded-full font-medium transition-all duration-300
hover:from-blue-600 hover:to-purple-600 hover:shadow-lg"
>
Email
</a>
<a
href="https://discord.com/users/456443941169004545"
target="_blank"
className="px-6 py-2 bg-gradient-to-r from-blue-500 to-purple-500
text-white rounded-full font-medium transition-all duration-300
hover:from-blue-600 hover:to-purple-600 hover:shadow-lg"
>
Discord
</a>
</div>
</div>
</section>
</div>
</div>
);
}
const projects: {
name: string;
description: string;
image?: string;
open_source: { link: string } | false;
link: string;
}[] = [
{
name: "BetterNews",
description:
"A news feed where you submit the news.",
image: "https://betternews.app/assets/icon.png",
open_source: false,
link: "https://betternews.app",
},
{
name: "SHSF",
description:
"Self-hostable \"Cloud Functions\" for your own hardware.",
link: "https://github.com/Space-Banane/shsf",
open_source: { link: "https://github.com/Space-Banane/shsf" },
image: "https://cdn.reversed.dev/pictures/shsf/SHSF.png",
},
{
name: "3D Print Card",
description: "Showcase Your 3D Prints Beautifully",
link:"card.peakprinting.top",
image: "https://card.peakprinting.top/icon.png",
open_source: { link: "https://github.com/Space-Banane/imsoprintingit" },
},
{
name: "Lil Cats",
link: "https://cats.reversed.dev",
description: "Follow cats around and feed them. (Made with GPT-4.1 because I wanted to test it)",
image: "https://cats.reversed.dev/lil-cats.png",
open_source: { link: "https://github.com/Space-Banane/lil-cats" },
},
{
name: "Whatsapp-Chat-Analyzer",
description:
"Analyze your Whatsapp chats with ease. Get insights, stats and more.",
image: "https://cdn.reversed.dev/pictures/wca.png",
open_source: { link: "https://github.com/Space-Banane/whatsapp-stats" },
link: "https://whatstat.reversed.dev",
},
{
name: "Free QrCode Generator",
description:
"I love QR codes that DO NOT NEED A REGISTER!!!! (or ones that expire)",
image: "https://cdn.reversed.dev/pictures/qrcode.jpeg",
open_source: { link: "https://github.com/reversed-dev/qr-code-gen" },
link: "https://qr.reversed.dev",
},
{
// Is Twitch streamer live, "Is-live", https://shsf-api.reversed.dev/api/exec/6/22b5d292-ccf1-473b-8838-4db550d6a1e6
name: "Is-Live",
description:
"Is a Twitch streamer live? I don't know, find out!",
image: "https://cdn.reversed.dev/pictures/islive.png",
open_source: { link: "https://github.com/Space-Banane/is-live" },
link: "https://is-live.reversed.dev",
},
];

12
app/tailwind.css
View File

@@ -1,12 +0,0 @@
@tailwind base;
@tailwind components;
@tailwind utilities;
html,
body {
@apply bg-white dark:bg-gray-950;
@media (prefers-color-scheme: dark) {
color-scheme: dark;
}
}

3
docker-compose.yml
View File

@@ -14,5 +14,6 @@ services:
npm i -g pnpm &&
pnpm install &&
pnpm build &&
PORT=6756 pnpm start
if ! command -v serve >/dev/null 2>&1; then npm i -g serve; fi &&
npx serve -l 6756 dist
"

23
eslint.config.js Normal file
View File

@@ -0,0 +1,23 @@
import js from '@eslint/js'
import globals from 'globals'
import reactHooks from 'eslint-plugin-react-hooks'
import reactRefresh from 'eslint-plugin-react-refresh'
import tseslint from 'typescript-eslint'
import { defineConfig, globalIgnores } from 'eslint/config'
export default defineConfig([
globalIgnores(['dist']),
{
files: ['**/*.{ts,tsx}'],
extends: [
js.configs.recommended,
tseslint.configs.recommended,
reactHooks.configs.flat.recommended,
reactRefresh.configs.vite,
],
languageOptions: {
ecmaVersion: 2020,
globals: globals.browser,
},
},
])

39
index.html Normal file
View File

@@ -0,0 +1,39 @@
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<link rel="icon" href="https://cdn.reversed.dev/pictures/cat.png" type="image/png" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Space - Developer & Enthusiast</title>
<meta name="title" content="Space - Developer & Enthusiast" />
<meta name="description" content="Personal portfolio site." />
<meta name="author" content="Space" />
<meta name="theme-color" content="#000000" />
<!-- Open Graph / Facebook -->
<meta property="og:type" content="website" />
<meta property="og:title" content="Space - Developer & Enthusiast" />
<meta property="og:description" content="Personal portfolio site." />
<meta property="og:image" content="https://cdn.reversed.dev/pictures/20250405_120402.png" />
<!-- Twitter -->
<meta property="twitter:card" content="summary_large_image" />
<meta property="twitter:title" content="Space - Developer & Enthusiast" />
<meta property="twitter:description" content="Personal portfolio site." />
<meta property="twitter:image" content="https://cdn.reversed.dev/pictures/20250405_120402.png" />
<meta name="robots" content="index, follow" />
<link rel="canonical" href="https://space.reversed.dev" />
<script defer src="https://not-a-tracker.reversed.dev/script.js"
data-website-id="7d28af45-d984-428e-af79-fb4dc7e91492"></script>
</head>
<body>
<div id="root"></div>
<script type="module" src="/src/main.tsx"></script>
</body>
</html>

56
package.json
View File

@@ -1,43 +1,35 @@
{
"name": "my-portfolio",
"name": "getspaced",
"private": true,
"sideEffects": false,
"version": "0.0.0",
"type": "module",
"scripts": {
"build": "remix vite:build",
"dev": "remix vite:dev",
"lint": "eslint --ignore-path .gitignore --cache --cache-location ./node_modules/.cache/eslint .",
"start": "remix-serve ./build/server/index.js",
"typecheck": "tsc"
"dev": "vite",
"build": "tsc -b && vite build",
"lint": "eslint .",
"preview": "vite preview"
},
"dependencies": {
"@remix-run/node": "^2.15.2",
"@remix-run/react": "^2.15.2",
"@remix-run/serve": "^2.15.2",
"isbot": "^4.1.0",
"react": "^18.2.0",
"react-dom": "^18.2.0"
"@tailwindcss/vite": "^4.1.17",
"react": "^19.2.0",
"react-dom": "^19.2.0",
"tailwindcss": "^4.1.17"
},
"devDependencies": {
"@remix-run/dev": "^2.15.2",
"@types/react": "^18.2.20",
"@types/react-dom": "^18.2.7",
"@typescript-eslint/eslint-plugin": "^6.7.4",
"@typescript-eslint/parser": "^6.7.4",
"autoprefixer": "^10.4.20",
"eslint": "^8.38.0",
"eslint-import-resolver-typescript": "^3.6.1",
"eslint-plugin-import": "^2.28.1",
"eslint-plugin-jsx-a11y": "^6.7.1",
"eslint-plugin-react": "^7.33.2",
"eslint-plugin-react-hooks": "^4.6.0",
"postcss": "^8.5.1",
"tailwindcss": "^3.4.17",
"typescript": "^5.1.6",
"vite": "^5.1.0",
"vite-tsconfig-paths": "^4.2.1"
"@eslint/js": "^9.39.1",
"@types/node": "^24.10.1",
"@types/react": "^19.2.5",
"@types/react-dom": "^19.2.3",
"@vitejs/plugin-react": "^5.1.1",
"eslint": "^9.39.1",
"eslint-plugin-react-hooks": "^7.0.1",
"eslint-plugin-react-refresh": "^0.4.24",
"globals": "^16.5.0",
"typescript": "~5.9.3",
"typescript-eslint": "^8.46.4",
"vite": "npm:rolldown-vite@7.2.5"
},
"engines": {
"node": ">=20.0.0"
"overrides": {
"vite": "npm:rolldown-vite@7.2.5"
}
}

7710
pnpm-lock.yaml generated
View File

File diff suppressed because it is too large Load Diff

2
pnpm-workspace.yaml
View File

@@ -1,2 +0,0 @@
onlyBuiltDependencies:
- esbuild

6
postcss.config.js
View File

@@ -1,6 +0,0 @@
export default {
plugins: {
tailwindcss: {},
autoprefixer: {},
},
};

644
src/App.tsx Normal file
View File

@@ -0,0 +1,644 @@
import { useEffect, useState } from "react";
function ProjectCard({ project }: { project: Project }) {
return (
<div className="group relative flex flex-col p-6 rounded-2xl bg-gradient-to-br from-white/10 to-white/5 backdrop-blur-sm border border-white/10 hover:border-purple-500/30 transition-all duration-300 hover:-translate-y-1 hover:shadow-2xl hover:shadow-purple-500/10">
{project.image && (
<div className="mb-6 overflow-hidden rounded-xl bg-black/20 aspect-video flex items-center justify-center relative">
<div className="absolute inset-0 bg-gradient-to-t from-black/60 to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-300" />
<img
src={project.image}
alt={project.name}
className="h-24 w-24 object-cover rounded-full shadow-lg group-hover:scale-110 transition-transform duration-500"
/>
</div>
)}
<h3 className="text-xl font-bold text-white mb-2 group-hover:text-purple-400 transition-colors">
{project.name}
</h3>
<p className="text-gray-400 text-sm flex-grow mb-6 leading-relaxed">
{project.description}
</p>
<div className="flex gap-3 mt-auto">
<a
href={project.link + "?utm_source=portfolio&ref=space"}
target="_blank"
rel="noreferrer"
className="flex-1 py-2 px-4 rounded-lg bg-white/10 hover:bg-white/20 text-white text-sm font-medium text-center transition-colors flex items-center justify-center gap-2"
>
Visit
<svg
className="w-3 h-3"
fill="none"
stroke="currentColor"
viewBox="0 0 24 24"
>
<path
strokeLinecap="round"
strokeLinejoin="round"
strokeWidth="2"
d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14"
/>
</svg>
</a>
{project.open_source && (
<a
href={project.open_source.link}
target="_blank"
rel="noreferrer"
className="p-2 rounded-lg bg-white/5 hover:bg-white/10 text-gray-400 hover:text-white transition-colors border border-white/5"
title="View Source"
>
<svg className="w-5 h-5" fill="currentColor" viewBox="0 0 24 24">
<path d="M12 0c-6.626 0-12 5.373-12 12 0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23.957-.266 1.983-.399 3.003-.404 1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576 4.765-1.589 8.199-6.086 8.199-11.386 0-6.627-5.373-12-12-12z" />
</svg>
</a>
)}
</div>
</div>
);
}
function App() {
const [status, setStatus] = useState("");
const [borderStatus, setBorderStatus] = useState("border-gray-700");
const [glowColor, setGlowColor] = useState("rgba(55, 65, 81, 0.5)");
const [statusMessage, setStatusMessage] = useState("Breaking SHSF");
const [messageIndex, setMessageIndex] = useState(0);
const [displayMessage, setDisplayMessage] = useState("");
const [isScrambling, setIsScrambling] = useState(false);
const [showOldNames, setShowOldNames] = useState(false);
const oldUsernames = [
"getspaced (current)",
"Space-Banane",
];
const rotatingMessages = [
"Bricking Esp32's 🧱",
"Buy me a White Redbull⁉️",
"Testing in production 🧪",
"Shipping bug fixes 📦",
"Not learning Rust 🦀",
"Pushing before Copilot's Review ✅",
"Breaking SHSF 🚧",
"No debugger attached 🐞",
"Asking ChatGPT for help 🤖",
"Refactoring for the 10th time 🔄",
"Writing documentation 🥹",
"Removing Comments 🧹",
"Collecting Spotify hours 🎵",
];
const characters =
"ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789!@#$%^&*()-_=+[]{}|;:',.<>?/`~" +
"🧱⁉️🧪📦🦀✅🚧🐞🤖🔄🥹🧹🎵";
useEffect(() => {
if (status === "online") {
setBorderStatus("border-green-500");
setGlowColor("rgba(34, 197, 94, 0.5)");
setStatusMessage("Reachable");
} else if (status === "offline") {
setBorderStatus("border-gray-500");
setGlowColor("rgba(107, 114, 128, 0.5)");
setStatusMessage("Probably Away");
} else if (status === "dnd") {
setBorderStatus("border-red-600");
setGlowColor("rgba(220, 38, 38, 0.5)");
setStatusMessage("Not Reachable");
} else if (status === "idle") {
setBorderStatus("border-yellow-500");
setGlowColor("rgba(234, 179, 8, 0.5)");
setStatusMessage("Doing anything but work");
} else {
setBorderStatus("border-gray-700");
setGlowColor("rgba(55, 65, 81, 0.5)");
setStatusMessage("Breaking SHSF");
}
}, [status]);
useEffect(() => {
fetch(
"https://shsf-api.reversed.dev/api/exec/6/c084ec4a-1b20-491e-ab2e-67c5fa8881e6"
)
.then((res) => res.json())
.then((data) => {
setStatus(data.status);
})
.catch((err) => {
console.error(err);
setStatus("offline");
});
}, []);
// Scramble effect
useEffect(() => {
const targetMessage = rotatingMessages[messageIndex];
if (isScrambling) {
let iteration = 0;
const scrambleInterval = setInterval(() => {
setDisplayMessage(
targetMessage
.split("")
.map((char, index) => {
if (index < iteration) {
return targetMessage[index];
}
if (char === " " || /[\u{1F000}-\u{1F9FF}]/u.test(char)) {
return char;
}
return characters[Math.floor(Math.random() * characters.length)];
})
.join("")
);
if (iteration >= targetMessage.length) {
clearInterval(scrambleInterval);
setIsScrambling(false);
}
iteration += 1 / 3;
}, 30);
return () => clearInterval(scrambleInterval);
} else {
setDisplayMessage(targetMessage);
}
}, [messageIndex, isScrambling]);
// Rotating message effect
useEffect(() => {
const messageInterval = setInterval(() => {
setIsScrambling(true);
setMessageIndex((prev) => (prev + 1) % rotatingMessages.length);
}, 7000);
return () => {
clearInterval(messageInterval);
};
}, []);
return (
<div className="relative min-h-screen bg-black text-white selection:bg-purple-500/30">
{/* Background Grid */}
<div className="fixed inset-0 z-0 pointer-events-none">
<div
className="absolute inset-0 blur-sm"
style={{
backgroundImage:
"linear-gradient(#ffffff 1px, transparent 1px), linear-gradient(90deg, #ffffff 1px, transparent 1px)",
backgroundSize: "30px 30px",
maskImage:
"radial-gradient(circle at center, black 40%, transparent 100%)",
}}
/>
</div>
<main className="relative z-10 flex flex-col items-center px-6 py-20 mx-auto max-w-5xl gap-24">
{/* Hero Section */}
<section className="flex flex-col items-center text-center space-y-8 animate-fade-in-down">
<div className="relative group">
<div
className={`absolute -inset-1 rounded-full blur opacity-75 transition duration-500`}
style={{ backgroundColor: glowColor }}
></div>
<div
className={`relative w-48 h-48 rounded-full border-4 transition-colors duration-500 overflow-hidden ${borderStatus} bg-black`}
>
<img
src="https://cdn.reversed.dev/pictures/20250405_120402.png"
alt="Space"
className="w-full h-full object-cover scale-110 transition-transform duration-700 group-hover:scale-125"
/>
</div>
{/* Rotating Message Bubble (Left Side) */}
<div className="absolute -left-4 top-4 -translate-x-full">
<div className="relative bg-gradient-to-br from-purple-500/20 to-pink-500/10 backdrop-blur-sm border border-purple-500/30 rounded-2xl px-4 py-3 shadow-lg">
{/* Arrow pointing to profile */}
<div className="absolute right-0 top-1/2 translate-x-2 -translate-y-1/2 w-0 h-0 border-t-8 border-t-transparent border-b-8 border-b-transparent border-l-8 border-l-purple-500/30"></div>
<div className="absolute right-0 top-1/2 translate-x-1.5 -translate-y-1/2 w-0 h-0 border-t-8 border-t-transparent border-b-8 border-b-transparent border-l-8 border-l-purple-500/20"></div>
<p className="text-sm text-gray-200 whitespace-nowrap font-medium font-mono">
{displayMessage || rotatingMessages[0]}
</p>
</div>
</div>
{/* Status Bubble (Right Side) */}
<div className="absolute -right-4 top-8 translate-x-full">
<div className="relative bg-gradient-to-br from-white/10 to-white/5 backdrop-blur-sm border border-white/20 rounded-2xl px-4 py-3 shadow-lg">
{/* Arrow pointing to profile */}
<div className="absolute left-0 top-1/2 -translate-x-2 -translate-y-1/2 w-0 h-0 border-t-8 border-t-transparent border-b-8 border-b-transparent border-r-8 border-r-white/20"></div>
<div className="absolute left-0 top-1/2 -translate-x-1.5 -translate-y-1/2 w-0 h-0 border-t-8 border-t-transparent border-b-8 border-b-transparent border-r-8 border-r-white/10"></div>
<p className="text-sm text-gray-300 whitespace-nowrap">
Currently{" "}
<span className="text-white font-semibold">{statusMessage}</span>
<br />
on Discord
</p>
</div>
</div>
</div>
<div className="space-y-4 max-w-2xl">
<h1 className="text-6xl md:text-7xl font-extrabold">
Hey, I'm{" "}
<span
className="relative inline-block text-transparent bg-clip-text bg-gradient-to-r from-blue-400 via-purple-500 to-pink-500 cursor-help px-2"
style={{ marginLeft: "0.15em", marginRight: "0.15em" }}
onMouseEnter={() => setShowOldNames(true)}
onMouseLeave={() => setShowOldNames(false)}
>
Space
{showOldNames && (
<div className="absolute left-1/2 -translate-x-1/2 top-full mt-4 z-50 animate-fade-in flex justify-center w-full">
<div className="relative bg-gradient-to-br from-purple-500/20 to-pink-500/10 backdrop-blur-md border border-purple-500/30 rounded-xl px-6 py-4 shadow-2xl min-w-[220px] max-w-xs">
<div className="absolute left-1/2 -translate-x-1/2 -top-2 w-0 h-0 border-l-8 border-l-transparent border-r-8 border-r-transparent border-b-8 border-b-purple-500/30"></div>
<p className="text-xs text-gray-400 mb-2 font-medium whitespace-nowrap text-center">
Also known as:
</p>
<ul className="flex flex-col items-center gap-1.5">
{oldUsernames.map((name, index) => (
<li
key={index}
className="text-sm text-gray-200 font-mono hover:text-purple-400 transition-colors whitespace-nowrap text-center"
>
{name}
</li>
))}
</ul>
</div>
</div>
)}
</span>
</h1>
<p className="text-2xl text-gray-400 font-light">
A{" "}
<span className="line-through decoration-purple-500/50 decoration-2">
Self-proclaimed
</span>{" "}
Developer breaking things to see how they&nbsp;work.
</p>
</div>
</section>
{/* About Section */}
<section className="w-full space-y-8">
<div className="text-center space-y-2">
<h2 className="text-3xl font-bold text-transparent bg-clip-text bg-gradient-to-r from-blue-400 to-purple-500">
About Me
</h2>
<p className="text-gray-400 max-w-2xl mx-auto">
A bit about who I am and what I do
</p>
</div>
<div className="max-w-3xl mx-auto">
<div className="p-6 rounded-2xl bg-gradient-to-br from-blue-500/10 to-purple-500/5 backdrop-blur-sm border border-blue-500/20">
<div className="space-y-4 text-gray-300">
<p className="leading-relaxed">
I'm a Software Developer from Germany, located near Frankfurt.
</p>
<p className="leading-relaxed">
My passion lies in coding, exploring limits, and occasionally
reinventing the wheel just for the fun of it. While I love
open-source, I'm not afraid to build custom solutions when
existing ones don't fit.
</p>
<p className="leading-relaxed">
I actively contribute to open-source projects, fixing the little
things that make a big difference.
</p>
</div>
</div>
</div>
</section>
{/* AI-Assisted Coding Section */}
<section className="w-full space-y-8">
<div className="text-center space-y-2">
<h2 className="text-3xl font-bold text-transparent bg-clip-text bg-gradient-to-r from-blue-400 to-purple-500">
AI-Assisted Coding
</h2>
<p className="text-gray-400 max-w-2xl mx-auto">
How i use AI.
</p>
</div>
<div className="max-w-3xl mx-auto space-y-6">
<div className="p-6 rounded-2xl bg-gradient-to-br from-blue-500/10 to-purple-500/5 backdrop-blur-sm border border-blue-500/20">
<div className="space-y-4 text-gray-300">
<p className="leading-relaxed">
I write most of my code myself, especially when it comes to logic, backend architecture,
authentication systems, database communication, and project setup. These core aspects are
where I believe hands-on coding is essential for quality and understanding.
</p>
<p className="leading-relaxed">
However, for UI development, I love using{" "}
<span className="text-purple-400 font-semibold">Claude Sonnet 4.5</span> to
help speed up the process and explore different design approaches. It's particularly helpful for
styling, layout, and creating polished user interfaces.
</p>
<p className="leading-relaxed">
I also embrace tools like{" "}
<span className="text-blue-400 font-semibold">GitHub Copilot's autocompletion</span>,
which enhances my productivity by suggesting code snippets and reducing repetitive typing.
It's like having a coding assistant that understands context.
</p>
<div className="mt-6 p-4 rounded-xl bg-white/5 border border-white/10">
<p className="text-sm text-gray-400 italic text-center">
"Ai wont replace shit, it'll either help us or kill us"
</p>
</div>
</div>
</div>
</div>
</section>
{/* Hardware Mods & Builds Section */}
<section className="w-full space-y-8">
<div className="text-center space-y-2">
<h2 className="text-3xl font-bold text-transparent bg-clip-text bg-gradient-to-r from-orange-400 to-red-500">
Hardware Stuff
</h2>
<p className="text-gray-400 max-w-2xl mx-auto">
The lion is concerned with a LED connected to 12V
</p>
</div>
<div className="max-w-3xl mx-auto">
<div className="p-6 rounded-2xl bg-gradient-to-br from-orange-500/10 to-red-500/5 backdrop-blur-sm border border-orange-500/20">
<div className="space-y-4 text-gray-300">
<p className="leading-relaxed">
When I'm not breaking my code, you'll find me breaking{" "}
<span className="text-orange-400 font-semibold">Arduinos</span> and{" "}
<span className="text-orange-400 font-semibold">ESP32s</span>. I love interacting via Software with self-made hardware.
</p>
<p className="leading-relaxed">
I've built my fair share of little sensor gadgets and placed them around my house. All are managed using{" "}
<span className="text-blue-400 font-semibold">ESPHome</span> via{" "}
<span className="text-blue-400 font-semibold">Home Assistant</span>. Which means, no cloud dependencies and full control over my smart home setup.
</p>
<p className="leading-relaxed">
I love using Arduinos because they're stupidly easy to build with & the bar to entry is extremely low with a stupid amount of tutorials,
but the possibilities are endless. First it was the blinking LEDs, now it's servo control via bluetooth across the room.
</p>
</div>
</div>
</div>
</section>
{/* 3D Printing Section */}
<section className="w-full space-y-8">
<div className="text-center space-y-2">
<h2 className="text-3xl font-bold text-transparent bg-clip-text bg-gradient-to-r from-cyan-400 to-blue-500">
3D Printing
</h2>
<p className="text-gray-400 max-w-2xl mx-auto">
I turn Plastic on a Spool into Plastic in a Shape.
</p>
</div>
<div className="max-w-3xl mx-auto">
<div className="p-6 rounded-2xl bg-gradient-to-br from-cyan-500/10 to-blue-500/5 backdrop-blur-sm border border-cyan-500/20">
<div className="space-y-4 text-gray-300">
<p className="leading-relaxed">
I run a modded Creality Ender 3 V1 with a{" "}
<span className="text-cyan-400 font-semibold">BLTouch</span> for auto bed leveling,
all managed remotely through <span className="text-cyan-400 font-semibold">OctoPrint</span>.
I slice my prints using <span className="text-cyan-400 font-semibold">OrcaSlicer</span> because Cura misses a few options.
</p>
<p className="leading-relaxed">
I mostly print replacement parts for stuff around the house and cool shit I find on{" "}
<span className="text-cyan-400 font-semibold">Printables</span>. For custom designs, I use{" "}
<span className="text-cyan-400 font-semibold">Fusion 360</span> to model my own parts when I need something specific.
</p>
<p className="leading-relaxed">
I'm not a fan of Bamboo Lab. Their choices, pricing, and quality just don't. <br />
One day, I'd love to own a <span className="text-green-400 font-semibold">Creality K2 Pro</span>.
</p>
</div>
</div>
</div>
</section>
{/* Goals Section */}
<section className="w-full space-y-8">
<div className="text-center space-y-2">
<h2 className="text-3xl font-bold text-transparent bg-clip-text bg-gradient-to-r from-blue-400 to-purple-500">
My Goals
</h2>
<p className="text-gray-400 max-w-2xl mx-auto">
This is the stuff i want to learn.
</p>
</div>
<div className="grid grid-cols-1 md:grid-cols-2 gap-6">
<div className="p-6 rounded-2xl bg-gradient-to-br from-blue-500/10 to-purple-500/5 backdrop-blur-sm border border-blue-500/20">
<div className="flex items-start gap-4">
<div className="p-3 rounded-lg bg-blue-500/20 text-3xl">
🚀
</div>
<div>
<h3 className="text-xl font-bold text-white mb-2">
Not Just Semi-Fullstack
</h3>
<p className="text-gray-400 leading-relaxed">
I want to work more with Serverless Architectures and Cloud Services to build scalable applications.
</p>
</div>
</div>
</div>
<div className="p-6 rounded-2xl bg-gradient-to-br from-purple-500/10 to-pink-500/5 backdrop-blur-sm border border-purple-500/20">
<div className="flex items-start gap-4">
<div className="p-3 rounded-lg bg-purple-500/20 text-3xl">
💻
</div>
<div>
<h3 className="text-xl font-bold text-white mb-2">
Contribute More to Open Source
</h3>
<p className="text-gray-400 leading-relaxed">
I want to commit more to Open-Source Projects. That's it...
</p>
</div>
</div>
</div>
<div className="p-6 rounded-2xl bg-gradient-to-br from-green-500/10 to-blue-500/5 backdrop-blur-sm border border-green-500/20">
<div className="flex items-start gap-4">
<div className="p-3 rounded-lg bg-green-500/20 text-3xl">
⚡
</div>
<div>
<h3 className="text-xl font-bold text-white mb-2">
Expand on Existing Projects
</h3>
<p className="text-gray-400 leading-relaxed">
I want to make SHSF more stable and usable.
</p>
</div>
</div>
</div>
<div className="p-6 rounded-2xl bg-gradient-to-br from-yellow-500/10 to-orange-500/5 backdrop-blur-sm border border-yellow-500/20">
<div className="flex items-start gap-4">
<div className="p-3 rounded-lg bg-yellow-500/20 text-3xl">
🦀
</div>
<div>
<h3 className="text-xl font-bold text-white mb-2">
Explore the Unknown
</h3>
<p className="text-gray-400 leading-relaxed">
Rust?👀
</p>
</div>
</div>
</div>
</div>
</section>
{/* Projects Section */}
<section className="w-full space-y-12">
<div className="text-center space-y-2">
<h2 className="text-4xl font-bold text-transparent bg-clip-text bg-gradient-to-r from-purple-400 via-pink-500 to-orange-400">
Favourite Projects
</h2>
<p className="text-gray-400 max-w-2xl mx-auto">
Personal Faviorite? Uhhhhh....
</p>
</div>
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
{projects.map((project, index) => (
<ProjectCard key={index} project={project} />
))}
</div>
</section>
{/* Contact Section */}
<section className="w-full max-w-2xl text-center space-y-4 pb-8">
<h2 className="text-3xl font-bold text-transparent bg-clip-text bg-gradient-to-r from-green-400 via-blue-500 to-purple-500">
Let's Connect
</h2>
<div className="p-8 rounded-3xl bg-gradient-to-br from-blue-500/10 via-purple-500/10 to-pink-500/10 border border-blue-500/20 backdrop-blur-md">
<p className="text-gray-300 mb-8 text-lg">
Got anything on your mind? Shoot me a DM or Email.
</p>
<div className="flex flex-col sm:flex-row gap-4 justify-center">
<a
href="mailto:space@reversed.dev"
className="px-8 py-3 rounded-full bg-gradient-to-r from-white to-gray-100 text-black font-bold hover:from-gray-100 hover:to-white transition-all shadow-lg shadow-white/20 hover:shadow-white/30"
>
Send Email
</a>
<a
href="https://discord.com/users/456443941169004545"
target="_blank"
rel="noreferrer"
className="px-8 py-3 rounded-full bg-gradient-to-r from-[#5865F2] to-[#4752C4] text-white font-bold hover:from-[#4752C4] hover:to-[#5865F2] transition-all shadow-lg shadow-[#5865F2]/30 hover:shadow-[#5865F2]/50"
>
Discord
</a>
</div>
</div>
</section>
{/* Footer */}
<footer className="w-full border-t border-white/10 pt-4">
<div className="text-center space-y-3">
<div className="flex items-center justify-center gap-2">
<img
src="http://shsf.reversed.dev/SHSF%20SMALL%20TRANSPARENT.png"
alt="SHSF Logo"
className="w-6 h-6"
/>
<p className="text-gray-400 text-sm">
Partly powered by{" "}
<a
href="https://github.com/Space-Banane/shsf"
target="_blank"
rel="noreferrer"
className="text-purple-400 hover:text-purple-300 transition-colors"
>
SHSF
</a>
</p>
</div>
<p className="text-gray-400 text-sm">Love from Space ❤️</p>
<p className="text-gray-500 text-xs">
Designed with Copilot &{" "}
<a
href="https://gradienty.codes/"
target="_blank"
rel="noreferrer"
className="text-purple-400 hover:text-purple-300 transition-colors underline"
>
gradienty.codes
</a>
, Tailwind and React
</p>
</div>
</footer>
</main>
</div>
);
}
interface Project {
name: string;
description: string;
image?: string;
link: string;
open_source: false | { link: string };
}
const projects: Project[] = [
{
name: "BetterNews",
description: "A news feed where you submit the news.",
image: "https://betternews.app/assets/icon.png",
open_source: false,
link: "https://betternews.app",
},
{
name: "SHSF",
description: 'Self-hostable "Cloud Functions" for your own hardware.',
link: "https://github.com/Space-Banane/shsf",
open_source: { link: "https://github.com/Space-Banane/shsf" },
image: "https://cdn.reversed.dev/pictures/shsf/SHSF.png",
},
{
name: "3D Print Card",
description: "Showcase Your 3D Prints Beautifully",
link: "https://card.peakprinting.top",
image: "https://card.peakprinting.top/icon.png",
open_source: { link: "https://github.com/Space-Banane/imsoprintingit" },
},
{
name: "Whatsapp-Chat-Analyzer",
description:
"Analyze your Whatsapp chats with ease. Get insights, stats and more.",
image: "https://cdn.reversed.dev/pictures/wca.png",
open_source: { link: "https://github.com/Space-Banane/whatsapp-stats" },
link: "https://whatstat.reversed.dev",
},
{
name: "QrCode Generator",
description: "Vue.JS based QR Code Generator with a bit of customization.",
image: "https://cdn.reversed.dev/pictures/qrcode.jpeg",
open_source: { link: "https://github.com/reversed-dev/qr-code-gen" },
link: "https://qr.reversed.dev",
},
];
export default App;

1
src/index.css Normal file
View File

@@ -0,0 +1 @@
@import "tailwindcss";

10
src/main.tsx Normal file
View File

@@ -0,0 +1,10 @@
import { StrictMode } from 'react'
import { createRoot } from 'react-dom/client'
import './index.css'
import App from './App.tsx'
createRoot(document.getElementById('root')!).render(
<StrictMode>
<App />
</StrictMode>,
)

22
tailwind.config.ts
View File

@@ -1,22 +0,0 @@
import type { Config } from "tailwindcss";
export default {
content: ["./app/**/{**,.client,.server}/**/*.{js,jsx,ts,tsx}"],
theme: {
extend: {
fontFamily: {
sans: [
"Inter",
"ui-sans-serif",
"system-ui",
"sans-serif",
"Apple Color Emoji",
"Segoe UI Emoji",
"Segoe UI Symbol",
"Noto Color Emoji",
],
},
},
},
plugins: [],
} satisfies Config;

28
tsconfig.app.json Normal file
View File

@@ -0,0 +1,28 @@
{
"compilerOptions": {
"tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo",
"target": "ES2022",
"useDefineForClassFields": true,
"lib": ["ES2022", "DOM", "DOM.Iterable"],
"module": "ESNext",
"types": ["vite/client"],
"skipLibCheck": true,
/* Bundler mode */
"moduleResolution": "bundler",
"allowImportingTsExtensions": true,
"verbatimModuleSyntax": true,
"moduleDetection": "force",
"noEmit": true,
"jsx": "react-jsx",
/* Linting */
"strict": true,
"noUnusedLocals": true,
"noUnusedParameters": true,
"erasableSyntaxOnly": true,
"noFallthroughCasesInSwitch": true,
"noUncheckedSideEffectImports": true
},
"include": ["src"]
}

35
tsconfig.json
View File

@@ -1,32 +1,7 @@
{
"include": [
"**/*.ts",
"**/*.tsx",
"**/.server/**/*.ts",
"**/.server/**/*.tsx",
"**/.client/**/*.ts",
"**/.client/**/*.tsx"
],
"compilerOptions": {
"lib": ["DOM", "DOM.Iterable", "ES2022"],
"types": ["@remix-run/node", "vite/client"],
"isolatedModules": true,
"esModuleInterop": true,
"jsx": "react-jsx",
"module": "ESNext",
"moduleResolution": "Bundler",
"resolveJsonModule": true,
"target": "ES2022",
"strict": true,
"allowJs": true,
"skipLibCheck": true,
"forceConsistentCasingInFileNames": true,
"baseUrl": ".",
"paths": {
"~/*": ["./app/*"]
},
// Vite takes care of building everything, not tsc.
"noEmit": true
}
"files": [],
"references": [
{ "path": "./tsconfig.app.json" },
{ "path": "./tsconfig.node.json" }
]
}

26
tsconfig.node.json Normal file
View File

@@ -0,0 +1,26 @@
{
"compilerOptions": {
"tsBuildInfoFile": "./node_modules/.tmp/tsconfig.node.tsbuildinfo",
"target": "ES2023",
"lib": ["ES2023"],
"module": "ESNext",
"types": ["node"],
"skipLibCheck": true,
/* Bundler mode */
"moduleResolution": "bundler",
"allowImportingTsExtensions": true,
"verbatimModuleSyntax": true,
"moduleDetection": "force",
"noEmit": true,
/* Linting */
"strict": true,
"noUnusedLocals": true,
"noUnusedParameters": true,
"erasableSyntaxOnly": true,
"noFallthroughCasesInSwitch": true,
"noUncheckedSideEffectImports": true
},
"include": ["vite.config.ts"]
}

24
vite.config.ts
View File

@@ -1,24 +1,8 @@
import { vitePlugin as remix } from "@remix-run/dev";
import { defineConfig } from "vite";
import tsconfigPaths from "vite-tsconfig-paths";
declare module "@remix-run/node" {
interface Future {
v3_singleFetch: true;
}
}
import react from "@vitejs/plugin-react";
import tailwindcss from "@tailwindcss/vite";
// https://vite.dev/config/
export default defineConfig({
plugins: [
remix({
future: {
v3_fetcherPersist: true,
v3_relativeSplatPath: true,
v3_throwAbortReason: true,
v3_singleFetch: true,
v3_lazyRouteDiscovery: true,
},
}),
tsconfigPaths(),
],
plugins: [react(), tailwindcss()],
});