irongit
Sign inRegister
huncholanehuncholane/slroofPublic

able to modify full team-details

huncholanehuncholaneauthored
parent ed9bafecommit 362449dfc8e88152e2e2e3a72c636811bc6c3489Browse files

2 files changed, +46 -84

+19-0components/data/teamData.js
@@ -10,11 +10,30 @@ const teamData = [
1010 position: "Founder",
1111 exp: "30 Years",
1212 email: "shaun@gmail.com",
13+ phone: "+1 (816) 898-9598",
1314 location: "Kansas City, MO",
1415 paragraphs: [
1516 "At Shaun Lake Roofing, our commitment to excellence drives everything we do. We strive to deliver the highest quality roofing solutions, using top-grade materials and advanced techniques to ensure your roof is both durable and beautiful. Our experienced team works diligently to meet and exceed your expectations, providing exceptional customer service and top-notch craftsmanship on every project.",
1617 "We are proud to be a family-owned and operated business, and we treat every customer like a member of our family. We take the time to listen to your needs and concerns, and we work closely with you to develop a customized roofing solution that meets your specific requirements. Whether you need a minor repair or a complete roof replacement, you can count on Shaun Lake Roofing to deliver superior results at a competitive price.",
1718 ],
19+ skills: [
20+ {
21+ title: "Roofing",
22+ value: 95,
23+ },
24+ {
25+ title: "Customer Service",
26+ value: 90,
27+ },
28+ {
29+ title: "Quality",
30+ value: 100,
31+ },
32+ {
33+ title: "Craftsmanship",
34+ value: 100,
35+ },
36+ ],
1837 sidenote: {
1938 img: "/assets/img/team/team_details02.jpg",
2039 title: "Committed to Excellence",
+27-84pages/team-details.js
@@ -10,6 +10,25 @@ function phoneToLink(phone) {
1010 return `tel:${phone}`;
1111 }
1212
13+function SkillBar({ title, value }) {
14+ return (
15+ <div className="progress-item">
16+ <h5 className="title">{title}</h5>
17+ <div className="progress">
18+ <div
19+ className="progress-bar"
20+ role="progressbar"
21+ style={{ width: `${value}%` }}
22+ aria-valuenow={value}
23+ aria-valuemin={0}
24+ aria-valuemax={100}
25+ />
26+ <span>{value}%</span>
27+ </div>
28+ </div>
29+ );
30+}
31+
1332 export default function TeamDetails(props) {
1433 const leadingParagraphs = props.paragraphs.slice(
1534 0,
@@ -103,62 +122,9 @@ export default function TeamDetails(props) {
103122 ))}
104123 <p className="info-two">{trailingParagraph}</p>
105124 <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>
125+ {props.skills.map((skill, index) => (
126+ <SkillBar key={`skill-${index}`} {...skill} />
127+ ))}
162128 </div>
163129 <div className="guidelines-wrap">
164130 <div className="row">
@@ -172,35 +138,12 @@ export default function TeamDetails(props) {
172138 </div>
173139 <div className="col-lg-6">
174140 <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>
141+ <h4 className="title">{props.sidenote.title}</h4>
142+ <p>{props.sidenote.content}</p>
184143 <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>
144+ {props.sidenote.quotes.map((quote, index) => (
145+ <li key={`quote-${index}`}>{quote}</li>
146+ ))}
204147 </ul>
205148 </div>
206149 </div>