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,12 +53,13 @@ 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">
{isVisible && (
<ResponsiveMasonry <ResponsiveMasonry
columnsCountBreakPoints={{350: 1, 750: 2, 900: 3}} columnsCountBreakPoints={{ 350: 1, 750: 2, 900: 3 }}
gutterBreakpoints={{350: "12px", 750: "16px", 900: "24px"}} > >
<Masonry > <Masonry gutter="16px">
{projects.map((project, index) => ( {projects.map((project, index) => (
<Link <Link
key={project.id} key={project.id}
@@ -66,7 +67,7 @@ export default function Projects() {
pathname: `/projects/${project.slug}`, pathname: `/projects/${project.slug}`,
query: { project: JSON.stringify(project) }, query: { project: JSON.stringify(project) },
}} }}
className="cursor-pointer w-full" className="cursor-pointer"
> >
<div <div
className="project-card" className="project-card"
@@ -83,6 +84,7 @@ export default function Projects() {
))} ))}
</Masonry> </Masonry>
</ResponsiveMasonry> </ResponsiveMasonry>
)}
</div> </div>
</section> </section>
); );