init

2024-11-30 09:39:57 +01:00
parent f75bb39e53
commit 38a8a47ef3
44 changed files with 2083 additions and 143 deletions
@@ -0,0 +1,60 @@
+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-32 relative rounded-xl overflow-hidden">
+        <Image
+          src={p.image}
+          alt="project-image"
+          fill
+          className="object-cover"
+        />
+      </div>
+      <div className="space-y-1">
+        <span className="text-xs text-muted-foreground ">{`[ ${p.year} ]`}</span>
+        <h3 className="text-3xl font-black">{p.name}</h3>
+        <p className="text-muted-foreground 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 gap-8 container lg:px-20">
+      <MeCard
+        className=" sticky top-20"
+        button={{
+          label: "Contact Me",
+          link: "/contact/#",
+        }}
+      />
+      <div id="projects" className="space-y-8  w-full">
+        <Heading title="Projects" subTitle="Recent" />
+        <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;