From e6dd96dbd649a34e5c9d718ac7ca87edf794d87d Mon Sep 17 00:00:00 2001 From: nikhildhawan Date: Sat, 11 Jan 2025 02:23:30 +0000 Subject: [PATCH] Upload files to "/" --- index.html | 198 ++++++++++++++ script.js | 28 ++ styles.css | 756 +++++++++++++++++++++++++++++++++++++++++++++++++++++ 3 files changed, 982 insertions(+) create mode 100644 index.html create mode 100644 script.js create mode 100644 styles.css diff --git a/index.html b/index.html new file mode 100644 index 0000000..0688808 --- /dev/null +++ b/index.html @@ -0,0 +1,198 @@ + + + + + + + NIKHIL DHAWAN + + + + + + +
+ + + +
+ +
+
+

I'm

+
+

Student , Developer & Cracker

+
+

HELLO WELCOME TO MY PROFILE . I AM A STUDENT , CRACKER , WEB DEVELOPER , APP MODDER . THANKS FOR VISITING MY PROFILE ❤️ .

+
+ + +
+ +
+ +
+ +
+

About Me

+ +
+

PROFF

+

HEY I'M NIKHIL FROM DELHI. + I HAVE SO MANY SKILLS LIKE CODING, WEB DEVELOPING , CRACKING ETCC . APART FROM THIS I AM A STUDENT. +

+
+
+ +
+

My Education

+
+
+

Education

+
+
+
+
2019-20
+

MATRICULATION

+

I HAVE COMPLETED MY 10TH STANDARD WITH 100 PERCENCT MARKS 💀.

+
+
+
+
+
2021-22
+

SENIOR SECONDARY

+

I HAVE SUCCESSFULLY COMPLETED MY 12TH CLASS WITH FLYING COLORS

+
+
+
+
+
2024-25
+

currently preparing for upsc 🤧

+

+
+
+
+
+
+

ADDRESS

+
+
+
+
📍
+

I'M FROM

+

DELHI 🗾

+
+
+ +
+
+
2026-2030
+

COMING SOON

+

+

+
+
+
+
+
+ +
+

My Skills

+
+
+

PERSONAL

+
+
+ CODING + 90% +
+
+
+
+
+ CSS + 80% +
+
+
+
+
+ JavaScript + 70% +
+
+
+
+
+
+
+

OTHER

+
+
+ CRACKING + 90% +
+
+
+
+
+ MODDING + 80% +
+
+
+
+
+ STUDYING + 70% +
+
+
+
+
+
+
+
+ +
+

ContactMe

