general ui improvements + simosearch embed

src/components/aboutme.astro

@@ -6,7 +6,7 @@ import Win98Window from "./win98window.astro";
 layout={{
   mobile:  { left: '10%', top: '10%', width: '95%', height: '500px' },
   // tablet:  { left: '30%', top: '20%', width: '50%', height: 'auto' },
-  desktop: { left: "10%", top: "20%", width: "65%", height: '600px' }
+  desktop: { left: "10%", top: "20%", width: "65%", height: '35vh' }
 }}
 title="About Me" >
 
@@ -15,7 +15,7 @@ title="About Me" >
       <textarea
         readonly
         id="text201"
-        style="font-size: 22px; resize: none; padding: 10px; font-family: inherit; width: 100%; background-color: #fff; border: 1px solid #ccc;  box-sizing: border-box;"
+        style="font-size: 22px; resize: none; padding: 10px; font-family: inherit; background-color: #fff; border: 1px solid #ccc; box-sizing: border-box;"
         >I'm Simon, a software developer studying computer science @ Widener university
 
 I am flexable with language choice. Development is a universal language, and I frequntly expand my stack knowledge through experience in different projects.

src/components/duolingo.astro

@@ -6,8 +6,8 @@ import duolingoImg from "../assets/dualingo.png";
 	<div class="title-bar" id="duolingoheader">
 		<div class="title-bar-text">Duolingo Stats</div>
 		<div class="title-bar-controls">
-			<button class="close" aria-label="Minimize"></button>
-			<button class="close" aria-label="Close"></button>
+			<button class="close" aria-label="Minimize" style="background-color: silver;"></button>
+			<button class="close" aria-label="Close" style="background-color: silver;"></button>
 		</div>
 	</div>
 	<div class="window-body">

src/components/githubgraph.astro

@@ -5,8 +5,8 @@
 	<div class="title-bar" id="githubgraphheader">
 		<div class="title-bar-text">Top Languages</div>
 		<div class="title-bar-controls">
-			<button class="close" aria-label="Minimize"></button>
-			<button class="close" aria-label="Close"></button>
+			<button class="close" aria-label="Minimize" style="background-color: silver;"></button>
+			<button class="close" aria-label="Close" style="background-color: silver;"></button>
 		</div>
 	</div>
 	<div class="window-body" style="padding: 10px;">

src/components/pgp.astro

@@ -67,10 +67,17 @@ NQ==
 		let window = document.getElementById("pgp");
 
 		window.classList.remove("fullscreen");
+		window.classList.add("closed");
+		window.addEventListener(
+			"animationend",
+			() => {
+				window.classList.remove("closed");
+				window.style.display = "none";
+			},
+			{ once: true }
+		);
 
-		window.style.display = "none";
-
-});
+	});
 </script>
 
 <style>
@@ -83,6 +90,10 @@ NQ==
 		animation: createBox 0.25s;
 	}
 
+	#pgp.closed {
+		animation: destroyBox 0.15s;
+	}
+
 	@keyframes createBox {
 		from {
 			transform: scale(0);
@@ -91,4 +102,13 @@ NQ==
 			transform: scale(1);
 		}
 	}
+
+	@keyframes destroyBox {
+		from {
+			transform: scale(1);
+		}
+		to {
+			transform: scale(0);
+		}
+	}
 </style>

src/components/projects.astro

@@ -10,33 +10,37 @@ let projects = Astro.props.projects;
 <Win98Window
   title="Projects "
   layout={{
-    mobile:  { left: '10%', top: '60%', width: '80%', height: 'auto' },
+    mobile:  { left: '5%', top: '20%', width: '90%', height: '60vh' },
     // tablet:  { left: '30%', top: '20%', width: '50%', height: 'auto' },
-    desktop: { left: "40%", top: "55%", width: "40%", height: '185px;' }
+    desktop: { left: "25%", top: "20%", width: "50%", height: '60vh' }
   }}
 >
 		<div id="inner">
