diff --git a/images/photo.png b/images/photo.png new file mode 100644 index 0000000..d1fb2b6 Binary files /dev/null and b/images/photo.png differ diff --git a/index.html b/index.html index 0cc27a0..d091969 100644 --- a/index.html +++ b/index.html @@ -22,27 +22,27 @@ -
+

Atong Jonathan Wang'

@@ -136,21 +136,119 @@

Data Analysis

⚡ Creating application backend in Node, Express & Flask

- -
- -
- +
-
+ +
+
+
+
+ my photo +
+
+

Contact Me

+

I am available on almost every social media. You can message me, I will reply within 24 hours. I can help you with ML, AI, React, Android, Cloud and Opensource Development.

+ +
+ +
+
+
+
+
+
+
+ task +
+
+

Blogs

+

For individual fundamental empowerment, I like to write powerful lessons that create impact on each of the reader individually to change the core of their character.

+
+ +
+
+ +
+
+
+
+
+ message sent
+
+

Address

+

Ngong Race Course, Ngong Road, Nairobi,Kenya

+
+ +
+
+ +
+
+
+ + +
+
+ +
+
+ +
+
+ +
+
+ +
+
+ +
+
+
+
+
+
+ +
+ +
+ + \ No newline at end of file diff --git a/script.js b/script.js index 81d0192..cafeac1 100644 --- a/script.js +++ b/script.js @@ -1,13 +1,35 @@ document.addEventListener("DOMContentLoaded", ()=>{ + showSection(document.getElementById("home")); window.onscroll = ()=>{ let distanceScrolled = window.scrollY; let arrowBtn = document.getElementById("arrow") - if (distanceScrolled>0) + if (distanceScrolled>10) { arrowBtn.style.visibility = "visible"; } else{ arrowBtn.style.visibility = "hidden"; } + // console.log(distanceScrolled) }; -}); \ No newline at end of file + function showSection(section){ + const sections = document.getElementsByClassName("section"); + Array.from(sections).forEach((section)=>{ + section.style.display = "none"; + }); + + section.style.display = "block"; + }; + + const links = document.getElementsByClassName("nav-link"); + Array.from(links).forEach((nav)=> + { + let section = nav.dataset.section; + nav.addEventListener("click", ()=> + { + showSection(document.getElementById(`${section}`)); + }); + + }) + + }); \ No newline at end of file diff --git a/style.css b/style.css index b0441a2..eb17de2 100644 --- a/style.css +++ b/style.css @@ -81,8 +81,12 @@ a > span { background-color: rgb(166 225 249); } +.nav-link:active +{ + background-color: rgb(40, 160, 207); +} -.main +.home { display: flex; flex-direction: column; @@ -357,4 +361,105 @@ a{ font-size: 30px; border-radius: 47%; visibility: hidden; + z-index: 1; +} +.footer +{ + text-align: center; + display: flex; + justify-content: center; + font-family: "Merriweather", serif; +} + +/* Contact Page CSS */ +.contact +{ + width: 100%; + padding: 0 5%; + /* background-color: red; */ + display: flex; + flex-direction: column; + row-gap: 20px; +} +.contact-me +{ + width: 100%; + + /* background-color: yellow; */ +} +.contact-me-div +{ + width: 100%; + display: flex; + justify-content: space-between; + + /* background-color: blue; */ +} +.my-photo-div +{ + width: 45%; + height: 500px; + padding: 20px; +} +.my-photo +{ + width: 100%; + height: 100%; + border-radius: 50%; + border: 4px solid black; + +} +.contact-desc-div +{ + width: 45%; + text-align: center; + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + row-gap: 5px; + padding: 50px 0; +} +.resume +{ + width: 100%; + padding: 10px 20px; + +} +.blogs +{ + width: 100%; +} +.blogs-div +{ + width: 100%; + display: flex; + justify-content: space-between; +} +.blogs-img-div +{ + width: 45%; + order: 2; +} +.blogs-desc-div +{ + width: 45%; + text-align: center; + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + row-gap: 5px; + /* background-color: yellow; */ + +} +.blog-btn +{ + width: 100%; + padding: 10px 20px; + margin: 0; +} +.address-img-div +{ + order: 0; } \ No newline at end of file