diff --git a/about.jpg b/about.jpg new file mode 100644 index 0000000..23287cc Binary files /dev/null and b/about.jpg differ diff --git a/home.png b/home.png new file mode 100644 index 0000000..49afa50 Binary files /dev/null and b/home.png differ diff --git a/index.html b/index.html new file mode 100644 index 0000000..8705b3d --- /dev/null +++ b/index.html @@ -0,0 +1,171 @@ + + + + + + + Portfolio Website + + + + + + + +
+ + + + + +
+ +
+
+

Hello, It's Me

+

Miraj Khan

+

And I'm a Engineering Student

+

Passionate coder.Strong communication and problem-solving skills.Looking for a position with a highly regarded organization

+ + Download CV +
+ +
+ +
+
+ +
+
+ +
+
+

About Me

+

Engineering Student!

+

Welcome to my world of innovation! I'm Miraj Khan, a relentless explorer, dreamer, and engineer-in-the-making. With a curious mind and an insatiable thirst for knowledge, I am constantly pushing the boundaries of what is possible in the realm of Computer Science and Engineering. I have always been fascinated by how things work. My journey in Engineering has been a thrilling adventure. I am passionate about using my skills to make a positive impact on the world.

+ Read More +
+ +
+
+

My Education

+ +
+
+ +

Class 10th

+

62.14% Marks

+ Read More +
+ +
+ +

Class 12th

+

71.40% Marks

+ Read More +
+ +
+ +

Diploma

+

Computer Science and Technology at EPI

+ Read More +
+ +
+ +

B.Tech

+

Computer Science and Engineering at Jis University. upto 5th semester average 8.36/10 CGPA

+ Read More +
+ +
+ +
+ +
+

Latest Project

+ +
+
+ +
+

College Management System

+

Revolutionizing College Management with an Advanced System

+ +
+
+ +
+ +
+

Testing Automation

+

Automating Testing Processes with Precision: Harnessing the Power of Selenium

+ +
+
+ +
+ +
+

Portfolio Website

+

Showcasing the Engineering Adventures of Miraj Khan

+ +
+
+ +
+ +
+ +
+

Contact Me!

