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">
<h1 className="text-6xl font-bold text-gray-100">Paul W.</h1>
</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
</span>
<p className="text-xl text-gray-300 mt-4">Woah, thats me😲</p>
@@ -84,7 +84,7 @@ export default function Index() {
About Me
</h2>
<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"
>
<div className="flex-1 space-y-6">
@@ -135,14 +135,14 @@ export default function Index() {
Blog Posts
</h2>
<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"
>
<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6 sm:gap-8 text-center">
{posts.map((post) => (
<article
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
backdrop-blur-sm hover:bg-opacity-90"
>
@@ -155,16 +155,16 @@ export default function Index() {
{post.tags.map((tag) => (
<span
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}
</span>
))}
</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}
</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}
</p>
<Link
@@ -200,7 +200,7 @@ export default function Index() {
My Dawg
</h2>
<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"
>
<div className="flex-1 space-y-6">
@@ -249,7 +249,7 @@ export default function Index() {
{projects.map((project, index) => (
<div
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
backdrop-blur-sm hover:bg-opacity-90"
>
@@ -264,10 +264,10 @@ export default function Index() {
/>
</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}
</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}
</p>
<div className="flex flex-col sm:flex-row gap-3 justify-center">
@@ -287,9 +287,9 @@ export default function Index() {
<a
href={project.open_source.link}
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
hover:bg-gray-100 dark:hover:bg-gray-700"
hover:bg-gray-700"
>
View Source
</a>
@@ -306,7 +306,7 @@ export default function Index() {
Contact
</h2>
<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"
>
<p className="text-gray-300 text-lg text-center">
@@ -344,7 +344,7 @@ export default function Index() {
Skills? Whats that? Never heard of it🤔
</p>
<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"
>
<ul className="space-y-4 text-center">
@@ -375,7 +375,7 @@ export default function Index() {
What's Next?
</h2>
<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"
>
<ul className="space-y-4 text-center">