parsa/parsaaghayi-front
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

myProjects get responsive now

Browse Source
This commit is contained in:
parsa aghaei 2024-09-24 14:38:20 +03:30
parent 727a603a96
commit 06f0bba18b
1 changed files with 9 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

18
src/app/_components/my-projects/page.tsx
View File

@ -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>