+
+ +
+ + +
+
+ + +
+ + +
+ +
+ + + + + diff --git a/script.js b/script.js new file mode 100644 index 0000000..eaab962 --- /dev/null +++ b/script.js @@ -0,0 +1,28 @@ +const menubar = document.querySelector('#menu'); +const Navbar = document.querySelector('.navbar'); +menubar.onclick=()=>{ + menubar.classList.toggle('bx-x'); + Navbar.classList.toggle('active') +} +const section=document.querySelectorAll('section'); +const navlink = document.querySelectorAll('header nav a') +window.onscroll = ()=>{ + section.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){ + sec.classList.add('start-animation'); + navlink.forEach(links=>{ + links.classList.remove('active') + document.querySelector('header nav a[href*='+id+']').classList.add('active') + + }) + } + }) + var header = document.querySelector('.header'); + header.classList.toggle('sticky',window.scrollY>100) + menubar.classList.remove('bx-x'); + Navbar.classList.remove('active') +} \ No newline at end of file diff --git a/styles.css b/styles.css new file mode 100644 index 0000000..b120469 --- /dev/null +++ b/styles.css @@ -0,0 +1,756 @@ +@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,300;0,400;0,500;1,500&display=swap'); +* { + margin: 0; + padding: 0; + scroll-behavior: smooth; + box-sizing: border-box; + font-family: "poppins"; + outline: none; + border: none; + color: #fff; +} +body{ + background: #0f0a0a; + height: 100vh; +} +html{ + font-size: 62.5%; + overflow-x: hidden; +} +.header{ + position: fixed; + left: 0; + top: 0; + padding: 2rem 10%; + width: 100%; + display: flex; + justify-content: space-between; + align-items: center; + z-index: 100; +} +.sticky{ + border-bottom: 2px solid rgba(255,255,255,.1); + background: #0f0a0a; +} +.logo{ + font-size: 2.9rem; + font-weight: 600; + text-decoration: none; + color: #00ff00; + transform: translateX(-100%); + opacity: 0; + animation: RightSlide 1s ease forwards; +} +@keyframes RightSlide{ + 0%{ + transform: translateX(-100%); + opacity: 0; + } + 100%{ + transform: translateX(0%); + opacity: 1; + } +} + +#menu{ + color: #fff; + font-size: 2.5rem; + display: none; +} +.navbar a{ + display: inline-block; + font-size: 1.7rem; + text-decoration: none; + margin: 0 2.5rem; + font-weight: 500; + letter-spacing: .02; + transition: .5s ease; + transform: translateY(-100px); + opacity: 0; + animation: TopSlide 1s ease forwards; + animation-delay: calc(.2s * var(--vlr)); +} +@keyframes TopSlide{ + 0%{ + transform: translateY(-100px); + opacity: 0; + } + 100%{ + transform: translateY(0px); + opacity: 1; + } +} +.navbar a:hover,.navbar a.active{ + color: #00ff00; +} +section{ + padding: 10rem 9% 2rem; + min-height: 100vh; +} +.about,.education,.contact,.skills{ + overflow: hidden; +} +.home{ + display: flex; + justify-content: space-between; + align-items: center; +} +.text-content{ + max-width: 70rem; +} +.text-content h1{ + font-size: 5rem; + color: #fff; + text-transform: capitalize; + letter-spacing: .05rem; + font-weight: 600; + transform: translateY(-100px); + opacity: 0; + animation: RightSlide 1s ease forwards; + animation-delay: 1s; +} +.text-animation{ + position: relative; + width: 32.8rem; +} +.text-animation h2{ + font-size: 3.2rem; + font-weight: 700; + color: transparent; + -webkit-text-stroke: .7px #00ff00; + background: linear-gradient(#00ff00,#00ff00); + background-repeat: no-repeat; + -webkit-background-clip: text; + background-position: -33rem 0; + transform: translateY(-100px); + opacity: 0; + animation: textSlide 6s linear infinite, + TopSlide 1s ease forwards; + animation-delay: 2s,1.2s; +} +@keyframes textSlide{ + 0%,10%,100%{ + background-position: -33rem 0; + } + 65%,85%{ + background-position: 0 0; + } +} +.text-animation::before{ + content: ""; + position: absolute; + left: 0; + top: 0; + height: 100%; + width: 0; + border-right: 2px solid #00ff00; + transform: translateY(-100px); + opacity: 0; + animation: CursorSlide 6s linear infinite, + TopSlide 1s ease forwards; + animation-delay: 2s,1.2s; +} +@keyframes CursorSlide { + 0%,10%,100%{ + width: 0; + } + 65%,78%,85%{ + opacity: 1; + width: 100%; + } + 75%,81% + { + opacity: 0; + } + +} +.text-content p{ + font-size: 1.4rem; + margin: 1rem 0; + transform: translateX(100px); + opacity: 0; + animation: leftSlide 1s ease forwards; + animation-delay: 1.4s; +} +@keyframes leftSlide{ + 0%{ + transform: translateX(100px); + opacity: 0; + } + 100%{ + transform: translateX(0px); + opacity: 1; + } +} +.btn-section{ + width: 32.5rem; + height: 5rem; + display: flex; + justify-content: space-between; + align-items: center; + margin: 2rem 0; + position: relative; +} +.btn-section::before{ + content: ""; + position: absolute; + left: 0; + top: 0; + background: #0f0a0a; + height: 100%; + width: 100%; + z-index: 2; + animation: Slide 1s ease forwards; + animation-delay: 1.6s; +} +@keyframes Slide{ + 0%{ + width: 100%; + } + 100%{ + width: 0; + } +} + .btn{ + height: 100%; + width: 15rem; + color: #fff; + background: rgba(255,255,255,.1); + border: .2rem solid rgba(255,255,255,.3); + backdrop-filter: blur(5rem); + border-radius: .8rem; + font-size: 1.5rem; + cursor: pointer; + display: inline-flex; + justify-content: center; + align-items: center; + position: relative; + overflow: hidden; + z-index: 1; +} +.btn::before{ + content: ""; + position: absolute; + left: 0; + top: -100%; + height: 300%; + width: 100%; + background: linear-gradient( + #0f0a0a,#00ff00,#0f0a0a,#00ff00 + ); + z-index: -1; + transition: .5s ease; +} +.btn:hover::before{ + top: 0; +} +.social-media { + margin: 2rem 0; +} +.social-media i{ + display: inline-block; + font-size: 2.5rem; + background: rgba(255,255,255,.1); + border: .2rem solid rgba(255,255,255,.3); + padding: .8rem; + margin: 0 .5rem; + border-radius: 50%; + color: #fff; + cursor: pointer; + position: relative; + overflow: hidden; + animation: Bottom 1s ease forwards; + animation-delay: calc(.2s * var(--vlr)); + transform: translateY(100px); + opacity: 0; + +} +@keyframes Bottom{ + 0%{ + transform: translateY(100px); + opacity: 0; + } + 100%{ + transform: translateY(0px); + opacity: 1; + } +} +.social-media i::after{ + content: ""; + position: absolute; + left: 0; + top: -100%; + height: 300%; + width: 100%; + background: linear-gradient( + #0f0a0a,#00ff00,#0f0a0a,#00ff00 + ); + z-index: -1; + transition: .5s ease; +} + +i:hover::after{ + top: 0; +} +.home img{ + width: 30vw; + background: rgba(255,255,255,.1); + border: .2rem solid rgba(255,255,255,.3); + border-radius: 50%; + filter: drop-shadow(0 0 8rem #00ff00); + animation: Scale 1s ease forwards; + scale: 0; + animation-delay: 2s; +} +@keyframes Scale{ + 0%{ + scale: 0; + } + 100%{ + scale: 1; + } +} +/* about section */ +.about{ + display: flex; + justify-content: center; + align-items: center; + flex-direction: column; + padding-bottom: 6rem; + gap: 2rem; +} +.title{ + font-size: 5rem; + margin-bottom: 3rem; + font-weight: 600; + text-align: center; + transform: translateY(-100px); + opacity: 0; +} +section.start-animation .title{ + animation: top 1s ease forwards; +} +@keyframes top{ + 0%{ + transform: translateY(-100px); + opacity: 0; + } + 100%{ + transform: translateY(0px); + opacity: 1; + } +} +.title span{ + color: #00ff00; +} +.about img{ + height: 25rem; + width: 25rem; + background: rgba(255,255,255,.1); + border: .2rem solid rgba(255,255,255,.3); + border-radius: 50%; + filter: drop-shadow(0 0 8rem #00ff00); + scale: 0; +} +section.start-animation .aboutImg{ + animation: scaleout 1s ease forwards; +} +@keyframes scaleout{ + 0%{ + scale: 0; + } + 100%{ + scale: 1; + } +} +.text-content2{ + text-align: center; +} +.text-content2 h2{ + font-size: 2.6rem; + transform: translatex(-100px); + opacity: 0; +} +section.start-animation .text-content2 h2{ + animation: Right 1s ease forwards; +} +@keyframes Right{ + 0%{ + transform: translatex(-100px); + opacity: 0; + } + 100%{ + transform: translatex(0px); + opacity: 1; + } +} +.text-content2 p{ + font-size: 1.5rem; + margin: 2rem 0 3rem; + transform: translatex(100px); + opacity: 0; +} +section.start-animation .text-content2 p{ + animation: Left 1s ease forwards; +} +@keyframes Left{ + 0%{ + transform: translatex(100px); + opacity: 0; + } + 100%{ + transform: translatex(0px); + opacity: 1; + } +} +.text-content2 .btn{ + padding: .9rem .5rem; + transform: translateY(100px); + opacity: 0; +} + +section.start-animation .text-content2 .btn{ + animation: Bottoms 1s ease forwards; +} +@keyframes Bottoms{ + 0%{ + transform: translateY(100px); + opacity: 0; + } + 100%{ + transform: translatey(0px); + opacity: 1; + } +} +/* education section */ +.row{ + display: flex; + column-gap: 4rem; + flex-wrap: wrap; +} +.column{ + flex: 1 1 30rem; +} +.column:nth-child(1){ + opacity: 0; + transform: translateX(-100px); +} +section.start-animation .column:nth-child(1){ + animation: Right 1s ease forwards; + animation-delay: 1.2s; +} + +.column:nth-child(2){ + opacity: 0; + transform: translateX(100px); +} +section.start-animation .column:nth-child(2){ + animation: Left 1s ease forwards; + animation-delay: 1.2s; +} +.column h2{ + font-size: 2.5rem ; + margin: 2rem 0 1rem 1.96rem; + transform: translateY(-100px); + opacity: 0; +} +section.start-animation .column h2{ + animation: top 1s ease forwards; + animation-delay: 1.2s; +} + +.box{ + border-left: .2rem solid #00ff00; +} +.education-content { + padding-left: 1.9rem; +} +.education-content .content{ + padding: 1.5rem; + border: .2rem solid #00ff00; + background: rgba(255,255,255,.1); + border-radius: .5rem; + margin-bottom: 2rem; + position: relative; +} +.content::before{ + content: ""; + position: absolute; + left: -2.8rem; + top: -1.5rem; + height: 1.4rem; + width: 1.4rem; + border-radius: 50%; + background: #00ff00; +} +.content .year{ + font-size: 1.5rem; + color: #00ff00; +} +.content .year i{ + color: #00ff00; + font-size: 1.5rem; + margin-left: .5rem; +} +.content h3{ + font-size: 1.7rem; + letter-spacing: .05rem; + margin: .5rem 0; +} +.content p{ + font-size: 1.5rem; +} +/* skill-content */ +.wrapper{ + width: 100%; + display: flex; + justify-content: space-between; + align-items: center; + gap: 5rem; + flex-wrap: wrap; +} +.skill-title{ + font-size: 2.4rem; + font-weight: 600; + margin-bottom: 1.5rem; + opacity: 0; + transform: translateY(-100px); +} +section.start-animation .skill-title{ + animation: top 1s ease forwards; + animation-delay: 1.2s; +} +.skill-content{ + width: 100%; + flex: 1 1 30rem; +} +.skill-box{ + height: 100%; + width: 100%; + padding: 8rem 4rem; + background: rgba(255,255,255,.1); + border-radius: 1rem; +} +.skill-box1{ + opacity: 0; + transform: translateX(-100px); +} +section.start-animation .skill-box1{ + animation: Right 1s ease forwards; + animation-delay: 1.2s; +} +.skill-box2{ + opacity: 0; + transform: translateX(100px); +} +section.start-animation .skill-box2{ + animation:Left 1s ease forwards; + animation-delay: 1.4s; +} +.single-skill{ + display: flex; + justify-content: space-between; + margin: 2rem 0; +} +.single-skill span{ + font-size: 1.6rem; +} + +.bar-side{ + background: #111; + height: 1rem; + border-radius: 50rem; + position: relative; + overflow: hidden; +} +.bar{ + position: absolute; + height: 100%; + background: #00ff00; +} +.bar-1{ + width: 90%; +} +.bar-2{ + width: 80%; +} +.bar-3{ + width: 70%; +} +/* contact section */ +section form{ + max-width: 70rem; + text-align: center; + margin: 1rem auto; + margin-bottom: 3rem; +} +.input-box{ + display: flex; + justify-content: space-between; + flex-wrap: wrap; +} +input:nth-child(1){ + opacity: 0; + transform: translateX(-100px); +} +section.start-animation input:nth-child(1){ + animation:Right 1s ease forwards; + animation-delay: 1.2s; +} +input:nth-child(2){ + opacity: 0; + transform: translateX(100px); +} +section.start-animation input:nth-child(2){ + animation:Left 1s ease forwards; + animation-delay: 1.2s; +} + input,textarea{ + width: 100%; + padding: 1.5rem; + background:rgba(255,255,255,.1); + border: .2rem solid rgba(255,255,255,.3); + outline: none; + backdrop-filter: blur(10px); + filter: drop-shadow(0 0 30px #00ff00); /* Lower blur radius */ + border-radius: .8rem; + gap: 2.5rem; + margin: .7rem 0; + transition: .3s ease; + opacity: 0; + transform: translateY(100px); +} +section.start-animation textarea{ + animation:Bottom 1s ease forwards; + animation-delay: 1.2s; +} +input::placeholder{ + font-size: 1.5rem; + letter-spacing: .02rem; +} +.input-box input{ + width: 49%; +} +input:focus, +input:valid{ + border: .2rem solid #00ff00; +} +textarea:focus, +textarea:valid{ + border: .2rem solid #00ff00; +} +textarea{ + resize: none; +} +.contact .btn{ + margin-top: 2rem; + cursor: pointer; + filter: none; + border: .2rem solid rgba(255,255,255,.3); +} +section.start-animation .btn{ + animation:Bottom 1s ease forwards; + animation-delay: 0.6s; /* Experiment with smaller delays */ +} +.contact .btn:hover{ + background: #00ff00; + box-shadow: 0 0 .3rem #00ff00, + 0 0 .7rem #00ff00; +} +/* footer */ + +footer{ + background: #080707; + padding: 2rem 9%; + display: flex; + justify-content: space-between; + align-items: center; + flex-wrap: wrap; +} +footer p{ + font-size: 1.6rem; +} +footer i{ + display: inline-flex; + justify-content: center; + align-items: center; + padding: .8rem; + background: #00ff00; + color: #0f0a0a; + border-radius: 50%; + font-size: 2.4rem; +} +/* RESPONSIVE */ +@media(max-width:1200px){ + html{ + font-size: 55; + } +} +@media(max-width:991px){ + .header{ + padding: 2rem 9%; + } + section{ + padding: 10rem 3% 2rem; + } + .contact{ + min-height: auto; + } + footer{ + padding: 2rem 3%; + } +} +@media(max-width:768px){ + #menu{ + display: block; + } + .navbar{ + position: absolute; + left: 0; + top: 100%; + width: 100%; + padding: 1rem 3%; + background: #0f0a0a; + border-top: 1px solid rgba(255,255,255,.1); + border-bottom: .2rem solid rgba(255,255,255,.1); + display: none; + } + .navbar.active{ + display: block; + } + .navbar a{ + display: block; + margin: 3rem 0; + font-size: 2rem; + } + .home{ + flex-direction: column-reverse; + } + .home .text-content{ + display: flex; + justify-content: center; + align-items: center; + flex-direction: column; + } + .home .text-content h1{ + font-size: 4rem; + } + .home img{ + width: 40vw; + } + .about{ + flex-direction: column; + } + .about img{ + width: 20rem; + height: 20rem; + } +} +@media(max-width:450px){ + html{ + font-size: 50%; + } + .input-box input{ + width: 100%; + } +} \ No newline at end of file