7cd50b4dca
* 🚀 refactor: simplify deployment process in workflow file * 🚀 chore: add IMAGE_NAME to GITHUB_ENV for deployment workflow * ✨ chore: simplify deployment logging in workflow file * 🚀 fix: correct container name in deployment script logic * 🚀 refactor: rename job and streamline deployment steps * Update README.md * ✨ fix: prevent multiple form submissions in Contact component * ✨ feat: honeypot and timestamp checks to form submission * ✨ refactor: simplify contact form and improve UI elements * ✨ feat: add responsive masonry layout for projects display * ✨ style: Update project title size and improve layout visibility
92 lines
2.6 KiB
TypeScript
92 lines
2.6 KiB
TypeScript
import React, { useEffect, useState } from "react";
|
|
import Link from "next/link";
|
|
import Masonry, { ResponsiveMasonry } from "react-responsive-masonry";
|
|
|
|
interface Project {
|
|
slug: string;
|
|
id: string;
|
|
title: string;
|
|
feature_image: string;
|
|
visibility: string;
|
|
published_at: string;
|
|
updated_at: string;
|
|
html: string;
|
|
reading_time: number;
|
|
meta_description: string;
|
|
}
|
|
|
|
interface ProjectsData {
|
|
posts: Project[];
|
|
}
|
|
|
|
export default function Projects() {
|
|
const [projects, setProjects] = useState<Project[]>([]);
|
|
const [isVisible, setIsVisible] = useState(false);
|
|
|
|
useEffect(() => {
|
|
const fetchProjects = async () => {
|
|
try {
|
|
const response = await fetch("/api/fetchAllProjects");
|
|
if (!response.ok) {
|
|
console.error(`Failed to fetch projects: ${response.statusText}`);
|
|
return [];
|
|
}
|
|
const projectsData = (await response.json()) as ProjectsData;
|
|
if (!projectsData || !projectsData.posts) {
|
|
console.error("Invalid projects data");
|
|
return;
|
|
}
|
|
setProjects(projectsData.posts);
|
|
|
|
setTimeout(() => {
|
|
setIsVisible(true);
|
|
}, 250); // Delay to start the animation after Hero
|
|
} catch (error) {
|
|
console.error("Failed to fetch projects:", error);
|
|
}
|
|
};
|
|
fetchProjects();
|
|
}, []);
|
|
|
|
return (
|
|
<section
|
|
id="projects"
|
|
className={`p-10 ${isVisible ? "animate-fly-in" : "opacity-0"}`}
|
|
>
|
|
<h2 className="text-4xl font-bold text-center text-gray-900">Projects</h2>
|
|
<div className="mt-6">
|
|
{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"
|
|
>
|
|
<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>
|
|
);
|
|
}
|