67 lines
2.0 KiB
TypeScript
67 lines
2.0 KiB
TypeScript
import { Project, projects } from "@/constants";
|
|
import { ArrowRight } from "lucide-react";
|
|
import Image from "next/image";
|
|
import Link from "next/link";
|
|
import React from "react";
|
|
import MeCard from "../me-card";
|
|
import Heading from "../heading";
|
|
|
|
const ProjectCard = (p: Project) => (
|
|
<Link
|
|
href={p.link}
|
|
className="flex gap-12 items-center w-full group"
|
|
target="_blank"
|
|
>
|
|
{/* <div className="font-serif text-muted-foreground w-20">{`[ ${p.year} ]`}</div> */}
|
|
<div className="flex items-center gap-4 cursor-pointer hover:bg-muted w-full rounded-xl relative">
|
|
<div className="h-40 w-full max-w-32 relative rounded-xl overflow-hidden">
|
|
<Image
|
|
src={p.image}
|
|
alt="project-image"
|
|
fill
|
|
className="object-cover"
|
|
/>
|
|
</div>
|
|
<div className="space-y-1 w-full">
|
|
<span className="text-xs text-muted-foreground ">{`[ ${p.year} ]`}</span>
|
|
<h3 className="text-2xl md:text-3xl font-black">{p.name}</h3>
|
|
<p className="text-muted-foreground text-sm md:text-lg">
|
|
{p.description}
|
|
</p>
|
|
</div>
|
|
|
|
<ArrowRight className="size-6 text-primary absolute right-4 top-8 -rotate-45 group-hover:-translate-y-4 group-hover:translate-x-2 transition-all duration-300" />
|
|
</div>
|
|
</Link>
|
|
);
|
|
|
|
function Projects() {
|
|
return (
|
|
<div className="flex flex-col lg:flex-row gap-8 container lg:px-20">
|
|
<MeCard
|
|
className="mx-auto order-last lg:order-first lg:sticky lg:top-20"
|
|
button={{
|
|
label: "Contact Me",
|
|
link: "/contact",
|
|
}}
|
|
/>
|
|
<div className="space-y-8 w-full p-4">
|
|
<Heading
|
|
title="Projects"
|
|
subTitle="Recent"
|
|
// className="sticky top-0 z-50 pb-6"
|
|
/>
|
|
<menu className=" flex flex-col items-center gap-8 pb-20 w-full">
|
|
{projects.map((p) => (
|
|
<li key={p.link} className="w-full">
|
|
<ProjectCard {...p} />
|
|
</li>
|
|
))}
|
|
</menu>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
export default Projects;
|