Skip to content

Commit 7764201

Browse files
sa-fw-ansa-fw-an
committed
Changed Project Section
1 parent b59e9b0 commit 7764201

File tree

1 file changed

+72
-55
lines changed

1 file changed

+72
-55
lines changed

‎src/sections/Projects.jsx‎

Lines changed: 72 additions & 55 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,8 @@
1-
/* eslint-disable react/no-unknown-property */
21
import gsap from "gsap";
32
import { useGSAP } from "@gsap/react";
43
import { Suspense, useState } from "react";
54
import { Canvas } from "@react-three/fiber";
65
import { Center, OrbitControls } from "@react-three/drei";
7-
86
import { myProjects } from "../constants/project.js";
97
import CanvasLoader from "../components/Loading.jsx";
108
import DemoComputer from "../components/DemoComputer.jsx";
@@ -34,71 +32,90 @@ const Projects = () => {
3432
<section className="c-space my-20" id="projects">
3533
<p className="head-text">My Projects</p>
3634

37-
<div className="grid lg:grid-cols-2 grid-cols-1 mt-12 gap-5 w-full ">
38-
<div className="flex flex-col gap-5 relative sm:p-10 py-10 px-5 shadow-2xl shadow-black-200 text-[#BEC1CF]">
35+
<div className="grid lg:grid-cols-2 grid-cols-1 mt-12 gap-5 w-full">
36+
<div className="flex flex-col relative sm:p-10 py-10 px-5 shadow-2xl shadow-black-200 text-[#BEC1CF] min-h-[650px]">
3937
<img
4038
src={currentProject.spotlight}
4139
alt="spotlight"
4240
className="absolute top-0 right-0 w-full h-96 object-cover rounded-xl"
4341
/>
4442

45-
<div
46-
className="p-3 backdrop-filter backdrop-blur-3xl w-fit rounded-lg"
47-
style={currentProject.logoStyle}
48-
>
49-
<img
50-
className="w-10 h-10 shadow-sm"
51-
src={currentProject.logo}
52-
alt="logo"
53-
/>
54-
</div>
43+
<div className="z-10 relative">
44+
<div
45+
className="p-3 backdrop-filter backdrop-blur-3xl w-fit rounded-lg"
46+
style={currentProject.logoStyle}
47+
>
48+
<img
49+
className="w-10 h-10 shadow-sm"
50+
src={currentProject.logo}
51+
alt="logo"
52+
/>
53+
</div>
5554

56-
<div className="flex flex-col gap-5 text-white-600 my-5">
57-
<p className="text-white text-2xl font-semibold animatedText">
58-
{currentProject.title}
59-
</p>
60-
<p className="animatedText">{currentProject.desc}</p>
61-
<p className="animatedText">{currentProject.subdesc}</p>
62-
</div>
55+
<div className="flex flex-col gap-5 text-white-600 my-5">
56+
<p className="text-white text-2xl font-semibold animatedText">
57+
{currentProject.title}
58+
</p>
59+
<p className="animatedText">{currentProject.desc}</p>
60+
<p className="animatedText">{currentProject.subdesc}</p>
61+
</div>
6362

64-
<div className="flex flex-wrap items-center gap-3 overflow-x-auto ">
65-
{currentProject.tags.map((tag) => (
66-
<div
67-
key={tag.name}
68-
className="tech-logo flex justify-center items-center "
69-
>
70-
<img src={tag.path} alt={tag.name} className="object-contain" />
71-
</div>
72-
))}
73-
</div>
63+
<div className="flex flex-wrap items-center gap-3 overflow-x-auto">
64+
{currentProject.tags.map((tag) => (
65+
<div
66+
key={tag.name}
67+
className="tech-logo flex justify-center items-center"
68+
>
69+
<img
70+
src={tag.path}
71+
alt={tag.name}
72+
className="object-contain"
73+
/>
74+
</div>
75+
))}
76+
</div>
7477

75-
<a
76-
className="flex items-center gap-2 cursor-pointer text-white-600 mt-5 text-white"
77-
href={currentProject.href}
78-
target="_blank"
79-
rel="noreferrer"
80-
>
81-
<p>Check Out</p>
82-
<img src="./assets/arrow-up.png" alt="arrow" className="w-3 h-3 " />
83-
</a>
84-
85-
<div className="flex justify-between items-center mt-7">
86-
<button
87-
className="arrow-btn flex items-center justify-center"
88-
onClick={() => handleNavigation("previous")}
89-
>
90-
<img src="./assets/left-arrow.png" alt="previous project" />
91-
</button>
92-
<button
93-
className="arrow-btn flex items-center justify-center"
94-
onClick={() => handleNavigation("next")}
78+
<a
79+
className="flex items-center gap-2 cursor-pointer text-white-600 mt-5 text-white"
80+
href={currentProject.href}
81+
target="_blank"
82+
rel="noreferrer"
9583
>
84+
<p>Check Out</p>
9685
<img
97-
src="./assets/right-arrow.png"
98-
alt="next project"
99-
className="w-4 h-4"
86+
src="./assets/arrow-up.png"
87+
alt="arrow"
88+
className="w-3 h-3"
10089
/>
101-
</button>
90+
</a>
91+
</div>
92+
93+
<div className="mt-auto pt-8 w-full">
94+
<div className="flex justify-between items-center">
95+
<div className="flex flex-col items-center">
96+
<p className="text-white mb-2">Previous</p>
97+
<button
98+
className="arrow-btn flex items-center justify-center"
99+
onClick={() => handleNavigation("previous")}
100+
>
101+
<img src="./assets/left-arrow.png" alt="previous project" />
102+
</button>
103+
</div>
104+
105+
<div className="flex flex-col items-center">
106+
<p className="text-white mb-2">Next</p>
107+
<button
108+
className="arrow-btn flex items-center justify-center"
109+
onClick={() => handleNavigation("next")}
110+
>
111+
<img
112+
src="./assets/right-arrow.png"
113+
alt="next project"
114+
className="w-4 h-4"
115+
/>
116+
</button>
117+
</div>
118+
</div>
102119
</div>
103120
</div>
104121

0 commit comments

Comments
 (0)