-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
8 lines (8 loc) · 8.71 KB
/
index.html
1
2
3
4
5
6
7
8
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Bhavneek Singh</title><link rel="stylesheet" href="css/style.css"><link rel="preconnect" href="https://fonts.googleapis.com"><link rel="preconnect" href="https://fonts.gstatic.com" crossorigin><link rel="preconnect" href="https://fonts.googleapis.com"><link rel="preconnect" href="https://fonts.gstatic.com" crossorigin><link href="https://fonts.googleapis.com/css2?family=Abril+Fatface&family=Berkshire+Swash&family=Pangolin&family=Roboto:wght@100;300;400;500;700;900&display=swap" rel="stylesheet"> <linkrel="stylesheet"href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css"/><script src="https://kit.fontawesome.com/34981d04f6.js" crossorigin="anonymous"></script><script src="https://cdnjs.cloudflare.com/ajax/libs/rellax/1.12.1/rellax.min.js"></script><script src="https://unpkg.com/scrollreveal"></script><script src="https://cdn.tailwindcss.com"></script><script src="https://kit.fontawesome.com/6a83fc8eaf.js" crossorigin="anonymous"></script><script>ScrollReveal({ reset: true });</script></head><body><div id="pre-loader" class="pre-loader"><div class="pre-loader--shapes"><div class="loader"><svg viewBox="0 0 80 80"><circle id="test" cx="40" cy="40" r="32"></circle></svg></div><div class="loader triangle"><svg viewBox="0 0 86 80"><polygon points="43 8 79 72 7 72"></polygon></svg></div><div class="loader"><svg viewBox="0 0 80 80"><rect x="8" y="8" width="64" height="64"></rect></svg></div></div><div class="preloader--heading">Welcome...</div></div><script>let loader = document.getElementById('pre-loader');window.addEventListener('load', swipe);function swipe() { loader.classList.add("swipe-up-preloader");}</script> <div class="navbar"><div class="navbar--logo"><a href="/index.html"><div class="navbar--logo--b">B</div></a><a target="_blank" href="https://www.instagram.com/bhavneek_singh/"><i id="insta" class="fa-2x navbar__logos fa-brands fa-instagram"></i></a><a target="_blank" href="https://github.com/blazingbhavneek"><i id="git" class="fa-2x navbar__logos fa-brands fa-github"></i></a><a href="#contact-section"><i id="mail" class="fa-2x navbar__logos fa-solid fa-envelope"></i></a><a target="_blank" href="https://www.linkedin.com/in/bhavneek-singh/"><i id="linkedin" class="fa-2x navbar__logos fa-brands fa-linkedin-in"></i></a><a target="_blank" href="https://twitter.com/blazingbhavneek"><i id="twitter" class="fa-2x navbar__logos fa-brands fa-twitter"></i></a><a target="_blank" href="https://www.behance.net/blazingbhavneek"><i id="behance" class="fa-2x navbar__logos fa-brands fa-behance"></i></a></div><i onclick="openmenu()" id="menu-icon" class="fa-solid fa-bars fa-2x navbar-menu"></i></div><div id="menu-overlay"> <ul> <li><a onclick="closemenu()" href="dev.html" data-text="Dev">Web/App Dev</a></li> <li><a onclick="closemenu()" href="#" data-text="AI ML">AI/ML</a></li> <li><a onclick="closemenu()" href="#" data-text="Acads">Academics</a></li> <li><a onclick="closemenu()" href="#" data-text="CP">Comp. Programming</a></li> <li><a onclick="closemenu()" href="#" data-text="Visual">Photography</a></li> <li><a onclick="closemenu()" href="#contact-section" data-text="Contact">Contact</a></li> </ul> </div><div id="about" class="about"><div class="about__left" id="width-scroll"></div><img class="about__img" src="../img/mypic-min.png" alt=""><div class="about__text"><div class="rellax about__text__ind" data-rellax-speed="-3">Hi,</div> <div class="rellax about__text__ind" data-rellax-speed="0"> I am </div> <div class="typing-demo rellax about__text__ind" data-rellax-speed="-5">Bhavneek</div></div><div class="rellax about__text__passage" data-rellax-speed="2" data-rellax-percentage="0.5">Currently a student at Indian Institue of Technology Delhi.<br> Late bloomer but hard worker with procrastination issues.<br> My interest grew from sleeping, netflix and instagram to <br>Photography, Web development, Machine Learning & Artificial Intelligence, App development, Competetive Programming,<br> then again to sleeeping and netflix lol...</div></div><div class="skills-header"><div id="skills-right-scroll" class="skills-header__left"></div><span id="skills-spacing-scroll" class="skills-header__ind">Skills<br>&<br> Achievements</span></div><div class="coding"><div id="codingleft" class="coding__left"></div><div id="codingright" class="coding__right"></div><div class="coding__cards"><a target="_blank" href="dev.html"><div id="infocard1" class='info-card'><h2 class='info-card__title'>Web/App<br>Development</h2></div></a><a target="_blank" href=""><div id="infocard2" class='info-card'><h2 class='info-card__title'>AI/ML</h2></div></a><a target="_blank" href=""><div id="infocard3" class='info-card'><h2 class='info-card__title'>Academia</h2></div></a><a target="_blank" href=""><div id="infocard4" class='info-card'><h2 class='info-card__title'>Competetive Programming</h2></div></a><a target="_blank" href=""><div id="infocard5" class='info-card'><h2 class='info-card__title'>Photography<br>Editing<br>Design</h2></div></a></div> </div><section id="contact-section" class="text-gray-600 body-font relative"><div class="absolute inset-0 bg-gray-300"><iframe style="filter: contrast(1.2) opacity(0.6); pointer-events:none;" marginheight="0" marginwidth="0" title="map" scrolling="no" src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3504.800420384915!2d77.19276789999999!3d28.545718!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x390d1df6b9055fb5%3A0x81c10b266b1ea3c0!2sIndian%20Institute%20of%20Technology%20Delhi!5e0!3m2!1sen!2sin!4v1657256634421!5m2!1sen!2sin" width="100%" height="100%" style="border:0;" allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-when-downgrade"></iframe></div><form action="https://formsubmit.co/bhavneekcoc99@gmail.com" method="POST" class="container px-5 py-24 mx-auto flex"><div style="animation: float 6s ease-in-out infinite;" class="lg:w-1/3 md:w-1/2 bg-white rounded-lg p-8 flex flex-col md:ml-auto w-full mt-10 md:mt-0 relative z-10 shadow-md"><h2 class="text-gray-900 text-lg mb-1 font-medium title-font">Let's talk buisness!</h2><p class="leading-relaxed mb-5 text-gray-600">Reach out to me via social media or via this box I will reply to your mail/message in 1-2 working days!</p><div class="relative mb-4"><label for="email" class="leading-7 text-sm text-gray-600">Email</label><input type="email" id="email" name="email" class="w-full bg-white rounded border border-gray-300 focus:border-indigo-500 focus:ring-2 focus:ring-indigo-200 text-base outline-none text-gray-700 py-1 px-3 leading-8 transition-colors duration-200 ease-in-out"></div><div class="relative mb-4"><label for="message" class="leading-7 text-sm text-gray-600">Message</label><textarea id="message" name="message" class="w-full bg-white rounded border border-gray-300 focus:border-indigo-500 focus:ring-2 focus:ring-indigo-200 h-32 text-base outline-none text-gray-700 py-1 px-3 resize-none leading-6 transition-colors duration-200 ease-in-out"></textarea></div><button id="send-button" type="submit" class="text-white bg-indigo-500 border-0 py-2 px-6 focus:outline-none hover:bg-indigo-600 rounded text-lg">Send</button><p class="text-xs text-gray-500 mt-3">Contact section made using tailwind css block<br> Images from unsplash<br> JS Libraries used: RevealOnScroll, Rellax<br>Icons from FontAwesome</p></div></form></section></body></html>
<script>var rellax=new Rellax('.rellax');let skillright=document.getElementById('skills-right-scroll');let skillspacing=document.getElementById('skills-spacing-scroll');let about=document.getElementById('width-scroll');let codingleft=document.getElementById('codingleft');let codingright=document.getElementById('codingright');window.addEventListener('scroll',function(){let offset=window.innerHeight;let value=window.scrollY;skillright.style.width=(value-offset)/offset*100+'%';if(value<2*offset){skillspacing.style.letterSpacing=(2*offset-value)/offset*100+'px';}
else{skillspacing.style.letterSpacing='0px';}
about.style.width=value/offset/2*100+'%';if(value<2.5*offset){codingleft.style.width='0%';codingleft.style.height='0%';}
codingleft.style.width=(value-2.5*offset)/offset*100+'%';codingleft.style.height=(value-2.5*offset)/offset*100+'%';codingright.style.width=(value-3*offset)/offset*100+'%';})
ScrollReveal().reveal('.info-card',{delay:100});ScrollReveal().reveal('.about__text__passage',{delay:100});ScrollReveal().reveal('.skills-header__ind',{delay:100});let men=document.getElementById("menu-overlay");function openmenu(){if(men.style.opacity!=0){men.style.opacity="0";men.style.pointerEvents="none";}
else{men.style.opacity="100%";men.style.pointerEvents="all";}}
function closemenu(){men.style.opacity="0";men.style.pointerEvents="none";}</script>