Skip to content

Commit 0d79a91

Browse files
MrSIHABMrSIHAB
committed
Updating about us
1 parent e07acd5 commit 0d79a91

File tree

9 files changed

+1280
-1157
lines changed

9 files changed

+1280
-1157
lines changed

‎img/mathab.png

165 KB
Loading

‎img/mobileOs.png

35.7 KB
Loading

‎img/shoaib_steve.jpg

143 KB
Loading

‎index.html

Lines changed: 468 additions & 304 deletions
Large diffs are not rendered by default.

‎portfolioPost.json

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
[
2+
{
3+
"imgSrc": "img/ababil_home.png",
4+
"title": "Ababil HomePage",
5+
"description": "A browser <b>Homepage/NewTab</b> for Professional users. It's featured with popular <em>Search Engines and website shortcuts</em>",
6+
"link": "https://github.com/MrSIHAB/ababil-professional"
7+
}
8+
]

‎postData.js

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
const data = [
2+
{
3+
imgSrc: "img/ababil_home.png",
4+
title: "Ababil HomePage",
5+
description:
6+
"A browser <b>Homepage/NewTab</b> for Professional users. It's featured with popular <em>Search Engines and website shortcuts</em>",
7+
link: "https://github.com/MrSIHAB/ababil-professional",
8+
},
9+
];

‎script.js

Lines changed: 98 additions & 82 deletions
Original file line numberDiff line numberDiff line change
@@ -1,116 +1,132 @@
11
const changingText = document.getElementById("changingText");
2-
const cngArray = ['Web Developer', 'Graphics Designer', 'Web Designer', 'Frontend Developer', 'Full stack Developer', 'Backend Developer', 'Degital Marketer', 'On Page SEO Expert'];
3-
let currentIndex = 0
2+
const cngArray = [
3+
"Web Development",
4+
"Frontend Development",
5+
"Backend Development",
6+
"Mobile app Development",
7+
"Full stack",
8+
"Cross Platform App",
9+
"Desktop app Development",
10+
"Flutter",
11+
"FrameWorks",
12+
"E-commerce",
13+
"Git/GitHab",
14+
"Docker",
15+
"DataBases",
16+
"Server Structure",
17+
"Linux",
18+
];
19+
let currentIndex = 0;
420

521
function Slider() {
6-
changingText.textContent = cngArray[currentIndex];
7-
currentIndex = (currentIndex + 1) % cngArray.length;
22+
changingText.textContent = cngArray[currentIndex];
23+
currentIndex = (currentIndex + 1) % cngArray.length;
824
}
925

1026
setInterval(Slider, 2000);
1127

12-
13-
14-
15-
1628
// Skill > Circle --------------//-----------///------------///
1729

18-
const circle = document.querySelectorAll('.circle');
30+
const circle = document.querySelectorAll(".circle");
1931
const skill = document.querySelectorAll(".skill");
2032

2133
function isElementInViewport(element) {
22-
const rect = element.getBoundingClientRect();
23-
return (
24-
rect.top >= 0 &&
25-
rect.left >= 0 &&
26-
rect.bottom <= (window.innerHeight || document.documentElement.clientHeight) &&
27-
rect.right <= (window.innerWidth || document.documentElement.clientWidth)
28-
);
34+
const rect = element.getBoundingClientRect();
35+
return (
36+
rect.top >= 0 &&
37+
rect.left >= 0 &&
38+
rect.bottom <=
39+
(window.innerHeight || document.documentElement.clientHeight) &&
40+
rect.right <= (window.innerWidth || document.documentElement.clientWidth)
41+
);
2942
}
3043

