irongit
Sign inRegister
huncholanehuncholane/slroofPublic
slroof/pages/team-details.js
221 lines8.8 KBJavaScript
RawDownloadHistory
1import Layout from "@/components/layout/Layout";
2import Brand3 from "@/components/sections/Brand3";
3import Link from "next/link";
4
5function emailToLink(email) {
6 return `mailto:${email}`;
7}
8
9function phoneToLink(phone) {
10 return `tel:${phone}`;
11}
12
13export default function TeamDetails(props) {
14 const leadingParagraphs = props.paragraphs.slice(
15 0,
16 props.paragraphs.length - 1
17 );
18 const trailingParagraph = props.paragraphs[props.paragraphs.length - 1];
19 return (
20 <>
21 <Layout breadcrumbTitle={props.name}>
22 <div>
23 <section className="team-details-area pt-120 pb-120">
24 <div className="container">
25 <div className="row align-items-center">
26 <div className="col-lg-6">
27 <div className="team-details-thumb">
28 <img src="/assets/img/team/team_details01.jpg" alt="" />
29 </div>
30 </div>
31 <div className="col-lg-6">
32 <div className="team-details-info">
33 <div className="info-content-top">
34 <h3 className="title">{props.name}</h3>
35 <span>{props.position}</span>
36 </div>
37 <ul className="list-wrap team-info">
38 <li>
39 <span>
40 <i className="fas fa-toolbox" />
41 Experience:
42 </span>
43 {props.exp}
44 </li>
45 <li>
46 <span>
47 <i className="fas fa-envelope" />
48 E-mail:
49 </span>
50 {props.email}
51 </li>
52 <li>
53 <span>
54 <i className="fas fa-phone-alt" />
55 Phone:
56 </span>
57 {props.phone}
58 </li>
59 <li>
60 <span>
61 <i className="fas fa-map-marker-alt" />
62 Location:
63 </span>
64 {props.location}
65 </li>
66 </ul>
67 <div className="team-details-social">
68 <h6 className="title">Follow Me:</h6>
69 <ul className="list-wrap">
70 <li>
71 <Link href="#">
72 <i className="fab fa-facebook-f" />
73 </Link>
74 </li>
75 <li>
76 <Link href="#">
77 <i className="fab fa-twitter" />
78 </Link>
79 </li>
80 <li>
81 <Link href="#">
82 <i className="fab fa-linkedin-in" />
83 </Link>
84 </li>
85 <li>
86 <Link href="#">
87 <i className="fab fa-instagram" />
88 </Link>
89 </li>
90 </ul>
91 </div>
92 </div>
93 </div>
94 </div>
95 <div className="row">
96 <div className="col-lg-12">
97 <div className="team-details-content">
98 <h3 className="title">Personal Experience and Skills</h3>
99 {leadingParagraphs.map((paragraph, index) => (
100 <p className="info-one" key={`paragraph-${index}`}>
101 {paragraph}
102 </p>
103 ))}
104 <p className="info-two">{trailingParagraph}</p>
105 <div className="progress-wrap">
106 <div className="progress-item">
107 <h5 className="title">Software Development</h5>
108 <div className="progress">
109 <div
110 className="progress-bar"
111 role="progressbar"
112 style={{ width: "88%" }}
113 aria-valuenow={88}
114 aria-valuemin={0}
115 aria-valuemax={100}
116 />
117 <span>88%</span>
118 </div>
119 </div>
120 <div className="progress-item">
121 <h5 className="title">UL / UX Design</h5>
122 <div className="progress">
123 <div
124 className="progress-bar"
125 role="progressbar"
126 style={{ width: "80%" }}
127 aria-valuenow={80}
128 aria-valuemin={0}
129 aria-valuemax={100}
130 />
131 <span>80%</span>
132 </div>
133 </div>
134 <div className="progress-item">
135 <h5 className="title">Web Development</h5>
136 <div className="progress">
137 <div
138 className="progress-bar"
139 role="progressbar"
140 style={{ width: "95%" }}
141 aria-valuenow={95}
142 aria-valuemin={0}
143 aria-valuemax={100}
144 />
145 <span>95%</span>
146 </div>
147 </div>
148 <div className="progress-item">
149 <h5 className="title">SEO Optimization</h5>
150 <div className="progress">
151 <div
152 className="progress-bar"
153 role="progressbar"
154 style={{ width: "90%" }}
155 aria-valuenow={90}
156 aria-valuemin={0}
157 aria-valuemax={100}
158 />
159 <span>90%</span>
160 </div>
161 </div>
162 </div>
163 <div className="guidelines-wrap">
164 <div className="row">
165 <div className="col-lg-6">
166 <div className="guidelines-img">
167 <img
168 src="/assets/img/team/team_details02.jpg"
169 alt=""
170 />
171 </div>
172 </div>
173 <div className="col-lg-6">
174 <div className="guidelines-content">
175 <h4 className="title">Career Guidelines</h4>
176 <p>
177 As a web developer, you could work for a company
178 or agency, hoyse aor as a freelancer taking on
179 projects for individual clients. Your tasks will
180 vary depending on ki tumi your work situation, but
181 day-to-day responsibilities might generally
182 include.
183 </p>
184 <ul className="list-wrap">
185 <li>
186 Designing user interfaces and navigation menus
187 </li>
188 <li>
189 Writing and reviewing code for sites, typically
190 HTML, XML, or JavaScript
191 </li>
192 <li>
193 Troubleshooting problems with performance or
194 user experience
195 </li>
196 <li>
197 Integrating multimedia content onto a site
198 </li>
199 <li>
200 Collaborating with designers, developers, and
201 stakeholders
202 </li>
203 <li>Testing web applications</li>
204 </ul>
205 </div>
206 </div>
207 </div>
208 </div>
209 </div>
210 </div>
211 </div>
212 </div>
213 </section>
214 {/* team-details-area-end */}
215 {/* brand-area */}
216 <Brand3 />
217 </div>
218 </Layout>
219 </>
220 );
221}