denshooter/portfolio
1
1
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

✨ style: Update project title size and improve layout visibility

Browse Source
This commit is contained in:
Denshooter
2025-02-22 23:32:52 +01:00
parent a36cec04c7
commit 725bbe5d50
2 changed files with 32 additions and 30 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
app/components/Contact.tsx
View File

@@ -96,10 +96,10 @@ export default function Contact() {
id="contact"
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
</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 && (
<div
className={`mb-4 text-center rounded-full py-2 px-4 text-white ${

58
app/components/Projects.tsx
View File

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