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/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