Skip to content

Commit 091363f

Browse files
ankitvommuneankitvommune
committed
data
1 parent e9114a7 commit 091363f

File tree

3 files changed

+60
-885
lines changed

3 files changed

+60
-885
lines changed

‎data/data.js

+55
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,55 @@
1+
const data = {
2+
skills: [
3+
{
4+
"name": "HTML",
5+
"value": 100
6+
},
7+
{
8+
"name": "CSS",
9+
"value": 90
10+
},
11+
{
12+
"name": "JavaScript",
13+
"value": 75
14+
},
15+
{
16+
"name": "PHP",
17+
"value": 80
18+
},
19+
{
20+
"name": "MySQL",
21+
"value": 90
22+
},
23+
{
24+
"name": "Laravel",
25+
"value": 80
26+
},
27+
{
28+
"name": "Git",
29+
"value": 80
30+
},
31+
{
32+
"name": "Docker",
33+
"value": 80
34+
}
35+
]
36+
}
37+
38+
//containers
39+
const skillsContainer = document.querySelector('.skills-animation');
40+
41+
42+
// render
43+
skills = data.skills;
44+
skills.forEach(skill => {
45+
const skillItem = document.createElement('div');
46+
skillItem.classList.add('col-md-6');
47+
skillItem.innerHTML = `<div class="progress">
48+
<span class="skill">${skill.name} <i class="val">${skill.value}%</i></span>
49+
<div class="progress-bar-wrap">
50+
<div class="progress-bar" role="progressbar" aria-valuenow="${skill.value}" aria-valuemin="0" aria-valuemax="100"></div>
51+
</div>
52+
</div>
53+
`;
54+
skillsContainer.appendChild(skillItem);
55+
});

‎index.html

+5-52
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@
44
<head>
55
<meta charset="utf-8">
66
<meta content="width=device-width, initial-scale=1.0" name="viewport">
7-
<title>My Portfolio - Ankit Verma</title>
7+
<title>Portfolio - Ankit Verma</title>
88
<meta content="Ankit Verma" name="description">
99
<meta content="Ankit Verma" name="keywords">
1010

@@ -26,6 +26,7 @@
2626

2727
<!-- Main CSS File -->
2828
<link href="assets/css/main.css" rel="stylesheet">
29+
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
2930

3031
<!-- =======================================================
3132
* Template Name: iPortfolio
@@ -212,56 +213,6 @@ <h2>Skills</h2>
212213

213214
<div class="row skills-content skills-animation">
214215

215-
<div class="col-lg-6">
216-
217-
<div class="progress">
218-
<span class="skill"><span>HTML</span> <i class="val">100%</i></span>
219-
<div class="progress-bar-wrap">
220-
<div class="progress-bar" role="progressbar" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100"></div>
221-
</div>
222-
</div><!-- End Skills Item -->
223-
224-
<div class="progress">
225-
<span class="skill"><span>CSS</span> <i class="val">90%</i></span>
226-
<div class="progress-bar-wrap">
227-
<div class="progress-bar" role="progressbar" aria-valuenow="90" aria-valuemin="0" aria-valuemax="100"></div>
228-
</div>
229-
</div><!-- End Skills Item -->
230-
231-
<div class="progress">
232-
<span class="skill"><span>JavaScript</span> <i class="val">75%</i></span>
233-
<div class="progress-bar-wrap">
234-
<div class="progress-bar" role="progressbar" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100"></div>
235-
</div>
236-
</div><!-- End Skills Item -->
237-
238-
</div>
239-
240-
<div class="col-lg-6">
241-
242-
<div class="progress">
243-
<span class="skill"><span>PHP</span> <i class="val">80%</i></span>
244-
<div class="progress-bar-wrap">
245-
<div class="progress-bar" role="progressbar" aria-valuenow="80" aria-valuemin="0" aria-valuemax="100"></div>
246-
</div>
247-
</div><!-- End Skills Item -->
248-
249-
<div class="progress">
250-
<span class="skill"><span>WordPress/CMS</span> <i class="val">90%</i></span>
251-
<div class="progress-bar-wrap">
252-
<div class="progress-bar" role="progressbar" aria-valuenow="90" aria-valuemin="0" aria-valuemax="100"></div>
253-
</div>
254-
</div><!-- End Skills Item -->
255-
256-
<div class="progress">
257-
<span class="skill"><span>Photoshop</span> <i class="val">55%</i></span>
258-
<div class="progress-bar-wrap">
259-
<div class="progress-bar" role="progressbar" aria-valuenow="55" aria-valuemin="0" aria-valuemax="100"></div>
260-
</div>
261-
</div><!-- End Skills Item -->
262-
263-
</div>
264-
265216
</div>
266217

267218
</div>
@@ -827,7 +778,9 @@ <h3>Email Us</h3>
827778

828779
<!-- Main JS File -->
829780
<script src="assets/js/main.js"></script>
830-
781+
<script src="data/data.js">
782+
// console.log(data);
783+
</script>
831784
</body>
832785

833786
</html>

0 commit comments

Comments
 (0)