diff --git a/components/project/project-grid.tsx b/components/project/project-grid.tsx index a3b6d8b..5286ee7 100644 --- a/components/project/project-grid.tsx +++ b/components/project/project-grid.tsx @@ -13,8 +13,21 @@ import { FaLink, FaSearch, FaYoutube, + FaClock, + FaTags, + FaRoute, + FaBook, } from "react-icons/fa"; import SearchBar from "./search-bar"; +import { + Dialog, + DialogContent, + DialogDescription, + DialogHeader, + DialogTitle, + DialogTrigger, +} from "@/components/ui/dialog"; +import { Button } from "@/components/ui/button"; const PROJECTS_PER_PAGE = 6; @@ -136,78 +149,220 @@ export default function ProjectGrid() { transition: { duration: 0.2 }, }} layout - className="group relative overflow-hidden rounded-2xl border border-border backdrop-blur-xl transition-all duration-500 hover:-translate-y-2 hover:shadow-2xl hover:shadow-primary/10" + className="flex flex-col h-full group relative overflow-hidden rounded-2xl border border-border backdrop-blur-xl transition-all duration-500 hover:-translate-y-2 hover:shadow-2xl hover:shadow-primary/10" > -
- {item.projectName} +
+ {item.projectName} -
- +
+ +
{ + if ( + typeof window !== "undefined" && + window.innerWidth < 640 + ) { + e.stopPropagation(); + e.preventDefault(); + } + }} + > +
+

+ {item.projectName} +

+ + + {item.difficulty} + +
+ +

+ {item.description} +

+ + {item.techStack && ( +
+ {item.techStack.map((tech: string, i: number) => ( + + {tech} + + ))} +
+ )} +
+
+ + + e.stopPropagation()} > -
- -
-
-

- {item.projectName} -

- - - {item.difficulty} - -
+ + + {item.projectName} + + + {item.description} + + -

- {item.description} -