+ +
+
+ + +
+
+ + +
+ + +
+ +
+ + + + + + + < + + + + + + + + + diff --git a/p1.jpg b/p1.jpg new file mode 100644 index 0000000..03eb50a Binary files /dev/null and b/p1.jpg differ diff --git a/p2.jpg b/p2.jpg new file mode 100644 index 0000000..2c25623 Binary files /dev/null and b/p2.jpg differ diff --git a/p3.jpg b/p3.jpg new file mode 100644 index 0000000..f733077 Binary files /dev/null and b/p3.jpg differ diff --git a/script.js b/script.js new file mode 100644 index 0000000..56eae0a --- /dev/null +++ b/script.js @@ -0,0 +1,59 @@ + +let menuIcon = document.querySelector('#menu-icon'); +let navbar = document.querySelector('.navbar'); + +menuIcon.onclick =() => { + menuIcon.classList.toggle('bx-x'); + navbar.classList.toggle('active'); +}; + + +let sections =document.querySelectorAll('section'); +let navLinks =document.querySelectorAll('header nav a'); + +window.onscroll = () =>{ + sections.forEach(sec => { + let top = window.scrollY; + let offset = sec.offsetTop - 150; + let height = sec.offsetHeight; + let id = sec.getAttribute('id'); + + if(top >=offset && top < offset + height) { + navLinks.forEach(links => { + links.classList.remove('active'); + document.querySelector('header nav a[href*=' + id +']').classList.add('active'); + }); + }; + }); + + let header = document.querySelector('header'); + + + header.classList.toggle('sticky', window.scrollY > 100); + + menuIcon.classList.remove('bx-x'); + navbar.classList.remove('active'); + +}; + + +ScrollReveal({ + //reset: true, + distance: '80px', + duration:2000, + delay: 200 +}); + +ScrollReveal().reveal('.home-content, .heading', { origin:'top' }); +ScrollReveal().reveal('.home-img, .education-content, .portfolio-box, .contact form', { origin:'bottom' }); +ScrollReveal().reveal('.home-content h1, .about-img', { origin:'left' }); +ScrollReveal().reveal('.home-content p, .about-content', { origin:'right' }); + + +const typed= new Typed('.multiple-text', { + Strings: [ 'Computer Science', 'And Engineering', 'Student'], + typeSpeed: 100, + backSpeed: 100, + backDelay: 1000, + loop: true +}); \ No newline at end of file diff --git a/style.css b/style.css new file mode 100644 index 0000000..c6d811e --- /dev/null +++ b/style.css @@ -0,0 +1,503 @@ + + @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700;800;900&display=swap'); + + *{ + margin: 0; + padding: 0; + box-sizing: border-box; + border: none; + outline: none; + scroll-behavior: smooth; + font-family: 'Poppins', sans-serif; + } + + :root{ + --bg-color: #1f242d; + --second-bg-color:#323946; + --text-color: #fff; + --main-color:#0ef; + + } + html{ + font-size: 62.5%; + overflow-x: hidden; + } + body{ + background: var(--bg-color); + color: var(--text-color); + } + section{ + min-height: 100vh; + padding: 10rem 9% 2rem; + } + .header{ + position: fixed; + top: 0; + left: 0; + width: 100%; + padding: 2rem 9%; + background: var(--bg-color); + display: flex; + justify-content: space-between; + align-items: center; + z-index: 100; + } + + .header.sticky{ + border-bottom: .1rem solid rgba(0, 0, 0, .2); + } + + .logo{ + font-size: 2.5rem; + color: var(--text-color); + font-weight: 600; + cursor: default; + } + .navbar a{ + font-size: 1.7rem; + color: var(--text-color); + margin-left: 4rem; + transition: .3s; + } + .navbar a:hover, + .navbar a.active{ + color: var(--main-color); + } + #menu-icon{ + font-size: 3.6rem; + color: var(--text-color); + display: none; + } + + .home{ + display:flex; + justify-content: center; + align-items: center; + } + + .home-img img{ + width: 25vw; + animation: floatImage 4s ease-in-out infinite; + border-radius: 50%; + + } + + @keyframes floatImage{ + 0%{ + transform: translateY(0); + } + 50%{ + transform: translateY(-2.4rem); + } + 100%{ + transform: translateY(0); + } + } + + .home-content h3{ + font-size: 3.2rem; + font-weight: 700; + } + + .home-content h3:nth-of-type(2){ + margin-bottom:2rem ; + } + + span{ + color: var(--main-color); + } + + .home-content h1{ + font-size: 5.6rem; + font-weight: 700; + line-height: 1.3; + } + + .home-content p{ + font-size: 1.6rem; + } + .social-media a{ + display: inline-flex; + justify-content: center; + align-items: center; + width: 4rem; + height: 4rem; + background: transparent; + border: .2rem solid var(--main-color); + border-radius: 50%; + font-size: 2rem; + color: var(--main-color); + margin: 3rem 1.5rem 3rem 0; + transition: .5s ease; + } + + .social-media a:hover{ + background: var(--main-color); + color: var(--second-bg-color); + box-shadow: 0 0 1rem var(--main-color); + } + + .btn { + display: inline-flex; + padding: 1rem 2.8rem; + background: var(--main-color); + border-radius: 4rem; + box-shadow: 0 0 1rem var(--main-color); + font-size: 1.6rem; + color: var(--second-bg-color); + letter-spacing: .1rem; + font-weight: 600; + transition: .5s ease; + + } + + .btn:hover{ + box-shadow: none; + } + + .about{ + display: flex; + justify-content: center; + align-items: center; + gap: 2rem; + background: var(--second-bg-color); + + } + + .about-img img{ + width: 25vw; + border-radius: 50%; + + } + + .heading{ + text-align: center; + font-size: 4rem; + + } + + .about-content h2{ + text-align: left; + line-height: 1.2; + + } + + .about-content h3{ + font-size: 2.6rem; + } + + .about-content p{ + font-size: 1.6rem; + margin: 2rem 0 3rem; + } + + .education h2{ + margin-bottom: 5rem; + + } + .education-content{ + display: flex; + justify-content: center; + align-items: center; + flex-wrap: wrap; + gap: 2rem; + } + + .education-content .education-box{ + flex: 1 1 30rem; + background: var(--second-bg-color); + padding: 3rem 2rem 4rem; + border-radius: 2rem; + text-align: center; + border: .2rem solid var(--bg-color); + transition: .5s ease; + } + + .education-content .education-box:hover{ + border-color: var(--main-color); + transform: scale(1.02); + + } + + .education-box i{ + font-size: 7rem; + color: var(--main-color); + } + .education-box h3{ + font-size: 2.6rem; + } + .education-box p{ + font-size: 1.6rem; + margin: 1rem 0 3rem; + + } + .portfolio{ + margin-bottom: 4rem; + + } + + .portfolio-content{ + display: grid; + grid-template-columns: repeat(3, 1fr); + align-items: center; + gap: 2.5rem; + + } + .portfolio-content .portfolio-box{ + position: relative; + border-radius: 2rem; + box-shadow: 0 0 1rem var(--bg-color); + overflow: hidden; + display: flex; + + } + .portfolio-box img{ + width: 100%; + transition: .5s ease; + } + .portfolio-box:hover img{ + transform: scale(1.1); + } + + .portfolio-box .portfolio-layer{ + position: absolute; + bottom: 0; + left: 0; + width: 100%; + height: 100%; + background: linear-gradient(rgba(0, 0, 0, .1), var(--main-color)); + display: flex; + justify-content: center; + align-items: center; + flex-direction: column; + text-align: center; + padding: 0 4rem; + transform: translateY(100%); + transition: .5s ease; + +} + + .portfolio-box:hover .portfolio-layer{ + transform: translateY(0); + } + +.portfolio-layer h4{ + font-size: 3rem; +} + +.portfolio-layer p{ + font-size: 1.6rem; + margin: .3rem 0 1rem; +} + +.portfolio-layer a{ + display:inline-flex; + justify-content: center; + align-items: center; + width: 5rem; + height: 5rem; + background: var(--text-color); + border-radius: 50%; +} + +.portfolio-layer a i{ + font-size: 2rem; + color: var(--second-bg-color); + +} + +.contact h2{ + margin-bottom: 3rem; +} + +.contact form{ + max-width: 70rem; + margin: 1rem auto; + text-align: center; + margin-bottom: 3rem; + +} + +.contact form .input-box{ + display: flex; + justify-content: space-between; + flex-wrap: wrap; +} + +.contact form .input-box input, +.contact form textarea{ + width: 100%; + padding: 1.5rem; + font-size: 1.6rem; + color: var(--text-color); + background: var(--second-bg-color); + border-radius: .8rem; + margin: .7rem 0; + +} + +.contact form .input-box input{ + width: 49%; +} + +.contact form textarea{ + resize: none; +} + +.contact form .btn{ + margin-top: 2rem; + cursor: pointer; +} + +.footer{ + display: flex; + justify-content: space-between; + align-items: center; + flex-wrap: wrap; + padding: 2rem 9%; + background: var(--second-bg-color); +} + +.footer-iconTop a{ + display: inline-flex; + justify-content: center; + align-items: center; + padding: .8rem; + background: var(--main-color); + border-radius: .8rem; + transition: .5s ease; +} +.footer-iconTop a:hover{ + box-shadow: 0 0 1rem var(--main-color); +} +.footer-iconTop a i{ + font-size: 2.4rem; + color: var(--second-bg-color); + +} + + +@media(max-width: 1200px){ + html{ + font-size: 55%; + } +} + +@media(max-width: 991px){ + .header{ + padding: 2rem 3%; + } + + section{ + padding: 10rem 3% 2rem; + } + + .education{ + padding-bottom: 7rem; + } + + .portfolio{ + padding-bottom: 7rem; + } + + .contact{ + min-height: auto; + } + + .footer{ + padding: 2rem 3%; + } +} + +@media(max-width: 768px){ + #menu-icon{ + display: block; + } + + .navbar{ + position: absolute; + top: 100%; + left: 0; + width: 100%; + padding: 1rem 3%; + background: var(--bg-color); + border-top: .1rem solid rgba(0, 0, 0, .2); + box-shadow: 0.5rem 1rem rgba(0, 0, 0, .2); + display: none; + } + + .navbar.active{ + display: block; + } + + .navbar a{ + display: block; + font-size: 2rem; + margin: 3rem 0; + } + + .home{ + flex-direction: column; + } + + .home-content h3{ + font-size: 2.6rem; + } + .home-content h1{ + font-size: 5rem; + } + + .home-img img{ + width: 70vw; + margin-top: 4rem; + } + .about{ + flex-direction: column-reverse; + } + .about img{ + width: 70vw; + margin-top: 4rem; + } + + .education h2{ + margin-bottom: 3rem; + } + + .portfolio h2{ + margin-bottom: 3rem; + } + + .portfolio-content{ + grid-template-columns: repeat(2, 1fr); + } +} + +@media (max-width:617px){ + .portfolio-content{ + grid-template-columns: 1fr; + } +} + +@media (max-width:450px){ + html{ + font-size: 50%; + } + + .contact form .input-box input{ + width: 100%; + } +} + +@media (max-width:365px){ + .home-img img{ + width: 90vw; + + } + .about-img{ + width: 90vw; + } + + .footer{ + flex-direction: column-reverse; + } +} \ No newline at end of file