IDK, what i changed at this point

eternalfrustation · Nov 18, 2024 · 9d4b0ba · 9d4b0ba
1 parent 47042eb
commit 9d4b0ba
Show file tree

Hide file tree

Showing 2 changed files with 58 additions and 3 deletions.
diff --git a/index.html b/index.html
@@ -7,11 +7,10 @@
 	<link href="styles.css" rel="stylesheet">
 	<meta name="viewport" content="width=device-width, initial-scale=1.0">
 	<link rel="preload" as="font" href="/0xproto-webfont.woff2" crossorigin>
-	<script src="scripts.js">
-	</script>
 </head>
 
 <body>
+	<a class="floating-element" href="https://eternalfrustation.github.io/apocrypha/"><button>Apocrypha</button></a>
 	<div role="img" aria-label="Profile Photo" id="profilePhoto"></div>
 	<div id="profileInfo">
 		<h1>Sandeep Kumar</h1>
@@ -170,4 +169,22 @@ <h2> Currently</h2>
 	</div>
 </body>
 
+<script>
+
+	window.addEventListener("load", () => {
+		const cards = document.querySelectorAll("body > div");
+		for (const card of cards) {
+			card.addEventListener("mouseenter", (e) => {
+				const boundingBox = card.getBoundingClientRect();
+				const mrx = (e.x - boundingBox.x) / boundingBox.width;
+				const mry = (e.y - boundingBox.y) / boundingBox.height;
+				card.style.transform = `skew(${mrx}deg, ${mry}deg)`
+			}, true)
+			card.addEventListener("mouseleave", (e) => {
+				card.style.transform = ``;
+			})
+		}
+	})
+</script>
+
 </html>
diff --git a/styles.css b/styles.css
@@ -3,6 +3,7 @@
 	--bg-square-inner-color: #8BE9FD;
 	--bg-square-edge-color: #85E2F6;
 	--bg-complementary: #8c0148;
+	--bg-complementary-light: #50fa7b;
 	--text-color: #18272F;
 	color: var(--text-color);
 }
@@ -135,7 +136,8 @@ li:hover::marker {
 	color: var(--bg-complementary);
 }
 li::marker {
-	content: "╠══"
+	content: "╠══";
+	transform: scale(150%);
 }
 
 li:last-of-type::marker {
@@ -305,3 +307,39 @@ body>div:hover::after {
 	}
 
 }
+
+button {
+	background-color: var(--bg-complementary);
+	border-radius: 40px;
+	font-size: 2em;
+	padding: 10px;
+	border-width: 0;
+	box-shadow: 0px 0px 3px 3px gray;
+	transition: background-color 0.5s;
+	cursor: pointer;
+}
+
+.floating-element {
+	position: fixed;
+	bottom: 20px;
+	right: 20px;
+	z-index: 10;
+}
+
+button::before {
+	content: "";
+	background-color: var(--bg-complementary-light);
+	position: absolute;
+	left: 0;
+	bottom: 3px;
+	width: 0px;
+	height: 100%;
+	z-index: -1;
+	transition: all .3s ease-in-out;
+}
+
+button:hover::before {
+	bottom: 0;
+	width: 100%;
+	border-radius: 40px;
+}