style: enhance layout and styling of components with improved animations and responsiveness
This commit is contained in:
@@ -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>
|
||||
|
||||
Reference in New Issue
Block a user