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

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

Browse Source
This commit is contained in:
Space
2025-01-24 16:54:13 +01:00
parent ef5a5b88fe
commit 7fd693b58a
1 changed files with 68 additions and 29 deletions
Download Patch File Download Diff File Expand all files Collapse all files

97
app/routes/_index.tsx
View File

@@ -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="w-56 h-56 mb-6 overflow-hidden rounded-full">
<div className="text-center space-y-6">
<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">
<h1 className="text-6xl font-bold text-gray-100">Paul W.</h1>
<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">
Building digital experiences ✨
</p>
</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>
</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
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="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={
project.link +
"?utm_source=portfolio&utm_medium=referral&ref=space"
}
href={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
text-white rounded-full font-medium transition-all duration-300
hover:from-blue-600 hover:to-purple-600 hover:shadow-lg"
className="inline-flex items-center px-4 py-2 bg-gradient-to-r from-blue-500 to-purple-500
text-white rounded-lg font-medium transition-all duration-300
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
rounded-full font-medium transition-all duration-300
hover:bg-gray-700"
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"
>
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",