diff --git a/Screenshot (112).png b/Screenshot (112).png new file mode 100644 index 0000000..ca36749 Binary files /dev/null and b/Screenshot (112).png differ diff --git a/Screenshot (113).png b/Screenshot (113).png new file mode 100644 index 0000000..9795335 Binary files /dev/null and b/Screenshot (113).png differ diff --git a/Screenshot (114).png b/Screenshot (114).png new file mode 100644 index 0000000..68cd809 Binary files /dev/null and b/Screenshot (114).png differ diff --git a/Screenshot (117).png b/Screenshot (117).png new file mode 100644 index 0000000..0afda54 Binary files /dev/null and b/Screenshot (117).png differ diff --git a/Screenshot (118).png b/Screenshot (118).png new file mode 100644 index 0000000..c501e89 Binary files /dev/null and b/Screenshot (118).png differ diff --git a/Screenshot (119).png b/Screenshot (119).png new file mode 100644 index 0000000..4b3e91e Binary files /dev/null and b/Screenshot (119).png differ diff --git a/Screenshot (141).png b/Screenshot (141).png new file mode 100644 index 0000000..62539f0 Binary files /dev/null and b/Screenshot (141).png differ diff --git a/Screenshot (246).png b/Screenshot (246).png new file mode 100644 index 0000000..c031ac3 Binary files /dev/null and b/Screenshot (246).png differ diff --git a/console_2242445.png b/console_2242445.png new file mode 100644 index 0000000..deea5eb Binary files /dev/null and b/console_2242445.png differ diff --git a/index.css b/index.css new file mode 100644 index 0000000..9407573 --- /dev/null +++ b/index.css @@ -0,0 +1,532 @@ +body { + font-size: 20px; + min-height: 100vh; +} + + +section { + width: 100%; + transition: all .3s; +} + +#sec-1 .container { + background-color: white; +} + +.scrollable { + overflow-y: scroll; + height: 400px; + width: 70%; + background-color: rgb(251, 252, 252); + margin-right: 30px; + padding: 30px; + +} + +.projecs { + display: flex; + justify-content: center; + align-items: center; + min-height: 100vh; +} + +.hidden:nth-child(2) { + transition-delay: 300ms; +} + +.hidden:nth-child(3) { + transition-delay: 700ms; +} + +.hidden:nth-child(4) { + transition-delay: 1000ms; +} + +.hidden { + opacity: 0; + filter: blur(5px); + transform: translateX(-100%); + transition: all 1s; +} + +.show { + opacity: 1; + filter: blur(0); + transform: translateX(0); + transition: all 2s; +} + +.contact { + opacity: 0; + filter: blur(5s); + transform: translateY(100%); + transition: all 1s; +} + +.contact:nth-child(2) { + transition-delay: 300ms; +} + +.contact:nth-child(3) { + transition-delay: 700ms; +} + +.contact:nth-child(4) { + transition-delay: 1000ms; +} + +.contact i { + font-size: 45px; + margin: 0 60px 0 50px; +} + +.show1 { + opacity: 1; + filter: blur(0); + transform: translateY(0); + transition: all 2s; +} + +.skills_para a:hover { + color: blue; +} + +.contact a:hover { + color: blue; +} + +.skills_para { + margin: 20px 0 10px 0; + padding: 30px 20px 20px 30px; + opacity: 0; + filter: blur(5s); + transform: translateY(100%); + transition: all 1s; +} + +.show2 { + opacity: 0.7; + filter: blur(0); + transform: translateY(0); + transition: all 2s; +} + +.skills_para:nth-child(2) { + transition-delay: 300ms; +} + +.skills_para:nth-child(3) { + transition-delay: 700ms; +} + +.skills_para:nth-child(4) { + transition-delay: 1000ms; +} + +@media(prefers-reduced-motion) { + .hidden { + transition: none; + } +} + +.scrollable::-webkit-scrollbar { + width: 0.2vw; +} + +.scrollable::-webkit-scrollbar-thumb { + background-color: rgb(48, 3, 94); +} + +.scrollable::-webkit-scrollbar-track { + background-color: rgb(209, 209, 248); +} + +ul { + list-style-type: none; + padding: 0; +} + +.links { + margin-right: 125px; + display: flex; + justify-content: center; + align-items: center; +} + +.links a { + font-size: medium; +} + +.about { + margin-top: -200px; +} + +#sec-1 { + background-image: url("pexels-pixabay-355770.jpg"); + width: 100%; + min-height: 100vh; + display: flex; + flex-direction: column; + justify-content: center; + position: fixed; +} + +#sec-2 { + background-color: white; + width: 100%; + min-height: 100vh; + display: flex; + justify-content: center; + align-items: center; +} + +#sec-3 { + background-color: white; + width: 100%; + min-height: 100vh; + display: flex; + justify-content: center; + align-items: center; + position: relative; + padding-top: 77px; +} + +#sec-3 .container { + margin: 0 30px 0 30px; +} + +#sec-4 { + background-color: white; + width: 100%; + min-height: 100vh; + display: flex; + justify-content: center; + align-items: center; + position: relative; + padding-top: 77px; +} + +#sec-5 { + background-color: white; + width: 100%; + min-height: 100vh; + display: flex; + justify-content: center; + align-items: center; + position: relative; + padding-top: 77px; +} + +.navbar { + display: flex; + justify-content: space-between; + margin: 0; + height: 77px; + background-color: black; +} + +.navbar a { + text-decoration: none; + color: rgb(246, 244, 244); + margin: 0 0 0 105px; +} + +.sidebar { + position: fixed; + right: -250px; + width: 250px; + height: 103vh; + background: rgb(161, 138, 242); + transition: all .5s ease; + margin-top: -70px; +} + +.sidebar header { + font-size: 22px; + color: rgb(251, 243, 243); + text-align: center; + line-height: 94px; + background: #0d0d0e; + user-select: none; +} + +.sidebar ul a { + display: block; + height: 100%; + width: 100%; + line-height: 65px; + font-size: 20px; + color: rgb(8, 7, 7); + padding-left: 40px; + box-sizing: border-box; + border-top: 1px solid rgba(245, 248, 249, 0.7); + border-bottom: 1px solid rgb(20, 20, 20); + transition: .4s; + margin: 0; +} + +ul li:hover a { + padding-left: 10px +} + +.sidebar ul a i { + margin-right: 16px; +} + +#check { + display: none; +} + +label #btn, +label #cancel { + position: absolute; + cursor: pointer; +} + +label #btn { + right: 40px; + top: 27px; + font-size: 35px; + color: rgb(254, 249, 249); + padding: 1px 5px; + transition: all .5s; + margin: -20px; +} + +label #cancel { + z-index: 1111; + right: 0px; + top: 17px; + font-size: 30px; + color: rgb(247, 245, 245); + padding: 1px 4px; + transition: all .5s ease; + opacity: 0; +} + + +#check:checked~.sidebar { + right: 0; +} + +#check:checked~label #btn { + right: 250px; + opacity: 0; + pointer-events: none; +} + +#check:checked~label #cancel { + opacity: 1; + right: 195px; +} + +.navbtn { + display: none; + visibility: hidden; +} + +.bi-strava { + margin-left: 35px; + color: white; +} + +.card { + margin-left: 25px; + border: 1px solid rgb(250, 246, 246) 0.1; + font-size: 14px; +} + +.card:hover { + transition: all 1s; + opacity: 0.8; + border-color: rgb(64, 64, 161); + box-shadow: 0 0.5em 0.5em -0.2em rgb(37, 37, 103); + transform: translateY(-0.25em); + cursor: pointer; +} + +a { + text-decoration: none; + color: black; + font-weight: lighter; +} + +@media(max-width:1000px) { + .links a { + margin: 0 0 0 70px; + } + + .links { + margin-right: 100px; + } + + + .bi-strava { + margin-left: 15px; + font-size: 33px; + } +} + + +@media(max-width:900px) { + .links a { + margin: 0 0 0 70px; + } + + .links { + margin-right: 90px; + } + + + .bi-strava { + margin-left: 15px; + font-size: 30px; + } + + .scrollable { + overflow-y: scroll; + height: 400px; + width: 90%; + margin-right: 30px; + } + + .projects { + flex-direction: column; + align-items: center; + } + + .card-body { + display: none; + visibility: hidden; + } + + .container { + max-width: 50%; + } + + .container .skillslinks { + display: flex; + justify-content: space-between; + margin: 30px 30px 0 20px; + } + + .skills_para { + font-size: medium; + } +} + + + +@media(max-width:700px) { + .links a { + margin: 0 0 0 50px; + } + + .links { + margin-right: 40px; + } + + .bi-strava { + margin-left: 15px; + font-size: 28px; + } + + .scrollable { + overflow-y: scroll; + height: 400px; + width: 50%; + margin-right: 10px; + } + + .scrollable::-webkit-scrollbar { + width: 0.4vw; + } +} + +@media(max-width:560px) { + .links a { + margin: 0 0 0 20px; + } + + .links { + margin-right: 20px; + } + + .bi-strava { + margin-left: 15px; + font-size: 25px; + } + + #sec-3 { + background-color: white; + width: 100%; + min-height: 100vh; + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + position: relative; + } + + .scrollable { + overflow-y: scroll; + height: 400px; + width: 85%; + margin: 30px; + } + + #sec-4 { + flex-direction: column; + } + + .skills_para { + font-size: large; + } + + .container { + max-width: 90%; + margin: 0 0 20px 0; + } + + .about { + padding: 0 20px 0 20px; + } +} + +@media(max-width:400px) { + .navbtn { + display: block; + visibility: visible; + } + + .links { + display: none; + visibility: hidden; + } + + .bi-strava { + margin-left: 15px; + font-size: 25px; + } + + .contact i { + font-size: 30px; + } + + .body::-webkit-scrollbar { + display: none; + } + + .card { + margin: 0; + } + + #sec-3 a { + font-size: small + } +} + +#sec-4 button:hover { + background-color: rgb(134, 4, 4); + transition: all 0.5s; +} \ No newline at end of file diff --git a/index.html b/index.html new file mode 100644 index 0000000..a0df5fe --- /dev/null +++ b/index.html @@ -0,0 +1,199 @@ + + + + + + + + + + Portfolio + + + +
+ + + About + Skills + Projects + Contact + Resume + + + + +
+
navbar
+ +
+ +
+ +
+
+
+
+ +
+

