Skip to content

Commit 39bffbe

Browse files
devwithmehardevwithmehar
committed
Project Section updated
1 parent 1f3f2be commit 39bffbe

20 files changed

+562
-283
lines changed

‎src/App.js‎

Lines changed: 8 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,8 @@ import AppFooter from './components/shared/AppFooter';
66
import AppHeader from './components/shared/AppHeader';
77
import './css/App.css';
88
import UseScrollToTop from './hooks/useScrollToTop';
9+
import {SingleProjectProvider} from './context/SingleProjectContext.jsx';
10+
911

1012
const About = lazy(() => import('./pages/AboutMe'));
1113
const Contact = lazy(() => import('./pages/Contact.jsx'));
@@ -26,8 +28,12 @@ function App() {
2628
<Route path="/" element={<Home />} />
2729
<Route path="projects" element={<Projects />} />
2830
<Route
29-
path="projects/single-project"
30-
element={<ProjectSingle />}
31+
path="projects/:projectId"
32+
element={
33+
<SingleProjectProvider>
34+
<ProjectSingle />
35+
</SingleProjectProvider>
36+
}
3137
/>
3238

3339
<Route path="about" element={<About />} />

‎src/components/projects/ProjectGallery.jsx‎

Lines changed: 19 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -6,19 +6,25 @@ const ProjectGallery = () => {
66

77
return (
88
<div className="grid grid-cols-1 sm:grid-cols-3 sm:gap-10 mt-12">
9-
{singleProjectData.ProjectImages.map((project) => {
10-
return (
11-
<div className="mb-10 sm:mb-0" key={project.id}>
12-
<img
13-
src={project.img}
14-
className="rounded-xl cursor-pointer shadow-lg sm:shadow-none"
15-
alt={project.title}
16-
key={project.id}
17-
/>
18-
</div>
19-
);
20-
})}
21-
</div>
9+
{singleProjectData.ProjectImages.map((project) => (
10+
<div
11+
className="flex flex-col items-center bg-blue-900 rounded-xl shadow-lg p-4 h-[400px] w-full"
12+
key={project.id}
13+
>
14+
<img
15+
src={project.img}
16+
className="h-[250px] w-full object-cover rounded-lg"
17+
alt={project.title}
18+
/>
19+
<div className="mt-4 text-center">
20+
<h3 className="text-lg font-semibold text-white">{project.title}</h3>
21+
<p className="text-sm text-gray-300">{project.type}</p>
22+
</div>
23+
</div>
24+
))}
25+
</div>
26+
27+
2228
);
2329
};
2430

‎src/components/projects/ProjectHeader.jsx‎

Lines changed: 17 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import { useContext } from 'react';
2-
import { FiClock, FiTag } from 'react-icons/fi';
2+
import { FiClock, FiTag, FiExternalLink } from 'react-icons/fi'; // Added FiExternalLink
33
import SingleProjectContext from '../../context/SingleProjectContext';
44

55
const ProjectSingleHeader = () => {
@@ -10,19 +10,33 @@ const ProjectSingleHeader = () => {
1010
<p className="font-general-medium text-left text-3xl sm:text-4xl font-bold text-primary-dark dark:text-primary-light mt-14 sm:mt-20 mb-7">
1111
{singleProjectData.ProjectHeader.title}
1212
</p>
13-
<div className="flex">
13+
<div className="flex items-center">
1414
<div className="flex items-center mr-10">
1515
<FiClock className="text-lg text-ternary-dark dark:text-ternary-light" />
1616
<span className="font-general-regular ml-2 leading-none text-primary-dark dark:text-primary-light">
1717
{singleProjectData.ProjectHeader.publishDate}
1818
</span>
1919
</div>
20-
<div className="flex items-center">
20+
<div className="flex items-center mr-10">
2121
<FiTag className="text-lg text-ternary-dark dark:text-ternary-light" />
2222
<span className="font-general-regular ml-2 leading-none text-primary-dark dark:text-primary-light">
2323
{singleProjectData.ProjectHeader.tags}
2424
</span>
2525
</div>
26+
{/* Add Live Link */}
27+
{singleProjectData.ProjectHeader.liveLink && (
28+
<div className="flex items-center">
29+
<a
30+
href={singleProjectData.ProjectHeader.liveLink}
31+
target="_blank"
32+
rel="noopener noreferrer"
33+
className="flex items-center text-primary-dark dark:text-primary-light hover:underline"
34+
>
35+
<FiExternalLink className="text-lg mr-2" />
36+
<span>Live Demo</span>
37+
</a>
38+
</div>
39+
)}
2640
</div>
2741
</div>
2842
);

‎src/components/projects/ProjectInfo.jsx‎

Lines changed: 108 additions & 92 deletions
Original file line numberDiff line numberDiff line change
@@ -5,107 +5,123 @@ const ProjectInfo = () => {
55
const { singleProjectData } = useContext(SingleProjectContext);
66

77
return (
8-
<div className="block sm:flex gap-0 sm:gap-10 mt-14">
9-
<div className="w-full sm:w-1/3 text-left">
10-
{/* Single project client details */}
11-
<div className="mb-7">
12-
<p className="font-general-regular text-2xl font-semibold text-secondary-dark dark:text-secondary-light mb-2">
13-
{singleProjectData.ProjectInfo.ClientHeading}
14-
</p>
15-
<ul className="leading-loose">
16-
{singleProjectData.ProjectInfo.CompanyInfo.map(
17-
(info) => {
18-
return (
19-
<li
20-
className="font-general-regular text-ternary-dark dark:text-ternary-light"
21-
key={info.id}
22-
>
23-
<span>{info.title}: </span>
24-
<a
25-
href="https://stoman.me"
26-
className={
27-
info.title === 'Website' ||
28-
info.title === 'Phone'
29-
? 'hover:underline hover:text-indigo-500 dark:hover:text-indigo-400 cursor-pointer duration-300'
30-
: ''
31-
}
32-
aria-label="Project Website and Phone"
33-
>
34-
{info.details}
35-
</a>
36-
</li>
37-
);
38-
}
39-
)}
40-
</ul>
41-
</div>
8+
9+
<div className="mt-14">
10+
{/* Page Wrapper */}
11+
<div className="bg-white dark:bg-gray-900 transition-colors duration-300">
12+
{/* Header Section */}
13+
<div className="text-center mb-10">
14+
<h1 className="text-4xl font-bold text-secondary-dark dark:text-secondary-light">
15+
{singleProjectData.projectName}
16+
</h1>
17+
<p className="text-lg text-secondary-dark dark:text-secondary-light mt-4">
18+
{singleProjectData.description}
19+
</p>
20+
</div>
4221

43-
{/* Single project objectives */}
44-
<div className="mb-7">
45-
<p className="font-general-regular text-2xl font-semibold text-ternary-dark dark:text-ternary-light mb-2">
46-
{singleProjectData.ProjectInfo.ObjectivesHeading}
47-
</p>
48-
<p className="font-general-regular text-primary-dark dark:text-ternary-light">
49-
{singleProjectData.ProjectInfo.ObjectivesDetails}
50-
</p>
51-
</div>
22+
{/* Features Section */}
23+
<div className="mb-10">
24+
<h2 className="text-2xl font-semibold text-secondary-dark dark:text-secondary-light mb-5">
25+
Key Features
26+
</h2>
27+
<ul className="list-disc list-inside text-secondary-dark dark:text-secondary-light space-y-2">
28+
{singleProjectData.features.map((feature, index) => (
29+
<li key={index}>{feature}</li>
30+
))}
31+
</ul>
32+
</div>
5233

53-
{/* Single project technologies */}
54-
<div className="mb-7">
55-
<p className="font-general-regular text-2xl font-semibold text-ternary-dark dark:text-ternary-light mb-2">
56-
{singleProjectData.ProjectInfo.Technologies[0].title}
57-
</p>
58-
<p className="font-general-regular text-primary-dark dark:text-ternary-light">
59-
{singleProjectData.ProjectInfo.Technologies[0].techs.join(
60-
', '
61-
)}
62-
</p>
34+
{/* Technologies Used Section */}
35+
<div className="mb-10">
36+
<h2 className="text-2xl font-semibold text-secondary-dark dark:text-secondary-light mb-5">
37+
Technologies Used
38+
</h2>
39+
<div className="grid grid-cols-1 sm:grid-cols-2 gap-6">
40+
<div>
41+
<h3 className="text-lg font-medium text-secondary-dark dark:text-secondary-light mb-3">
42+
Backend
43+
</h3>
44+
<ul className="list-disc list-inside text-secondary-dark dark:text-secondary-light">
45+
{singleProjectData.technologies.backend.map((tech, index) => (
46+
<li key={index}>{tech}</li>
47+
))}
48+
</ul>
6349
</div>
64-
65-
{/* Single project social sharing */}
6650
<div>
67-
<p className="font-general-regular text-2xl font-semibold text-ternary-dark dark:text-ternary-light mb-2">
68-
{singleProjectData.ProjectInfo.SocialSharingHeading}
69-
</p>
70-
<div className="flex items-center gap-3 mt-5">
71-
{singleProjectData.ProjectInfo.SocialSharing.map(
72-
(social) => {
73-
return (
74-
<a
75-
key={social.id}
76-
href={social.url}
77-
target="__blank"
78-
aria-label="Share Project"
79-
className="bg-ternary-light dark:bg-ternary-dark text-gray-400 hover:text-primary-dark dark:hover:text-primary-light p-2 rounded-lg shadow-sm duration-500"
80-
>
81-
<span className="text-lg lg:text-2xl">
82-
{social.icon}
83-
</span>
84-
</a>
85-
);
86-
}
87-
)}
88-
</div>
51+
<h3 className="text-lg font-medium text-secondary-dark dark:text-secondary-light mb-3">
52+
Frontend
53+
</h3>
54+
<ul className="list-disc list-inside text-secondary-dark dark:text-secondary-light">
55+
{singleProjectData.technologies.frontend.map((tech, index) => (
56+
<li key={index}>{tech}</li>
57+
))}
58+
</ul>
8959
</div>
9060
</div>
61+
</div>
9162

92-
{/* Single project right section */}
93-
<div className="w-full sm:w-2/3 text-left mt-10 sm:mt-0">
94-
<p className="font-general-regular text-primary-dark dark:text-primary-light text-2xl font-bold mb-7">
95-
{singleProjectData.ProjectInfo.ProjectDetailsHeading}
96-
</p>
97-
{singleProjectData.ProjectInfo.ProjectDetails.map((details) => {
98-
return (
99-
<p
100-
key={details.id}
101-
className="font-general-regular mb-5 text-lg text-ternary-dark dark:text-ternary-light"
102-
>
103-
{details.details}
104-
</p>
105-
);
106-
})}
63+
{/* Key Entities Section */}
64+
{singleProjectData.keyEntities && singleProjectData.keyEntities.length > 0 ?
65+
<div className="mb-10">
66+
<h2 className="text-2xl font-semibold text-secondary-dark dark:text-secondary-light mb-5">
67+
Key Entities
68+
</h2>
69+
<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6">
70+
{singleProjectData.keyEntities.map((entity, index) => (
71+
<div key={index} className="p-4 border rounded-lg shadow-sm border-gray-300 dark:border-gray-700">
72+
<h3 className="text-lg font-medium text-secondary-dark dark:text-secondary-light mb-3">
73+
{entity.name}
74+
</h3>
75+
<ul className="list-disc list-inside text-secondary-dark dark:text-secondary-light">
76+
{entity.fields.map((field, idx) => (
77+
<li key={idx}>{field}</li>
78+
))}
79+
</ul>
80+
</div>
81+
))}
10782
</div>
83+
</div> : ""
84+
}
85+
{/* Deployment Section */}
86+
<div className="mb-10">
87+
<h2 className="text-2xl font-semibold text-secondary-dark dark:text-secondary-light mb-5">
88+
Deployment
89+
</h2>
90+
<p className="text-lg text-secondary-dark dark:text-secondary-light">
91+
Platform: <strong>{singleProjectData.deployment.platform}</strong>
92+
</p>
93+
<ol className="list-decimal list-inside text-secondary-dark dark:text-secondary-light mt-3">
94+
{singleProjectData.deployment.steps.map((step, index) => (
95+
<li key={index}>{step}</li>
96+
))}
97+
</ol>
98+
</div>
99+
100+
{/* Target Audience Section */}
101+
<div className="mb-10">
102+
<h2 className="text-2xl font-semibold text-secondary-dark dark:text-secondary-light mb-5">
103+
Target Audience
104+
</h2>
105+
<p className="text-lg text-secondary-dark dark:text-secondary-light">
106+
{singleProjectData.targetAudience}
107+
</p>
108108
</div>
109+
110+
{/* Future Plans Section */}
111+
<div>
112+
<h2 className="text-2xl font-semibold text-secondary-dark dark:text-secondary-light mb-5">
113+
Future Plans
114+
</h2>
115+
<ul className="list-disc list-inside text-lg text-secondary-dark dark:text-secondary-light space-y-2">
116+
{singleProjectData.futurePlans.map((plan, index) => (
117+
<li key={index}>{plan}</li>
118+
))}
119+
</ul>
120+
</div>
121+
</div>
122+
</div>
123+
124+
109125
);
110126
};
111127

‎src/components/projects/ProjectSingle.jsx‎

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,24 +1,24 @@
11
import { motion } from 'framer-motion';
22
import { Link } from 'react-router-dom';
33

4-
const ProjectSingle = ({ title, category, image }) => {
4+
const ProjectSingle = ({ id, title, category, image }) => {
55
return (
66
<motion.div
77
initial={{ opacity: 0 }}
8-
animate={{ opacity: 1, delay: 1 }}
8+
animate={{ opacity: 1 }}
99
transition={{
1010
ease: 'easeInOut',
1111
duration: 0.7,
1212
delay: 0.15,
1313
}}
1414
>
15-
<Link to="/projects/single-project" aria-label="Single Project">
15+
<Link to={`/projects/${id}`} aria-label={title}>
1616
<div className="rounded-xl shadow-lg hover:shadow-xl cursor-pointer mb-10 sm:mb-0 bg-secondary-light dark:bg-ternary-dark">
1717
<div>
1818
<img
1919
src={image}
20-
className="rounded-t-xl border-none"
21-
alt="Single Project"
20+
className="rounded-t-xl border-none w-full h-52 object-cover"
21+
alt={title}
2222
/>
2323
</div>
2424
<div className="text-center px-4 py-6">

‎src/components/projects/ProjectsGrid.jsx‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -97,6 +97,7 @@ const ProjectsGrid = () => {
9797
{selectProject
9898
? selectProjectsByCategory.map((project) => (
9999
<ProjectSingle
100+
id = {project.id}
100101
title={project.title}
101102
category={project.category}
102103
image={project.img}
@@ -106,6 +107,7 @@ const ProjectsGrid = () => {
106107
: searchProject
107108
? searchProjectsByTitle.map((project) => (
108109
<ProjectSingle
110+
id = {project.id}
109111
title={project.title}
110112
category={project.category}
111113
image={project.img}
@@ -114,6 +116,7 @@ const ProjectsGrid = () => {
114116
))
115117
: projects.map((project) => (
116118
<ProjectSingle
119+
id = {project.id}
117120
title={project.title}
118121
category={project.category}
119122
image={project.img}

0 commit comments

Comments
 (0)