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

Update App component: modify status message, enhance text descriptions, and add internship experience section

Browse Source
This commit is contained in:
Space-Banane
2026-02-07 13:26:07 +01:00
parent a7ff2b8cb4
commit 7379870d41
1 changed files with 74 additions and 99 deletions
Download Patch File Download Diff File Expand all files Collapse all files

173
src/App.tsx
View File

@@ -506,7 +506,7 @@ function App() {
const [status, setStatus] = useState(""); const [status, setStatus] = useState("");
const [borderStatus, setBorderStatus] = useState("border-gray-700"); const [borderStatus, setBorderStatus] = useState("border-gray-700");
const [glowColor, setGlowColor] = useState("rgba(55, 65, 81, 0.5)"); const [glowColor, setGlowColor] = useState("rgba(55, 65, 81, 0.5)");
const [statusMessage, setStatusMessage] = useState("Breaking SHSF"); const [statusMessage, setStatusMessage] = useState("[🔃🔃🔃]");
const [messageIndex, setMessageIndex] = useState(0); const [messageIndex, setMessageIndex] = useState(0);
const [displayMessage, setDisplayMessage] = useState(""); const [displayMessage, setDisplayMessage] = useState("");
const [isScrambling, setIsScrambling] = useState(false); const [isScrambling, setIsScrambling] = useState(false);
@@ -528,19 +528,20 @@ function App() {
]; ];
const rotatingMessages = [ const rotatingMessages = [
"Bricking Esp32's 🧱", "Yelling at the compiler ⁉️",
"Buy me a White Redbull⁉️",
"Testing in production 🧪",
"Shipping bug fixes 📦", "Shipping bug fixes 📦",
"Not learning Rust 🦀", "Waiting for CI ✅",
"Pushing before Copilot's Review ✅",
"Breaking SHSF 🚧",
"No debugger attached 🐞", "No debugger attached 🐞",
"Asking ChatGPT for help 🤖", "Yelling at Gemini 🤖",
"Refactoring for the 10th time 🔄", "Writing Readme files 📝",
"Writing documentation 🥹",
"Removing Comments 🧹",
"Collecting Spotify hours 🎵", "Collecting Spotify hours 🎵",
"Downloading 10 bajillion dependencies 📥",
"Fighting with package managers 📦",
"Considering nuking python from orbit 🐍",
"Why is uv so cool? 🧊",
"I'm hungry 🍔",
"I swear this worked on my machine 🖥️",
"Pulling 10GB of docker images 🐳"
]; ];
const characters = const characters =
@@ -567,7 +568,7 @@ function App() {
} else { } else {
setBorderStatus("border-gray-700"); setBorderStatus("border-gray-700");
setGlowColor("rgba(55, 65, 81, 0.5)"); setGlowColor("rgba(55, 65, 81, 0.5)");
setStatusMessage("Breaking SHSF"); setStatusMessage("[🔃🔃🔃]");
} }
}, [status]); }, [status]);
@@ -613,7 +614,7 @@ function App() {
} }
iteration += 1 / 3; iteration += 1 / 3;
}, 30); }, 25);
return () => clearInterval(scrambleInterval); return () => clearInterval(scrambleInterval);
} else { } else {
@@ -662,7 +663,7 @@ function App() {
"linear-gradient(#ffffff 1px, transparent 1px), linear-gradient(90deg, #ffffff 1px, transparent 1px)", "linear-gradient(#ffffff 1px, transparent 1px), linear-gradient(90deg, #ffffff 1px, transparent 1px)",
backgroundSize: "30px 30px", backgroundSize: "30px 30px",
maskImage: maskImage:
"radial-gradient(circle at center, black 40%, transparent 100%)", "radial-gradient(circle at center, black 40%, transparent 80%)",
}} }}
/> />
</div> </div>
@@ -717,6 +718,7 @@ function App() {
</div> </div>
</div> </div>
{/* Name & Description */}
<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{" "}
@@ -763,10 +765,10 @@ function App() {
<section className="w-full space-y-8"> <section className="w-full space-y-8">
<div className="text-center space-y-2"> <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"> <h2 className="text-3xl font-bold text-transparent bg-clip-text bg-gradient-to-r from-blue-400 to-purple-500">
About Me Who?
</h2> </h2>
<p className="text-gray-400 max-w-2xl mx-auto"> <p className="text-gray-400 max-w-2xl mx-auto">
What i do and who i am. A bit about me, my background, and how I got into programming.
</p> </p>
</div> </div>
@@ -775,85 +777,14 @@ 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'm a Developer from Germany. I love doing full-stack web I'm a Developer from Germany. I love doing full-stack web
development, tinkering with hardware, and 3D printing cool development, tinkering with hardware, and 3D printing stuff i find quite fancy.
stuff.
</p> </p>
<p className="leading-relaxed"> <p className="leading-relaxed">
I focus on building projects that i need, and that don't I focus on building projects that i need, and that don't
already exist. already exist. Or break the ones that do exist, to see how they work and learn from them.
</p>
</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 5v rated 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 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.
</p> </p>
<p className="leading-relaxed"> <p className="leading-relaxed">
I've built some Smarthome sensors myself, including a few I started programming around 2017, started of with C# in Unity, then moved to Python for a while, before settling on JavaScript/TypeScript as my main language around 2023.
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.
</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">
Plastic on a Spool -{">"} Plasic 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 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.
</p> </p>
</div> </div>
</div> </div>
@@ -866,7 +797,7 @@ 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">future things</p> <p className="text-gray-400 max-w-2xl mx-auto">Next 4 Years are going to look fun</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">
@@ -920,19 +851,20 @@ function App() {
<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="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="flex items-start gap-4">
<div className="p-3 rounded-lg bg-yellow-500/20 text-3xl"> <div className="p-3 rounded-lg bg-yellow-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">
Explore the Unknown Testing before Breaking
</h3> </h3>
<p className="text-gray-400 leading-relaxed">Rust?👀</p> <p className="text-gray-400 leading-relaxed">In the future i want to write more tests and improve my code quality.</p>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
</section> </section>
{/* Projects Section */} {/* Projects Section */}
<section className="w-full space-y-12"> <section className="w-full space-y-12">
<div className="text-center space-y-2"> <div className="text-center space-y-2">
@@ -940,7 +872,7 @@ function App() {
Favourite Projects Favourite Projects
</h2> </h2>
<p className="text-gray-400 max-w-2xl mx-auto"> <p className="text-gray-400 max-w-2xl mx-auto">
Personal Faviorite? Uhhhhh.... Personal favourites, projects that I'm proud of, or just things I find fun to show off.
</p> </p>
</div> </div>
@@ -1046,21 +978,63 @@ function App() {
</p> </p>
</section> </section>
{/* Real Life Experience (ABB Internship) */}
<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-yellow-400 to-orange-500">
Real Life Experience (ABB Internship)
</h2>
<p className="text-gray-400 max-w-2xl mx-auto">
My internship experience at ABB and what i learned from it
</p>
</div>
<div className="max-w-3xl mx-auto">
<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="space-y-4 text-gray-300">
<p className="leading-relaxed">
I did an internship at{" "}
<a
href="https://www.abb.com/global/en"
target="_blank"
rel="noreferrer"
className="text-red-500 hover:text-red-600 transition-colors font-semibold"
>
ABB {" "}
</a>
where i got to work on a project that involved internal management
software. It was a great experience that taught me a lot about
working in a professional environment and collaborating with a
team of developers.
</p>
<p className="leading-relaxed">
This was the first propper time i worked with a Framework (Angular) and it was a great learning experience. Which helped me understand why
frameworks are a thing and how they can help structure and organize codebases, especially as they grow larger.
</p>
<p className="leading-relaxed">
Also, this was the first time submitting a PR, which was scary but super rewarding when they merged it. From that point on
i was hooked on Frameworks and OSS contribution. I want to do more of both in the future.
</p>
</div>
</div>
</div>
</section>
{/* Contact Section */} {/* Contact Section */}
<section className="w-full max-w-2xl text-center space-y-4 pb-8"> <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"> <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 Want to talk?
</h2> </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"> <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"> <p className="text-gray-300 mb-8 text-lg">
Got anything on your mind? Shoot me a DM or Email. Im almost always down to talk about anything. Tech, life and whatever. Feel free to reach out to me on Discord or via Email, i usually respond pretty quickly.
</p> </p>
<div className="flex flex-col sm:flex-row gap-4 justify-center"> <div className="flex flex-col sm:flex-row gap-4 justify-center">
<a <a
href="mailto:space@reversed.dev" 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" 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 Shoot me an Email
</a> </a>
<a <a
href="https://discord.com/users/456443941169004545" href="https://discord.com/users/456443941169004545"
@@ -1068,7 +1042,7 @@ function App() {
rel="noreferrer" 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" 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 Chat on Discord
</a> </a>
</div> </div>
</div> </div>
@@ -1127,6 +1101,7 @@ function App() {
<span className="text-white/90">Projects: <span className="font-bold text-purple-400">{projects.length}</span></span> <span className="text-white/90">Projects: <span className="font-bold text-purple-400">{projects.length}</span></span>
<span className="text-white/90">Mini Projects: <span className="font-bold text-purple-400">{miniProjects.length}</span></span> <span className="text-white/90">Mini Projects: <span className="font-bold text-purple-400">{miniProjects.length}</span></span>
<span className="text-white/90">Profile Data: <span className="font-bold text-purple-400">1/1</span></span> <span className="text-white/90">Profile Data: <span className="font-bold text-purple-400">1/1</span></span>
<span className="text-white/90">Experiences: <span className="font-bold text-purple-400">{experiences.length}</span></span>
</div> </div>
</div> </div>
)} )}