Skip to content

Commit a7aa3bf

Browse files
realstomanrealstoman
committed
Single project complete
1 parent 45ed8c1 commit a7aa3bf

File tree

3 files changed

+120
-8
lines changed

3 files changed

+120
-8
lines changed

‎src/components/ProjectInfo.js

Lines changed: 102 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,102 @@
1+
import { ProjectInfo as ProjectsData } from '../utils/SingleProjectData';
2+
3+
const ProjectInfo = () => {
4+
return (
5+
<div className="block sm:flex gap-0 sm:gap-10 mt-14">
6+
<div className="w-full sm:w-1/3 text-left">
7+
{/* Single project client details start */}
8+
<div className="mb-7">
9+
<p className="text-2xl font-semibold text-secondary-dark dark:text-secondary-light mb-2">
10+
{ProjectsData.ClientHeading}
11+
</p>
12+
<ul className="leading-loose">
13+
{ProjectsData.CompanyInfo.map((info) => {
14+
<li className="text-ternary-dark dark:text-ternary-light">
15+
<span>{info.title}: </span>
16+
<a
17+
href="#"
18+
className={
19+
info.title == 'Website' ||
20+
info.title == 'Phone'
21+
? 'hover:underline cursor-pointer'
22+
: ''
23+
}
24+
aria-label="Project Webiste and Phone"
25+
>
26+
{info.details}
27+
</a>
28+
</li>;
29+
})}
30+
</ul>
31+
</div>
32+
{/* Single project client details end */}
33+
34+
{/* Single project objectives start */}
35+
<div className="mb-7">
36+
<p className="text-2xl font-semibold text-ternary-dark dark:text-ternary-light mb-2">
37+
{ProjectsData.ObjectivesHeading}
38+
</p>
39+
<p className="text-primary-dark dark:text-ternary-light">
40+
{ProjectsData.ObjectivesDetails}
41+
</p>
42+
</div>
43+
{/* Single project objectives end */}
44+
45+
{/* Single project technologies start */}
46+
<div className="mb-7">
47+
<p className="text-2xl font-semibold text-ternary-dark dark:text-ternary-light mb-2">
48+
{ProjectsData.Technologies[0].title}
49+
</p>
50+
<p className="text-primary-dark dark:text-ternary-light">
51+
{ProjectsData.Technologies[0].techs.join(', ')}
52+
</p>
53+
</div>
54+
{/* Single project technologies end */}
55+
56+
{/* Single project social sharing start */}
57+
<div>
58+
<p className="text-2xl font-semibold text-ternary-dark dark:text-ternary-light mb-2">
59+
{ProjectsData.SocialSharingHeading}
60+
</p>
61+
<div className="flex items-center gap-3 mt-5">
62+
{ProjectsData.SocialSharing.map((social) => {
63+
return (
64+
<a
65+
key={social.id}
66+
href={social.url}
67+
target="__blank"
68+
aria-label="Share Project"
69+
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"
70+
>
71+
{social.icon}
72+
</a>
73+
);
74+
})}
75+
</div>
76+
</div>
77+
{/* Single project social sharing end */}
78+
</div>
79+
{/* Single project left section details end */}
80+
81+
{/* Single project right section details start */}
82+
<div className="w-full sm:w-2/3 text-left mt-10 sm:mt-0">
83+
<p className="text-primary-dark dark:text-primary-light text-2xl font-bold mb-7">
84+
{ProjectsData.ProjectDetailsHeading}
85+
</p>
86+
{ProjectsData.ProjectDetails.map((details) => {
87+
return (
88+
<p
89+
key={details.id}
90+
className="mb-5 text-lg text-ternary-dark dark:text-ternary-light"
91+
>
92+
{details.details}
93+
</p>
94+
);
95+
})}
96+
</div>
97+
{/* Single project right section details end */}
98+
</div>
99+
);
100+
};
101+
102+
export default ProjectInfo;

‎src/pages/ProjectSingle.js

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,14 @@
11
import ProjectGallery from '../components/ProjectGallery';
22
import ProjectHeader from '../components/ProjectHeader';
3+
import ProjectInfo from '../components/ProjectInfo';
34
import ProjectRelatedProjects from '../components/ProjectRelatedProjects';
45

56
const ProjectSingle = () => {
67
return (
78
<div className="container mx-auto mt-5 sm:mt-10">
89
<ProjectHeader />
910
<ProjectGallery />
11+
<ProjectInfo />
1012
<ProjectRelatedProjects />
1113
</div>
1214
);

‎src/utils/SingleProjectData.js

Lines changed: 16 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,14 @@ import Image3 from '../images/mobile-project-2.jpg';
44
import Image4 from '../images/mobile-project-1.jpg';
55
import Image5 from '../images/web-project-1.jpg';
66
import Image6 from '../images/ui-project-2.jpg';
7+
import {
8+
FiDribbble,
9+
FiFacebook,
10+
FiInstagram,
11+
FiLinkedin,
12+
FiTwitter,
13+
FiYoutube,
14+
} from 'react-icons/fi';
715

816
export const ProjectHeader = {
917
title: 'Project Management UI',
@@ -92,42 +100,42 @@ export const ProjectInfo = {
92100
'Lorem ipsum dolor, sit amet consectetur adipisicing elit. Nihil vel illum asperiores dignissimos cumque quibusdam et fugiat voluptatem nobis suscipit explicabo, eaque consequatur nesciunt, fugit eligendi corporis laudantium adipisci soluta? Lorem ipsum, dolor sit amet consectetur adipisicing elit. Incidunt totam dolorum, ducimus obcaecati, voluptas facilis molestias nobis ut quam natus similique inventore excepturi optio ipsa deleniti fugit illo. Unde, amet! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsum illo necessitatibus perspiciatis! Aperiam perferendis labore temporibus, eos culpa corporis recusandae quas, fuga voluptatibus nesciunt odit libero tenetur neque consequatur ea.',
93101
},
94102
],
95-
SocialSharingsHeading: 'Share This',
96-
SocialSharings: [
103+
SocialSharingHeading: 'Share This',
104+
SocialSharing: [
97105
{
98106
id: 1,
99107
name: 'Twitter',
100-
icon: 'twitter',
108+
icon: <FiTwitter />,
101109
url: 'https://twitter.com/NangialaiStoman',
102110
},
103111
{
104112
id: 2,
105113
name: 'Instagram',
106-
icon: 'instagram',
114+
icon: <FiInstagram />,
107115
url: 'https://instagram.com/NangialaiStoman',
108116
},
109117
{
110118
id: 3,
111119
name: 'Facebook',
112-
icon: 'facebook',
120+
icon: <FiFacebook />,
113121
url: 'https://facebook.com/',
114122
},
115123
{
116124
id: 4,
117125
name: 'LinkedIn',
118-
icon: 'linkedin',
126+
icon: <FiLinkedin />,
119127
url: 'https://linkedin.com/',
120128
},
121129
{
122130
id: 5,
123131
name: 'Youtube',
124-
icon: 'youtube',
132+
icon: <FiYoutube />,
125133
url: 'https://www.youtube.com/c/StomanStudio',
126134
},
127135
{
128136
id: 5,
129137
name: 'Dribbble',
130-
icon: 'dribbble',
138+
icon: <FiDribbble />,
131139
url: 'https://www.dribbble.com/',
132140
},
133141
],

0 commit comments

Comments
 (0)