copilot. Split into components
This commit is contained in:
Space-Banane
@@ -0,0 +1,32 @@
|
||||
export function About() {
|
||||
return (
|
||||
<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">
|
||||
Who?
|
||||
</h2>
|
||||
<p className="text-gray-400 max-w-2xl mx-auto">
|
||||
A bit about me, my background, and how I got into programming.
|
||||
</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 Developer from Germany. I love doing full-stack web
|
||||
development, tinkering with hardware, and 3D printing stuff i find quite fancy.
|
||||
</p>
|
||||
<p className="leading-relaxed">
|
||||
I focus on building projects that i need, and that don't
|
||||
already exist. Or break the ones that do exist, to see how they work and learn from them.
|
||||
</p>
|
||||
<p className="leading-relaxed">
|
||||
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.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,30 @@
|
||||
export function Contact() {
|
||||
return (
|
||||
<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">
|
||||
Want to talk?
|
||||
</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">
|
||||
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>
|
||||
<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"
|
||||
>
|
||||
Shoot me an 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"
|
||||
>
|
||||
Chat on Discord
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,39 @@
|
||||
export function Footer() {
|
||||
return (
|
||||
<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>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,75 @@
|
||||
export function Goals() {
|
||||
return (
|
||||
<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">Next 4 Years are going to look fun</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">
|
||||
Testing before Breaking
|
||||
</h3>
|
||||
<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>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,112 @@
|
||||
export function Hero({
|
||||
glowColor,
|
||||
borderStatus,
|
||||
displayMessage,
|
||||
rotatingMessages,
|
||||
statusMessage,
|
||||
showOldNames,
|
||||
setShowOldNames,
|
||||
oldUsernames,
|
||||
}: {
|
||||
glowColor: string;
|
||||
borderStatus: string;
|
||||
displayMessage: string;
|
||||
rotatingMessages: string[];
|
||||
statusMessage: string;
|
||||
showOldNames: boolean;
|
||||
setShowOldNames: (show: boolean) => void;
|
||||
oldUsernames: string[];
|
||||
}) {
|
||||
return (
|
||||
<section className="flex flex-col items-center text-center space-y-8 animate-fade-in">
|
||||
<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>
|
||||
|
||||
{/* Name & Description */}
|
||||
<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 work.
|
||||
</p>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,44 @@
|
||||
export function InternshipSection() {
|
||||
return (
|
||||
<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>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user