Dark theme support

index.html

@@ -24,11 +24,25 @@
 		<h3>
 			Passionate about
 		</h3>
-		<span>Learning and tinkering with computers and electronics</span>
+		<ul>
+			<li>Learning and tinkering with computers and electronics</li>
+			<li>Operating Systems</li>
+			<li>Computer Architecture</li>
+			<li>Graphics Programming</li>
+			<li>Machine Learning</li>
+			<li>Media Processing</li>
+			<li>Cybersecurity</li>
+			<li>Networking</li>
+		</ul>
+
+
 	</div>
 	<div id="currentStatus">
 		<h3> Currently</h3>
-		<div id="position"> A Student</div>
+		<ul id="position">
+			<li> A Student at SLIET Longowal</li>
+			<li> App Developer in Team CycleOne</li>
+		</ul>
 	</div>
 	<div id="experiences">
 		<h3>
@@ -67,6 +81,7 @@ <h3>
 		<ul>
 			<li>
 				Rust
+
 			</li>
 			<li>
 				Go

scripts.js

@@ -1,7 +1,7 @@
 window.addEventListener("load", () => {
 	const cards = document.querySelectorAll("body > div");
 	for (const card of cards) {
-		card.addEventListener("mouseover", (e) => {
+		card.addEventListener("mouseenter", (e) => {
 			const boundingBox = card.getBoundingClientRect();
 			const mrx =  (e.x - boundingBox.x) / boundingBox.width;
 			const mry =  (e.y - boundingBox.y) / boundingBox.height;

styles.css

@@ -2,17 +2,17 @@
 	--bg-square-width: 10px;
 	--bg-square-inner-color: #8BE9FD;
 	--bg-square-edge-color: #85E2F6;
+	--bg-complementary: #DEAEC2;
+	--text-color: #18272F;
+	color: var(--text-color);
 }
 
 @font-face {
 	font-family: xProto;
 	src: url("0xProto.woff2")
 }
 
-.dark {
-	--bg-square-inner-color: #282A36;
-	--bg-square-edge-color: #2d2f3b;
-}
+
 
 * {
 	box-sizing: border-box;
@@ -36,8 +36,35 @@ body {
 	grid-template-rows: auto auto;
 }
 
-#position {
-	font-size: 1.5em;
+a {
+	text-decoration: none;
+	color: var(--text-color);
+	font-weight: 700;
+	position: relative;
+	transition: color 0.5s;
+	padding: 10px;
+}
+
+a::before {
+	content: '';
+	background-color: var(--bg-complementary);
+	position: absolute;
+	left: 0;
+	bottom: 3px;
+	width: 100%;
+	height: 8px;
+	z-index: -1;
+	transition: all .3s ease-in-out;
+}
+
+a:hover {
+	color: var(--bg-square-inner-color);
+}
+
+a:hover::before {
+	bottom: 0;
+	height: 100%;
+	border-radius: 10px;
 }
 
 #profileInfo_links>a {
@@ -53,6 +80,31 @@ h3 {
 
 li {
 	font-size: 1.5em;
+	position: relative;
+	transition: color 0.5s;
+	padding: 5px;
+}
+
+li::before {
+	content: "";
+	background-color: var(--bg-complementary);
+	position: absolute;
+	left: 0;
+	bottom: 3px;
+	width: 0px;
+	height: 100%;
+	z-index: -1;
+	transition: all .3s ease-in-out;
+}
+
+li:hover {
+	color: var(--bg-square-inner-color);
+}
+
+li:hover::before {
+	bottom: 0;
+	width: 100%;
+	border-radius: 10px;
 }
 
 @keyframes backgroundMove {
@@ -104,7 +156,9 @@ body>div {
 	padding: 10px;
 	background: radial-gradient(circle, var(--bg-square-edge-color) 0%,
 			var(--bg-square-edge-color) 25%,
-			transparent 100%);
+			transparent 100%),
+
+	;
 	transition: background-color 0.7s, transform 0.1s, box-shadow 0.3s;
 }
 
@@ -168,7 +222,6 @@ body>div:hover {
 
 }
 
-/* Medium devices (landscape tablets, 768px and up) */
 @media only screen and (max-width: 768px) {
 
 	#profileInfo_links {
@@ -181,30 +234,37 @@ body>div:hover {
 
 }
 
-/* Large devices (laptops/desktops, 992px and up) */
 @media only screen and (max-width: 992px) {
 
 	body {
 		grid-template-columns: auto;
 	}
-	
+
 	:root {
 		font-size: 0.8em;
 	}
 
 
 }
 
-/* Extra large devices (large laptops and desktops, 1200px and up) */
 @media only screen and (max-width: 1200px) {
 
 	#profileInfo_links {
 		font-size: initial;
 	}
+
 	body {
 		grid-template-columns: auto;
+
 	}
-	
+
 }
 
+@media (prefers-color-scheme: dark) {
+	:root {
+		--bg-square-inner-color: #282A36;
+		--bg-square-edge-color: #2d2f3b;
+		--text-color: #F8F8F2;
+	}
 
+}