smartest man alive

src/components/aboutme.astro

@@ -1,41 +1,13 @@
-<script is:inline>
-  // function closeWindow() {
-  //   document.getElementById("aboutme").style.display = "none";
-  // }
-
-  function raiseUp() {
-    let els = document.getElementsByClassName("window");
-
-    let elArray = Array.from(els);
-
-    // find the highest z-index
-    let highestIndex = 0;
-
-    for (let element in elArray) {
-      let zindex = parseInt(elArray[element].style.zIndex);
-      if (zindex > highestIndex) {
-        highestIndex = zindex;
-      }
-    }
-
-    // set the highest z-index plus one
-    document.getElementById("aboutme").style.zIndex = (
-      highestIndex + 1
-    ).toString();
-  }
-</script>
-
 <div
   id="aboutme"
   class="window"
   style="width: 70%; height: 45%; position: absolute; left: 15%; top: 22%; display: none;"
-  onclick="raiseUp()"
 >
   <div id="aboutmeheader" class="title-bar">
     <div class="title-bar-text">About Me</div>
     <div class="title-bar-controls">
-      <button onclick="document.getElementById('aboutme').style.display = 'none'" aria-label="Minimize"></button>
-      <button onclick="document.getElementById('aboutme').style.display = 'none'" aria-label="Close"></button>
+      <button class="close" aria-label="Minimize"></button>
+      <button class="close" aria-label="Close"></button>
     </div>
   </div>
   <div class="window-body">
@@ -55,70 +27,4 @@ Although not entirely proficient, I also write in Python and Golang from time to
       </textarea>
     </div>
   </div>
-</div>
-
-<script is:inline>
-  dragElement(document.getElementById("aboutme"));
-
-  function dragElement(elmnt) {
-    var pos1 = 0,
-      pos2 = 0,
-      pos3 = 0,
-      pos4 = 0;
-
-    if (document.getElementById(elmnt.id + "header")) {
-      // If present, the header is where you move the DIV from:
-      document.getElementById(elmnt.id + "header").onmousedown = dragMouseDown;
-      document.getElementById(elmnt.id + "header").ontouchstart = dragMouseDown;
-    } else {
-      // Otherwise, move the DIV from anywhere inside the DIV:
-      elmnt.onmousedown = dragMouseDown;
-      elmnt.ontouchstart = dragMouseDown;
-    }
-
-    function dragMouseDown(e) {
-      // e.preventDefault();
-      raiseUp();
-      // Get the initial touch point for touch events
-      if (e.type == "touchstart") {
-        pos3 = e.touches[0].clientX;
-        pos4 = e.touches[0].clientY;
-      } else {
-        pos3 = e.clientX;
-        pos4 = e.clientY;
-      }
-      document.onmouseup = closeDragElement;
-      document.ontouchend = closeDragElement;
-      document.onmousemove = elementDrag;
-      document.ontouchmove = elementDrag;
-    }
-
-    function elementDrag(e) {
-      // e.preventDefault();
-      if (e.type == "touchmove") {
-        // Calculate the new cursor position for touch
-        pos1 = pos3 - e.touches[0].clientX;
-        pos2 = pos4 - e.touches[0].clientY;
-        pos3 = e.touches[0].clientX;
-        pos4 = e.touches[0].clientY;
-      } else {
-        // Calculate the new cursor position for mouse
-        pos1 = pos3 - e.clientX;
-        pos2 = pos4 - e.clientY;
-        pos3 = e.clientX;
-        pos4 = e.clientY;
-      }
-      // Set the element's new position
-      elmnt.style.top = elmnt.offsetTop - pos2 + "px";
-      elmnt.style.left = elmnt.offsetLeft - pos1 + "px";
-    }
-
-    function closeDragElement() {
-      // Stop moving when mouse button or touch is released
-      document.onmouseup = null;
-      document.ontouchend = null;
-      document.onmousemove = null;
-      document.ontouchmove = null;
-    }
-  }
-</script>
+</div>

src/components/app.astro

