resolved hero hover, icons. removed unnecessary pngs

src/lib/Data/projects.json

@@ -1,4 +1,10 @@
 [
+	{
+		"title": "Construction Cost Analysis",
+		"description": "Objective of this project is to utilise data analytics to design a highly accurate predictive model for building costs.",
+		"link": "https://rpubs.com/abhishzk/icc-cost-analysis",
+		"image": "/images/projects/icc.png"
+	},
 	{
 		"title": "Data Visualization",
 		"description": "Visualizing the India's development journey through 10 correlation points which are shown in public tableau.",

src/lib/Data/work.json

@@ -8,7 +8,7 @@
 	},
 	{
 		"institution": "Infosys BPM Ltd",
-		"role": "Process Executive",
+		"role": "Business Process Consultant",
 		"location": "Athlone, IE",
 		"duration": "Jan 2022 - May 2022",
 		"short": "infosys"

src/lib/Home/Hero.svelte

@@ -1,4 +1,4 @@
-<script lang="ts">
+<!-- <script lang="ts">
 	import { onMount } from 'svelte';
 	onMount(async () => {
 		var i = 0;
@@ -48,7 +48,7 @@
 
 <style lang="scss">
 	.hero:hover .img-container img {
-		animation: moveAlternate 1s ease-in-out infinite alternate;
+		animation: moveAlternate 3s ease-in-out infinite alternate;
 	}
 
 	@keyframes moveAlternate {
@@ -64,4 +64,92 @@
 			transform: translate(-10px, 10px);
 		}
 	}
+</style> -->
+
+<script lang="ts">
+	import { onMount } from 'svelte';
+
+	let heroContainer: HTMLDivElement | null = null;
+
+	onMount(() => {
+		let i = 0;
+		const codeBlurb = '\tconsultant, engineer, product enthusiast, traveller';
+		let timeoutId: ReturnType<typeof setTimeout>;
+
+		function typeWriter() {
+			if (i < codeBlurb.length) {
+				const typewriterElement = document.getElementById('typewriter');
+				if (typewriterElement) {
+					typewriterElement.innerHTML += codeBlurb.charAt(i);
+					i++;
+					timeoutId = setTimeout(typeWriter, 50);
+				}
+			}
+		}
+
+		typeWriter();
+	});
+
+	function handleMouseMove(event: MouseEvent) {
+		if (heroContainer) {
+			const imgContainer = heroContainer.querySelector('.img-container');
+			if (imgContainer) {
+				const rect = heroContainer.getBoundingClientRect();
+				const offsetX = event.clientX - rect.left;
+				const offsetY = event.clientY - rect.top;
+
+				// Calculate the percentage of the cursor's position relative to the container's dimensions
+				const percentX = (offsetX / rect.width) * 2 - 1; // Ranges from -1 to 1
+				const percentY = (offsetY / rect.height) * 2 - 1; // Ranges from -1 to 1
+
+				const maxOffset = 10; // Maximum offset in any direction
+
+				const translateX = percentX * maxOffset;
+				const translateY = percentY * maxOffset;
+
+				const imgElement = imgContainer.querySelector('img');
+				if (imgElement) {
+					imgElement.style.transform = `translate(${translateX}px, ${translateY}px)`;
+				}
+			}
+		}
+	}
+
+	function resetTransform() {
+		const imgElement = heroContainer?.querySelector('.img-container img');
+		if (imgElement) {
+			imgElement.style.transform = 'translate(0, 0)';
+		}
+	}
+</script>
+
+<div class="hero min-h-screen" bind:this={heroContainer} on:mousemove={handleMouseMove} on:mouseleave={resetTransform}>
+	<div class="hero-content flex-col max-w-[100vw] w-full justify-start lg:flex-row lg:max-w-screen-xl">
+		<div class="img-container">
+			<img
+				src="/images/headshot.webp"
+				class="max-w-md rounded-lg lg:mr-10"
+				alt="Drawing of Abhishek Kumar's headshot"
+			/>
+		</div>
+		<div>
+			<h1 class="text-5xl font-bold bg-gradient-to-r bg-clip-text leading-normal text-transparent from-[#048eaa] via-blue-500 to-[#048eaa] animate-text text-center">
+				Hi, I'm Abhishek!
+			</h1>
+			<br />
+			<div class="lg:min-w-[400px] max-w-[110dvw] mockup-code">
+				<pre data-prefix="1"><code><span class="text-info">traits</span>{'[] '}<span class="text-secondary">abhishzk</span>{' ='}</code></pre>
+				<pre data-prefix="2"><code>{'{'}</code></pre>
+				<pre data-prefix="3"><code id="typewriter" class="text-success" /></pre>
+				<pre data-prefix="4"><code>{'}'}</code></pre>
+			</div>
+		</div>
+	</div>
+</div>
+
+<style lang="scss">
+	.img-container img {
+		transition: transform 0.07s ease;
+	}
 </style>
+

src/lib/Theme.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
 	import { browser } from '$app/environment';
 
-	export let darkMode = true; //setting light default
+	export let darkMode = false; // Default to light mode
 
 	function handleSwitchDarkMode() {
 		darkMode = !darkMode;
@@ -18,45 +18,48 @@
 	}
 
 	if (browser) {
-		if (
-			localStorage.theme === 'light' ||
-			(!('theme' in localStorage) && window.matchMedia('(prefers-color-scheme: light)').matches)
-		) {
+		const storedTheme = localStorage.getItem('theme');
+		const prefersLight = window.matchMedia('(prefers-color-scheme: light)').matches;
+
+		if (storedTheme === 'dark' || (!storedTheme && !prefersLight)) {
 			document.documentElement.classList.add('dark');
-			document.documentElement.setAttribute('data-theme', 'light');
+			document.documentElement.setAttribute('data-theme', 'dark');
 			darkMode = true;
 		} else {
 			document.documentElement.classList.remove('dark');
-			document.documentElement.setAttribute('data-theme', 'dark');
+			document.documentElement.setAttribute('data-theme', 'light');
 			darkMode = false;
 		}
 	}
 </script>
 
 <div class="h-0 m-0">
 	<label
-		class="z-10 swap swap-rotate cursor-pointer h-6 w-6 fixed top-5 right-6 rounded-full duration-300 content-['']"
+		class="z-10 swap swap-rotate cursor-pointer h-6 w-6 fixed top-5 right-6 rounded-full duration-300"
 		for="theme-toggle"
 	>
 		<input
 			checked={!darkMode}
 			on:click={handleSwitchDarkMode}
 			type="checkbox"
 			id="theme-toggle"
-			placeholder="theme-toggle"
 		/>
-		<svg class="swap-on fill-current w-8 h-8" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"
-			><path
-				d="M5.64,17l-.71.71a1,1,0,0,0,0,1.41,1,1,0,0,0,1.41,0l.71-.71A1,1,0,0,0,5.64,17ZM5,12a1,1,0,0,0-1-1H3a1,1,0,0,0,0,2H4A1,1,0,0,0,5,12Zm7-7a1,1,0,0,0,1-1V3a1,1,0,0,0-2,0V4A1,1,0,0,0,12,5ZM5.64,7.05a1,1,0,0,0,.7.29,1,1,0,0,0,.71-.29,1,1,0,0,0,0-1.41l-.71-.71A1,1,0,0,0,4.93,6.34Zm12,.29a1,1,0,0,0,.7-.29l.71-.71a1,1,0,1,0-1.41-1.41L17,5.64a1,1,0,0,0,0,1.41A1,1,0,0,0,17.66,7.34ZM21,11H20a1,1,0,0,0,0,2h1a1,1,0,0,0,0-2Zm-9,8a1,1,0,0,0-1,1v1a1,1,0,0,0,2,0V20A1,1,0,0,0,12,19ZM18.36,17A1,1,0,0,0,17,18.36l.71.71a1,1,0,0,0,1.41,0,1,1,0,0,0,0-1.41ZM12,6.5A5.5,5.5,0,1,0,17.5,12,5.51,5.51,0,0,0,12,6.5Zm0,9A3.5,3.5,0,1,1,15.5,12,3.5,3.5,0,0,1,12,15.5Z"
-			/></svg
-		>
-		<svg
-			class="swap-off fill-current w-8 h-8"
-			xmlns="http://www.w3.org/2000/svg"
-			viewBox="0 0 24 24"
-			><path
-				d="M21.64,13a1,1,0,0,0-1.05-.14,8.05,8.05,0,0,1-3.37.73A8.15,8.15,0,0,1,9.08,5.49a8.59,8.59,0,0,1,.25-2A1,1,0,0,0,8,2.36,10.14,10.14,0,1,0,22,14.05,1,1,0,0,0,21.64,13Zm-9.5,6.69A8.14,8.14,0,0,1,7.08,5.22v.27A10.15,10.15,0,0,0,17.22,15.63a9.79,9.79,0,0,0,2.1-.22A8.11,8.11,0,0,1,12.14,19.73Z"
-			/></svg
-		>
+		<svg class="swap-off fill-current w-8 h-8" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+			<path
+			d="M5.64,17l-.71.71a1,1,0,0,0,0,1.41,1,1,0,0,0,1.41,0l.71-.71A1,1,0,0,0,5.64,17ZM5,12a1,1,0,0,0-1-1H3a1,1,0,0,0,0,2H4A1,1,0,0,0,5,12Zm7-7a1,1,0,0,0,1-1V3a1,1,0,0,0-2,0V4A1,1,0,0,0,12,5ZM5.64,7.05a1,1,0,0,0,.7.29,1,1,0,0,0,.71-.29,1,1,0,0,0,0-1.41l-.71-.71A1,1,0,0,0,4.93,6.34Zm12,.29a1,1,0,0,0,.7-.29l.71-.71a1,1,0,1,0-1.41-1.41L17,5.64a1,1,0,0,0,0,1.41A1,1,0,0,0,17.66,7.34ZM21,11H20a1,1,0,0,0,0,2h1a1,1,0,0,0,0-2Zm-9,8a1,1,0,0,0-1,1v1a1,1,0,0,0,2,0V20A1,1,0,0,0,12,19ZM18.36,17A1,1,0,0,0,17,18.36l.71.71a1,1,0,0,0,1.41,0,1,1,0,0,0,0-1.41ZM12,6.5A5.5,5.5,0,1,0,17.5,12,5.51,5.51,0,0,0,12,6.5Zm0,9A3.5,3.5,0,1,1,15.5,12,3.5,3.5,0,0,1,12,15.5Z"
+			/>
+		</svg>
+		<svg class="swap-on fill-current w-8 h-8" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+			<path
+			d="M21.64,13a1,1,0,0,0-1.05-.14,8.05,8.05,0,0,1-3.37.73A8.15,8.15,0,0,1,9.08,5.49a8.59,8.59,0,0,1,.25-2A1,1,0,0,0,8,2.36,10.14,10.14,0,1,0,22,14.05,1,1,0,0,0,21.64,13Zm-9.5,6.69A8.14,8.14,0,0,1,7.08,5.22v.27A10.15,10.15,0,0,0,17.22,15.63a9.79,9.79,0,0,0,2.1-.22A8.11,8.11,0,0,1,12.14,19.73Z"	
+			/>
+		</svg>
 	</label>
 </div>
+
+<style>
+	/* Add smooth transition for theme change */
+	:root {
+		transition: background-color 0.3s, color 0.3s;
+	}
+</style>