Feat/project stack

prisma/schema.prisma

@@ -8,8 +8,8 @@ datasource db {
 }
 
 model User {
-  id         String  @id @default(cuid())
-  name       String
+  id   String @id @default(cuid())
+  name String
 
   password   String?
   avatar     String?
@@ -19,34 +19,34 @@ model User {
 
   email         String    @unique
   emailVerified DateTime?
-  
-  skills        String[]
-  experience    Experience[]
-  project       Project[]
-  resume        String?
-  
-  oauthProvider   OauthProvider?  // Tracks OAuth provider (e.g., 'google')
-  oauthId String?
+
+  skills     String[]
+  experience Experience[]
+  project    Project[]
+  resume     String?
+
+  oauthProvider OauthProvider? // Tracks OAuth provider (e.g., 'google')
+  oauthId       String?
 
   blockedByAdmin DateTime?
-  onBoard Boolean @default(false)
+  onBoard        Boolean   @default(false)
 }
 
 enum OauthProvider {
   GOOGLE
 }
 
-
 model VerificationToken {
-  token String
+  token      String
   identifier String
-  createdAt  DateTime @default(now())
-  updatedAt  DateTime @updatedAt
-  type TokenType
-  @@unique([token,identifier])
+  createdAt  DateTime  @default(now())
+  updatedAt  DateTime  @updatedAt
+  type       TokenType
+
+  @@unique([token, identifier])
 }
 
-enum  TokenType {
+enum TokenType {
   EMAIL_VERIFICATION
   RESET_PASSWORD
 }
@@ -80,32 +80,43 @@ model Job {
   isVerifiedJob      Boolean         @default(false) @map("is_verified_job")
   postedAt           DateTime        @default(now())
   updatedAt          DateTime        @updatedAt
-  user               User            @relation(fields: [userId], references: [id],onDelete: Cascade)
+  user               User            @relation(fields: [userId], references: [id], onDelete: Cascade)
 }
 
 model Experience {
-  id                Int @id @default(autoincrement())
-  companyName       String 
+  id                Int             @id @default(autoincrement())
+  companyName       String
   designation       String
   EmploymentType    EmployementType
   address           String
   workMode          WorkMode
   currentWorkStatus Boolean
   startDate         DateTime
   endDate           DateTime?
-  description       String  
-  userId            String 
-  user              User      @relation(fields: [userId] ,references: [id])
+  description       String
+  userId            String
+  user              User            @relation(fields: [userId], references: [id], onDelete: Cascade)
 }
 
 model Project {
-  id              Int @id @default(autoincrement())
-  projectName     String 
-  projectSummary  String
-  projectLiveLink String?
-  projectGithub   String
-  userId          String
-  user            User @relation(fields: [userId] , references: [id])
+  id               Int          @id @default(autoincrement())
+  projectName      String
+  projectThumbnail String?
+  projectSummary   String
+  projectLiveLink  String?
+  projectGithub    String
+  stack            ProjectStack @default(OTHERS)
+  userId           String
+  user             User         @relation(fields: [userId], references: [id], onDelete: Cascade)
+}
+
+enum ProjectStack {
+  GO
+  PYTHON
+  MERN_NEXTJS
+  AI_GPT_APIS
+  JAVA
+  OTHERS
 }
 
 enum Currency {

src/app/profile/experience/page.tsx

@@ -13,7 +13,10 @@ export default function AccountExperiencePage() {
       router.push(`${APP_PATHS.SIGNIN}?redirectTo=/profile`);
   }, [session.status, router]);
   return (
-    <div>
+    <div className="md:container flex flex-col w-full gap-4">
+      <div className="flex justify-between items-center">
+        <span>Experience</span>
+      </div>
       <UserExperience />
     </div>
   );

src/app/profile/projects/page.tsx

@@ -13,7 +13,10 @@ export default function AccountProjectPage() {
       router.push(`${APP_PATHS.SIGNIN}?redirectTo=/profile`);
   }, [session.status, router]);
   return (
-    <div className="overflow-x-hidden">
+    <div className="md:container flex flex-col w-full gap-4">
+      <div className="flex justify-between items-center">
+        <span>Projects</span>
+      </div>
       <UserProjects />
     </div>
   );

src/app/profile/resume/page.tsx

@@ -13,7 +13,10 @@ export default function AccountResumePage() {
       router.push(`${APP_PATHS.SIGNIN}?redirectTo=/profile`);
   }, [session.status, router]);
   return (
-    <div className="m-auto">
+    <div className="md:container flex flex-col w-full gap-4">
+      <div className="flex justify-between items-center">
+        <span>Resume</span>
+      </div>
       <UserResume />
     </div>
   );