-			<div
-				id="projects-container"
-				style="display: flex; flex-wrap: wrap; justify-content: flex-start; align-items: flex-start; gap: 10px;"
-			>
+			<div class="explorer-toolbar" aria-hidden="true">
+				<span class="explorer-path">C:\Users\simon\Projects</span>
+			</div>
+			<div class="explorer-files">
+				<div id="projects-container">
 				{
 					projects.map((item) => (
 						<div
 							class="project"
 							id={`${item.id}item`}
-							style="display: flex; flex-direction: column; align-items: left; margin: 1px; width: 120px;"
+							tabindex="0"
+							style="display: flex; flex-direction: row; align-items: center; justify-content: flex-start; margin: 0px;"
 						>
-							<img src={scriptIcon.src} class="w-auto h-16" />
+							<img src={scriptIcon.src} class="w-auto h-8" alt="" />
 							<h3
 								class="text-lg"
-								style="white-space: normal; overflow-wrap: break-word; text-align: center;"
+								style="white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-align: left;"
 							>
 								{item.title}
 							</h3>
 						</div>
 					))
 				}
+
+				</div>
 			</div>
 		</div>
 </Win98Window>
@@ -53,8 +57,43 @@ let projects = Astro.props.projects;
 			inset -2px -2px #dfdfdf,
 			inset 2px 2px #0a0a0a;
 		box-sizing: border-box;
-		padding: 3px 4px;
-		overflow: auto;
+		padding: 0;
+		overflow: hidden;
+	}
+
+	.explorer-toolbar {
+		position: sticky;
+		top: 0;
+		z-index: 1;
+		display: flex;
+		align-items: center;
+		gap: 6px;
+		padding: 10px 10px;
+		background: #d4d0c8;
+		border-bottom: 1px solid #808080;
+		box-shadow: inset 0 1px #fff;
+	}
+
+	.explorer-path {
+		display: block;
+		flex: 1;
+		padding: 8px 12px;
+		font-size: 14px;
+		background: #fff;
+		box-shadow:
+			inset -1px -1px #fff,
+			inset 1px 1px grey,
+			inset -2px -2px #dfdfdf,
+			inset 2px 2px #0a0a0a;
+		white-space: nowrap;
+		overflow: hidden;
+		text-overflow: ellipsis;
+		min-height: 30px;
+	}
+
+	/* File area: add a little inner margin like Explorer */
+	.explorer-files {
+		padding: 6px;
 	}
 
 
@@ -75,27 +114,49 @@ let projects = Astro.props.projects;
 
 	.project {
 		user-select: none;
+		box-sizing: border-box;
+		width: 100%;
+		max-width: 100%;
+		padding: 4px 6px;
+		gap: 8px;
+		border: 1px solid transparent;
+	}
 
-		flex: 0 0 110px; /* Flex-grow | Flex-shrink | Flex-basis */
+	.project h3 {
+		min-width: 0;
+		flex: 1;
+	}
 
-		height: 150px;
+	.project:focus {
+		outline: 1px dotted #000;
+		outline-offset: -3px;
+		border-color: #000;
+		background: #000080;
+		color: #fff;
+	}
 
+	#projects-container {
 		display: flex;
+		flex-direction: column;
+		gap: 0;
+		padding: 0;
+		width: 100%;
+		max-width: 100%;
+		box-sizing: border-box;
 
-		align-items: center;
+		height: calc(100% - 64px);
+		overflow-y: auto;
+		overflow-x: hidden;
 	}
 
+	/* Ensure the scroll area never spills past the inner frame */
 	#projects-container {
-		display: flex; /* Use Flexbox */
-		flex-wrap: wrap; /* Allow items to wrap to the next line */
-		gap: 10px; /* Adds space between items */
-		justify-content: flex-start; /* Align items to the left */
-		align-items: flex-start; /* Align items to the top */
-		padding: 10px; /* Add some padding around the container */
-
-		height: 100%;
+		padding-right: 6px;
+		margin-right: 2px;
+	}
 
-		/*overflow: hidden; */
-		overflow: auto;
+	#projects-container .project:hover {
+		background: #e6e6e6;
+		border-color: #808080;
 	}
 </style>

src/components/projects/item.astro