31-
circle.forEach(elem => {
32-
var dots = elem.getAttribute("data-dots");
33-
var marked = elem.getAttribute("data-percent");
34-
var parcent = Math.floor(dots * marked / 100)
35-
var points = "";
36-
var rotate = 360 / dots;
37-
38-
for (let i = 0; i < dots; i++) {
39-
points += `<div class="points" style="--i:${i}; --rot:${rotate}deg;"></div>`
40-
41-
}
42-
43-
elem.innerHTML = points;
44-
45-
window.addEventListener('scroll' , async function handleScroll(){
46-
circle.forEach(element => {
47-
if (isElementInViewport(element)) {
48-
const pointMarked = elem.querySelectorAll('.points');
49-
for (let s = 0; s < parcent; s++) {
50-
pointMarked[s].classList.add('marked');
51-
// console.log(pointMarked[s])
52-
}
53-
}
54-
});
55-
})
56-
57-
})
58-
59-
const bar = document.querySelectorAll(".fillBar");
60-
window.addEventListener('scroll' , async function handleScroll2() {
61-
bar.forEach(element => {
62-
if (isElementInViewport(element)) {
63-
element.classList.add('run')
64-
44+
circle.forEach((elem) => {
45+
var dots = elem.getAttribute("data-dots");
46+
var marked = elem.getAttribute("data-percent");
47+
var parcent = Math.floor((dots * marked) / 100);
48+
var points = "";
49+
var rotate = 360 / dots;
50+
51+
for (let i = 0; i < dots; i++) {
52+
points += `<div class="points" style="--i:${i}; --rot:${rotate}deg;"></div>`;
53+
}
54+
55+
elem.innerHTML = points;
56+
57+
window.addEventListener("scroll", async function handleScroll() {
58+
circle.forEach((element) => {
59+
if (isElementInViewport(element)) {
60+
const pointMarked = elem.querySelectorAll(".points");
61+
for (let s = 0; s < parcent; s++) {
62+
pointMarked[s].classList.add("marked");
63+
// console.log(pointMarked[s])
6564
}
66-
})
67-
})
68-
69-
65+
}
66+
});
67+
});
68+
});
7069

70+
const bar = document.querySelectorAll(".fillBar");
71+
window.addEventListener("scroll", async function handleScroll2() {
72+
bar.forEach((element) => {
73+
if (isElementInViewport(element)) {
74+
element.classList.add("run");
75+
}
76+
});
77+
});
7178

7279
// navigation button -------------------//-------------//------------------//-------------/------------------//----
7380

7481
const navbtn = document.getElementById("navbtn");
75-
const navli = document.querySelector('.navlist');
82+
const navli = document.querySelector(".navlist");
7683

7784
function togglehide() {
78-
if (navli.style.display == 'none') {
79-
navli.style.display = 'block'
80-
} else {
81-
navli.style.display = 'none'
82-
}
85+
if (navli.style.display == "none") {
86+
navli.style.display = "block";
87+
} else {
88+
navli.style.display = "none";
89+
}
8390
}
8491

85-
navbtn.addEventListener('click', togglehide);
92+
navbtn.addEventListener("click", togglehide);
8693

87-
window.addEventListener('scroll', navhide = ()=>{
88-
if (navli.style.display === 'block') {
89-
navli.style.display = 'none';
94+
window.addEventListener(
95+
"scroll",
96+
(navhide = () => {
97+
if (navli.style.display === "block") {
98+
navli.style.display = "none";
9099
}
91-
});
92-
100+
})
101+
);
93102

94103
// light theme ///////////////////////////////////////////////////////////////
95104
const lightTheme = document.getElementById("light-theme");
96-
const lightbtn = document.getElementById('light')
97-
console.log(lightTheme)
98-
99-
100-
if (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) {
101-
lightTheme.innerHTML = `<link rel="stylesheet" href="style.css">`
105+
const lightbtn = document.getElementById("light");
106+
console.log(lightTheme);
107+
108+
if (
109+
window.matchMedia &&
110+
window.matchMedia("(prefers-color-scheme: dark)").matches
111+
) {
112+
lightTheme.innerHTML = `<link rel="stylesheet" href="style.css">`;
102113
} else {
103-
lightTheme.innerHTML = `<link rel="stylesheet" href="light.css">`;
114+
lightTheme.innerHTML = `<link rel="stylesheet" href="light.css">`;
104115
}
105116

106-
107-
108117
// lightTheme.innerHTML = '<link rel="stylesheet" href="light.css" id="light-theme">'
109-
function theme(){
110-
if (lightTheme.href == "style.css") {
111-
lightTheme.href = "light.css"
112-
} else {
113-
lightTheme.href = "style.css"
114-
}
118+
function theme() {
119+
if (lightTheme.href == "style.css") {
120+
lightTheme.href = "light.css";
121+
} else {
122+
lightTheme.href = "style.css";
123+
}
115124
}
116-
lightbtn.addEventListener('click', theme)
125+
lightbtn.addEventListener("click", theme);
126+
127+
// =============== PortFolio Posts ===================
128+
129+
// const postParent = document.getElementById("post-parent");
130+
// const post = postCardTemplate(data[0]);
131+
132+
// postParent.appendChild(post);

0 commit comments

Comments
 (0)