remove jQuery

Signed-off-by: Naman Sood <mail@nsood.in>

css/style.css

@@ -4,6 +4,7 @@
 
 html {
   overflow-x: hidden;
+  scroll-behavior: smooth;
 }
 
 body {
@@ -381,7 +382,6 @@ footer {
     margin: auto;
     padding: 2rem;
   }
-
   .works-card {
     flex-direction: column;
     height: auto;
@@ -410,7 +410,6 @@ footer {
     margin: auto;
     box-shadow: 0 0 5rem rgba(0, 0, 0, 0.1), 0 0.25rem 1rem rgba(0, 0, 0, 0.33);
   }
-
   #contact {
     text-align: left;
   }
@@ -437,7 +436,6 @@ footer {
   .main > .text-container h3 {
     font-size: 1.5rem;
   }
-
   .works-card > .text-container p {
     font-size: 1rem;
   }

css/style.scss

@@ -4,6 +4,7 @@
 
 html {
 	overflow-x: hidden;
+	scroll-behavior: smooth;
 }
 
 body {

index.html

@@ -139,7 +139,6 @@
 
 <div class="clapper">👏👏👏</div>
 
-<script src="js/jquery-3.3.1.min.js"></script>
 <script src="js/script.js"></script>
 </body>
 </html>

js/script.js

@@ -1,29 +1,40 @@
 var firstInit = true;
 
 function mobileConditions() {
-	return !($(window).width() > 900 && $(window).height() < $(window).width());
+	return !(window.innerWidth > 900 && window.innerHeight < window.innerWidth);
+}
+
+function tag(name, classes, id) {
+	const el = document.createElement(name);
+	if(classes) {
+		for(let c of classes) {
+			el.classList.add(c);
+		}
+	}
+	if(id) {
+		el.id = id;
+	}
+	return el;
 }
 
 function bgInit(useCSSbg) {	
-	$('.works-card').each(function() {
+	document.querySelectorAll('.works-card').forEach((el) => {
-		var $el = $(this);
+		const styles = getComputedStyle(el);
-		
 		if(firstInit) {
-			var bg =  $el.css('background-image');
+			let bg = styles['background-image'];
-			if(bg == 'none') bg = $el.css('background-color');
+			if(bg === 'none') bg = styles['background-color'];
-			$el.attr('data-bg', bg);
+			el.setAttribute('data-bg', bg);
-			var el = $('<div class="bg"></div>');
+			const bgEl = tag('div', ['bg']);
-			el.css('background', bg);
+			bgEl.style.background = bg;
-			$('.bg-scroller').append(el);
+			document.querySelector('.bg-scroller').appendChild(bgEl);
 		}
 
-		
 		if(useCSSbg) {
-			$el.css('background', $el.attr('data-bg'));
+			el.style.background = el.getAttribute('data-bg');
-			$el.find('.text-container').css('opacity', '1');
+			el.querySelector('.text-container').styles.opacity = '1';
 		}
 		else {
-			$el.css('background', '');
+			el.style.background = '';
 		}
 	});
 	
@@ -35,10 +46,10 @@ bgInit(false);
 function calculateBg() {
 	if(!mobileConditions()) {
 		bgInit(false);
-		let backgrounds = $('.bg-scroller').find('.bg');
+		let backgrounds = document.querySelector('.bg-scroller').querySelectorAll('.bg');
 		let bgOps = new Array(backgrounds.length).fill(0);
 		let textOps = new Array(backgrounds.length).fill(0);
-		let scrolledWindows = ($(window).scrollTop() - $(window).height()) / $(window).height();
+		let scrolledWindows = (window.scrollY - window.innerHeight) / window.innerHeight;
 		if(scrolledWindows < 0) scrolledWindows = 0;
 		let minBg = Math.floor(scrolledWindows);
 		let maxBg = minBg + 1;
@@ -57,14 +68,14 @@ function calculateBg() {
 		
 		bgOps[minBg] = 1;
 		bgOps[maxBg] = delta;
-		backgrounds.each(function(i) {
+		backgrounds.forEach(function(el, i) {
-			$(this).css('opacity', bgOps[i]);
+			el.style.opacity = bgOps[i];
 		});
 
 		textOps[minBg] = 1-delta;
 		textOps[maxBg] = delta;
-		$('.works-card .text-container').each(function(i) {
+		document.querySelectorAll('.works-card .text-container').forEach(function(el, i) {
-			$(this).css('opacity', textOps[i]);
+			el.style.opacity = textOps[i];
 		});
 	}
 	
@@ -75,45 +86,15 @@ function calculateBg() {
 
 calculateBg();
 
-var timer;
-
-setInterval(function() {
-	clearTimeout(timer);
-
-	timer = setTimeout(function() {
-		var sections = $('section');
-
-		var hash = '';
-
-		sections.each(function() {
-			var $el = $(this);
-			var viewportPos = ($(window).scrollTop() - $el.offset().top) / $(window).height();
-
-			if(viewportPos < 0.4 && viewportPos > -0.6) {
-				hash = $el.attr('id');
-			} 
-		});
-
-		if(hash && '#' + hash != location.hash) {
-			history.replaceState({
-				page: hash
-			}, $('title').html(), '#' + hash);
-		}
-	}, 200);
-}, 500);
-
 function scrollAnimations() {
 	calculateBg();
 
 	if(!mobileConditions()) {
-		$('.main h1, .main h3').each(function() {
+		document.querySelectorAll('.main h1, .main h3').forEach(function(el) {
-			var scrolledFrac = $(window).scrollTop() / $(window).height();
+			var scrolledFrac = window.scrollY / window.innerHeight;
-			$(this).css({
+			el.style.opacity = Math.min(1, 1.2 - 1.5*scrolledFrac).toString();
-				opacity: Math.min(1, 1.2 - 1.5*scrolledFrac),
+			el.style.position = 'relative';
-				position: 'relative',
+			el.style.top = (scrolledFrac * window.innerHeight / 2).toString() + 'px';
-				// fun fact: using transforms here causes weird rendering bugs in Chrome
-				top: (scrolledFrac * $(window).height() / 2) + 'px'
-			});
 		});
 	}
 }
@@ -125,16 +106,16 @@ function scrollLoop() {
 }
 scrollLoop();
 
-var canvas = $('canvas#bg')[0];
+var canvas = document.querySelector('canvas#bg');
 
-canvas.width = $(window).width();
+canvas.width = window.innerWidth;
-canvas.height = $(window).height();
+canvas.height = window.innerHeight;
 
 var ctx = canvas.getContext('2d');
 
-$(window).on('resize', function() {
+window.addEventListener('resize', () => {
-	canvas.width = $(window).width();
+	canvas.width = window.innerWidth;
-	canvas.height = $(window).height();
+	canvas.height = window.innerHeight;
 })
 
 function Point() {
@@ -196,7 +177,7 @@ for(var i = 0; i < n; i++) {
 }
 
 function loop() {
-	if($(window).scrollTop() <= $(window).height()) {
+	if(window.scrollY <= window.innerHeight) {
 		ctx.clearRect(0, 0, canvas.width, canvas.height);
 	
 		for(var i = 0; i < n; i++) {
@@ -220,23 +201,23 @@ var sentences = [
 
 var counter = 1;
 
-var ticker = $("footer .ticker");
+var ticker = document.querySelector("footer .ticker");
 
 function changeText() {
 	var el = ticker,
 		text = sentences[counter],
-		oldText = el.text();
+		oldText = el.textContent;
 
 	var x = setInterval(function() {
 		if(oldText.length != 0) {
 			oldText = oldText.slice(0, -1);
-			el.text(oldText);
+			el.textContent = oldText;
 		}
 		else {
 			setTimeout(function() {
 				var y = setInterval(function() {
-					if(el.text().length != text.length) {
+					if(el.textContent.length != text.length) {
-						el.text(text.slice(0, el.text().length+1));
+						el.textContent = text.slice(0, el.textContent.length+1);
 					}
 					else {
 						setTimeout(function() {
@@ -256,24 +237,10 @@ function changeText() {
 	}, 60);
 }
 
-ticker.html(sentences[0]);
+ticker.textContent = sentences[0];
 
 setTimeout(changeText, 5000);
 
-$('a[href^="#"]').on('click', function(e) {
-	e.preventDefault();
-
-	var el = $($(this).attr('href'));
-
-	var distance = Math.abs($(window).scrollTop() - $(el).offset().top);
-
-	var time = Math.floor( Math.sqrt(distance / $(document).height()) * 1500 );
-
-	$('html, body').animate({
-		scrollTop: el.offset().top
-	}, time);
-});
-
 // slight convenience: fix the header section with my correct age automatically
 
 const birthday = {
@@ -288,7 +255,7 @@ if(today.getMonth() <= birthday.month && today.getDate() < birthday.date) {
 }
 const tens = ['', ' ten plus', ' twenty', ' thirty', ' forty', ' fifty', ' sixty', ' seventy', 'n eighty', ' ninety'];
 const ones = ['', 'one', 'two', 'three', 'four', 'five', 'six', 'seven', 'eight', 'nine'];
-$('.age').html(`${tens[Math.floor(age / 10)]} ${ones[age % 10]}`);
+document.querySelector('.age').textContent = `${tens[Math.floor(age / 10)]} ${ones[age % 10]}`;
 
 // easter egg
 
@@ -301,7 +268,7 @@ var mode = 0;
 
 var eei = 0;
 
-$(window).on('keypress', function(e) {
+window.addEventListener('keypress', e => {
 	const clapper = document.querySelector('.clapper');
 	var sequence = sequences[mode];
 	if(e.keyCode == sequence[eei]) {
@@ -309,18 +276,17 @@ $(window).on('keypress', function(e) {
 	}
 	else {
 		eei = 0;
-		console.log(`expected ${sequence[eei]}, got ${e.keyCode}`);
 	}
 
 	if(eei == sequence.length) {
 		clapper.classList.toggle('clapping');
 		setTimeout(() => {
 			if(mode === 1) {
-				$('body').removeClass('dark-mode');
+				document.body.classList.remove('dark-mode');
 				mode = 0;
 			}
 			else {
-				$('body').addClass('dark-mode');
+				document.body.classList.add('dark-mode');
 				mode = 1;
 			}
 			eei = 0;