@@ -14,27 +14,6 @@ let itemName = app.name.replace(" ", "")
   </div>
 </a>
 
-<!-- <script is:inline define:vars={{ itemName }}>
-  let tgt = document.querySelector(`#${itemName}`);
-
-  if(!tgt) {
-    console.error(`No element found with id ${itemName}`);
-    return;
-  }
-
-  let click = tgt.getAttribute("data-click");
-
-  if (click) {
-    let func = eval(click);
-
-    tgt.addEventListener("click", () => {
-      func();
-    });
-
-    // remove data-click attribute
-    tgt.removeAttribute("data-click");
-  }
-</script> -->
 
 <style>
   h3 {

src/components/contact.astro

@@ -1,41 +1,13 @@
-<script is:inline>
-	function raiseUpContact() {
-		let els = document.getElementsByClassName("window");
-
-		let elArray = Array.from(els);
-
-		// find the highest z-index
-		let highestIndex = 0;
-
-		for (let element in elArray) {
-			let zindex = parseInt(elArray[element].style.zIndex);
-			if (zindex > highestIndex) {
-				highestIndex = zindex;
-			}
-		}
-
-		// set the highest z-index plus one
-		document.getElementById("contact").style.zIndex = (
-			highestIndex + 1
-		).toString();
-	}
-</script>
-
 <div
 	id="contact"
 	class="window"
-	style="width: 70%; height: 45%; position: absolute; left: 15%; top: 22%; display: none;"
-	onclick="raiseUpContact()"
+	style="position: absolute; left: 15%; top: 22%; display: none;"
 >
 	<div id="contactheader" class="title-bar">
 		<div class="title-bar-text">Contact</div>
 		<div class="title-bar-controls">
-			<button
-				onclick="document.getElementById('contact').style.display = 'none'"
-				aria-label="Minimize"></button>
-			<button
-				onclick="document.getElementById('contact').style.display = 'none'"
-				aria-label="Close"></button>
+			<button class="close" aria-label="Minimize"></button>
+			<button class="close" aria-label="Close"></button>
 		</div>
 	</div>
 	<div class="window-body">
@@ -44,7 +16,7 @@
 			<textarea
           readonly
           id="text20"
-          style="font-size: 25px; resize: none; padding: 10px; height: 37vh;"
+          style="font-size: 25px; resize: none; padding: 10px;"
           >Email : simon@simo.ng
 Discord : s1monlol
         </textarea>
@@ -52,68 +24,23 @@ Discord : s1monlol
 	</div>
 </div>
 
-<script is:inline>
-	dragElement(document.getElementById("contact"));
-
-	function dragElement(elmnt) {
-		var pos1 = 0,
-			pos2 = 0,
-			pos3 = 0,
-			pos4 = 0;
-
-		if (document.getElementById(elmnt.id + "header")) {
-			// If present, the header is where you move the DIV from:
-			document.getElementById(elmnt.id + "header").onmousedown = dragMouseDown;
-			document.getElementById(elmnt.id + "header").ontouchstart = dragMouseDown;
-		} else {
-			// Otherwise, move the DIV from anywhere inside the DIV:
-			elmnt.onmousedown = dragMouseDown;
-			elmnt.ontouchstart = dragMouseDown;
-		}
-
-		function dragMouseDown(e) {
-			// e.preventDefault();
-			raiseUpContact();
-			// Get the initial touch point for touch events
-			if (e.type == "touchstart") {
-				pos3 = e.touches[0].clientX;
-				pos4 = e.touches[0].clientY;
-			} else {
-				pos3 = e.clientX;
-				pos4 = e.clientY;
-			}
-			document.onmouseup = closeDragElement;
-			document.ontouchend = closeDragElement;
-			document.onmousemove = elementDrag;
-			document.ontouchmove = elementDrag;
-		}
-
-		function elementDrag(e) {
-			// e.preventDefault();
-			if (e.type == "touchmove") {
-				// Calculate the new cursor position for touch
-				pos1 = pos3 - e.touches[0].clientX;
-				pos2 = pos4 - e.touches[0].clientY;
-				pos3 = e.touches[0].clientX;
-				pos4 = e.touches[0].clientY;
-			} else {
-				// Calculate the new cursor position for mouse
-				pos1 = pos3 - e.clientX;
-				pos2 = pos4 - e.clientY;
-				pos3 = e.clientX;
-				pos4 = e.clientY;
-			}
-			// Set the element's new position
-			elmnt.style.top = elmnt.offsetTop - pos2 + "px";
-			elmnt.style.left = elmnt.offsetLeft - pos1 + "px";
-		}
-
-		function closeDragElement() {
-			// Stop moving when mouse button or touch is released
-			document.onmouseup = null;
-			document.ontouchend = null;
-			document.onmousemove = null;
-			document.ontouchmove = null;
-		}
-	}
-</script>
+<style>
+
+/* Default style for mobile and smaller devices */
+#contact {
+  width: 20%;
+}
+
+/* Style for tablets, desktops, and larger devices */
+@media (max-width: 540px) {
+	#contact {
+    width: 80%;
+  }
+}
+@media (max-width: 1080px) and (min-width: 540px) {
+	#contact {
+    width: 60%;
+  }
+}
+
+</style>

