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

Refactor styles in Index component for consistency and improved readability

Browse Source
This commit is contained in:
Space
2025-01-23 20:44:55 +01:00
parent 5393f6d5e8
commit 3bc31af3c0
1 changed files with 16 additions and 16 deletions
Download Patch File Download Diff File Expand all files Collapse all files

32
app/routes/_index.tsx
View File

@@ -72,7 +72,7 @@ export default function Index() {
<div className="flex items-center justify-center gap-3 mb-3"> <div className="flex items-center justify-center gap-3 mb-3">
<h1 className="text-6xl font-bold text-gray-100">Paul W.</h1> <h1 className="text-6xl font-bold text-gray-100">Paul W.</h1>
</div> </div>
<span className="px-3 py-1.5 text-base bg-blue-100 text-blue-800 dark:bg-blue-900 dark:text-blue-100 rounded-full"> <span className="px-3 py-1.5 text-base bg-blue-900 text-blue-100 rounded-full">
Developer & Gamer Developer & Gamer
</span> </span>
<p className="text-xl text-gray-300 mt-4">Woah, thats me😲</p> <p className="text-xl text-gray-300 mt-4">Woah, thats me😲</p>
@@ -84,7 +84,7 @@ export default function Index() {
About Me About Me
</h2> </h2>
<div <div
className="p-8 rounded-xl border dark:border-gray-700 bg-white/5 backdrop-blur-lg 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" flex flex-col md:flex-row gap-8 items-center"
> >
<div className="flex-1 space-y-6"> <div className="flex-1 space-y-6">
@@ -135,14 +135,14 @@ export default function Index() {
Blog Posts Blog Posts
</h2> </h2>
<div <div
className="p-8 rounded-xl border dark:border-gray-700 bg-white/5 backdrop-blur-lg 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" flex flex-col md:flex-row gap-8 items-center"
> >
<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6 sm:gap-8 text-center"> <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6 sm:gap-8 text-center">
{posts.map((post) => ( {posts.map((post) => (
<article <article
key={post.id} key={post.id}
className="p-6 rounded-xl border dark:border-gray-700 bg-white dark:bg-gray-800 className="p-6 rounded-xl border border-gray-700 bg-gray-800
transform transition-all duration-300 hover:scale-105 hover:shadow-xl transform transition-all duration-300 hover:scale-105 hover:shadow-xl
backdrop-blur-sm hover:bg-opacity-90" backdrop-blur-sm hover:bg-opacity-90"
> >
@@ -155,16 +155,16 @@ export default function Index() {
{post.tags.map((tag) => ( {post.tags.map((tag) => (
<span <span
key={tag} key={tag}
className="px-3 py-1 text-sm bg-gray-100 text-gray-800 dark:bg-gray-900 dark:text-gray-100 rounded-full" className="px-3 py-1 text-sm bg-gray-900 text-gray-100 rounded-full"
> >
{tag} {tag}
</span> </span>
))} ))}
</div> </div>
<h3 className="text-xl font-bold mb-3 text-gray-800 dark:text-gray-100"> <h3 className="text-xl font-bold mb-3 text-gray-100">
{post.title} {post.title}
</h3> </h3>
<p className="text-gray-600 dark:text-gray-400 text-base mb-4"> <p className=" text-gray-400 text-base mb-4">
{post.excerpt} {post.excerpt}
</p> </p>
<Link <Link
@@ -200,7 +200,7 @@ export default function Index() {
My Dawg My Dawg
</h2> </h2>
<div <div
className="p-8 rounded-xl border dark:border-gray-700 bg-white/5 backdrop-blur-lg 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" flex flex-col md:flex-row gap-8 items-center"
> >
<div className="flex-1 space-y-6"> <div className="flex-1 space-y-6">
@@ -249,7 +249,7 @@ export default function Index() {
{projects.map((project, index) => ( {projects.map((project, index) => (
<div <div
key={index} key={index}
className="p-6 rounded-xl border dark:border-gray-700 bg-white dark:bg-gray-800 className="p-6 rounded-xl border border-gray-700 bg-gray-800
transform transition-all duration-300 hover:scale-105 hover:shadow-xl transform transition-all duration-300 hover:scale-105 hover:shadow-xl
backdrop-blur-sm hover:bg-opacity-90" backdrop-blur-sm hover:bg-opacity-90"
> >
@@ -264,10 +264,10 @@ export default function Index() {
/> />
</div> </div>
)} )}
<h3 className="text-xl font-bold mb-3 text-gray-800 dark:text-gray-100"> <h3 className="text-xl font-bold mb-3 text-gray-100">
{project.name} {project.name}
</h3> </h3>
<p className="text-gray-600 dark:text-gray-400 text-base mb-4"> <p className=" text-gray-400 text-base mb-4">
{project.description} {project.description}
</p> </p>
<div className="flex flex-col sm:flex-row gap-3 justify-center"> <div className="flex flex-col sm:flex-row gap-3 justify-center">
@@ -287,9 +287,9 @@ export default function Index() {
<a <a
href={project.open_source.link} href={project.open_source.link}
target="_blank" target="_blank"
className="px-6 py-2 border border-gray-300 dark:border-gray-600 className="px-6 py-2 border border-gray-600
rounded-full font-medium transition-all duration-300 rounded-full font-medium transition-all duration-300
hover:bg-gray-100 dark:hover:bg-gray-700" hover:bg-gray-700"
> >
View Source View Source
</a> </a>
@@ -306,7 +306,7 @@ export default function Index() {
Contact Contact
</h2> </h2>
<div <div
className="p-6 rounded-xl border dark:border-gray-700 bg-white/5 backdrop-blur-lg className="p-6 rounded-xl border border-gray-700 bg-white/5 backdrop-blur-lg
transform transition-all duration-300 hover:scale-105 hover:shadow-xl" transform transition-all duration-300 hover:scale-105 hover:shadow-xl"
> >
<p className="text-gray-300 text-lg text-center"> <p className="text-gray-300 text-lg text-center">
@@ -344,7 +344,7 @@ export default function Index() {
Skills? Whats that? Never heard of it🤔 Skills? Whats that? Never heard of it🤔
</p> </p>
<div <div
className="p-6 rounded-xl border dark:border-gray-700 bg-white/5 backdrop-blur-lg className="p-6 rounded-xl border border-gray-700 bg-white/5 backdrop-blur-lg
hover:shadow-xl" hover:shadow-xl"
> >
<ul className="space-y-4 text-center"> <ul className="space-y-4 text-center">
@@ -375,7 +375,7 @@ export default function Index() {
What's Next? What's Next?
</h2> </h2>
<div <div
className="p-6 rounded-xl border dark:border-gray-700 bg-white/5 backdrop-blur-lg className="p-6 rounded-xl border border-gray-700 bg-white/5 backdrop-blur-lg
transform transition-all duration-300 hover:scale-105 hover:shadow-xl" transform transition-all duration-300 hover:scale-105 hover:shadow-xl"
> >
<ul className="space-y-4 text-center"> <ul className="space-y-4 text-center">