MOHAMMAD MUNAF +

An intermedate programmer and MERN-stack developer

+

Strong technical skills with passionate and + creative problem solver.

+

Expert to implement different data structure and algorithms

+

+
+
+
+

+
+ +
+
+
+

Skills

+

I have successfully solved over 600+ problems on LeetCode, showcasing my + proficiency in Data Structure and algorithms.

+
Github + LeetCode +
+
+
+ +
+
Frontend
+
    +
  • HTML5
    • +
  • CSS3
    • +
  • React
    • +
  • JavaScript
    • +
  • Material UI
    • +
  • DOM
    • +
  • Bootstrap
    • +
+
+ +
+
Backend
+
    +
  • Node.js
    • +
  • Express.js
    • +
  • RESTFULL API
    • +
  • Express.js
    • +
+
+
+
Database
+
    +
  • Mongodb
    • +
+
+ +
+
Technical Subjects
+
    +
  • Data Structure and Algorithms
    • +
  • DBMS
    • +
  • OOPS
    • +
+
+
+
Others
+
    +
  • Version Control
    • +
  • Docker
    • +
+
+
+
+
+
+

Projects

+

+ The projects were created with great attention to detail, utilizing a blend of HTML, CSS, + JavaScript, and Node.js with Express.js to leverage the capabilities of these technologies, + resulting in captivating and dynamic user experiences. +