+
+ {item.projectName} +
- {item.techStack && ( -
- {item.techStack.map((tech: string, i: number) => ( - + {item.liveLink && ( + - {tech} - - ))} + Live Preview + + )} + {item.githubLink && ( + + Source Code + + )} + {item.ytLink && ( + + Tutorial + + )}
- )} -
+ {(item.skills || + item.estimatedTime || + item.learningPath || + item.prerequisites) && ( +
+ {item.estimatedTime && ( +
+

+ {" "} + Estimated Time +

+

+ {item.estimatedTime} +

+
+ )} + {item.learningPath && ( +
+

+ {" "} + Learning Path +

+

+ {item.learningPath.join(" → ")} +

+
+ )} + {item.prerequisites && ( +
+

+ {" "} + Prerequisites +

+
+ {item.prerequisites.map((prereq, i) => ( + + {prereq} + + ))} +
+
+ )} + {item.skills && ( +
+

+ {" "} + Skills Taught +

+
+ {item.skills.map((skill, i) => ( + + {skill} + + ))} +
+
+ )} +
+ )} + + +
{item.liveLink && ( e.stopPropagation()} href={item.liveLink} target="_blank" className="flex h-9 w-9 items-center justify-center rounded-full border border-border bg-background transition-all duration-300 hover:scale-110 hover:bg-muted" @@ -218,6 +373,7 @@ export default function ProjectGrid() { {item.githubLink && ( e.stopPropagation()} href={item.githubLink} target="_blank" className="flex h-9 w-9 items-center justify-center rounded-full border border-border bg-background transition-all duration-300 hover:scale-110 hover:bg-muted" @@ -228,6 +384,7 @@ export default function ProjectGrid() { {item.ytLink && ( e.stopPropagation()} href={item.ytLink} target="_blank" className="flex h-9 w-9 items-center justify-center rounded-full border border-border bg-background transition-all duration-300 hover:scale-110 hover:bg-red-500 hover:text-white" @@ -236,7 +393,7 @@ export default function ProjectGrid() { )}
-
+ ))} diff --git a/config/project-Item.tsx b/config/project-Item.tsx index 3cfbae4..e73c147 100644 --- a/config/project-Item.tsx +++ b/config/project-Item.tsx @@ -10,6 +10,10 @@ export const projectItemConfig: ProjectItems[] = [ liveLink: "https://sendlyfile.vercel.app/", techStack: ["Next.js", "TypeScript", "Tailwind", "Supabase", "Prisma"], difficulty: "Advanced", + skills: ["File Handling", "Database", "Authentication"], + learningPath: ["Fullstack Next.js", "Backend Integration"], + estimatedTime: "2-3 weeks", + prerequisites: ["React", "SQL basics"], }, { projectName: "ShowTime", @@ -20,6 +24,10 @@ export const projectItemConfig: ProjectItems[] = [ liveLink: "https://harmonious-maamoul-e4854c.netlify.app/", techStack: ["React js", "JavaScript", "CSS", "HTML"], difficulty: "Intermediate", + skills: ["API Fetching", "State Management", "Routing"], + learningPath: ["Frontend Mastery"], + estimatedTime: "1-2 weeks", + prerequisites: ["Basic React Hooks", "Promises/Async"], }, { projectName: "Pomodoro Timer", @@ -29,6 +37,10 @@ export const projectItemConfig: ProjectItems[] = [ githubLink: "https://github.com/chopadkartanishka/100-reactjs-projects", techStack: ["React js", "JavaScript", "CSS", "HTML"], difficulty: "Intermediate", + skills: ["Timers & Intervals", "React State"], + learningPath: ["React Basics", "Utility Apps"], + estimatedTime: "3-5 days", + prerequisites: ["JavaScript Basics", "useState/useEffect"], }, { projectName: "Kitchenly", @@ -38,6 +50,10 @@ export const projectItemConfig: ProjectItems[] = [ githubLink: "https://github.com/Aarya1402/kitchenly", techStack: ["Next js", "Tailwind CSS", "PostgreSQL", "Prisma"], difficulty: "Intermediate", + skills: ["Database Modeling", "API Routes", "State Management"], + learningPath: ["Full-stack Next.js", "Data Aggregation"], + estimatedTime: "2-3 weeks", + prerequisites: ["React Fundamentals", "Basic SQL/Prisma"], }, { projectName: "SpeedTap", @@ -48,6 +64,10 @@ export const projectItemConfig: ProjectItems[] = [ liveLink: "https://speed-tap-two.vercel.app/", techStack: ["React js", "TypeScript", "CSS", "Vite"], difficulty: "Beginner", + skills: ["State Management", "Event Handling", "Timers"], + learningPath: ["React Basics", "Game Development"], + estimatedTime: "2-4 days", + prerequisites: ["React Hooks", "Basic Math Logic"], }, { projectName: "SplitSmart", @@ -58,6 +78,10 @@ export const projectItemConfig: ProjectItems[] = [ liveLink: "https://splitsmart-expense.vercel.app", techStack: ["React js", "Tailwind css", "TypeScript"], difficulty: "Intermediate", + skills: ["Local Storage", "Complex State", "Form Handling"], + learningPath: ["Frontend Mastery", "Utility Apps"], + estimatedTime: "1-2 weeks", + prerequisites: ["TypeScript Basics", "React Context/State"], }, { projectName: "Text Cipher", @@ -68,5 +92,9 @@ export const projectItemConfig: ProjectItems[] = [ liveLink: "https://text-cipher.vercel.app/", techStack: ["React", "Tailwind CSS", "TypeScript"], difficulty: "Beginner", + skills: ["String Manipulation", "Encoding/Decoding"], + learningPath: ["React Basics", "Cryptography Basics"], + estimatedTime: "1-3 days", + prerequisites: ["JavaScript Strings"], }, ]; diff --git a/config/projects.tsx b/config/projects.tsx index a3a5bc3..60745e0 100644 --- a/config/projects.tsx +++ b/config/projects.tsx @@ -9,6 +9,10 @@ export interface ProjectItems { ytLink?: string; techStack: string[]; difficulty: string; + skills?: string[]; + learningPath?: string[]; + estimatedTime?: string; + prerequisites?: string[]; } interface Project { diff --git a/contributing.md b/contributing.md index 9d830ac..2f87ff7 100644 --- a/contributing.md +++ b/contributing.md @@ -118,8 +118,12 @@ Add your project details inside the `project-Item.tsx` file. githubLink: "github-link", liveLink: "live-link", // optional ytLink: "yt-link", // optional - techStack: ["React js"], // it is ans array ["React js", "Next js", "Tailwind css"] - difficulty: "Beginner" // Beginner | Intermediate | Advanced + techStack: ["React js"], // it is an array ["React js", "Next js", "Tailwind css"] + difficulty: "Beginner", // Beginner | Intermediate | Advanced + skills: ["Routing", "State Management"], // Optional: array of skills taught + learningPath: ["Frontend Mastery"], // Optional: learning path categories + estimatedTime: "2-3 weeks", // Optional: estimated time to complete + prerequisites: ["React Basics"] // Optional: prerequisite knowledge } ``` @@ -133,6 +137,15 @@ Allowed values: - `Intermediate` - `Advanced` +### Structured Learning Fields (Optional but Recommended) + +To make projects more beginner-friendly, please consider adding these structured learning fields: + +- `skills`: A list of core concepts learned (e.g., `["API Fetching", "State Management"]`) +- `learningPath`: Recommended learning tracks (e.g., `["React Basics", "Fullstack Next.js"]`) +- `estimatedTime`: Expected time to build (e.g., `"2-3 days"`, `"1 week"`) +- `prerequisites`: Required knowledge before starting (e.g., `"JavaScript Basics"`) + Ensure: - The image path matches the file in the `public/projects` folder.