style: Update project title size and improve layout visibility

This commit is contained in:
2025-02-22 23:32:52 +01:00
parent a36cec04c7
commit 725bbe5d50
2 changed files with 32 additions and 30 deletions

View File

@@ -96,10 +96,10 @@ export default function Contact() {
id="contact" id="contact"
className={`p-10 ${isVisible ? "animate-fade-in" : "opacity-0"}`} className={`p-10 ${isVisible ? "animate-fade-in" : "opacity-0"}`}
> >
<h2 className="text-4xl font-extrabold text-center text-gray-900 dark:text-white mb-8"> <h2 className="text-4xl font-bold text-center text-gray-900 mb-8">
Get in Touch Get in Touch
</h2> </h2>
<div className="bg-white/30 dark:bg-gray-800 p-8 rounded-3xl shadow-xl max-w-lg mx-auto"> <div className="bg-white/30 p-8 rounded-3xl shadow-xl max-w-lg mx-auto">
{banner.show && ( {banner.show && (
<div <div
className={`mb-4 text-center rounded-full py-2 px-4 text-white ${ className={`mb-4 text-center rounded-full py-2 px-4 text-white ${

View File

@@ -53,36 +53,38 @@ export default function Projects() {
id="projects" id="projects"
className={`p-10 ${isVisible ? "animate-fly-in" : "opacity-0"}`} className={`p-10 ${isVisible ? "animate-fly-in" : "opacity-0"}`}
> >
<h2 className="text-3xl font-bold text-center text-gray-800">Projects</h2> <h2 className="text-4xl font-bold text-center text-gray-900">Projects</h2>
<div className="mt-6"> <div className="mt-6">
<ResponsiveMasonry {isVisible && (
columnsCountBreakPoints={{350: 1, 750: 2, 900: 3}} <ResponsiveMasonry
gutterBreakpoints={{350: "12px", 750: "16px", 900: "24px"}} > columnsCountBreakPoints={{ 350: 1, 750: 2, 900: 3 }}
<Masonry > >
{projects.map((project, index) => ( <Masonry gutter="16px">
<Link {projects.map((project, index) => (
key={project.id} <Link
href={{ key={project.id}
pathname: `/projects/${project.slug}`, href={{
query: { project: JSON.stringify(project) }, pathname: `/projects/${project.slug}`,
}} query: { project: JSON.stringify(project) },
className="cursor-pointer w-full" }}
> className="cursor-pointer"
<div
className="project-card"
style={{ animationDelay: `${index * 0.1}s` }}
> >
<h3 className="text-2xl font-bold text-gray-800"> <div
{project.title} className="project-card"
</h3> style={{ animationDelay: `${index * 0.1}s` }}
<p className="mt-2 text-gray-500"> >
{project.meta_description} <h3 className="text-2xl font-bold text-gray-800">
</p> {project.title}
</div> </h3>
</Link> <p className="mt-2 text-gray-500">
))} {project.meta_description}
</Masonry> </p>
</ResponsiveMasonry> </div>
</Link>
))}
</Masonry>
</ResponsiveMasonry>
)}
</div> </div>
</section> </section>
); );