From 06f0bba18bf725d0b493090000c2a26c6015a8e1 Mon Sep 17 00:00:00 2001
From: parsa aghaei <p.aghaei@hoshmand.local>
Date: Tue, 24 Sep 2024 14:38:20 +0330
Subject: [PATCH] myProjects get responsive now

---
 src/app/_components/my-projects/page.tsx | 18 +++++++++---------
 1 file changed, 9 insertions(+), 9 deletions(-)

diff --git a/src/app/_components/my-projects/page.tsx b/src/app/_components/my-projects/page.tsx
index 1b26953..afd47c7 100644
--- a/src/app/_components/my-projects/page.tsx
+++ b/src/app/_components/my-projects/page.tsx
@@ -73,19 +73,19 @@ export default function MyProjects() {
       : groupedProjects[selectedCategory]?.slice(0, 6) || []; // Get first 6 projects from selected category
 
   return (
-    <div className="flex flex-col items-center" id="projects">
+    <div className="flex w-full flex-wrap items-center max-w-[90%] justify-center" id="projects">
       <h2 className="my-10 text-[65px] font-[600] text-black">My Projects</h2>
-      <p className="w-[930px] text-center text-[21px] font-[400] text-black">
+      <p className="text-justify text-[21px] font-[400] text-black">
         Lorem ipsum dolor sit amet consectetur. Mollis erat duis aliquam mauris
         est risus lectus. Phasellus consequat urna tellus
       </p>
-      <ul className="mb-10 mt-20 flex items-center justify-center gap-5">
+      <ul className="mb-10 mt-20 flex flex-wrap items-center justify-start gap-5">
         {categories.length > 0 ? (
           categories.map((category, index) => (
             <li
               key={index}
               onClick={() => setSelectedCategory(category.label)}
-              className={`select-none rounded-md border border-[#545454] bg-[#F8F8F8] px-[20px] py-[10px] text-[24px] font-[400] hover:cursor-pointer hover:border-[#FD6F00] ${
+              className={`select-none rounded-md border whitespace-nowrap border-[#545454] bg-[#F8F8F8] px-[20px] py-[10px] text-[18px] font-[600] hover:cursor-pointer hover:border-[#FD6F00] ${
                 selectedCategory === category.label
                   ? "bg-[#FD6F00] text-[#FFFFFF]"
                   : "text-[#000]"
@@ -103,11 +103,11 @@ export default function MyProjects() {
           </div>
         )}
       </ul>
-      <div className="flex w-[1420px] flex-wrap items-start justify-between gap-[30px]">
+      <div className="flex flex-wrap items-start justify-center gap-8">
         {filteredProjects.length > 0 ? (
           filteredProjects.map((project, index) => (
-            <div key={index} className="project flex w-[445px] flex-wrap">
-              <div className="relative my-5 h-[490px] w-full overflow-hidden bg-[#FFEBDB]">
+            <div key={index} className="project flex w-[45%] md:w-[30%] flex-wrap">
+              <div className="relative my-5 h-[200px] md:h-[250px] lg:h-[300px] w-full overflow-hidden bg-[#FFEBDB]">
                 {project.images.map((image, idx) => (
                   <img
                     key={idx}
@@ -117,10 +117,10 @@ export default function MyProjects() {
                   />
                 ))}
               </div>
-              <h5 className="w-full text-[19px] font-[400] text-[#FD6F00]">
+              <h5 className="w-full text-[15px] lg:text-[20px] font-[600] text-[#FD6F00]">
                 {project.category}
               </h5>
-              <p className="text-[24px] font-[700] text-black hover:cursor-pointer">
+              <p className="text-[18px] lg:text-[22px] font-[800] text-black hover:cursor-pointer">
                 {project.title}
               </p>
             </div>