Enhance layout and styling in Index component for improved visual appeal and user engagement

app/routes/_index.tsx

@@ -59,23 +59,36 @@ export default function Index() {
 				</div>
 			</div>
 
-			<div className="relative z-10 flex flex-col items-center gap-8 max-w-6xl w-full">
+			<div className="relative z-10 flex flex-col items-center gap-8 mt-12 max-w-6xl w-full">
 				{/* Hero */}
-				<div className="text-center">
+				<div className="text-center space-y-6">
-					<div className="w-56 h-56 mb-6 overflow-hidden rounded-full">
+					<div className="space-y-2">
+						<h1
+							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
+						</h1>
+						<h2 className="text-3xl md:text-4xl text-gray-400">
+							also known as{" "}
+							<span className="font-bold text-gray-200">Space</span> online
+						</h2>
+					</div>
+					<div className="w-48 h-48 mx-auto overflow-hidden rounded-full border-4 border-gray-700 hover:border-blue-500 transition-colors duration-300">
 						<img
 							src="https://cdn.reversed.dev/pictures/cat.png"
 							alt="Paul W"
 							className="w-full h-full object-cover"
 						/>
 					</div>
-					<div className="flex items-center justify-center gap-3 mb-3">
+					<div className="space-y-3">
-						<h1 className="text-6xl font-bold text-gray-100">Paul W.</h1>
+						<span className="px-4 py-2 text-lg bg-blue-900/50 text-blue-100 rounded-full inline-block backdrop-blur-sm">
-					</div>
-					<span className="px-3 py-1.5 text-base  bg-blue-900 text-blue-100 rounded-full">
 							Developer & Gamer
 						</span>
-					<p className="text-xl text-gray-300 mt-4">Woah, thats me😲</p>
+						<p className="text-xl text-gray-300">
+							Building digital experiences ✨
+						</p>
+					</div>
 				</div>
 
 				{/* About Section */}
@@ -131,9 +144,15 @@ export default function Index() {
 
 				{/* My Blog Posts */}
 				<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"
+						style={{ lineHeight: "normal" }}
+					>
 						Blog Posts
 					</h2>
+					<p className="text-gray-300 text-lg mb-4 text-center">
+						Man i love this posting thing, can't you tell?
+					</p>
 					<div
 						className="p-8 rounded-xl border border-gray-700 bg-white/5 backdrop-blur-lg
               flex flex-col md:flex-row gap-8 items-center"
@@ -196,12 +215,13 @@ export default function Index() {
 
 				{/* My Dawg */}
 				<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-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
 					</h2>
-					<div
+					<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">
-						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">
 							<img
 								src="https://cdn.reversed.dev/pictures/20250103_121234.jpg"
@@ -269,28 +289,46 @@ export default function Index() {
 								<p className=" text-gray-400 text-base mb-4">
 									{project.description}
 								</p>
-								<div className="flex flex-col sm:flex-row gap-3 justify-center">
+								<div className="flex flex-wrap justify-center gap-3 mt-4">
 									<a
-										href={
+										href={project.link + "?utm_source=portfolio&utm_medium=referral&ref=space"}
-											project.link +
-											"?utm_source=portfolio&utm_medium=referral&ref=space"
-										}
 										target="_blank"
-										className="px-6 py-2 bg-gradient-to-r from-blue-500 to-purple-500 
+										className="inline-flex items-center px-4 py-2 bg-gradient-to-r from-blue-500 to-purple-500 
-                text-white rounded-full font-medium transition-all duration-300 
+										text-white rounded-lg font-medium transition-all duration-300 
-                hover:from-blue-600 hover:to-purple-600 hover:shadow-lg"
+										hover:from-blue-600 hover:to-purple-600 hover:shadow-lg hover:scale-105"
 									>
-										Visit {project.name}
+										<span>Visit Project</span>
+										<svg className="w-4 h-4 ml-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+											<path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14" />
+										</svg>
 									</a>
+									
 									{project.open_source && (
 										<a
 											href={project.open_source.link}
 											target="_blank"
-											className="px-6 py-2 border  border-gray-600 
+											className="inline-flex items-center px-4 py-2 bg-gray-800 
-                  rounded-full font-medium transition-all duration-300 
+											text-gray-200 rounded-lg font-medium transition-all duration-300 
-                   hover:bg-gray-700"
+											hover:bg-gray-700 hover:shadow-lg hover:scale-105 border border-gray-600"
 										>
-											View Source
+											<svg className="w-4 h-4 mr-2" fill="currentColor" viewBox="0 0 24 24">
+												<path d="M12 0c-6.626 0-12 5.373-12 12 0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23.957-.266 1.983-.399 3.003-.404 1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576 4.765-1.589 8.199-6.086 8.199-11.386 0-6.627-5.373-12-12-12z"/>
+											</svg>
+											<span>Source Code</span>
+										</a>
+									)}
+									
+									{project.blog_post && (
+										<a
+											href={project.blog_post}
+											className="inline-flex items-center px-4 py-2 bg-gray-800 
+											text-gray-200 rounded-lg font-medium transition-all duration-300 
+											hover:bg-gray-700 hover:shadow-lg hover:scale-105 border border-gray-600"
+										>
+											<svg className="w-4 h-4 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+												<path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M19 20H5a2 2 0 01-2-2V6a2 2 0 012-2h10a2 2 0 012 2v1m2 13a2 2 0 01-2-2V7m2 13a2 2 0 002-2V9a2 2 0 00-2-2h-2m-4-3H9M7 16h6M7 8h6v4H7V8z" />
+											</svg>
+											<span>Read Blog</span>
 										</a>
 									)}
 								</div>
@@ -448,6 +486,7 @@ const projects: {
 	image?: string;
 	open_source: { link: string } | false;
 	link: string;
+	blog_post?: string;
 }[] = [
 	{
 		name: "BetterNews",
@@ -460,7 +499,7 @@ const projects: {
 	{
 		name: "Reversed.Dev",
 		description:
-			"An upcomming overlooking platform showing off Projects under the Reversed.Dev Brand.",
+			"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",
@@ -486,7 +525,7 @@ const projects: {
 			"A simple QR Code Generator for free. No tracking, no ads, just QR Codes. Just like we love em.",
 		image: "https://cdn.reversed.dev/pictures/qrcode.jpeg",
 		open_source: { link: "https://github.com/reversed-dev/qr-code-gen" },
-		link: "https://qrcode.reversed.dev",
+		link: "https://qr.reversed.dev",
 	},
 	{
 		name: "Tyler-The-Creator Countdown",