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

Format & Added Big File Gen

Browse Source
This commit is contained in:
Space-Banane
2026-01-16 21:34:20 +01:00
parent cb9ac48b9d
commit 6022d6dc68
1 changed files with 227 additions and 128 deletions
Download Patch File Download Diff File Expand all files Collapse all files

355
src/App.tsx
View File

@@ -128,7 +128,11 @@ function MiniProjectModal({
rel="noreferrer" rel="noreferrer"
className="inline-flex items-center gap-2 px-6 py-3 rounded-lg bg-gradient-to-r from-purple-500 to-pink-500 text-white font-semibold hover:from-purple-600 hover:to-pink-600 transition-all shadow-lg shadow-purple-500/30 hover:shadow-purple-500/50" className="inline-flex items-center gap-2 px-6 py-3 rounded-lg bg-gradient-to-r from-purple-500 to-pink-500 text-white font-semibold hover:from-purple-600 hover:to-pink-600 transition-all shadow-lg shadow-purple-500/30 hover:shadow-purple-500/50"
> >
<svg className="w-5 h-5" fill="currentColor" viewBox="0 0 24 24"> <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" /> <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> </svg>
View on GitHub View on GitHub
@@ -180,7 +184,9 @@ function ExperienceModal({
{/* Content */} {/* Content */}
<div className="p-8 space-y-6"> <div className="p-8 space-y-6">
<div className="flex items-center gap-4"> <div className="flex items-center gap-4">
<div className={`text-4xl p-3 rounded-lg ${getTypeColor(experience.type)} flex items-center justify-center shrink-0 ${experience.image ? 'w-16 h-16' : ''}`}> <div
className={`text-4xl p-3 rounded-lg ${getTypeColor(experience.type)} flex items-center justify-center shrink-0 ${experience.image ? "w-16 h-16" : ""}`}
>
{experience.image ? ( {experience.image ? (
<img <img
src={experience.image} src={experience.image}
@@ -196,7 +202,9 @@ function ExperienceModal({
{experience.name} {experience.name}
</h2> </h2>
<p className="text-sm text-gray-400 mt-1"> <p className="text-sm text-gray-400 mt-1">
{getTypeIcon(experience.type)} {experience.type.charAt(0).toUpperCase() + experience.type.slice(1)} {getTypeIcon(experience.type)}{" "}
{experience.type.charAt(0).toUpperCase() +
experience.type.slice(1)}
</p> </p>
</div> </div>
</div> </div>
@@ -342,20 +350,26 @@ function ExperienceCard({
experience: Experience; experience: Experience;
onClick?: () => void; onClick?: () => void;
}) { }) {
const isClickable = !!(experience.learned_at || experience.learned_from || experience.learned_because); const isClickable = !!(
experience.learned_at ||
experience.learned_from ||
experience.learned_because
);
return ( return (
<div <div
onClick={isClickable ? onClick : undefined} onClick={isClickable ? onClick : undefined}
className={`group flex items-center gap-3 p-3 rounded-lg bg-gradient-to-br from-white/5 to-white/2 backdrop-blur-sm border border-white/10 transition-all duration-200 ${ className={`group flex items-center gap-3 p-3 rounded-lg bg-gradient-to-br from-white/5 to-white/2 backdrop-blur-sm border border-white/10 transition-all duration-200 ${
isClickable isClickable
? 'cursor-pointer hover:border-purple-500/50 hover:bg-white/10 hover:-translate-y-0.5' ? "cursor-pointer hover:border-purple-500/50 hover:bg-white/10 hover:-translate-y-0.5"
: '' : ""
}`} }`}
> >
<div className={`text-2xl p-2 rounded-lg ${getTypeColor(experience.type)} flex items-center justify-center shrink-0 relative ${ <div
experience.image ? 'w-10 h-10' : '' className={`text-2xl p-2 rounded-lg ${getTypeColor(experience.type)} flex items-center justify-center shrink-0 relative ${
}`}> experience.image ? "w-10 h-10" : ""
}`}
>
{experience.image ? ( {experience.image ? (
<img <img
src={experience.image} src={experience.image}
@@ -370,9 +384,11 @@ function ExperienceCard({
)} )}
</div> </div>
<div className="flex-1 min-w-0"> <div className="flex-1 min-w-0">
<h4 className={`text-base font-semibold text-white transition-colors ${ <h4
isClickable ? 'group-hover:text-purple-400' : '' className={`text-base font-semibold text-white transition-colors ${
}`}> isClickable ? "group-hover:text-purple-400" : ""
}`}
>
{experience.name} {experience.name}
</h4> </h4>
{experience.description && ( {experience.description && (
@@ -411,7 +427,7 @@ function ProjectCard({ project }: { project: Project }) {
<img <img
src={project.image} src={project.image}
alt={project.name} alt={project.name}
className={`object-contain ${project.rounded === false ? 'w-full h-auto max-h-24 rounded-lg' : 'h-24 w-24 rounded-full'} shadow-lg group-hover:scale-110 transition-transform duration-500`} className={`object-contain ${project.rounded === false ? "w-full h-auto max-h-24 rounded-lg" : "h-24 w-24 rounded-full"} shadow-lg group-hover:scale-110 transition-transform duration-500`}
/> />
</div> </div>
)} )}
@@ -472,8 +488,10 @@ function App() {
const [displayMessage, setDisplayMessage] = useState(""); const [displayMessage, setDisplayMessage] = useState("");
const [isScrambling, setIsScrambling] = useState(false); const [isScrambling, setIsScrambling] = useState(false);
const [showOldNames, setShowOldNames] = useState(false); const [showOldNames, setShowOldNames] = useState(false);
const [selectedMiniProject, setSelectedMiniProject] = useState<MiniProject | null>(null); const [selectedMiniProject, setSelectedMiniProject] =
const [selectedExperience, setSelectedExperience] = useState<Experience | null>(null); useState<MiniProject | null>(null);
const [selectedExperience, setSelectedExperience] =
useState<Experience | null>(null);
const oldUsernames = [ const oldUsernames = [
"getspaced (ingame)", "getspaced (ingame)",
@@ -527,7 +545,7 @@ function App() {
useEffect(() => { useEffect(() => {
fetch( fetch(
"https://shsf-api.reversed.dev/api/exec/6/c084ec4a-1b20-491e-ab2e-67c5fa8881e6" "https://shsf-api.reversed.dev/api/exec/6/c084ec4a-1b20-491e-ab2e-67c5fa8881e6",
) )
.then((res) => res.json()) .then((res) => res.json())
.then((data) => { .then((data) => {
@@ -558,7 +576,7 @@ function App() {
} }
return characters[Math.floor(Math.random() * characters.length)]; return characters[Math.floor(Math.random() * characters.length)];
}) })
.join("") .join(""),
); );
if (iteration >= targetMessage.length) { if (iteration >= targetMessage.length) {
@@ -643,7 +661,9 @@ function App() {
<p className="text-sm text-gray-300 whitespace-nowrap"> <p className="text-sm text-gray-300 whitespace-nowrap">
Currently{" "} Currently{" "}
<span className="text-white font-semibold">{statusMessage}</span> <span className="text-white font-semibold">
{statusMessage}
</span>
<br /> <br />
on Discord on Discord
</p> </p>
@@ -654,34 +674,34 @@ function App() {
<div className="space-y-4 max-w-2xl"> <div className="space-y-4 max-w-2xl">
<h1 className="text-6xl md:text-7xl font-extrabold"> <h1 className="text-6xl md:text-7xl font-extrabold">
Hey, I'm{" "} Hey, I'm{" "}
<span <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" 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" }} style={{ marginLeft: "0.15em", marginRight: "0.15em" }}
onMouseEnter={() => setShowOldNames(true)} onMouseEnter={() => setShowOldNames(true)}
onMouseLeave={() => setShowOldNames(false)} onMouseLeave={() => setShowOldNames(false)}
> >
Space² Space²
{showOldNames && ( {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="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="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> <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"> <p className="text-xs text-gray-400 mb-2 font-medium whitespace-nowrap text-center">
Also known as: Also known as:
</p> </p>
<ul className="flex flex-col items-center gap-1.5"> <ul className="flex flex-col items-center gap-1.5">
{oldUsernames.map((name, index) => ( {oldUsernames.map((name, index) => (
<li <li
key={index} key={index}
className="text-sm text-gray-200 font-mono hover:text-purple-400 transition-colors whitespace-nowrap text-center" className="text-sm text-gray-200 font-mono hover:text-purple-400 transition-colors whitespace-nowrap text-center"
> >
{name} {name}
</li> </li>
))} ))}
</ul> </ul>
</div> </div>
</div> </div>
)} )}
</span> </span>
</h1> </h1>
<p className="text-2xl text-gray-400 font-light"> <p className="text-2xl text-gray-400 font-light">
A{" "} A{" "}
@@ -713,7 +733,8 @@ function App() {
stuff. stuff.
</p> </p>
<p className="leading-relaxed"> <p className="leading-relaxed">
I focus on building projects that i need, and that don't already exist. I focus on building projects that i need, and that don't
already exist.
</p> </p>
</div> </div>
</div> </div>
@@ -736,13 +757,22 @@ function App() {
<div className="space-y-4 text-gray-300"> <div className="space-y-4 text-gray-300">
<p className="leading-relaxed"> <p className="leading-relaxed">
When im not breaking Typescript im usually playing with{" "} When im not breaking Typescript im usually playing with{" "}
<span className="text-orange-400 font-semibold">Arduinos</span> and{" "} <span className="text-orange-400 font-semibold">
<span className="text-orange-400 font-semibold">ESP32s</span>. I love interacting via Software with self-made hardware. Arduinos
</span>{" "}
and{" "}
<span className="text-orange-400 font-semibold">ESP32s</span>.
I love interacting via Software with self-made hardware.
</p> </p>
<p className="leading-relaxed"> <p className="leading-relaxed">
I've built some Smarthome sensors myself, including a few little bluetooth proxys that also serve as temperature sensors.</p> I've built some Smarthome sensors myself, including a few
little bluetooth proxys that also serve as temperature
sensors.
</p>
<p className="leading-relaxed"> <p className="leading-relaxed">
I love using ESP32s because they're stupidly easy to build with & the bar to entry is stupidly low with a stupid amount of tutorials. I love using ESP32s because they're stupidly easy to build
with & the bar to entry is stupidly low with a stupid amount
of tutorials.
</p> </p>
</div> </div>
</div> </div>
@@ -765,12 +795,19 @@ function App() {
<div className="space-y-4 text-gray-300"> <div className="space-y-4 text-gray-300">
<p className="leading-relaxed"> <p className="leading-relaxed">
I run a modded Creality Ender 3 V1 with a{" "} I run a modded Creality Ender 3 V1 with a{" "}
<span className="text-cyan-400 font-semibold">BLTouch</span> for auto bed leveling, <span className="text-cyan-400 font-semibold">BLTouch</span>{" "}
all managed through <span className="text-cyan-400 font-semibold">OctoPrint</span>. for auto bed leveling, all managed through{" "}
I slice my stuff using <span className="text-cyan-400 font-semibold">OrcaSlicer</span> because Cura's UI gives me a flashbang everytime i open it. <span className="text-cyan-400 font-semibold">OctoPrint</span>
. I slice my stuff using{" "}
<span className="text-cyan-400 font-semibold">
OrcaSlicer
</span>{" "}
because Cura's UI gives me a flashbang everytime i open it.
</p> </p>
<p className="leading-relaxed"> <p className="leading-relaxed">
I would lie if i said i print useful stuff. Most of the stuff i print is for organising stuff and a few fun prints here and there. I would lie if i said i print useful stuff. Most of the stuff
i print is for organising stuff and a few fun prints here and
there.
</p> </p>
</div> </div>
</div> </div>
@@ -783,23 +820,20 @@ function App() {
<h2 className="text-3xl font-bold text-transparent bg-clip-text bg-gradient-to-r from-blue-400 to-purple-500"> <h2 className="text-3xl font-bold text-transparent bg-clip-text bg-gradient-to-r from-blue-400 to-purple-500">
My Goals My Goals
</h2> </h2>
<p className="text-gray-400 max-w-2xl mx-auto"> <p className="text-gray-400 max-w-2xl mx-auto">future things</p>
future things
</p>
</div> </div>
<div className="grid grid-cols-1 md:grid-cols-2 gap-6"> <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="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="flex items-start gap-4">
<div className="p-3 rounded-lg bg-blue-500/20 text-3xl"> <div className="p-3 rounded-lg bg-blue-500/20 text-3xl">🚀</div>
🚀
</div>
<div> <div>
<h3 className="text-xl font-bold text-white mb-2"> <h3 className="text-xl font-bold text-white mb-2">
Not Just Semi-Fullstack Not Just Semi-Fullstack
</h3> </h3>
<p className="text-gray-400 leading-relaxed"> <p className="text-gray-400 leading-relaxed">
I want to work more with Serverless Architectures and Cloud Services to build scalable applications. I want to work more with Serverless Architectures and Cloud
Services to build scalable applications.
</p> </p>
</div> </div>
</div> </div>
@@ -830,9 +864,9 @@ function App() {
<h3 className="text-xl font-bold text-white mb-2"> <h3 className="text-xl font-bold text-white mb-2">
Expand on Existing Projects Expand on Existing Projects
</h3> </h3>
<p className="text-gray-400 leading-relaxed"> <p className="text-gray-400 leading-relaxed">
I want to make SHSF more stable and usable. I want to make SHSF more stable and usable.
</p> </p>
</div> </div>
</div> </div>
</div> </div>
@@ -846,9 +880,7 @@ function App() {
<h3 className="text-xl font-bold text-white mb-2"> <h3 className="text-xl font-bold text-white mb-2">
Explore the Unknown Explore the Unknown
</h3> </h3>
<p className="text-gray-400 leading-relaxed"> <p className="text-gray-400 leading-relaxed">Rust?👀</p>
Rust?👀
</p>
</div> </div>
</div> </div>
</div> </div>
@@ -922,21 +954,33 @@ function App() {
<div className="max-w-4xl mx-auto space-y-6"> <div className="max-w-4xl mx-auto space-y-6">
{Object.entries( {Object.entries(
experiences.reduce((acc, exp) => { experiences.reduce(
if (!acc[exp.type]) acc[exp.type] = []; (acc, exp) => {
acc[exp.type].push(exp); if (!acc[exp.type]) acc[exp.type] = [];
return acc; acc[exp.type].push(exp);
}, {} as Record<string, Experience[]>) return acc;
},
{} as Record<string, Experience[]>,
),
).map(([type, items]) => ( ).map(([type, items]) => (
<div key={type} className="space-y-3"> <div key={type} className="space-y-3">
<h3 className={`text-lg font-semibold flex items-center gap-2 ${ <h3
type === 'language' ? 'text-blue-400' : className={`text-lg font-semibold flex items-center gap-2 ${
type === 'service' ? 'text-purple-400' : type === "language"
type === 'platform' ? 'text-green-400' : ? "text-blue-400"
type === 'real life experience' ? 'text-orange-400' : : type === "service"
type === 'roles' ? 'text-pink-400' : 'text-gray-400' ? "text-purple-400"
}`}> : type === "platform"
{getTypeIcon(type as Experience["type"])} {type.charAt(0).toUpperCase() + type.slice(1)} ? "text-green-400"
: type === "real life experience"
? "text-orange-400"
: type === "roles"
? "text-pink-400"
: "text-gray-400"
}`}
>
{getTypeIcon(type as Experience["type"])}{" "}
{type.charAt(0).toUpperCase() + type.slice(1)}
</h3> </h3>
<div className="grid grid-cols-1 md:grid-cols-2 gap-3"> <div className="grid grid-cols-1 md:grid-cols-2 gap-3">
{items.map((exp, index) => ( {items.map((exp, index) => (
@@ -1054,7 +1098,8 @@ const projects: Project[] = [
description: "A minimalistic and privacy-focused idea-taking app.", description: "A minimalistic and privacy-focused idea-taking app.",
link: "https://github.com/Space-Banane/thoughtful", link: "https://github.com/Space-Banane/thoughtful",
open_source: { link: "https://github.com/Space-Banane/thoughtful" }, open_source: { link: "https://github.com/Space-Banane/thoughtful" },
image: "https://em-content.zobj.net/source/microsoft-3D-fluent/433/thinking-face_1f914.png", image:
"https://em-content.zobj.net/source/microsoft-3D-fluent/433/thinking-face_1f914.png",
}, },
{ {
name: "3D Print Card", name: "3D Print Card",
@@ -1077,7 +1122,7 @@ const projects: Project[] = [
image: "https://cdn.reversed.dev/pictures/qrcode.jpeg", image: "https://cdn.reversed.dev/pictures/qrcode.jpeg",
open_source: { link: "https://github.com/reversed-dev/qr-code-gen" }, open_source: { link: "https://github.com/reversed-dev/qr-code-gen" },
link: "https://qr.reversed.dev", link: "https://qr.reversed.dev",
} },
]; ];
const miniProjects: MiniProject[] = [ const miniProjects: MiniProject[] = [
@@ -1090,7 +1135,8 @@ const miniProjects: MiniProject[] = [
color: "red", color: "red",
content: "Requires SHSF to run", content: "Requires SHSF to run",
}, },
image: "https://github.com/Space-Banane/shsf-discord-status/blob/main/Discord%20Status%20Image.png?raw=true" image:
"https://github.com/Space-Banane/shsf-discord-status/blob/main/Discord%20Status%20Image.png?raw=true",
}, },
{ {
title: "Mirror GoXLR to Discord", title: "Mirror GoXLR to Discord",
@@ -1099,16 +1145,19 @@ const miniProjects: MiniProject[] = [
github: "https://github.com/Space-Banane/mirror-goxlr-to-discord", github: "https://github.com/Space-Banane/mirror-goxlr-to-discord",
note: { note: {
color: "yellow", color: "yellow",
content: "Experimental - This might interfere with some other Hotkeys you set, or Applications that listen to those Hotkeys" content:
"Experimental - This might interfere with some other Hotkeys you set, or Applications that listen to those Hotkeys",
}, },
image: "https://github.com/Space-Banane/mirror-goxlr-to-discord/blob/main/Discord%20x%20GoXLR.png?raw=true" image:
"https://github.com/Space-Banane/mirror-goxlr-to-discord/blob/main/Discord%20x%20GoXLR.png?raw=true",
}, },
{ {
title: "Octo-Activity", title: "Octo-Activity",
description: "Show your 3D Printer activity as Discord Status.", description: "Show your 3D Printer activity as Discord Status.",
why: "I wanted to show off my 3D Printer activity on Discord.", why: "I wanted to show off my 3D Printer activity on Discord.",
github: "https://github.com/Space-Banane/discord-octo-activity", github: "https://github.com/Space-Banane/discord-octo-activity",
image: "https://github.com/Space-Banane/discord-octo-activity/blob/main/Discord%20Octo%20Activity.png?raw=true", image:
"https://github.com/Space-Banane/discord-octo-activity/blob/main/Discord%20Octo%20Activity.png?raw=true",
}, },
{ {
title: "Fishing Rod Automation Raft", title: "Fishing Rod Automation Raft",
@@ -1117,187 +1166,232 @@ const miniProjects: MiniProject[] = [
github: "https://github.com/Space-Banane/raft-fishing", github: "https://github.com/Space-Banane/raft-fishing",
note: { note: {
color: "yellow", color: "yellow",
content: "Might interfere with other Applications that use Mouse/Keyboard input. In case of trust issues, move the mouse to the bottom right corner to stop the script." content:
"Might interfere with other Applications that use Mouse/Keyboard input. In case of trust issues, move the mouse to the bottom right corner to stop the script.",
}, },
image: "https://github.com/Space-Banane/raft-fishing/blob/main/Raft%20Fishing%20Guide%20-%20cover.jpg?raw=true" image:
"https://github.com/Space-Banane/raft-fishing/blob/main/Raft%20Fishing%20Guide%20-%20cover.jpg?raw=true",
}, },
{ {
title: "Nvidia-SMI Server", title: "Nvidia-SMI Server",
description: "A simple server to expose Nvidia-SMI data via HTTP.", description: "A simple server to expose Nvidia-SMI data via HTTP.",
why: "I wanted to monitor my GPU usage remotely without installing additional software.", why: "I wanted to monitor my GPU usage remotely without installing additional software.",
github: "https://github.com/Space-Banane/nvidia-smi-server", github: "https://github.com/Space-Banane/nvidia-smi-server",
image: "https://github.com/Space-Banane/nvidia-smi-server/blob/main/Nvidia%20-%20SMI.png?raw=true" image:
"https://github.com/Space-Banane/nvidia-smi-server/blob/main/Nvidia%20-%20SMI.png?raw=true",
}, },
{ {
title: "Lego Set to STL", title: "Lego Set to STL",
description: "Convert Lego set instructions to STL files for 3D printing.", description: "Convert Lego set instructions to STL files for 3D printing.",
why: "A friend of mine searched for a website that does something like this, so i made one.", why: "A friend of mine searched for a website that does something like this, so i made one.",
github: "https://github.com/Space-Banane/lego-to-stl", github: "https://github.com/Space-Banane/lego-to-stl",
image: "https://zippy.trumplovesgiving.top/u/44nekH.png" image: "https://zippy.trumplovesgiving.top/u/44nekH.png",
}, },
{ {
title: "Thoughtful Extention for Raycast", title: "Thoughtful Extention for Raycast",
description: "Quickly add ideas to Thoughtful from Raycast.", description: "Quickly add ideas to Thoughtful from Raycast.",
why: "I use Raycast a lot, so having a quick way to add ideas to Thoughtful is super convenient.", why: "I use Raycast a lot, so having a quick way to add ideas to Thoughtful is super convenient.",
github: "https://gitea.reversed.dev/space/thoughtful-extention",note: { github: "https://gitea.reversed.dev/space/thoughtful-extention",
note: {
color: "blue", color: "blue",
content: "Requires Thoughtful & Raycast to use lol" content: "Requires Thoughtful & Raycast to use lol",
}, },
} },
{
title: "Big File Generator",
description:
"Generate large files filled with random data for testing purposes.",
why: "SMB performance test, i did NOT have a big file lying around.",
github: "https://gitea.reversed.dev/space/big-file-gen",
image:
"https://em-content.zobj.net/source/microsoft-3D-fluent/433/file-folder_1f4c1.png",
},
]; ];
const experiences: Experience[] = [ const experiences: Experience[] = [
{ {
name: "TypeScript", name: "TypeScript",
type: "language", type: "language",
description: "My go-to language for building scalable web applications with type safety.", description:
image: "https://cdn.jsdelivr.net/gh/devicons/devicon/icons/typescript/typescript-original.svg", "My go-to language for building scalable web applications with type safety.",
learned_because: "I HATE JavaScript, this makes it minimally better" image:
"https://cdn.jsdelivr.net/gh/devicons/devicon/icons/typescript/typescript-original.svg",
learned_because: "I HATE JavaScript, this makes it minimally better",
}, },
{ {
name: "JavaScript", name: "JavaScript",
type: "language", type: "language",
description: "The foundation of web development.", description: "The foundation of web development.",
image: "https://cdn.jsdelivr.net/gh/devicons/devicon/icons/javascript/javascript-original.svg", image:
"https://cdn.jsdelivr.net/gh/devicons/devicon/icons/javascript/javascript-original.svg",
}, },
{ {
name: "Python", name: "Python",
type: "language", type: "language",
description: "Used for automation scripts, data processing, and backend services.", description:
image: "https://cdn.jsdelivr.net/gh/devicons/devicon/icons/python/python-original.svg", "Used for automation scripts, data processing, and backend services.",
image:
"https://cdn.jsdelivr.net/gh/devicons/devicon/icons/python/python-original.svg",
}, },
{ {
name: "Go", name: "Go",
type: "language", type: "language",
description: "For building fast and efficient backend services.", description: "For building fast and efficient backend services.",
image: "https://cdn.jsdelivr.net/gh/devicons/devicon/icons/go/go-original.svg", image:
"https://cdn.jsdelivr.net/gh/devicons/devicon/icons/go/go-original.svg",
}, },
{ {
name: "Lua", name: "Lua",
type: "language", type: "language",
description: "Scripting and embedded applications.", description: "Scripting and embedded applications.",
image: "https://cdn.jsdelivr.net/gh/devicons/devicon/icons/lua/lua-original.svg", image:
"https://cdn.jsdelivr.net/gh/devicons/devicon/icons/lua/lua-original.svg",
learned_from: "Youtube & Docs", learned_from: "Youtube & Docs",
learned_because: "Used in some Robots in a Minecraft mod called CC:Tweaked" learned_because: "Used in some Robots in a Minecraft mod called CC:Tweaked",
}, },
{ {
name: "React", name: "React",
type: "platform", type: "platform",
description: "Building interactive user interfaces with modern React patterns and hooks.", description:
image: "https://cdn.jsdelivr.net/gh/devicons/devicon/icons/react/react-original.svg", "Building interactive user interfaces with modern React patterns and hooks.",
image:
"https://cdn.jsdelivr.net/gh/devicons/devicon/icons/react/react-original.svg",
}, },
{ {
name: "Vue.js", name: "Vue.js",
type: "platform", type: "platform",
description: "Creating reactive web applications with Vue's elegant API.", description: "Creating reactive web applications with Vue's elegant API.",
image: "https://cdn.jsdelivr.net/gh/devicons/devicon/icons/vuejs/vuejs-original.svg", image:
"https://cdn.jsdelivr.net/gh/devicons/devicon/icons/vuejs/vuejs-original.svg",
}, },
{ {
name: "Docker", name: "Docker",
type: "service", type: "service",
description: "Containerizing applications for consistent deployment across environments.", description:
image: "https://cdn.jsdelivr.net/gh/devicons/devicon/icons/docker/docker-original.svg", "Containerizing applications for consistent deployment across environments.",
image:
"https://cdn.jsdelivr.net/gh/devicons/devicon/icons/docker/docker-original.svg",
}, },
{ {
name: "PostgreSQL", name: "PostgreSQL",
type: "service", type: "service",
description: "Reliable relational database for complex data storage needs.", description: "Reliable relational database for complex data storage needs.",
image: "https://cdn.jsdelivr.net/gh/devicons/devicon/icons/postgresql/postgresql-original.svg", image:
"https://cdn.jsdelivr.net/gh/devicons/devicon/icons/postgresql/postgresql-original.svg",
}, },
{ {
name: "Redis", name: "Redis",
type: "service", type: "service",
description: "High-performance caching and data structure store.", description: "High-performance caching and data structure store.",
image: "https://cdn.jsdelivr.net/gh/devicons/devicon/icons/redis/redis-original.svg", image:
"https://cdn.jsdelivr.net/gh/devicons/devicon/icons/redis/redis-original.svg",
}, },
{ {
name: "MariaDB", name: "MariaDB",
type: "service", type: "service",
description: "Open-source relational database management system.", description: "Open-source relational database management system.",
image: "https://cdn.jsdelivr.net/gh/devicons/devicon/icons/mariadb/mariadb-original.svg", image:
"https://cdn.jsdelivr.net/gh/devicons/devicon/icons/mariadb/mariadb-original.svg",
}, },
{ {
name: "Proxy Software", name: "Proxy Software",
type: "service", type: "service",
description: "Configuring and managing reverse proxies for web applications.", description:
"Configuring and managing reverse proxies for web applications.",
}, },
{ {
name: "Home Assistant", name: "Home Assistant",
type: "platform", type: "platform",
description: "Building smart home automations and integrating various IoT devices.", description:
image: "https://cdn.jsdelivr.net/gh/walkxcode/dashboard-icons/png/home-assistant.png", "Building smart home automations and integrating various IoT devices.",
image:
"https://cdn.jsdelivr.net/gh/walkxcode/dashboard-icons/png/home-assistant.png",
}, },
{ {
name: "ESPHome", name: "ESPHome",
type: "platform", type: "platform",
description: "Programming ESP32 and ESP8266 microcontrollers for custom smart home sensors.", description:
"Programming ESP32 and ESP8266 microcontrollers for custom smart home sensors.",
image: "https://esphome.io/_images/logo.svg", image: "https://esphome.io/_images/logo.svg",
}, },
{ {
name: "Troubleshooting Hardware", name: "Troubleshooting Hardware",
type: "real life experience", type: "real life experience",
description: "Diagnosing and fixing hardware issues, from bricked microcontrollers to server problems.", description:
"Diagnosing and fixing hardware issues, from bricked microcontrollers to server problems.",
}, },
{ {
name: "Node.js", name: "Node.js",
type: "platform", type: "platform",
description: "Building backend services and APIs with Express and Fastify.", description: "Building backend services and APIs with Express and Fastify.",
image: "https://cdn.jsdelivr.net/gh/devicons/devicon/icons/nodejs/nodejs-original.svg", image:
"https://cdn.jsdelivr.net/gh/devicons/devicon/icons/nodejs/nodejs-original.svg",
}, },
{ {
name: "Immich", name: "Immich",
type: "platform", type: "platform",
description: "Self-hosted photo and video management solution.", description: "Self-hosted photo and video management solution.",
image: "https://avatars.githubusercontent.com/u/109746326?v=4", image: "https://avatars.githubusercontent.com/u/109746326?v=4",
learned_because: "I hate OneDrive" learned_because: "I hate OneDrive",
}, },
{ {
name: "Pangolin", name: "Pangolin",
type: "platform", type: "platform",
description: "Proxy solution for network management.", description: "Proxy solution for network management.",
image: "https://cdn.jsdelivr.net/gh/homarr-labs/dashboard-icons/svg/pangolin.svg", image:
learned_because: "My old proxy did NOT work super well with authentication." "https://cdn.jsdelivr.net/gh/homarr-labs/dashboard-icons/svg/pangolin.svg",
learned_because:
"My old proxy did NOT work super well with authentication.",
}, },
{ {
name: "Nginx", name: "Nginx",
type: "platform", type: "platform",
description: "Proxy solution for network management. (old proxy)", description: "Proxy solution for network management. (old proxy)",
image: "https://cdn.jsdelivr.net/gh/devicons/devicon/icons/nginx/nginx-original.svg", image:
"https://cdn.jsdelivr.net/gh/devicons/devicon/icons/nginx/nginx-original.svg",
}, },
{ {
name: "Minecraft Servers", name: "Minecraft Servers",
type: "platform", type: "platform",
description: "Hosting and managing multiplayer game servers.", description: "Hosting and managing multiplayer game servers.",
image: "https://cdn.jsdelivr.net/gh/walkxcode/dashboard-icons/png/minecraft.png", image:
"https://cdn.jsdelivr.net/gh/walkxcode/dashboard-icons/png/minecraft.png",
}, },
{ {
name: "Gitea", name: "Gitea",
type: "platform", type: "platform",
description: "Self-hosted Git service for version control.", description: "Self-hosted Git service for version control.",
image: "https://cdn.jsdelivr.net/gh/walkxcode/dashboard-icons/png/gitea.png", image:
"https://cdn.jsdelivr.net/gh/walkxcode/dashboard-icons/png/gitea.png",
}, },
{ {
name: "Serverless Functions", name: "Serverless Functions",
type: "platform", type: "platform",
description: "Building scalable cloud functions and microservices. (SHSF)", description: "Building scalable cloud functions and microservices. (SHSF)",
image: "https://cdn.reversed.dev/pictures/shsf/SHSF%20SMALL%20TRANSPARENT.png", image:
"https://cdn.reversed.dev/pictures/shsf/SHSF%20SMALL%20TRANSPARENT.png",
}, },
{ {
name: "Cloud Infrastructure", name: "Cloud Infrastructure",
type: "platform", type: "platform",
description: "Managing and deploying applications on cloud platforms. (GCP, AWS, DigitalOcean)", description:
"Managing and deploying applications on cloud platforms. (GCP, AWS, DigitalOcean)",
}, },
{ {
name: "Git", name: "Git",
type: "service", type: "service",
description: "Version control for collaborative development and open-source contributions.", description:
image: "https://cdn.jsdelivr.net/gh/devicons/devicon/icons/git/git-original.svg", "Version control for collaborative development and open-source contributions.",
image:
"https://cdn.jsdelivr.net/gh/devicons/devicon/icons/git/git-original.svg",
}, },
{ {
name: "ShareX", name: "ShareX",
type: "platform", type: "platform",
description: "Custom uploaders and automation workflows for screenshots and file sharing.", description:
image: "https://upload.wikimedia.org/wikipedia/commons/d/d1/ShareX_Logo.png", "Custom uploaders and automation workflows for screenshots and file sharing.",
image:
"https://upload.wikimedia.org/wikipedia/commons/d/d1/ShareX_Logo.png",
}, },
{ {
name: "Zipline", name: "Zipline",
@@ -1309,29 +1403,34 @@ const experiences: Experience[] = [
name: "Tailwind CSS", name: "Tailwind CSS",
type: "platform", type: "platform",
description: "Utility-first CSS framework for rapid UI development.", description: "Utility-first CSS framework for rapid UI development.",
image: "https://upload.wikimedia.org/wikipedia/commons/thumb/d/d5/Tailwind_CSS_Logo.svg/2560px-Tailwind_CSS_Logo.svg.png", image:
"https://upload.wikimedia.org/wikipedia/commons/thumb/d/d5/Tailwind_CSS_Logo.svg/2560px-Tailwind_CSS_Logo.svg.png",
}, },
{ {
name: "Proxmox VE", name: "Proxmox VE",
type: "platform", type: "platform",
description: "Virtualization management platform for running VMs and containers.", description:
image: "https://media.printables.com/media/prints/543748/images/4374616_04ed4585-3662-4652-a84d-04621cb9f709/thumbs/inside/1280x960/png/proxmox.webp", "Virtualization management platform for running VMs and containers.",
image:
"https://media.printables.com/media/prints/543748/images/4374616_04ed4585-3662-4652-a84d-04621cb9f709/thumbs/inside/1280x960/png/proxmox.webp",
}, },
{ {
name: "MongoDB", name: "MongoDB",
type: "service", type: "service",
description: "NoSQL database for flexible document-based data storage.", description: "NoSQL database for flexible document-based data storage.",
image: "https://cdn.jsdelivr.net/gh/devicons/devicon/icons/mongodb/mongodb-original.svg", image:
"https://cdn.jsdelivr.net/gh/devicons/devicon/icons/mongodb/mongodb-original.svg",
learned_because: "I didn't wanna mess around with schemas for a project.", learned_because: "I didn't wanna mess around with schemas for a project.",
learned_at: "09.01.2026" learned_at: "09.01.2026",
}, },
{ {
name: "Insomnia", name: "Insomnia",
type: "platform", type: "platform",
description: "REST API client for testing and debugging HTTP requests.", description: "REST API client for testing and debugging HTTP requests.",
image: "https://s3.amazonaws.com/s3.roaringapps.com/assets/icons/1561251841927-Insomnia.png", image:
learned_because: "Postman is bloatware" "https://s3.amazonaws.com/s3.roaringapps.com/assets/icons/1561251841927-Insomnia.png",
} learned_because: "Postman is bloatware",
},
]; ];
export default App; export default App;