+ +
+
+ + + + +
+
+
+
+

Contact.

+
+

Get in touch with me via social media or email.

+
+
+ + + + +
+
+
+
+ + + + + + \ No newline at end of file diff --git a/index.js b/index.js new file mode 100644 index 0000000..5d2c0b9 --- /dev/null +++ b/index.js @@ -0,0 +1,103 @@ +const check = document.querySelector('#check'); +const section = document.querySelector('section') +const links = document.querySelectorAll('a'); +const btn = document.querySelector('#btn'); +btn.addEventListener('click', () => { + section.style.opacity = "0"; +}) +const cancel = document.querySelector('#cancel'); +cancel.addEventListener('click', () => { + section.style.opacity = "1"; +}) +for (let link of links) { + link.addEventListener('click', () => { + check.checked = false; + section.style.opacity = "1"; + }) +} + + + +//intersection observer +const observer1 = new IntersectionObserver((entries) => { + entries.forEach((entry) => { + console.log(entry); + if (entry.isIntersecting) { + entry.target.classList.add('show'); + } else { + entry.target.classList.remove('show'); + } + }); + +}); +const hiddenElements = document.querySelectorAll('.hidden'); +hiddenElements.forEach((el) => observer1.observe(el)); + +const observer2 = new IntersectionObserver((entries) => { + entries.forEach((entry) => { + console.log(entry); + if (entry.isIntersecting) { + entry.target.classList.add('show1'); + } else { + entry.target.classList.remove('show1'); + } + }); + +}); +const contactElements = document.querySelectorAll('.contact'); +contactElements.forEach((el) => observer2.observe(el)); + + +const observer3 = new IntersectionObserver((entries) => { + entries.forEach((entry) => { + console.log(entry); + if (entry.isIntersecting) { + entry.target.classList.add('show2'); + } else { + entry.target.classList.remove('show2'); + } + }); + +}); +const skills_para = document.querySelectorAll('.skills_para'); +skills_para.forEach((el) => observer3.observe(el)); + + + + +function preventScroll(e) { + e.preventDefault(); + e.stopPropagation(); + + return false; +} +document.querySelector('.scrollable').removeEventListener('wheel', preventScroll); + +function slowScroll(target) { + var targetElement = document.querySelector(target); + var targetPosition = targetElement.offsetTop; + var currentPosition = window.pageYOffset; + var distance = targetPosition - currentPosition; + var duration = 1000; // Adjust the duration (in milliseconds) as desired + var startTime; + + function scrollAnimation(currentTime) { + if (startTime === undefined) startTime = currentTime; + var elapsedTime = currentTime - startTime; + var scrollProgress = ease(elapsedTime, currentPosition, distance, duration); + window.scrollTo(0, scrollProgress); + if (elapsedTime < duration) { + requestAnimationFrame(scrollAnimation); + } + } + + // Easing function (you can change this to achieve different scrolling effects) + function ease(t, b, c, d) { + t /= d / 2; + if (t < 1) return c / 2 * t * t + b; + t--; + return -c / 2 * (t * (t - 2) - 1) + b; + } + + requestAnimationFrame(scrollAnimation); +} diff --git a/pexels-pixabay-355770.jpg b/pexels-pixabay-355770.jpg new file mode 100644 index 0000000..c0146f3 Binary files /dev/null and b/pexels-pixabay-355770.jpg differ diff --git a/resume5.pdf b/resume5.pdf new file mode 100644 index 0000000..eb45f73 Binary files /dev/null and b/resume5.pdf differ