35 lines
1.5 KiB
TypeScript
35 lines
1.5 KiB
TypeScript
import ProjectCard from "@/components/project-card";
|
|
import { getProjects } from "@/services/projects-service";
|
|
import Image from "next/image";
|
|
import Link from "next/link";
|
|
|
|
import ProfileImage from "../../../../public/images/liam_pietralla.jpg";
|
|
|
|
const ProjectsPage = async () => {
|
|
const projects = await getProjects();
|
|
return (
|
|
<div className="flex flex-col gap-4 justify-center items-center my-15">
|
|
<div className="flex flex-row items-center gap-2 my-2 animate-fade-in-up">
|
|
<Image src={ProfileImage} alt="Liam Pietralla" className="rounded-full max-w-[50px]" />
|
|
<Link href="/" className="group leading-relaxed font-semi-bold">
|
|
Liam Pietralla
|
|
<span className="block max-w-0 group-hover:max-w-full transition-all duration-500 h-0.5 bg-accent"></span>
|
|
</Link>
|
|
</div>
|
|
<h1 className="text-5xl font-bold animate-fade-in-up" style={{ animationDelay: "120ms" }}>Projects</h1>
|
|
<h2 className="animate-fade-in-up text-center max-w-2xl" style={{ animationDelay: "240ms" }}>
|
|
A collection of interesting projects that I am working on currently or have worked on in the past.
|
|
</h2>
|
|
<div className="flex flex-col gap-4 w-full">
|
|
{projects.docs.map((project, index) => (
|
|
<div key={index} className="animate-fade-in-up" style={{ animationDelay: `${320 + index * 120}ms` }}>
|
|
<ProjectCard {...project} />
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|
|
|
|
export default ProjectsPage;
|