From 5a4c05fcbae6c8e3a61a2801a3331fb721d79d8d Mon Sep 17 00:00:00 2001 From: Murtadha Date: Mon, 15 Jul 2024 15:09:00 -0400 Subject: [PATCH] v0.7.0 Add filtering feature in projects to filter project cards based on categories --- src/App.jsx | 35 +++++++++++++ src/components/projects/Projects.jsx | 35 +++++++++++-- src/components/projects/Projects.module.css | 52 +++++++++++++++++++ .../projects/projectCard/ProjectCard.jsx | 5 +- .../projectCard/ProjectCard.module.css | 6 +++ .../projectModal/ProjectModal.module.css | 2 +- version.txt | 2 +- 7 files changed, 130 insertions(+), 7 deletions(-) diff --git a/src/App.jsx b/src/App.jsx index 880eec1..6dd0299 100644 --- a/src/App.jsx +++ b/src/App.jsx @@ -114,6 +114,7 @@ const projectsData = [ { id: 1, title: "Project 1", + category: "Web Development", images: ["/path/to/project1-image1.jpg", "/path/to/project1-image2.jpg"], description: "A brief description of Project 1.", technologies: ["React", "Node.js", "MongoDB"], @@ -121,6 +122,40 @@ const projectsData = [ githubLink: "https://github.com/yourusername/project1", liveLink: "https://project1-demo.com", }, + { + id: 2, + title: "Project 1", + category: "Machine Learning", + images: ["/path/to/project1-image1.jpg", "/path/to/project1-image2.jpg"], + description: "A brief description of Project 1.", + technologies: ["React", "Node.js", "MongoDB"], + features: ["User authentication", "Real-time data updates", "Responsive design"], + githubLink: "https://github.com/yourusername/project1", + liveLink: "https://project1-demo.com", + }, + { + id: 3, + title: "Project 1", + category: "Embedded Systems", + images: ["/path/to/project1-image1.jpg", "/path/to/project1-image2.jpg"], + description: "A brief description of Project 1.", + technologies: ["React", "Node.js", "MongoDB"], + features: ["User authentication", "Real-time data updates", "Responsive design"], + githubLink: "https://github.com/yourusername/project1", + liveLink: "https://project1-demo.com", + }, + { + id: 4, + title: "Project 1", + category: "Web Development", + images: ["/path/to/project1-image1.jpg", "/path/to/project1-image2.jpg"], + description: "A brief description of Project 1.", + technologies: ["React", "Node.js", "MongoDB"], + features: ["User authentication", "Real-time data updates", "Responsive design"], + githubLink: "https://github.com/yourusername/project1", + liveLink: "https://project1-demo.com", + }, + // Add more projects... ]; diff --git a/src/components/projects/Projects.jsx b/src/components/projects/Projects.jsx index 39583f6..6d55663 100644 --- a/src/components/projects/Projects.jsx +++ b/src/components/projects/Projects.jsx @@ -1,10 +1,12 @@ -import React, { useState, useCallback } from "react"; +import React, { useState, useCallback, useMemo } from "react"; import ProjectCard from "./projectCard/ProjectCard"; import ProjectModal from "./projectModal/ProjectModal"; import styles from "./Projects.module.css"; function Projects({ title, data }) { const [selectedProject, setSelectedProject] = useState(null); + const [activeFilter, setActiveFilter] = useState("All"); + const [animatingOut, setAnimatingOut] = useState(false); const openModal = (project) => { setSelectedProject(project); @@ -14,12 +16,39 @@ function Projects({ title, data }) { setSelectedProject(null); }, []); + const categories = useMemo(() => { + const cats = new Set(data.map((project) => project.category)); + return ["All", ...Array.from(cats)]; + }, [data]); + + const filteredProjects = useMemo(() => { + if (activeFilter === "All") return data; + return data.filter((project) => project.category === activeFilter); + }, [data, activeFilter]); + + const handleFilterClick = (category) => { + if (category !== activeFilter) { + setAnimatingOut(true); + setTimeout(() => { + setActiveFilter(category); + setAnimatingOut(false); + }, 300); // This should match the CSS animation duration + } + }; + return (

{title}

+
+ {categories.map((category) => ( + + ))} +
- {data.map((project) => ( - + {filteredProjects.map((project) => ( + ))}
{selectedProject && } diff --git a/src/components/projects/Projects.module.css b/src/components/projects/Projects.module.css index 87bd375..725a466 100644 --- a/src/components/projects/Projects.module.css +++ b/src/components/projects/Projects.module.css @@ -11,12 +11,64 @@ color: #333; } +.filterContainer { + display: flex; + justify-content: center; + flex-wrap: wrap; + margin-bottom: 30px; +} + +.filterButton { + background: none; + border: 1px solid #333; + padding: 8px 16px; + margin: 0 8px 8px 0; + cursor: pointer; + transition: all 0.3s ease; +} + +.filterButton:hover, +.filterButton.active { + background-color: #333; + color: #fff; +} + .projectGrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 2rem; } +@keyframes fadeIn { + from { + opacity: 0; + transform: translateY(20px); + } + to { + opacity: 1; + transform: translateY(0); + } +} + +@keyframes fadeOut { + from { + opacity: 1; + transform: translateY(0); + } + to { + opacity: 0; + transform: translateY(20px); + } +} + +.fadeIn { + animation: fadeIn 0.3s ease forwards; +} + +.fadeOut { + animation: fadeOut 0.3s ease forwards; +} + @media (max-width: 768px) { .projects { padding: 30px 5%; diff --git a/src/components/projects/projectCard/ProjectCard.jsx b/src/components/projects/projectCard/ProjectCard.jsx index a076293..57ea518 100644 --- a/src/components/projects/projectCard/ProjectCard.jsx +++ b/src/components/projects/projectCard/ProjectCard.jsx @@ -1,13 +1,14 @@ import React from "react"; import styles from "./ProjectCard.module.css"; -function ProjectCard({ project, onClick }) { +function ProjectCard({ project, onClick, className }) { return ( -
onClick(project)}> +
onClick(project)}>
{`${project.title}

{project.title}

+

{project.category}

{project.description}

); diff --git a/src/components/projects/projectCard/ProjectCard.module.css b/src/components/projects/projectCard/ProjectCard.module.css index 6375ebc..fedba03 100644 --- a/src/components/projects/projectCard/ProjectCard.module.css +++ b/src/components/projects/projectCard/ProjectCard.module.css @@ -36,3 +36,9 @@ margin: 0 1rem 1rem; color: #666; } + +.category { + font-size: 0.8rem; + color: #666; + margin: 0 1rem; +} diff --git a/src/components/projects/projectModal/ProjectModal.module.css b/src/components/projects/projectModal/ProjectModal.module.css index eb40c7b..4a5a764 100644 --- a/src/components/projects/projectModal/ProjectModal.module.css +++ b/src/components/projects/projectModal/ProjectModal.module.css @@ -83,7 +83,7 @@ margin-right: 1rem; margin-top: 1rem; padding: 0.5rem 1rem; - background-color: #007bff; + background-color: var(--accent-color); color: white; text-decoration: none; border-radius: 4px; diff --git a/version.txt b/version.txt index b1d7abc..bcaffe1 100644 --- a/version.txt +++ b/version.txt @@ -1 +1 @@ -0.6.2 \ No newline at end of file +0.7.0 \ No newline at end of file