src/components/redirect.astro

@@ -2,14 +2,13 @@
   id="redirect"
   class="window"
   style="width: 65%; position: absolute; left: 15%; top: 22%; display: none;"
-  onclick="raiseUpRedirect()"
   data-redirectUrl="test"
 >
   <div id="redirectheader" class="title-bar">
     <div class="title-bar-text">Redirect</div>
     <div class="title-bar-controls">
-      <button onclick="closeRedirectWindow()" aria-label="Minimize"></button>
-      <button onclick="closeRedirectWindow()" aria-label="Close"></button>
+      <button class="close" aria-label="Minimize"></button>
+      <button class="close" aria-label="Close"></button>
     </div>
   </div>
   <div class="window-body">
@@ -18,110 +17,12 @@
     <section class="field-row" style="justify-content: flex-end">
       <button id="okButton">OK</button>
       <button
-        onclick="closeRedirectWindow()">Cancel</button
+        class="close">Cancel</button
       >
     </section>
   </div>
 </div>
 
-<script is:inline>
-  function closeRedirectWindow() {
-    document.getElementById("redirect").style.display = "none";
-  }
-
-  function raiseUpRedirect() {
-    let els = document.getElementsByClassName("window");
-
-    let elArray = Array.from(els);
-
-    // find the highest z-index
-    let highestIndex = 0;
-
-    for (let element in elArray) {
-      let zindex = parseInt(elArray[element].style.zIndex);
-      if (zindex > highestIndex) {
-        highestIndex = zindex;
-      }
-    }
-
-    // set the highest z-index plus one
-    document.getElementById("redirect").style.zIndex = (
-      highestIndex + 1
-    ).toString();
-  }
-
-  // Call this function when the component mounts in the browser
-  //   updateRedirectMessage();
-  raiseUpRedirect();
-</script>
-
-<script is:inline>
-  dragElement(document.getElementById("redirect"));
-
-  function dragElement(elmnt) {
-    var pos1 = 0,
-      pos2 = 0,
-      pos3 = 0,
-      pos4 = 0;
-
-    if (document.getElementById(elmnt.id + "header")) {
-      // If present, the header is where you move the DIV from:
-      document.getElementById(elmnt.id + "header").onmousedown = dragMouseDown;
-      document.getElementById(elmnt.id + "header").ontouchstart = dragMouseDown;
-    } else {
-      // Otherwise, move the DIV from anywhere inside the DIV:
-      elmnt.onmousedown = dragMouseDown;
-      elmnt.ontouchstart = dragMouseDown;
-    }
-
-    function dragMouseDown(e) {
-      //   e.preventDefault();
-      raiseUpRedirect();
-
-      // Get the initial touch point for touch events
-      if (e.type == "touchstart") {
-        pos3 = e.touches[0].clientX;
-        pos4 = e.touches[0].clientY;
-      } else {
-        pos3 = e.clientX;
-        pos4 = e.clientY;
-      }
-      document.onmouseup = closeDragElement;
-      document.ontouchend = closeDragElement;
-      document.onmousemove = elementDrag;
-      document.ontouchmove = elementDrag;
-    }
-
-    function elementDrag(e) {
-      //   e.preventDefault();
-      if (e.type == "touchmove") {
-        // Calculate the new cursor position for touch
-        pos1 = pos3 - e.touches[0].clientX;
-        pos2 = pos4 - e.touches[0].clientY;
-        pos3 = e.touches[0].clientX;
-        pos4 = e.touches[0].clientY;
-      } else {
-        // Calculate the new cursor position for mouse
-        pos1 = pos3 - e.clientX;
-        pos2 = pos4 - e.clientY;
-        pos3 = e.clientX;
-        pos4 = e.clientY;
-      }
-      // Set the element's new position
-      elmnt.style.top = elmnt.offsetTop - pos2 + "px";
-      elmnt.style.left = elmnt.offsetLeft - pos1 + "px";
-    }
-
-    function closeDragElement() {
-      // Stop moving when mouse button or touch is released
-      document.onmouseup = null;
-      document.ontouchend = null;
-      document.onmousemove = null;
-      document.ontouchmove = null;
-    }
-  }
-</script>
-
 <style>
   button {
     margin-top: 0;

src/pages/index.astro

@@ -15,135 +15,194 @@ import blog from "../assets/apps/blog.png";
 import contact from "../assets/apps/contact.png";
 import Redirect from "../components/redirect.astro";
 
-import Contact from "../components/contact.astro"
+import Contact from "../components/contact.astro";
+
+function dragElement(elmnt) {
+	var pos1 = 0,
+		pos2 = 0,
+		pos3 = 0,
+		pos4 = 0;
+
+	if (document.getElementById(elmnt.id + "header")) {
+		// If present, the header is where you move the DIV from:
+		document.getElementById(elmnt.id + "header").onmousedown = dragMouseDown;
+		document.getElementById(elmnt.id + "header").ontouchstart = dragMouseDown;
+	} else {
+		// Otherwise, move the DIV from anywhere inside the DIV:
+		elmnt.onmousedown = dragMouseDown;
+		elmnt.ontouchstart = dragMouseDown;
+	}
+
+	function dragMouseDown(e) {
+		// e.preventDefault();
+		raiseUpSpec(elmnt.id);
+		// Get the initial touch point for touch events
+		if (e.type == "touchstart") {
+			pos3 = e.touches[0].clientX;
+			pos4 = e.touches[0].clientY;
+		} else {
+			pos3 = e.clientX;
+			pos4 = e.clientY;
+		}
+		document.onmouseup = closeDragElement;
+		document.ontouchend = closeDragElement;
+		document.onmousemove = elementDrag;
+		document.ontouchmove = elementDrag;
+	}
+
+	function elementDrag(e) {
+		// e.preventDefault();
+		if (e.type == "touchmove") {
+			// Calculate the new cursor position for touch
+			pos1 = pos3 - e.touches[0].clientX;
+			pos2 = pos4 - e.touches[0].clientY;
+			pos3 = e.touches[0].clientX;
+			pos4 = e.touches[0].clientY;
+		} else {
+			// Calculate the new cursor position for mouse
+			pos1 = pos3 - e.clientX;
+			pos2 = pos4 - e.clientY;
+			pos3 = e.clientX;
+			pos4 = e.clientY;
+		}
+		// Set the element's new position
+		elmnt.style.top = elmnt.offsetTop - pos2 + "px";
+		elmnt.style.left = elmnt.offsetLeft - pos1 + "px";
+	}
+
+	function closeDragElement() {
+		// Stop moving when mouse button or touch is released
+		document.onmouseup = null;
+		document.ontouchend = null;
+		document.onmousemove = null;
+		document.ontouchmove = null;
+	}
+}
 
 /** Raise up window with given ID */
 function raiseUpSpec(id: string) {
-  let els = document.getElementsByClassName("window");
-
-  let elArray = Array.from(els as HTMLCollectionOf<HTMLElement>);
+	console.log("raising ", id);
+	let els = document.getElementsByClassName("window");
 
-  
+	let elArray = Array.from(els as HTMLCollectionOf<HTMLElement>);
 
-  // find the highest z-index
-  let highestIndex = 0;
+	// find the highest z-index
+	let highestIndex = 0;
 
-  for (let element in elArray) {
-    let zindex = parseInt(elArray[element].style.zIndex);
-    if (zindex > highestIndex) {
-      highestIndex = zindex;
-    }
-  }
+	for (let element in elArray) {
+		let zindex = parseInt(elArray[element].style.zIndex);
+		if (zindex > highestIndex) {
+			highestIndex = zindex;
+		}
+	}
 
-  // set the highest z-index plus one
-  document.getElementById(id).style.zIndex = (highestIndex + 1).toString();
+	// set the highest z-index plus one
+	document.getElementById(id).style.zIndex = (highestIndex + 1).toString();
 }
 
 function updateRedirectMessage() {
-  const redirectElement = document.getElementById("redirect");
+	const redirectElement = document.getElementById("redirect");
 
-  const redirectUrl = redirectElement.dataset.redirecturl; // Access the data attribute
+	const redirectUrl = redirectElement.dataset.redirecturl; // Access the data attribute
 
-  const messageElement = redirectElement.querySelector("h2");
-  messageElement.innerHTML = `You are about to be redirected to <a class="redirUrl" style="  cursor: pointer;
+	const messageElement = redirectElement.querySelector("h2");
+	messageElement.innerHTML = `You are about to be redirected to <a class="redirUrl" style="  cursor: pointer;
     color: blue;
     text-decoration: underline; " href="${redirectUrl}"">${redirectUrl}</a>`;
 
-  const buttonElement = redirectElement.querySelector("#okButton");
-  // open redirect url
-  buttonElement.setAttribute(
-    "onclick",
-    `window.location.href = "${redirectUrl}"`
-  );
+	const buttonElement = redirectElement.querySelector("#okButton");
+	// open redirect url
+	buttonElement.setAttribute(
+		"onclick",
+		`window.location.href = "${redirectUrl}"`,
+	);
 }
 
 let apps: app[] = [
-  {
-    name: "About Me",
-    logo: me.src,
-    onclick: () => {
-      raiseUpSpec("aboutme");
-      document.getElementById("aboutme").style.display = "block";
-    },
-    row: 1,
-  },
-  {
-    name: "Blog",
-    logo: blog.src,
-    onclick: () => {
-      // ignore
-      raiseUpSpec("redirect");
-      document.getElementById("redirect").style.display = "block";
-      document.getElementById("redirect").dataset.redirecturl =
-        "https://blog.simo.ng/";
-      updateRedirectMessage();
-    },
-    row: 1,
-  },
-  {
-    name: "Projects",
-    logo: projects.src,
-    row: 1,
-  },
-  {
-    name: "Past Work",
-    logo: pastwork.src,
-    row: 1,
-  },
-  {
-    name: "Github",
-    logo: github.src,
-    onclick: () => {
-      // ignore
-      raiseUpSpec("redirect");
-      document.getElementById("redirect").style.display = "block";
-      document.getElementById("redirect").dataset.redirecturl =
-        "https://github.com/s1monlol/";
-      updateRedirectMessage()
-    },
-    row: 2,
-  },
-  {
-    name: "Contact",
-    logo: contact.src,
-    row: 2,
-    onclick: () => {
-      raiseUpSpec("contact");
-      document.getElementById("contact").style.display = "block";
-    },
-  },
+	{
+		name: "About Me",
+		logo: me.src,
+		onclick: () => {
+			raiseUpSpec("aboutme");
+			document.getElementById("aboutme").style.display = "block";
+		},
+		row: 1,
+	},
+	{
+		name: "Blog",
+		logo: blog.src,
+		onclick: () => {
+			// ignore
+			raiseUpSpec("redirect");
+			document.getElementById("redirect").style.display = "block";
+			document.getElementById("redirect").dataset.redirecturl =
+				"https://blog.simo.ng/";
+			updateRedirectMessage();
+		},
+		row: 1,
+	},
+	{
+		name: "Projects",
+		logo: projects.src,
+		row: 1,
+	},
+	{
+		name: "Past Work",
+		logo: pastwork.src,
+		row: 1,
+	},
+	{
+		name: "Github",
+		logo: github.src,
+		onclick: () => {
+			// ignore
+			raiseUpSpec("redirect");
+			document.getElementById("redirect").style.display = "block";
+			document.getElementById("redirect").dataset.redirecturl =
+				"https://github.com/s1monlol/";
+			updateRedirectMessage();
+		},
+		row: 2,
+	},
+	{
+		name: "Contact",
+		logo: contact.src,
+		row: 2,
+		onclick: () => {
+			raiseUpSpec("contact");
+			document.getElementById("contact").style.display = "block";
+		},
+	},
 ];
 
-
-
 const row1Items = apps.filter((item) => item.row === 1);
 const row2Items = apps.filter((item) => item.row === 2);
 
 let clientFunctions: Function[] | String[] = [
-  raiseUpSpec,
-  updateRedirectMessage,
-]
+	raiseUpSpec,
+	updateRedirectMessage,
+	dragElement,
+];
 
-clientFunctions = clientFunctions.map((item) => String(item))
+clientFunctions = clientFunctions.map((item) => String(item));
 
 apps = apps.map((item) => {
-  item.onclick = String(item.onclick);
+	item.onclick = String(item.onclick);
 
-  return item;
+	return item;
 });
-
 ---
 
 <Layout title="Simo">
-  <div class="flex">
-    <div class="h-80 flex flex-col items-start">
-      {row1Items.map((item) => <App {item} />)}
-    </div>
-
-    <div class="h-80 flex flex-col items-start">
-      {row2Items.map((item) => <App {item} />)}
-    </div>
-  </div>
+	<div class="flex">
+		<div class="h-80 flex flex-col items-start">
+			{row1Items.map((item) => <App {item} />)}
+		</div>
+
+		<div class="h-80 flex flex-col items-start">
+			{row2Items.map((item) => <App {item} />)}
+		</div>
+	</div>
 </Layout>
 
 <Aboutme />
@@ -152,25 +211,36 @@ apps = apps.map((item) => {
 <Taskbar />
 
 <script define:vars={{ apps, clientFunctions }}>
-
-  for(func in clientFunctions){
-    eval(clientFunctions[func])
-  }
-
-  for (x in apps) {
-    let app = apps[x];
-
-    let itemName = app.name.replace(" ", "")
-
-    // console.info(document.getElementById(app.name));
-
-    if (app.onclick == "undefined") {
-      continue;
-    }
-
-    document.getElementById(itemName).addEventListener("click", () => {
-      const appFunc = eval(app.onclick);
-      appFunc();
-    });
-  }
+	for (func in clientFunctions) {
+		eval(clientFunctions[func]);
+	}
+
+	Array.from(document.getElementsByClassName("window")).forEach((window) => {
+		dragElement(window);
+
+		window.addEventListener("click", () => {
+			raiseUpSpec(window.id);
+		});
+
+		Array.from(window.getElementsByClassName("close")).forEach((button) => {
+			button.addEventListener("click", () => {
+				window.style.display = "none";
+			});
+		});
+	});
+
+	apps.forEach((app) => {
+		let itemName = app.name.replace(" ", "");
+
+		// console.info(document.getElementById(app.name));
+
+		if (app.onclick == "undefined") {
+			return;
+		}
+
+		document.getElementById(itemName).addEventListener("click", () => {
+			const appFunc = eval(app.onclick);
+			appFunc();
+		});
+	});
 </script>