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

Codex tried to make the site more responsive on mobile
Build Check / build (push) Successful in 48s
Details
Build Check / push-image (push) Successful in 2m43s
Details
Build Check / deploy-coolify (push) Successful in 7s
Details

Browse Source
This commit is contained in:
Space-Banane
2026-06-03 15:58:29 +02:00
parent 40526e115e
commit aebeed3964
19 changed files with 130 additions and 131 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/sections/Activity.tsx
+4 -4
View File
@@ -22,12 +22,12 @@ export function Activity() {
}, []);
return (
<section className="w-full max-w-6xl mx-auto space-y-8 px-4">
<section className="w-full max-w-6xl mx-auto space-y-6 px-4 sm:space-y-8">
<div className="text-center space-y-4">
<h2 className="text-3xl font-bold text-transparent bg-clip-text bg-gradient-to-r from-blue-400 to-purple-500">
<h2 className="text-2xl font-bold text-transparent bg-clip-text bg-gradient-to-r from-blue-400 to-purple-500 sm:text-3xl">
Code Activity
</h2>
<p className="text-gray-400 max-w-2xl mx-auto">
<p className="mx-auto max-w-2xl text-sm text-gray-400 sm:text-base">
Today, i've already been coding for
<span className="font-mono text-base text-green-400 ml-1">
{dailyActivity || "..."}
@@ -40,7 +40,7 @@ export function Activity() {
</p>
</div>
<div className="max-w-5xl mx-auto rounded-3xl border border-white/10 bg-white/5 backdrop-blur-sm p-4 md:p-6 shadow-[0_20px_80px_rgba(0,0,0,0.35)]">
<div className="mx-auto max-w-5xl rounded-3xl border border-white/10 bg-white/5 p-3 shadow-[0_20px_80px_rgba(0,0,0,0.35)] backdrop-blur-sm sm:p-4 md:p-6">
<div className="overflow-hidden rounded-2xl border border-white/10 bg-[#0a0a12]">
<img
src={activitySvg}
src/sections/Affiliates.tsx
+5 -5
View File
@@ -33,24 +33,24 @@ const affiliates: Affiliate[] = [
export function Affiliates() {
return (
<section className="w-full max-w-5xl mx-auto space-y-8 px-4">
<section className="w-full max-w-5xl mx-auto space-y-6 px-4 sm:space-y-8">
<div className="text-center space-y-4">
<h2 className="text-3xl font-bold text-transparent bg-clip-text bg-gradient-to-r from-blue-400 to-purple-500">
<h2 className="text-2xl font-bold text-transparent bg-clip-text bg-gradient-to-r from-blue-400 to-purple-500 sm:text-3xl">
Affiliates
</h2>
<p className="text-gray-400 max-w-2xl mx-auto">
<p className="mx-auto max-w-2xl text-sm text-gray-400 sm:text-base">
Looking for hosting? I recommend checking out Datalix!
</p>
</div>
<div className="grid grid-cols-1 md:grid-cols-2 gap-5">
<div className="grid grid-cols-1 gap-4 md:grid-cols-2 sm:gap-5">
{affiliates.map((affiliate) => (
<a
key={affiliate.name}
href={affiliate.link}
target="_blank"
rel="noopener noreferrer"
className="rounded-xl border border-white/10 bg-white/5 backdrop-blur-sm p-4 hover:bg-white/10 hover:border-purple-500/40 transition-all duration-300"
className="mx-auto w-full max-w-[20rem] rounded-xl border border-white/10 bg-white/5 p-4 backdrop-blur-sm transition-all duration-300 hover:border-purple-500/40 hover:bg-white/10 sm:max-w-none sm:p-4"
>
<div className="flex flex-col items-center text-center gap-2 mb-3">
<img
src/sections/AgentSkills.tsx
+9 -9
View File
@@ -6,28 +6,28 @@ export function AgentSkills() {
const { skills } = useProfile();
return (
<section className="w-full max-w-6xl mx-auto px-4 space-y-8">
<section className="w-full max-w-6xl mx-auto px-4 space-y-6 sm:space-y-8">
<div className="text-center space-y-3">
<h2 className="text-4xl font-bold leading-tight text-transparent bg-clip-text bg-gradient-to-r from-amber-400 to-orange-500">
<h2 className="text-3xl font-bold leading-tight text-transparent bg-clip-text bg-gradient-to-r from-amber-400 to-orange-500 sm:text-4xl">
Agent Skills
</h2>
<p className="text-gray-400 max-w-2xl mx-auto">
<p className="mx-auto max-w-2xl text-sm text-gray-400 sm:text-base">
Skills i throw at my Agents to help them solve my prompts.
</p>
</div>
{skills.length === 0 ? (
<div className="rounded-3xl border border-white/10 bg-white/5 px-6 py-10 text-center text-gray-400">
<div className="rounded-3xl border border-white/10 bg-white/5 px-5 py-8 text-center text-gray-400 sm:px-6 sm:py-10">
No agent skills published yet.
</div>
) : (
<div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
<div className="grid grid-cols-1 gap-5 lg:grid-cols-2 sm:gap-6">
{skills.map((skill, index) => (
<article
key={`${skill.name}-${index}`}
className="group rounded-3xl border border-amber-500/20 bg-gradient-to-br from-amber-500/10 via-white/5 to-orange-500/5 p-6 md:p-7 shadow-[0_0_0_1px_rgba(245,158,11,0.08)] backdrop-blur-sm transition-all duration-300 hover:border-amber-500/40"
className="group mx-auto w-full max-w-[20rem] rounded-3xl border border-amber-500/20 bg-gradient-to-br from-amber-500/10 via-white/5 to-orange-500/5 p-5 shadow-[0_0_0_1px_rgba(245,158,11,0.08)] backdrop-blur-sm transition-all duration-300 hover:border-amber-500/40 sm:max-w-none sm:p-6 md:p-7"
>
<div className="flex flex-wrap items-start justify-between gap-4">
<div className="flex flex-col gap-4 sm:flex-row sm:flex-wrap sm:items-start sm:justify-between">
<div className="space-y-2">
<div className="flex flex-wrap gap-2">
{(skill.emojis || []).map((emoji, emojiIndex) => (
@@ -40,7 +40,7 @@ export function AgentSkills() {
</span>
))}
</div>
<h3 className="text-2xl font-semibold text-white">{skill.name}</h3>
<h3 className="text-xl font-semibold text-white sm:text-2xl">{skill.name}</h3>
</div>
{skill.link ? (
@@ -48,7 +48,7 @@ export function AgentSkills() {
href={skill.link}
target="_blank"
rel="noreferrer"
className="inline-flex items-center rounded-full border border-amber-400/30 bg-amber-400/10 px-4 py-2 text-xs font-semibold text-amber-100 transition-colors hover:bg-amber-400/20"
className="inline-flex items-center justify-center rounded-full border border-amber-400/30 bg-amber-400/10 px-4 py-2 text-xs font-semibold text-amber-100 transition-colors hover:bg-amber-400/20 sm:self-start"
>
Open Link
</a>
src/sections/Contact.tsx
+7 -7
View File
@@ -2,18 +2,18 @@
export function Contact() {
return (
<section className="w-full max-w-2xl text-center space-y-4 pb-8 mx-auto">
<h2 className="text-3xl font-bold text-transparent bg-clip-text bg-gradient-to-r from-green-400 via-blue-500 to-purple-500">
<section className="mx-auto w-full max-w-[20rem] space-y-4 pb-8 text-center sm:max-w-2xl">
<h2 className="text-2xl font-bold text-transparent bg-clip-text bg-gradient-to-r from-green-400 via-blue-500 to-purple-500 sm:text-3xl">
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">
<div className="rounded-3xl border border-blue-500/20 bg-gradient-to-br from-blue-500/10 via-purple-500/10 to-pink-500/10 p-5 backdrop-blur-md sm:p-8">
<p className="mb-6 text-sm text-gray-300 sm:mb-8 sm: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">
<div className="flex flex-col justify-center gap-3 sm:flex-row sm:gap-4">
<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"
className="rounded-full bg-gradient-to-r from-white to-gray-100 px-6 py-3 font-bold text-black transition-all shadow-lg shadow-white/20 hover:from-gray-100 hover:to-white hover:shadow-white/30"
>
Shoot me an Email
</a>
@@ -21,7 +21,7 @@ export function Contact() {
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"
className="rounded-full bg-gradient-to-r from-[#5865F2] to-[#4752C4] px-6 py-3 font-bold text-white transition-all shadow-lg shadow-[#5865F2]/30 hover:from-[#4752C4] hover:to-[#5865F2] hover:shadow-[#5865F2]/50"
>
Chat on Discord
</a>
src/sections/Hero.tsx
+11 -12
View File
@@ -60,7 +60,7 @@ export function Hero({
return (
<section
className="mt-20 flex flex-col items-center text-center space-y-8 animate-fade-in"
className="mt-16 flex flex-col items-center text-center space-y-6 px-4 sm:mt-20 sm:space-y-8 animate-fade-in"
data-old-usernames={oldUsernames.join(",")}
>
<div className="relative group" onMouseMove={handleMouseMove}>
@@ -69,17 +69,17 @@ export function Hero({
style={{ backgroundColor: glowColor }}
></div>
<div
className={`relative w-48 h-48 rounded-full border-4 transition-colors duration-500 overflow-hidden ${borderStatus} bg-black`}
className={`relative h-32 w-32 overflow-hidden rounded-full border-4 bg-black transition-colors duration-500 sm:h-48 sm:w-48 ${borderStatus}`}
>
<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"
className="h-full w-full scale-110 object-cover 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="absolute -left-4 top-4 hidden -translate-x-full md:block">
<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>
@@ -92,7 +92,7 @@ export function Hero({
</div>
{/* Status Bubble (Right Side) */}
<div className="absolute -right-4 top-8 translate-x-full">
<div className="absolute -right-4 top-8 hidden translate-x-full md:block">
<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>
@@ -115,7 +115,7 @@ export function Hero({
{/* Name & Description */}
<div className="space-y-4 max-w-2xl">
<h1 className="text-6xl md:text-7xl font-extrabold">
<h1 className="text-4xl font-extrabold leading-tight sm:text-5xl md:text-7xl">
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 px-2"
@@ -124,7 +124,7 @@ export function Hero({
Space²
</span>
</h1>
<p className="text-2xl text-gray-400 font-light">
<p className="text-base font-light text-gray-400 sm:text-xl md:text-2xl">
A{" "}
<span className="line-through decoration-purple-500/50 decoration-2">
Self-proclaimed
@@ -134,13 +134,12 @@ export function Hero({
{/* Luna AI Profile Link */}
<div className="pt-4 flex justify-center">
<div className="flex items-center gap-3">
<div className="flex flex-wrap items-center justify-center gap-3">
<a
href="https://luna.spaceistyping.com"
target="_blank"
rel="noopener noreferrer"
className="group relative flex items-center gap-3 px-6 py-2.5 rounded-full bg-white/5 border border-white/10 hover:bg-white/10 hover:border-purple-500/50 transition-all duration-300 shadow-lg hover:shadow-purple-500/10"
className="group relative flex w-full items-center justify-center gap-3 rounded-full border border-white/10 bg-white/5 px-5 py-2.5 text-center shadow-lg transition-all duration-300 hover:border-purple-500/50 hover:bg-white/10 hover:shadow-purple-500/10 sm:w-auto"
>
<div className="w-3 h-3 rounded-full bg-purple-500" />
<span className="text-sm font-medium text-gray-300 group-hover:text-white transition-colors">
@@ -152,7 +151,7 @@ export function Hero({
href="https://github.com/Space-Banane"
target="_blank"
rel="noopener noreferrer"
className="group relative flex items-center gap-2 px-4 py-2 rounded-full bg-white/5 border border-white/10 hover:bg-white/10 hover:border-gray-400 transition-all duration-300 shadow-sm"
className="group relative flex items-center gap-2 rounded-full border border-white/10 bg-white/5 px-4 py-2 shadow-sm transition-all duration-300 hover:border-gray-400 hover:bg-white/10"
aria-label="GitHub"
>
<svg className="w-6 h-6 text-gray-300 group-hover:text-white" viewBox="0 0 24 24" fill="currentColor" aria-hidden>
@@ -164,7 +163,7 @@ export function Hero({
href="https://gitea.reversed.dev/space"
target="_blank"
rel="noopener noreferrer"
className="group relative flex items-center gap-2 px-4 py-2 rounded-full bg-white/5 border border-white/10 hover:bg-white/10 hover:border-yellow-400 transition-all duration-300 shadow-sm"
className="group relative flex items-center gap-2 rounded-full border border-white/10 bg-white/5 px-4 py-2 shadow-sm transition-all duration-300 hover:border-yellow-400 hover:bg-white/10"
aria-label="Gitea"
>
<img
src/sections/SkillsExperience.tsx
+5 -5
View File
@@ -28,22 +28,22 @@ export function SkillsExperience({
);
return (
<section className="w-full max-w-6xl mx-auto space-y-12 px-4 pb-20">
<section className="w-full max-w-6xl mx-auto space-y-8 px-4 pb-20 sm:space-y-12">
<div className="text-center space-y-4">
<h2 className="text-3xl font-bold text-transparent bg-clip-text bg-gradient-to-r from-blue-400 to-purple-500">
<h2 className="text-2xl font-bold text-transparent bg-clip-text bg-gradient-to-r from-blue-400 to-purple-500 sm:text-3xl">
Skills & Experience
</h2>
<p className="text-gray-400">
<p className="text-sm text-gray-400 sm:text-base">
<span className="text-red-400">
THIS IS MISSING A LOT OF THINGS, BE AWARE
</span>{" "}
- Things I've worked with over the years.
</p>
</div>
<div className="grid grid-cols-1 md:grid-cols-2 gap-12">
<div className="grid grid-cols-1 gap-8 md:grid-cols-2 sm:gap-12">
{Object.entries(groupedExperiences).map(([type, items]) => (
<div key={type} className="space-y-6">
<h3 className="text-xl font-semibold border-l-4 border-blue-500 pl-4 capitalize">
<h3 className="border-l-4 border-blue-500 pl-4 text-lg font-semibold capitalize sm:text-xl">
{type}
</h3>
<div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
src/sections/TechStack.tsx
+6 -6
View File
@@ -57,12 +57,12 @@ export function TechStack() {
if (!ENABLE_TECH_STACK) {
// Disabled
return (
<section className="w-full max-w-4xl mx-auto px-4 space-y-12 mt-16 mb-24">
<section className="w-full max-w-4xl mx-auto px-4 space-y-10 mt-16 mb-24">
<div className="text-center space-y-3">
<h2 className="text-4xl font-bold text-transparent bg-clip-text bg-gradient-to-r from-cyan-400 to-blue-500">
<h2 className="text-3xl font-bold text-transparent bg-clip-text bg-gradient-to-r from-cyan-400 to-blue-500 sm:text-4xl">
Tech Stack
</h2>
<p className="text-gray-400 max-w-2xl mx-auto text-sm md:text-base">
<p className="mx-auto max-w-2xl text-sm text-gray-400 md:text-base">
This section is currently disabled. It may be re-enabled in the future, but for now, it's hidden.
</p>
</div>
@@ -70,12 +70,12 @@ export function TechStack() {
)
}
return (
<section className="w-full max-w-4xl mx-auto px-4 space-y-12 mt-16 mb-24">
<section className="w-full max-w-4xl mx-auto px-4 space-y-10 mt-16 mb-24">
<div className="text-center space-y-3">
<h2 className="text-4xl font-bold text-transparent bg-clip-text bg-gradient-to-r from-cyan-400 to-blue-500">
<h2 className="text-3xl font-bold text-transparent bg-clip-text bg-gradient-to-r from-cyan-400 to-blue-500 sm:text-4xl">
Tech Stack
</h2>
<p className="text-gray-400 max-w-2xl mx-auto text-sm md:text-base">
<p className="mx-auto max-w-2xl text-sm text-gray-400 md:text-base">
A overview of the tools and technologies I use to build and host my applications.
</p>
</div>
src/sections/Uptime.tsx
+10 -10
View File
@@ -2,32 +2,32 @@
export function Uptime() {
return (
<section className="w-full max-w-6xl mx-auto space-y-10 px-4">
<section className="w-full max-w-6xl mx-auto space-y-8 px-4 sm:space-y-10">
<div className="text-center space-y-4">
<h2 className="text-3xl font-bold text-transparent bg-clip-text bg-gradient-to-r from-blue-400 to-purple-500">
<h2 className="text-2xl font-bold text-transparent bg-clip-text bg-gradient-to-r from-blue-400 to-purple-500 sm:text-3xl">
Downtime
</h2>
<p className="text-gray-400 max-w-2xl mx-auto">
<p className="mx-auto max-w-2xl text-sm text-gray-400 sm:text-base">
I love selfhosting stuff, can you tell?
</p>
</div>
<div className="max-w-3xl mx-auto">
<div className="p-6 rounded-2xl bg-gradient-to-br from-gray-800/20 to-transparent backdrop-blur-sm border border-white/6">
<h3 className="text-2xl font-semibold text-white mb-4 text-center">
<div className="mx-auto max-w-3xl">
<div className="mx-auto w-full max-w-[20rem] rounded-2xl border border-white/6 bg-gradient-to-br from-gray-800/20 to-transparent p-5 backdrop-blur-sm sm:max-w-none sm:p-6">
<h3 className="mb-4 text-center text-xl font-semibold text-white sm:text-2xl">
Github vs HomeLab Uptime
</h3>
<div className="flex gap-6 items-center justify-between">
<div className="flex flex-col items-center justify-between gap-6 sm:flex-row">
<div className="flex-1 text-center">
<img src="/gh_down.png" alt="GitHub downtime" className="mx-auto h-28 object-contain" />
<img src="/gh_down.png" alt="GitHub downtime" className="mx-auto h-24 object-contain sm:h-28" />
<h4 className="mt-3 font-medium text-white">GitHub</h4>
<p className="text-gray-400 mt-1">Goes down more.</p>
</div>
<div className="w-px h-24 bg-white/6" />
<div className="h-px w-24 bg-white/6 sm:h-24 sm:w-px" />
<div className="flex-1 text-center">
<img src="/homelab_down.png" alt="HomeLab" className="mx-auto h-28 object-contain" />
<img src="/homelab_down.png" alt="HomeLab" className="mx-auto h-24 object-contain sm:h-28" />
<h4 className="mt-3 font-medium text-white">HomeLab</h4>
<p className="text-gray-400 mt-1">Goes down less.</p>
</div>
src/sections/WorkExperience.tsx
+7 -7
View File
@@ -51,18 +51,18 @@ export function WorkExperience({ realWork }: WorkExperienceProps) {
);
return (
<section className="w-full max-w-4xl mx-auto px-4 space-y-8">
<section className="w-full max-w-4xl mx-auto px-4 space-y-6 sm: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">
<h2 className="text-2xl font-bold text-transparent bg-clip-text bg-gradient-to-r from-cyan-400 to-blue-500 sm:text-3xl">
Work Experience
</h2>
<p className="text-gray-400 max-w-2xl mx-auto">
<p className="mx-auto max-w-2xl text-sm text-gray-400 sm:text-base">
Actual work that i did at actual companies.
</p>
</div>
{realWork.length === 0 ? (
<div className="p-6 md:p-8 rounded-2xl bg-gradient-to-br from-cyan-500/10 to-blue-500/5 backdrop-blur-sm border border-cyan-500/20 text-center">
<div className="rounded-2xl border border-cyan-500/20 bg-gradient-to-br from-cyan-500/10 to-blue-500/5 p-5 text-center backdrop-blur-sm sm:p-6 md:p-8">
<p className="text-gray-300">No work experience entries available yet.</p>
</div>
) : (
@@ -70,11 +70,11 @@ export function WorkExperience({ realWork }: WorkExperienceProps) {
{sortedRealWork.map((entry, index) => (
<div
key={`${entry.company}-${index}`}
className="p-6 md:p-8 rounded-2xl bg-gradient-to-br from-cyan-500/10 to-blue-500/5 backdrop-blur-sm border border-cyan-500/20 space-y-5"
className="mx-auto w-full max-w-[20rem] space-y-4 rounded-2xl border border-cyan-500/20 bg-gradient-to-br from-cyan-500/10 to-blue-500/5 p-5 backdrop-blur-sm sm:max-w-none sm:space-y-5 sm:p-6 md:p-8"
>
<div className="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-2">
<div className="flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between sm:gap-2">
<div>
<h3 className="text-2xl font-semibold text-white">{entry.company}</h3>
<h3 className="text-xl font-semibold text-white sm:text-2xl">{entry.company}</h3>
{entry.role ? (
<p className="text-sm font-medium text-cyan-200/90 mt-1">{entry.role}</p>
) : null}