Project Cards

src/components/(projects)/project-grid.tsx

@@ -64,7 +64,11 @@ export function ProjectGrid() {
 
       return (
         <Button
-          className="w-full aspect-[16/9] bg-accent-100"
+          style={(project.bgUrl.length ? {backgroundImage: `url('/projects/${project.bgUrl}`} : {})}
+          className={cn(
+            "w-full aspect-[16/9] bg-accent-50",
+            (project.bgUrl.length && "bg-cover text-neutral-white p-0")
+          )}
           onMouseOver={() => setHovering(true)}
           onMouseOut={() => setHovering(false)}
           onClick={() => {
@@ -73,10 +77,13 @@ export function ProjectGrid() {
           }}
         >
           <motion.div
-            className="flex flex-col justify-center items-center space-y-2 w-full h-full overflow-hidden"
+            className={cn(
+              "flex flex-col justify-center items-center space-y-2 w-full h-full overflow-hidden",
+              (project.bgUrl.length && "bg-neutral-black/50" )
+            )}
           >
             <LayoutGroup>
-              <motion.h3 layout>
+              <motion.h3 layout className="w-full text-wrap md:prose-display-xs">
                 {project.title}
               </motion.h3>
               <AnimatePresence>

src/lib/data.ts

@@ -112,62 +112,62 @@ export const certificationsFb = [
 export const projects = [
   {
     title: "My Portfolio V2",
-    tags: ["Next.js", "Figma", "Vercel", "TailwindCSS"],
+    tags: ["Next.js", "Figma", "Vercel", "GSAP", "Framer Motion", "Prisma", "Blob"],
     description: "Nostrud non irure quis voluptate aute velit nostrud fugiat ad occaecat.",
     bgUrl: "my-portfolio-v2.png",
   },
   {
     title: "Meet Ajel (Portfolio V1)",
     tags: ["HTML", "CSS", "JS", "Cloudfare Pages"],
     description: "Laborum velit qui in adipisicing minim dolor amet.",
-    bgUrl: "",
+    bgUrl: "meet-ajel.png",
   },
   {
     title: "React Todo List",
     tags: ["React.js", "Next.js"],
     description: "Deserunt proident sit irure ipsum eu do commodo deserunt laboris laborum veniam ut enim veniam.",
-    bgUrl: "",
+    bgUrl: "react-todolist.png",
   },
   {
-    title: "Farmacia Landrito",
-    tags: ["Vue.js", "MongoDB" ],
+    title: "CLI File Manager",
+    tags: ["Node.js", "CRUD" ],
     description: "Culpa magna aliqua adipisicing non sunt dolor.",
-    bgUrl: "",
+    bgUrl: "node-file-manager.png",
   },
   {
     title: "CLI Todo List",
-    tags: ["Express.js", "Node.js"],
+    tags: ["Express.js", "Node.js", "PostgreSQL"],
     description: "Ea officia cupidatat deserunt dolore do sint dolore in laboris.",
-    bgUrl: "",
+    bgUrl: "todo-cli.png",
   },
   {
     title: "Full-stack Todo List",
     tags: ["PostgreSQL",  "Express.js", "React.js", "Node.js", "Axios"],
     description: "Laborum duis duis laboris do amet magna Lorem.",
-    bgUrl: "",
+    bgUrl: "pern-todolist.png",
   },
   {
     title: "AgriConnect",
     tags: ["Figma", "Design Systems"],
     description: "Eu est proident nulla amet esse esse ex id proident ad.",
-    bgUrl: "",
+    bgUrl: "agriconnect.png",
   },
   {
-    title: "Reviewer App",
-    tags: ["JSON", "Fetch API"],
+    title: "Next.js Dashboard",
+    tags: ["NextAuth", "Next.js", "PostgreSQL", "Vercel"],
     description: "Esse sint pariatur culpa et cillum id.",
-    bgUrl: "",
+    bgUrl: "acme-dashboard.png",
   },
   {
     title: "Codebase sim",
-    tags: ["Express.js", "React.js"],
+    tags: ["Express.js", "React.js", "Git & Github"],
     description: "Et aute proident ad incididunt ad ut commodo nostrud ea Lorem officia aute officia reprehenderit consequat.",
-    bgUrl: "",
+    bgUrl: "codementor.png",
   },
   {
     title: "NPM Practice",
-    tags: ["NPM", "Git & Github", "momentjs", "modals"],
+    tags: ["NPM", "Git & Github", "momentjs", "modals", "HTML Forms", "Fetch API"],
     description: "Consectetur do est do mollit occaecat minim ea dolor id amet.",
-    bgUrl: "",
+    bgUrl: "npm-prac.png",
   },
 ]