@@ -22,8 +22,8 @@ const mergedLayout = {
     <div id={`${title}header`} class="title-bar">
         <div class="title-bar-text">{title}</div>
         <div class="title-bar-controls">
-            <button class="close" aria-label="Minimize"></button>
-            <button class="close" aria-label="Close"></button>
+            <button class="close" aria-label="Minimize" style="background-color: silver;"></button>
+            <button class="close" aria-label="Close" style="background-color: silver;"></button>
         </div>
     </div>
     <div class="window-body" style="height: 100%;">
@@ -50,6 +50,10 @@ const mergedLayout = {
   position: absolute;
 }
 
+.window.closed {
+  animation: destroyBox 0.15s;
+}
+
 @keyframes createBox {
   from {
     transform: scale(0);
@@ -59,14 +63,29 @@ const mergedLayout = {
   }
 }
 
+@keyframes destroyBox {
+  from {
+    transform: scale(1);
+  }
+  to {
+    transform: scale(0);
+  }
+}
+
 /* Mobile */
 @media (max-width: 510px) {
   .window {
     left: var(--mobileLeft);
     top: var(--mobileTop);
+    width: var(--mobileWidth);
     max-width: var(--mobileWidth);
+    height: var(--mobileHeight);
     max-height: var(--mobileHeight);
   }
+
+  .window-body {
+    overflow: auto;
+  }
 }
 
 /* Tablet */
@@ -74,9 +93,15 @@ const mergedLayout = {
   .window {
     left: var(--tabletLeft);
     top: var(--tabletTop);
+    width: var(--tabletWidth);
     max-width: var(--tabletWidth);
+    height: var(--tabletHeight);
     max-height: var(--tabletHeight);
   }
+
+  .window-body {
+    overflow: auto;
+  }
 }
 
 /* Desktop */
@@ -91,5 +116,9 @@ const mergedLayout = {
     height: var(--desktopHeight);
 
   }
+
+  .window-body {
+    overflow: auto;
+  }
 }
 </style>

src/components/searchwidget.astro

@@ -0,0 +1,28 @@
+---
+import Win98Window from "./win98window.astro";
+---
+
+<Win98Window
+  title="SimoSearch"
+  layout={{
+    mobile:  { left: '5%', top: '12%', width: '90%', height: '70vh' },
+    desktop: { left: '62%', top: '10%', width: '35%', height: 'auto' }
+  }}
+>
+  <iframe
+    title="search.simo.ng"
+    src="https://search.simo.ng/#embed"
+    loading="lazy"
+    referrerpolicy="no-referrer"
+    allowfullscreen
+  />
+</Win98Window>
+
+<style>
+  iframe {
+    display: block;
+    width: 100%;
+    height: 100%;
+    border: 0;
+  }
+</style>

src/components/win98window.astro

@@ -18,7 +18,7 @@ const mergedLayout = {
     id={title}
     class="window"
     data-redirectUrl="test"
-    style="display: none;"
+    style={title === 'SimoSearch' ? 'display: block;' : 'display: none;'}
 >
     <div id={`${title}header`} class="title-bar">
         <div class="title-bar-text">{title}</div>
@@ -72,35 +72,49 @@ const mergedLayout = {
   .window {
     left: var(--mobileLeft);
     top: var(--mobileTop);
+    width: var(--mobileWidth);
     max-width: var(--mobileWidth);
+    height: var(--mobileHeight);
     max-height: var(--mobileHeight);
   }
 
   .window-body {
-      height: var(--desktopHeight);
-      max-height: calc(var(--desktopHeight) - 45px);
+      height: var(--mobileHeight);
+      max-height: calc(var(--mobileHeight) - 45px);
+
+      overflow: auto;
   }
 }
 
 /* Desktop */
-@media (min-width: 511px) {
+  @media (min-width: 511px) {
   .window {
     left: var(--desktopLeft);
     top: var(--desktopTop);
 
-    /*width: var(--desktopWidth);*/
+    width: var(--desktopWidth);
     max-width: var(--desktopWidth);
 
-    /*height: calc(var(--desktopHeight));*/
-    max-height: calc(var(--desktopHeight));
+    height: var(--desktopHeight);
+    /* Allow windows to naturally size when height is 'auto'. */
+    max-height: var(--desktopHeight);
   }
 
   .window-body {
       height: var(--desktopHeight);
+      /* When height is 'auto', don't force a max-height calc. */
       max-height: calc(var(--desktopHeight) - 45px);
 
-      width: var(--desktopWitdth);
-      max-widtH: (var--desktopWidth);
+      /* Let the body size naturally; width:100% can combine with scrollbars/padding
+         and create a tiny horizontal overflow on some browsers. */
+      overflow: auto;
+  }
+
+  /* If the window height is 'auto', let the body size to content. */
+  .window[style*="--desktopHeight: auto"] .window-body {
+    height: auto;
+    max-height: none;
+    overflow: visible;
   }
 
 }

src/pages/index.astro

@@ -10,6 +10,7 @@ import Pgp from "../components/pgp.astro";
 import Projects from "../components/projects.astro";
 import Duolingo from "../components/duolingo.astro";
 import GitHubGraph from "../components/githubgraph.astro";
+import SearchWidget from "../components/searchwidget.astro";
 
 // Projects
 import Summize from "../components/projects/summize.astro";
@@ -253,6 +254,7 @@ apps = apps.map((item) => {
 		<Aboutme />
 		<Redirect />
 		<Contact />
+		<SearchWidget />
 		<Projects projects={projectsArr} />
 		<Summize />
 		<Notion />
@@ -355,15 +357,22 @@ apps = apps.map((item) => {
 				});
 			} else {
 				button.addEventListener("click", () => {
-				window.classList.add("closed")
+					window.classList.add("closed");
+					removeFromTaskbar(window.id);
 
-				setTimeout(() => {
-				        window.classList.remove("closed")
+					const onEnd = () => {
+						window.classList.remove("closed");
 						window.style.display = "none";
-				}, 100)
+					};
+					window.addEventListener('animationend', onEnd, { once: true });
 
-					// window.style.display = "none";
-					removeFromTaskbar(window.id);
+					// If no CSS animation runs, ensure the window still closes.
+					setTimeout(() => {
+						if (window.style.display !== 'none') {
+							window.classList.remove('closed');
+							window.style.display = 'none';
+						}
+					}, 250);
 				});
 			}
 		});
@@ -536,46 +545,14 @@ apps = apps.map((item) => {
 		}
 	}
 
-	// Function to show Duolingo with animation
-	function showDuolingo() {
-		const duolingoWindow = document.getElementById("duolingo");
-		duolingoWindow.style.display = "block";
-		duolingoWindow.classList.add("show");
-		raiseUpSpec("duolingo");
-
-		// Remove animation class after it completes
-		setTimeout(() => {
-			duolingoWindow.classList.remove("show");
-		}, 400);
-	}
-
-	// Function to show GitHub graph with animation
-	function showGitHubGraph() {
-		const githubWindow = document.getElementById("github-graph");
-		githubWindow.style.display = "block";
-		githubWindow.classList.add("show");
-		raiseUpSpec("github-graph");
-
-		// Remove animation class after it completes
-		setTimeout(() => {
-			githubWindow.classList.remove("show");
-		}, 400);
-	}
-
-	// Track start button clicks
-	let startButtonClicks = 0;
-	const startButton = document.getElementById("start-button");
+	// Start button: bring SimoSearch to front (and show it if closed).
+	const startButton = document.querySelector('button[aria-label="startButton"]');
 	if (startButton) {
-		startButton.addEventListener("click", () => {
-			startButtonClicks++;
-			if (startButtonClicks === 1) {
-			showGitHubGraph();
-
-			} else if (startButtonClicks === 2) {
-				showDuolingo();
-			}
+		startButton.addEventListener('click', () => {
+			const w = document.getElementById('SimoSearch');
+			if (!w) return;
+			w.style.display = 'block';
+			raiseUpSpec('SimoSearch');
 		});
 	}
-
-	// Don't auto-show Duolingo anymore - wait for start button click
 </script>

src/styles/global.css

@@ -8,6 +8,46 @@
 	}
 }
 
+/* Prevent form controls from overflowing their Win98 windows. */
+textarea,
+input,
+select {
+	max-width: 100%;
+	box-sizing: border-box;
+}
+
+/* Window content should never visually spill out of the frame. */
+.window,
+.window-body {
+	overflow: hidden;
+	/* Ensure padding is included in the element's width so it can't overflow the frame. */
+	box-sizing: border-box;
+}
+
+/* But allow scrolling within the body when needed. */
+.window-body {
+	overflow: auto;
+	/* Avoid width:100% + scrollbar/padding causing horizontal spill. */
+	max-width: 100%;
+	overflow-x: hidden;
+}
+
+/* 98.css textarea sizing can overflow when width is auto; force it to fit. */
+.window-body textarea,
+.window-body input,
+.window-body select {
+	display: block;
+	/* Fill the available content box; padding/border stay inside via border-box. */
+	width: 100%;
+	max-width: 100%;
+	box-sizing: border-box;
+}
+
+/* In some windows the textarea is wrapped; ensure wrapper doesn't overflow. */
+.window-body .field-row-stacked {
+	max-width: 100%;
+}
+
 .fullscreen {
 	z-index: 9999 !important;
 	width: 100% !important;