Format & Added Big File Gen
This commit is contained in:
Space-Banane
305
src/App.tsx
305
src/App.tsx
@@ -128,7 +128,11 @@ function MiniProjectModal({
|
||||
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"
|
||||
>
|
||||
<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" />
|
||||
</svg>
|
||||
View on GitHub
|
||||
@@ -180,7 +184,9 @@ function ExperienceModal({
|
||||
{/* Content */}
|
||||
<div className="p-8 space-y-6">
|
||||
<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 ? (
|
||||
<img
|
||||
src={experience.image}
|
||||
@@ -196,7 +202,9 @@ function ExperienceModal({
|
||||
{experience.name}
|
||||
</h2>
|
||||
<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>
|
||||
</div>
|
||||
</div>
|
||||
@@ -342,20 +350,26 @@ function ExperienceCard({
|
||||
experience: Experience;
|
||||
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 (
|
||||
<div
|
||||
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 ${
|
||||
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 ${
|
||||
experience.image ? "w-10 h-10" : ""
|
||||
}`}
|
||||
>
|
||||
<div 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 ? (
|
||||
<img
|
||||
src={experience.image}
|
||||
@@ -370,9 +384,11 @@ function ExperienceCard({
|
||||
)}
|
||||
</div>
|
||||
<div className="flex-1 min-w-0">
|
||||
<h4 className={`text-base font-semibold text-white transition-colors ${
|
||||
isClickable ? 'group-hover:text-purple-400' : ''
|
||||
}`}>
|
||||
<h4
|
||||
className={`text-base font-semibold text-white transition-colors ${
|
||||
isClickable ? "group-hover:text-purple-400" : ""
|
||||
}`}
|
||||
>
|
||||
{experience.name}
|
||||
</h4>
|
||||
{experience.description && (
|
||||
@@ -411,7 +427,7 @@ function ProjectCard({ project }: { project: Project }) {
|
||||
<img
|
||||
src={project.image}
|
||||
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>
|
||||
)}
|
||||
@@ -472,8 +488,10 @@ function App() {
|
||||
const [displayMessage, setDisplayMessage] = useState("");
|
||||
const [isScrambling, setIsScrambling] = useState(false);
|
||||
const [showOldNames, setShowOldNames] = useState(false);
|
||||
const [selectedMiniProject, setSelectedMiniProject] = useState<MiniProject | null>(null);
|
||||
const [selectedExperience, setSelectedExperience] = useState<Experience | null>(null);
|
||||
const [selectedMiniProject, setSelectedMiniProject] =
|
||||
useState<MiniProject | null>(null);
|
||||
const [selectedExperience, setSelectedExperience] =
|
||||
useState<Experience | null>(null);
|
||||
|
||||
const oldUsernames = [
|
||||
"getspaced (ingame)",
|
||||
@@ -527,7 +545,7 @@ function App() {
|
||||
|
||||
useEffect(() => {
|
||||
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((data) => {
|
||||
@@ -558,7 +576,7 @@ function App() {
|
||||
}
|
||||
return characters[Math.floor(Math.random() * characters.length)];
|
||||
})
|
||||
.join("")
|
||||
.join(""),
|
||||
);
|
||||
|
||||
if (iteration >= targetMessage.length) {
|
||||
@@ -643,7 +661,9 @@ function App() {
|
||||
|
||||
<p className="text-sm text-gray-300 whitespace-nowrap">
|
||||
Currently{" "}
|
||||
<span className="text-white font-semibold">{statusMessage}</span>
|
||||
<span className="text-white font-semibold">
|
||||
{statusMessage}
|
||||
</span>
|
||||
<br />
|
||||
on Discord
|
||||
</p>
|
||||
@@ -713,7 +733,8 @@ function App() {
|
||||
stuff.
|
||||
</p>
|
||||
<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>
|
||||
</div>
|
||||
</div>
|
||||
@@ -736,13 +757,22 @@ function App() {
|
||||
<div className="space-y-4 text-gray-300">
|
||||
<p className="leading-relaxed">
|
||||
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">ESP32s</span>. I love interacting via Software with self-made hardware.
|
||||
<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 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">
|
||||
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>
|
||||
</div>
|
||||
</div>
|
||||
@@ -765,12 +795,19 @@ function App() {
|
||||
<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 through <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.
|
||||
<span className="text-cyan-400 font-semibold">BLTouch</span>{" "}
|
||||
for auto bed leveling, all managed through{" "}
|
||||
<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 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>
|
||||
</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">
|
||||
My Goals
|
||||
</h2>
|
||||
<p className="text-gray-400 max-w-2xl mx-auto">
|
||||
future things
|
||||
</p>
|
||||
<p className="text-gray-400 max-w-2xl mx-auto">future things</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 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.
|
||||
I want to work more with Serverless Architectures and Cloud
|
||||
Services to build scalable applications.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
@@ -846,9 +880,7 @@ function App() {
|
||||
<h3 className="text-xl font-bold text-white mb-2">
|
||||
Explore the Unknown
|
||||
</h3>
|
||||
<p className="text-gray-400 leading-relaxed">
|
||||
Rust?👀
|
||||
</p>
|
||||
<p className="text-gray-400 leading-relaxed">Rust?👀</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -922,21 +954,33 @@ function App() {
|
||||
|
||||
<div className="max-w-4xl mx-auto space-y-6">
|
||||
{Object.entries(
|
||||
experiences.reduce((acc, exp) => {
|
||||
experiences.reduce(
|
||||
(acc, exp) => {
|
||||
if (!acc[exp.type]) acc[exp.type] = [];
|
||||
acc[exp.type].push(exp);
|
||||
return acc;
|
||||
}, {} as Record<string, Experience[]>)
|
||||
},
|
||||
{} as Record<string, Experience[]>,
|
||||
),
|
||||
).map(([type, items]) => (
|
||||
<div key={type} className="space-y-3">
|
||||
<h3 className={`text-lg font-semibold flex items-center gap-2 ${
|
||||
type === 'language' ? 'text-blue-400' :
|
||||
type === 'service' ? 'text-purple-400' :
|
||||
type === 'platform' ? '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
|
||||
className={`text-lg font-semibold flex items-center gap-2 ${
|
||||
type === "language"
|
||||
? "text-blue-400"
|
||||
: type === "service"
|
||||
? "text-purple-400"
|
||||
: type === "platform"
|
||||
? "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>
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-3">
|
||||
{items.map((exp, index) => (
|
||||
@@ -1054,7 +1098,8 @@ const projects: Project[] = [
|
||||
description: "A minimalistic and privacy-focused idea-taking app.",
|
||||
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",
|
||||
@@ -1077,7 +1122,7 @@ const projects: Project[] = [
|
||||
image: "https://cdn.reversed.dev/pictures/qrcode.jpeg",
|
||||
open_source: { link: "https://github.com/reversed-dev/qr-code-gen" },
|
||||
link: "https://qr.reversed.dev",
|
||||
}
|
||||
},
|
||||
];
|
||||
|
||||
const miniProjects: MiniProject[] = [
|
||||
@@ -1090,7 +1135,8 @@ const miniProjects: MiniProject[] = [
|
||||
color: "red",
|
||||
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",
|
||||
@@ -1099,16 +1145,19 @@ const miniProjects: MiniProject[] = [
|
||||
github: "https://github.com/Space-Banane/mirror-goxlr-to-discord",
|
||||
note: {
|
||||
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",
|
||||
description: "Show your 3D Printer activity as Discord Status.",
|
||||
why: "I wanted to show off my 3D Printer activity on Discord.",
|
||||
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",
|
||||
@@ -1117,187 +1166,232 @@ const miniProjects: MiniProject[] = [
|
||||
github: "https://github.com/Space-Banane/raft-fishing",
|
||||
note: {
|
||||
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",
|
||||
description: "A simple server to expose Nvidia-SMI data via HTTP.",
|
||||
why: "I wanted to monitor my GPU usage remotely without installing additional software.",
|
||||
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",
|
||||
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.",
|
||||
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",
|
||||
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.",
|
||||
github: "https://gitea.reversed.dev/space/thoughtful-extention",note: {
|
||||
github: "https://gitea.reversed.dev/space/thoughtful-extention",
|
||||
note: {
|
||||
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[] = [
|
||||
{
|
||||
name: "TypeScript",
|
||||
type: "language",
|
||||
description: "My go-to language for building scalable web applications with type safety.",
|
||||
image: "https://cdn.jsdelivr.net/gh/devicons/devicon/icons/typescript/typescript-original.svg",
|
||||
learned_because: "I HATE JavaScript, this makes it minimally better"
|
||||
description:
|
||||
"My go-to language for building scalable web applications with type safety.",
|
||||
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",
|
||||
type: "language",
|
||||
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",
|
||||
type: "language",
|
||||
description: "Used for automation scripts, data processing, and backend services.",
|
||||
image: "https://cdn.jsdelivr.net/gh/devicons/devicon/icons/python/python-original.svg",
|
||||
description:
|
||||
"Used for automation scripts, data processing, and backend services.",
|
||||
image:
|
||||
"https://cdn.jsdelivr.net/gh/devicons/devicon/icons/python/python-original.svg",
|
||||
},
|
||||
{
|
||||
name: "Go",
|
||||
type: "language",
|
||||
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",
|
||||
type: "language",
|
||||
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_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",
|
||||
type: "platform",
|
||||
description: "Building interactive user interfaces with modern React patterns and hooks.",
|
||||
image: "https://cdn.jsdelivr.net/gh/devicons/devicon/icons/react/react-original.svg",
|
||||
description:
|
||||
"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",
|
||||
type: "platform",
|
||||
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",
|
||||
type: "service",
|
||||
description: "Containerizing applications for consistent deployment across environments.",
|
||||
image: "https://cdn.jsdelivr.net/gh/devicons/devicon/icons/docker/docker-original.svg",
|
||||
description:
|
||||
"Containerizing applications for consistent deployment across environments.",
|
||||
image:
|
||||
"https://cdn.jsdelivr.net/gh/devicons/devicon/icons/docker/docker-original.svg",
|
||||
},
|
||||
{
|
||||
name: "PostgreSQL",
|
||||
type: "service",
|
||||
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",
|
||||
type: "service",
|
||||
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",
|
||||
type: "service",
|
||||
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",
|
||||
type: "service",
|
||||
description: "Configuring and managing reverse proxies for web applications.",
|
||||
description:
|
||||
"Configuring and managing reverse proxies for web applications.",
|
||||
},
|
||||
{
|
||||
name: "Home Assistant",
|
||||
type: "platform",
|
||||
description: "Building smart home automations and integrating various IoT devices.",
|
||||
image: "https://cdn.jsdelivr.net/gh/walkxcode/dashboard-icons/png/home-assistant.png",
|
||||
description:
|
||||
"Building smart home automations and integrating various IoT devices.",
|
||||
image:
|
||||
"https://cdn.jsdelivr.net/gh/walkxcode/dashboard-icons/png/home-assistant.png",
|
||||
},
|
||||
{
|
||||
name: "ESPHome",
|
||||
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",
|
||||
},
|
||||
{
|
||||
name: "Troubleshooting Hardware",
|
||||
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",
|
||||
type: "platform",
|
||||
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",
|
||||
type: "platform",
|
||||
description: "Self-hosted photo and video management solution.",
|
||||
image: "https://avatars.githubusercontent.com/u/109746326?v=4",
|
||||
learned_because: "I hate OneDrive"
|
||||
learned_because: "I hate OneDrive",
|
||||
},
|
||||
{
|
||||
name: "Pangolin",
|
||||
type: "platform",
|
||||
description: "Proxy solution for network management.",
|
||||
image: "https://cdn.jsdelivr.net/gh/homarr-labs/dashboard-icons/svg/pangolin.svg",
|
||||
learned_because: "My old proxy did NOT work super well with authentication."
|
||||
image:
|
||||
"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",
|
||||
type: "platform",
|
||||
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",
|
||||
type: "platform",
|
||||
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",
|
||||
type: "platform",
|
||||
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",
|
||||
type: "platform",
|
||||
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",
|
||||
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",
|
||||
type: "service",
|
||||
description: "Version control for collaborative development and open-source contributions.",
|
||||
image: "https://cdn.jsdelivr.net/gh/devicons/devicon/icons/git/git-original.svg",
|
||||
description:
|
||||
"Version control for collaborative development and open-source contributions.",
|
||||
image:
|
||||
"https://cdn.jsdelivr.net/gh/devicons/devicon/icons/git/git-original.svg",
|
||||
},
|
||||
{
|
||||
name: "ShareX",
|
||||
type: "platform",
|
||||
description: "Custom uploaders and automation workflows for screenshots and file sharing.",
|
||||
image: "https://upload.wikimedia.org/wikipedia/commons/d/d1/ShareX_Logo.png",
|
||||
description:
|
||||
"Custom uploaders and automation workflows for screenshots and file sharing.",
|
||||
image:
|
||||
"https://upload.wikimedia.org/wikipedia/commons/d/d1/ShareX_Logo.png",
|
||||
},
|
||||
{
|
||||
name: "Zipline",
|
||||
@@ -1309,29 +1403,34 @@ const experiences: Experience[] = [
|
||||
name: "Tailwind CSS",
|
||||
type: "platform",
|
||||
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",
|
||||
type: "platform",
|
||||
description: "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",
|
||||
description:
|
||||
"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",
|
||||
type: "service",
|
||||
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_at: "09.01.2026"
|
||||
learned_at: "09.01.2026",
|
||||
},
|
||||
{
|
||||
name: "Insomnia",
|
||||
type: "platform",
|
||||
description: "REST API client for testing and debugging HTTP requests.",
|
||||
image: "https://s3.amazonaws.com/s3.roaringapps.com/assets/icons/1561251841927-Insomnia.png",
|
||||
learned_because: "Postman is bloatware"
|
||||
}
|
||||
image:
|
||||
"https://s3.amazonaws.com/s3.roaringapps.com/assets/icons/1561251841927-Insomnia.png",
|
||||
learned_because: "Postman is bloatware",
|
||||
},
|
||||
];
|
||||
|
||||
export default App;
|
||||
|
||||
Reference in New Issue
Block a user