Refactor Index component for improved personal descriptions and visual consistency

app/routes/_index.tsx

@@ -97,27 +97,24 @@ export default function Index() {
 							className="text-5xl md:text-6xl font-bold bg-gradient-to-r from-blue-400 to-purple-500 bg-clip-text text-transparent"
 							style={{ lineHeight: "normal" }}
 						>
-							Hey, I'm Paul
+							Hey, I'm Paul!
 						</h1>
 						<h2 className="text-3xl md:text-4xl text-gray-400">
 							also known as{" "}
-							<span className="font-bold text-gray-200">Space</span> online
+							<span className="font-semibold text-gray-200">Space</span> online
 						</h2>
 					</div>
 					<div
 						className={`w-48 h-48 mx-auto overflow-hidden rounded-full border-4 transition-colors duration-300 ${border_status}`}
 					>
 						<img
-							src="https://cdn.reversed.dev/pictures/cat.png"
+							src="https://cdn.reversed.dev/pictures/20250405_120402.png"
 							alt="Paul W"
-							className="w-full h-full object-cover"
+							className="object-cover rounded-full shadow-lg scale-125"
 						/>
 					</div>
-					<div className="space-y-3">
-						<span className="px-4 py-2 text-lg bg-blue-900/50 text-blue-100 rounded-full inline-block backdrop-blur-sm">
-							Developer & Gamer
-						</span>
-						<p className="text-xl text-gray-300">Self-proclaimed Dev</p>
+					<div>
+						<p className="text-2xl text-gray-300">Self-proclaimed Developer</p>
 					</div>
 				</div>
 
@@ -147,20 +144,24 @@ export default function Index() {
 							</p>
 							<div className="bg-white/5 p-6 rounded-lg backdrop-blur-sm">
 								<h3 className="text-xl font-bold text-gray-100 mb-4 bg-gradient-to-r from-blue-400 to-purple-400 bg-clip-text text-transparent">
-									Fun Facts About Me
+									Something most companies have on me
 								</h3>
-								<div className="grid grid-cols-2 gap-4">
+								<div className="grid grid-cols-4 gap-4">
 									<div className="flex items-center gap-3 text-gray-300 hover:text-blue-400 transition-colors">
-										<span className="text-2xl">🚲</span>
-										<span>Avid Cyclist</span>
+										<span className="text-2xl">🤓</span>
+										<span>Nerd</span>
 									</div>
 									<div className="flex items-center gap-3 text-gray-300 hover:text-blue-400 transition-colors">
 										<span className="text-2xl">🎮</span>
-										<span>Gaming Enthusiast</span>
+										<span>Gamer</span>
 									</div>
 									<div className="flex items-center gap-3 text-gray-300 hover:text-blue-400 transition-colors">
 										<span className="text-2xl">🛠️</span>
-										<span>Builder at Heart</span>
+										<span>Developer</span>
+									</div>
+									<div className="flex items-center gap-3 text-gray-300 hover:text-blue-400 transition-colors">
+										<span className="text-2xl">👥</span>
+										<span>Introvert</span>
 									</div>
 								</div>
 							</div>
@@ -245,7 +246,7 @@ export default function Index() {
 						className="text-3xl font-bold mb-8 text-center text-gray-100 bg-gradient-to-r from-blue-500 to-purple-500 bg-clip-text text-transparent"
 						style={{ lineHeight: "normal" }}
 					>
-						My Dawg
+						Ma Dawg
 					</h2>
 					<div className="p-4 sm:p-8 rounded-xl border border-gray-700 bg-white/5 backdrop-blur-lg flex flex-col gap-8 items-center">
 						<div className="flex-1 space-y-6 w-full">
@@ -255,7 +256,7 @@ export default function Index() {
 								className="w-full h-64 sm:h-96 object-cover rounded-lg shadow-lg"
 							/>
 							<p className="text-gray-300 text-base sm:text-lg leading-relaxed">
-								This is Charly🙏 This lil guy is about{" "}
+								This is Charly🙏 This lil fella is about{" "}
 								<span className="italic">13</span> Years old. Very mixed.
 							</p>
 							<div className="bg-white/5 p-4 sm:p-6 rounded-lg backdrop-blur-sm">
@@ -277,7 +278,7 @@ export default function Index() {
 									</div>
 									<div className="flex items-center gap-3 text-gray-300 hover:text-blue-400 transition-colors">
 										<span className="text-2xl">🐕</span>
-										<span>Is a Dog (probably)</span>
+										<span>Is a Dog (debatable)</span>
 									</div>
 								</div>
 							</div>
@@ -287,9 +288,12 @@ export default function Index() {
 
 				{/* Projects Section */}
 				<section className="w-full">
-					<h2 className="text-3xl font-bold mb-8 text-gray-100 bg-gradient-to-r from-blue-500 to-purple-500 bg-clip-text text-transparent">
+					<h2 className="text-3xl font-bold text-gray-100 bg-gradient-to-r from-blue-500 to-purple-500 bg-clip-text text-transparent">
 						Projects
 					</h2>
+					<p className="text-gray-300 text-lg mb-4 text-left">
+						Here are some of my projects. Some are open-source, some are not.
+					</p>
 					<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6 sm:gap-8 text-center">
 						{projects.map((project, index) => (
 							<div
@@ -392,7 +396,7 @@ export default function Index() {
 
 				{/* Contact */}
 				<section className="w-full">
-					<h2 className="text-3xl font-bold mb-8 text-center text-gray-100 bg-gradient-to-r from-blue-500 to-purple-500 bg-clip-text text-transparent">
+					<h2 className="text-3xl font-bold mb-2 text-center text-gray-100 bg-gradient-to-r from-blue-500 to-purple-500 bg-clip-text text-transparent">
 						Contact
 					</h2>
 					<div
@@ -427,11 +431,11 @@ export default function Index() {
 
 				{/* My "Skills" */}
 				<section className="w-full">
-					<h2 className="text-3xl font-bold mb-8 text-center text-gray-100 bg-gradient-to-r from-blue-500 to-purple-500 bg-clip-text text-transparent">
+					<h2 className="text-3xl font-bold mb-2 text-center text-gray-100 bg-gradient-to-r from-blue-500 to-purple-500 bg-clip-text text-transparent">
 						Skills
 					</h2>
-					<p className="text-gray-300 text-lg mb-4 text-center">
-						Skills? Whats that? Never heard of it🤔
+					<p className="text-gray-300 text-lg mb-2 text-center">
+						Skills? What dat❗❓
 					</p>
 					<div
 						className="p-6 rounded-xl border border-gray-700 bg-white/5 backdrop-blur-lg 
@@ -461,7 +465,7 @@ export default function Index() {
 
 				{/* What's Next Section */}
 				<section className="w-full">
-					<h2 className="text-3xl font-bold mb-8 text-center text-gray-100 bg-gradient-to-r from-blue-500 to-purple-500 bg-clip-text text-transparent">
+					<h2 className="text-3xl font-bold mb-2 text-center text-gray-100 bg-gradient-to-r from-blue-500 to-purple-500 bg-clip-text text-transparent">
 						What's Next?
 					</h2>
 					<div
@@ -494,40 +498,37 @@ const skills: {
 	{
 		name: "JavaScript",
 		description:
-			"I'm a JavaScript Developer with a lot of experience in JS. I love to build things with JS. Js my beloved♥️",
+			"I'm a JavaScript Developer with a lot of experience in breaking packages. Js is shit and the learning curve is REALLY easy. Love it♥️",
 		image: "https://cdn.reversed.dev/pictures/languages/js_logo.png",
 	},
 	{
 		name: "Vue.JS",
-		description:
-			"I have not much experience with Vue.js, but i its fun to play around with.",
+		description:"Not much experience but its fine",
 		image: "https://cdn.reversed.dev/pictures/languages/vue.png",
 	},
 	{
 		name: "Node.js",
-		description:
-			"Node.js is my go-to Framework for Backend Development. I love to build things with Node.js.",
+		description:"Node on the server is NOT that bad❗",
 		image: "https://cdn.reversed.dev/pictures/languages/nodejs.jpg",
 	},
 	{
 		name: "TailwindCSS",
-		description: "TailwindCSS is my go-to CSS Framework. TailwindCss 🙏🙏🙏",
+		description: "Tailwind my beloved. All screens, crazy responsive design♥️",
 		image: "https://cdn.reversed.dev/pictures/languages/tailwind.png",
 	},
 	{
 		name: "TypeScript",
-		description:
-			"TypeScript is my go-to Language for larger Projects with type-safety. Typescript 🔥",
+		description:"Love it, broke it wayy to many times. 1k Compiler errors incoming",
 		image: "https://cdn.reversed.dev/pictures/languages/ts.png",
 	},
 	{
 		name: "Docker",
-		description: "Docker is the best Containerization Tool imo. ",
+		description: "As i have found out, deploying isn't that hard...",
 		image: "https://cdn.reversed.dev/pictures/languages/docker.png",
 	},
 	{
 		name: "HTML",
-		description: "HTML is the language of the Web. I dont need to say more.",
+		description: "Yes",
 		image:
 			"https://imagedelivery.net/5MYSbk45M80qAwecrlKzdQ/51703b85-ef3f-4d45-fae0-c39d4c733900/preview",
 	},
@@ -550,19 +551,12 @@ const projects: {
 		link: "https://betternews.app",
 	},
 	{
-		name: "Reversed.Dev",
+		name: "SHSF",
 		description:
-			"An upcomming 'Dev Studio' with a lot of cool Projects. Stay tuned!",
-		image: "https://cdn.reversed.dev/pictures/icon.png",
-		open_source: false,
-		link: "https://reversed.dev",
-	},
-	{
-		name: "Luna",
-		description: "Luna is an All-In-One Discord Bot with a lot of AI features.",
-		image: "https://cdn.reversed.dev/pictures/luna/lunasmol.jpg",
-		open_source: false,
-		link: "https://luna.reversed.dev",
+			"SHSF is a very simple self hostable API & UI for selfhosting Cloudfunctions on hard ware you already own.",
+		link: "https://github.com/Space-Banane/shsf",
+		open_source: { link: "https://github.com/Space-Banane/shsf" },
+		image: "https://cdn.reversed.dev/pictures/shsf/SHSF.png",
 	},
 	{
 		name: "Whatsapp-Chat-Analyzer",
@@ -580,16 +574,6 @@ const projects: {
 		open_source: { link: "https://github.com/reversed-dev/qr-code-gen" },
 		link: "https://qr.reversed.dev",
 	},
-	{
-		name: "Tyler-The-Creator Countdown",
-		description:
-			"A simple Countdown for the next Tyler-The-Creator Album 'Chromokopia'.  Just for fun, and because i can.",
-		link: "https://tyler.reversed.dev",
-		open_source: {
-			link: "https://github.com/Space-Banane/tylerthecreatorcounter",
-		},
-		image: "https://i.scdn.co/image/ab67616d00001e02124e9249fada4ff3c3a0739c",
-	},
 	{
 		name: "Open Web UI - Memory Importer",
 		description: