style: enhance layout and styling of components with improved animations and responsiveness

This commit is contained in:
2025-02-04 00:38:40 +01:00
parent b1e8775346
commit e7735e8521
10 changed files with 366 additions and 522 deletions

View File

@@ -22,28 +22,29 @@ export default function Projects() {
return (
<section id="projects" className="p-10">
<h2 className="text-3xl font-bold text-center text-gray-800 dark:text-white">
<h2 className="text-3xl font-bold text-center text-gray-800">
Projects
</h2>
<div className="mt-6 grid grid-cols-1 md:grid-cols-2 gap-6">
{projects.map((project) => (
<div
<Link
key={project.id}
className="p-4 border shadow-lg bg-white/45 rounded-2xl"
href={`/Projects/${project.title.toLowerCase().replace(" ", "-")}`}
className="cursor-pointer"
>
<h3 className="text-2xl font-bold text-gray-800">
{project.title}
</h3>
<p className="mt-2 text-gray-500">
{project.description}
</p>
<Link
href={`/Projects/${project.title.toLowerCase().replace(" ", "-")}`}
className="mt-4 inline-block text-blue-800 hover:underline"
<div
key={project.id}
className="p-4 border shadow-lg bg-white/45 rounded-2xl"
>
View Project
</Link>
</div>
<h3 className="text-2xl font-bold text-gray-800">
{project.title}
</h3>
<p className="mt-2 text-gray-500">
{project.description}
</p>
</div>
</Link>
))}
</div>
</section>