src/app/profile/skills/page.tsx

@@ -13,7 +13,10 @@ export default function AccountResumePage() {
       router.push(`${APP_PATHS.SIGNIN}?redirectTo=/profile`);
   }, [session.status, router]);
   return (
-    <div>
+    <div className="md:container flex flex-col w-full gap-4">
+      <div className="flex justify-between items-center">
+        <span>Skills</span>
+      </div>
       <UserSkills />
     </div>
   );

src/components/profile/UserProject.tsx

@@ -10,10 +10,12 @@ import {
   CardHeader,
   CardTitle,
 } from '../ui/card';
+import { LucideGithub, SquareArrowOutUpRightIcon } from 'lucide-react';
 
 export function UserProjects() {
   const { toast } = useToast();
   const [projects, setProjects] = useState<Project[]>();
+
   useEffect(() => {
     async function fetchProjects() {
       try {
@@ -43,35 +45,58 @@ export function UserProjects() {
   }
 
   return (
-    <div className="space-y-2 mb-2">
+    <div className="grid grid-cols-4 gap-3 mt-4">
       {projects.map((item: Project) => (
         <Card
           key={item.id}
-          className=" border-2 hover:bg-slate-100 dark:hover:bg-slate-900 text-black dark:text-white transition-shadow duration-300"
+          className="flex flex-col md:col-span-2 col-span-4 border-2 hover:bg-slate-100 dark:hover:bg-slate-900 text-black dark:text-white transition-shadow duration-300"
         >
+          <div className="flex items-center justify-center aspect-video w-full h-[200px] overflow-hidden object-contain rounded-2xl p-1 mt-1">
+            {item.projectThumbnail ? (
+              <img
+                alt={item.projectName}
+                src={item.projectThumbnail}
+                className={`h-[200px] hover:scale-110 transition-transform duration-300`}
+              />
+            ) : (
+              <div className="flex items-center justify-center h-[200px] rounded-2xl bg-slate-400 dark:bg-slate-900">
+                <span className="text-3xl font-semibold">
+                  {item.projectName}
+                </span>
+              </div>
+            )}
+          </div>
           <CardHeader>
-            <CardTitle className="text-lg font-semibold">
+            <CardTitle className="text-lg font-semibold uppercase flex items-center justify-between">
               {item.projectName}
             </CardTitle>
           </CardHeader>
-          <CardContent className="">
+          <CardContent className="flex items-center justify-start">
             <p className="mb-4">{item.projectSummary}</p>
           </CardContent>
           <CardFooter className="flex justify-between">
-            {item.projectLiveLink && (
+            {item.stack && (
+              <div className="flex items-center gap-2">
+                <span className="text-xs font-semibold">Stack:</span>
+                <span className="text-xs">{item.stack}</span>
+              </div>
+            )}
+            <div className="flex items-center justify-center gap-4">
+              {item.projectLiveLink && (
+                <Link
+                  href={item.projectLiveLink}
+                  className="text-blue-500 hover:underline"
+                >
+                  <SquareArrowOutUpRightIcon size={16} />
+                </Link>
+              )}
               <Link
-                href={item.projectLiveLink}
+                href={item.projectGithub}
                 className="text-blue-500 hover:underline"
               >
-                Live Project
+                <LucideGithub size={16} />
               </Link>
-            )}
-            <Link
-              href={item.projectGithub}
-              className="text-blue-500 hover:underline"
-            >
-              GitHub Repository
-            </Link>
+            </div>
           </CardFooter>
         </Card>
       ))}