bettererer

src/components/contact.astro

@@ -1,55 +1,35 @@
-<div
-	id="contact"
-	class="window"
-	style="position: absolute; left: 15%; top: 22%; display: none;"
+---
+import Win98Window from "./win98window.astro";
+---
+
+<Win98Window
+  title="Contact"
+  layout={{
+    mobile:  { left: '5%', top: '50%', width: '90%', height: 'auto' },
+    desktop: { left: '15%', top: '22%', width: '30%', height: 'auto' }
+  }}
 >
-	<div id="contactheader" class="title-bar">
-		<div class="title-bar-text">Contact</div>
-		<div class="title-bar-controls">
-			<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">
-		<div class="field-row-stacked">
-			<!-- prettier-ignore -->
-			<textarea
-          readonly
-          id="text203"
-          style="font-size: 22px; resize: none; padding: 10px;"
-          >Email : simon@simo.ng
+  <div class="field-row-stacked">
+    <!-- prettier-ignore -->
+    <textarea
+      readonly
+      id="text203"
+      style="font-size: 22px; resize: none; padding: 10px;"
+    >Email : simon@simo.ng
 Discord : s1monlol</textarea>
-		</div>
-	</div>
-</div>
+  </div>
+</Win98Window>
 
 <style>
-	/* Default style for mobile and smaller devices */
-	#contact {
-		width: 30%;
-
-		animation: createBox 0.2s;
-	}
-
- @keyframes createBox {
-    	from {
-    		transform: scale(0);
-    	}
-    	to {
-    		transform: scale(1);
-    	}
-    }
-
+  #text203 {
+    width: 100%;
+    box-sizing: border-box;
+    background-color: #fff;
+    border: 1px solid #ccc;
+    font-family: inherit;
+  }
 
-	/* 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%;
-		}
-	}
+  .field-row-stacked {
+    height: 100%;
+  }
 </style>

src/components/duolingo.astro

@@ -1,206 +1,151 @@
 ---
+import Win98Window from "./win98window.astro";
 import duolingoImg from "../assets/dualingo.png";
 ---
 
-<div id="duolingo" class="window duolingo-popup" style="display: none; position: fixed; top: 20px; right: 20px; width: 320px; z-index: 1000;">
-	<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>
-		</div>
-	</div>
-	<div class="window-body">
-		<div id="loading-message" style="text-align: center; padding: 20px;">
-			<p>⏳ Loading stats...</p>
-		</div>
-		<div id="duolingo-content" style="display: none;">
-			<div class="card">
-				<div class="card-body">
-					<div class="streak-display">
-						<div class="streak-info">
-							<div class="streak-number" id="streak-number">0</div>
-							<div class="streak-label">Day Streak</div>
-						</div>
-						<div class="mascot">
-							<img src={duolingoImg.src} alt="Duo" />
-						</div>
-					</div>
-				</div>
-			</div>
-		</div>
-		<div id="error-message" style="display: none; text-align: center; padding: 20px; color: #800000;">
-			<p>⚠ Failed to load stats</p>
-		</div>
-	</div>
-</div>
+<Win98Window
+  title="Duolingo Stats"
+  layout={{
+    mobile: { left: '2%', top: '5%', width: '96%', height: 'auto' },
+    desktop: { left: 'auto', top: 'auto', width: '320px', height: 'auto' }
+  }}
+>
+  <div id="loading-message" style="text-align: center; padding: 20px;">
+    <p>⏳ Loading stats...</p>
+  </div>
+  <div id="duolingo-content" style="display: none;">
+    <div class="card">
+      <div class="card-body">
+        <div class="streak-display">
+          <div class="streak-info">
+            <div class="streak-number" id="streak-number">0</div>
+            <div class="streak-label">Day Streak</div>
+          </div>
+          <div class="mascot">
+            <img src={duolingoImg.src} alt="Duo" />
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+  <div id="error-message" style="display: none; text-align: center; padding: 20px; color: #800000;">
+    <p>⚠ Failed to load stats</p>
+  </div>
+</Win98Window>
 
 <script>
-	const styleElement = document.createElement('style');
-	styleElement.textContent = `
-		#duolingo.window {
-			font-family: "Pixelated MS Sans Serif", Arial, sans-serif;
-			background-color: #c0c0c0;
-			border: 2px solid;
-			border-color: #ffffff #808080 #808080 #ffffff;
-			box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.5);
-		}
-
-		#duolingo .title-bar {
-			background: linear-gradient(90deg, #000080, #1084d0);
-			padding: 3px 5px;
-			display: flex;
-			justify-content: space-between;
-			align-items: center;
-			cursor: move;
-		}
-
-		#duolingo .title-bar-text {
-			color: white;
-			font-weight: bold;
-			font-size: 11px;
-		}
-
-		#duolingo .close {
-			width: 16px;
-			height: 14px;
-			background-color: #c0c0c0;
-			border: 1px solid;
-			border-color: #ffffff #000000 #000000 #ffffff;
-			cursor: pointer;
-			position: relative;
-			padding: 0;
-		}
-
-		#duolingo .close::before {
-			content: "×";
-			position: absolute;
-			top: -3px;
-			left: 3px;
-			font-size: 14px;
-			color: #000000;
-		}
-
-		#duolingo .close:active {
-			border-color: #000000 #ffffff #ffffff #000000;
-		}
-
-		#duolingo .window-body {
-			background-color: #c0c0c0;
-
-		}
-
-		#duolingo #loading-message p,
-		#duolingo #error-message p {
-			font-size: 11px;
-			margin: 0;
-		}
-
-		#duolingo .card {
-			background: linear-gradient(135deg, #2d2d2d 0%, #1a1a1a 100%);
-			border: 2px solid;
-			border-color: #808080 #ffffff #ffffff #808080;
-			border-radius: 0;
-		}
-
-		#duolingo .card-body {
-			padding: 15px;
-		}
-
-		#duolingo .streak-display {
-			display: flex;
-			align-items: center;
-			justify-content: space-around;
-			gap: 20px;
-		}
-
-		#duolingo .streak-info {
-			display: flex;
-			flex-direction: column;
-			align-items: center;
-			gap: 4px;
-			flex: 1;
-		}
-
-
-		#duolingo .streak-number {
-			font-size: 36px;
-			font-weight: bold;
-			color: #ff69b4;
-			line-height: 1;
-		}
-
-		#duolingo .streak-label {
-			font-size: 11px;
-			color: #ffffff;
-			opacity: 0.9;
-			text-transform: uppercase;
-			letter-spacing: 1px;
-		}
-
-		#duolingo .mascot {
-			position: relative;
-			width: 70px;
-			height: 70px;
-			flex-shrink: 0;
-			transform: scale(1.3);
-		}
-
-		#duolingo .mascot img {
-			width: 100%;
-			height: 100%;
-			object-fit: contain;
-			image-rendering: pixelated;
-			image-rendering: -moz-crisp-edges;
-			image-rendering: crisp-edges;
-		}
-	`;
-	document.head.appendChild(styleElement);
-
-	async function loadDuolingoStats() {
-		const username = 's1monlol';
-		const content = document.getElementById('duolingo-content');
-		const loadingMsg = document.getElementById('loading-message');
-		const errorMsg = document.getElementById('error-message');
-
-		if (loadingMsg) loadingMsg.style.display = 'block';
-		if (content) content.style.display = 'none';
-		if (errorMsg) errorMsg.style.display = 'none';
-
-		try {
-			const response = await fetch(`https://www.duolingo.com/2017-06-30/users?username=${username}`);
-			const data = await response.json();
-			const user = data.users[0];
-
-			if (!user) throw new Error('User not found');
-
-			// Update streak
-			const streakEl = document.getElementById('streak-number');
-			if (streakEl) streakEl.textContent = user.streak.toLocaleString();
-
-			if (content) content.style.display = 'block';
-			if (loadingMsg) loadingMsg.style.display = 'none';
-
-		} catch (error) {
-			console.error('Error loading Duolingo stats:', error);
-			if (errorMsg) errorMsg.style.display = 'block';
-			if (loadingMsg) loadingMsg.style.display = 'none';
-		}
-	}
-
-	const observer = new MutationObserver((mutations) => {
-		mutations.forEach((mutation) => {
-			// @ts-ignore
-			if (mutation.target.style.display === 'block') {
-				loadDuolingoStats();
-				observer.disconnect();
-				return;
-			}
-		});
-	});
-
-	const duolingoWindow = document.getElementById('duolingo');
-	if (duolingoWindow) {
-		observer.observe(duolingoWindow, { attributes: true, attributeFilter: ['style'] });
-	}
+  const styleElement = document.createElement('style');
+  styleElement.textContent = `
+    #Duolingo\ Stats .card {
+      background: linear-gradient(135deg, #2d2d2d 0%, #1a1a1a 100%);
+      border: 2px solid;
+      border-color: #808080 #ffffff #ffffff #808080;
+      border-radius: 0;
+    }
+
+    #Duolingo\ Stats .card-body {
+      padding: 15px;
+    }
+
+    #Duolingo\ Stats .streak-display {
+      display: flex;
+      align-items: center;
+      justify-content: space-around;
+      gap: 20px;
+    }
+
+    #Duolingo\ Stats .streak-info {
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      gap: 4px;
+      flex: 1;
+    }
+
+    #Duolingo\ Stats .streak-number {
+      font-size: 36px;
+      font-weight: bold;
+      color: #ff69b4;
+      line-height: 1;
+    }
+
+    #Duolingo\ Stats .streak-label {
+      font-size: 11px;
+      color: #ffffff;
+      opacity: 0.9;
+      text-transform: uppercase;
+      letter-spacing: 1px;
+    }
+
+    #Duolingo\ Stats .mascot {
+      position: relative;
+      width: 70px;
+      height: 70px;
+      flex-shrink: 0;
+      transform: scale(1.3);
+    }
+
+    #Duolingo\ Stats .mascot img {
+      width: 100%;
+      height: 100%;
+      object-fit: contain;
+      image-rendering: pixelated;
+      image-rendering: -moz-crisp-edges;
+      image-rendering: crisp-edges;
+    }
+
+    #Duolingo\ Stats #loading-message p,
+    #Duolingo\ Stats #error-message p {
+      font-size: 11px;
+      margin: 0;
+    }
+  `;
+  document.head.appendChild(styleElement);
+
+  async function loadDuolingoStats() {
+    const username = 's1monlol';
+    const content = document.getElementById('duolingo-content');
+    const loadingMsg = document.getElementById('loading-message');
+    const errorMsg = document.getElementById('error-message');
+
+    if (loadingMsg) loadingMsg.style.display = 'block';
+    if (content) content.style.display = 'none';
+    if (errorMsg) errorMsg.style.display = 'none';
+
+    try {
+      const response = await fetch(`https://www.duolingo.com/2017-06-30/users?username=${username}`);
+      const data = await response.json();
+      const user = data.users[0];
+
+      if (!user) throw new Error('User not found');
+
+      // Update streak
+      const streakEl = document.getElementById('streak-number');
+      if (streakEl) streakEl.textContent = user.streak.toLocaleString();
+
+      if (content) content.style.display = 'block';
+      if (loadingMsg) loadingMsg.style.display = 'none';
+
+    } catch (error) {
+      console.error('Error loading Duolingo stats:', error);
+      if (errorMsg) errorMsg.style.display = 'block';
+      if (loadingMsg) loadingMsg.style.display = 'none';
+    }
+  }
+
+  const observer = new MutationObserver((mutations) => {
+    mutations.forEach((mutation) => {
+      // @ts-ignore
+      if (mutation.target.style.display === 'block') {
+        loadDuolingoStats();
+        observer.disconnect();
+        return;
+      }
+    });
+  });
+
+  const duolingoWindow = document.getElementById('Duolingo Stats');
+  if (duolingoWindow) {
+    observer.observe(duolingoWindow, { attributes: true, attributeFilter: ['style'] });
+  }
 </script>

src/components/githubgraph.astro

@@ -1,74 +1,19 @@
 ---
+import Win98Window from "./win98window.astro";
 ---
 
-<div id="github-graph" class="window duolingo-popup" style="display: none; position: fixed; top: 60px; left: 60px; z-index: 1000;">
-	<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>
-		</div>
-	</div>
-	<div class="window-body" style="padding: 10px;">
-		<iframe
-			src="https://github-readme-stats.vercel.app/api/top-langs/?username=S1monlol&theme=github_dark"
-			style="width: 100%; height: 300px; border: none; image-rendering: pixelated; image-rendering: -moz-crisp-edges; image-rendering: crisp-edges;"
-			frameborder="0"
-		></iframe>
-	</div>
-</div>
-
-
-
-<style>
-	#github-graph.window {
-		font-family: "Pixelated MS Sans Serif", Arial, sans-serif;
-		background-color: #c0c0c0;
-		border: 2px solid;
-		border-color: #ffffff #808080 #808080 #ffffff;
-		box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.5);
-	}
-
-	#github-graph .title-bar {
-		background: linear-gradient(90deg, #000080, #1084d0);
-		padding: 3px 5px;
-		display: flex;
-		justify-content: space-between;
-		align-items: center;
-		cursor: move;
-	}
-
-	#github-graph .title-bar-text {
-		color: white;
-		font-weight: bold;
-		font-size: 11px;
-	}
-
-	#github-graph .close {
-		width: 16px;
-		height: 14px;
-		background-color: #c0c0c0;
-		border: 1px solid;
-		border-color: #ffffff #000000 #000000 #ffffff;
-		cursor: pointer;
-		position: relative;
-		padding: 0;
-	}
-
-	#github-graph .close::before {
-		content: "×";
-		position: absolute;
-		top: -3px;
-		left: 3px;
-		font-size: 14px;
-		color: #000000;
-	}
-
-	#github-graph .close:active {
-		border-color: #000000 #ffffff #ffffff #000000;
-	}
-
-	#github-graph .window-body {
-		background-color: #c0c0c0;
-	}
-</style>
+<Win98Window
+  title="Top Languages"
+  layout={{
+    mobile:  { left: '2%', top: '5%', width: '96%', height: 'auto' },
+    desktop: { left: "60px", top: "60px", width: "400px", height: '350px' }
+  }}
+>
+  <div style="padding: 10px;">
+    <iframe
+      src="https://github-readme-stats.vercel.app/api/top-langs/?username=S1monlol&theme=github_dark"
+      style="width: 100%; height: 300px; border: none; image-rendering: pixelated; image-rendering: -moz-crisp-edges; image-rendering: crisp-edges;"
+      frameborder="0"
+    ></iframe>
+  </div>
+</Win98Window>

src/components/pgp.astro

@@ -1,23 +1,22 @@
-<div id="pgp" class="window" style="position: absolute; display: none;">
-	<div class="title-bar">
-		<div class="title-bar-text">
-			<a style="font-size: 15px;" href="https://pgp.simo.ng"
-				>https://pgp.simo.ng</a
-			>
-		</div>
-		<div class="title-bar-controls">
-			<button id="minimize" aria-label="Close" style="background-color: silver;"
-			></button>
-		</div>
-	</div>
-	<div class="window-body" style="height: 100%;">
-		<div class="field-row-stacked" style="height: 100%;">
-			<!-- prettier-ignore -->
-			<textarea
-          readonly
-          id="text204"
-          style="font-size: 22px; resize: none; padding: 10px; height: 92%"
-          >-----BEGIN PGP PUBLIC KEY BLOCK-----
+---
+import Win98Window from "./win98window.astro";
+---
+
+<div id="PGP Key" class="window pgp-fullscreen" style="display: none;">
+  <div id="PGP Keyheader" class="title-bar">
+    <div class="title-bar-text">PGP Key</div>
+    <div class="title-bar-controls">
+      <button class="close" aria-label="Close" style="background-color: silver;"></button>
+    </div>
+  </div>
+  <div class="window-body" style="height: 100%; overflow: hidden;">
+    <div class="field-row-stacked" style="height: 100%;">
+      <!-- prettier-ignore -->
+      <textarea
+        readonly
+        id="text204"
+        style="font-size: 12px; resize: none; padding: 10px; height: 100%; width: 100%; box-sizing: border-box; background-color: #fff; border: 1px solid #ccc; font-family: monospace;"
+      >-----BEGIN PGP PUBLIC KEY BLOCK-----
 
 mQGNBGWThaoBDADcX0fnmDhAGGiFSqi5Q9JElQnrqMg7JiLlkOj1Uy0tEU3RpHpu
 yOYEbOvguopLQS6kAW4C3x+De0dwmec1eFshb4meEFAgEuyKaGdOPtiJwCWDaAcE
@@ -58,37 +57,59 @@ VkQ6xUK3vi2XL/wqWGPc9NZSP0PsBJVgNjzBYkuco/YVTMtR9czq7gTbab35Tmh9
 NQ==
 =/BYv
 -----END PGP PUBLIC KEY BLOCK-----</textarea>
-		</div>
-	</div>
+    </div>
+  </div>
 </div>
 
-<script>
-	document.querySelector("#minimize").addEventListener("click", () => {
-		let window = document.getElementById("pgp");
+<style>
+  #PGP\ Key.pgp-fullscreen {
+    animation: createBox 0.15s;
+    position: fixed;
+    top: 0 !important;
+    left: 0 !important;
+    width: 100% !important;
+    height: 100% !important;
+    max-width: 100% !important;
+    max-height: 100% !important;
+    z-index: 9999;
+  }
 
-		window.classList.remove("fullscreen");
+  #PGP\ Key.pgp-fullscreen .window-body {
+    height: calc(100% - 24px) !important;
+    max-height: calc(100% - 24px) !important;
+  }
 
-		window.style.display = "none";
+  #PGP\ Key.pgp-fullscreen textarea {
+    resize: none !important;
+  }
 
-});
-</script>
+  .field-row-stacked {
+    height: 100%;
+  }
 
-<style>
-	/* Default style for mobile and smaller devices */
-	#pgp {
-		/* transition: all 0.4s linear; */
-		height: 100%;
-		width: 100%;
+  #text204 {
+    height: 100% !important;
+  }
 
-		animation: createBox 0.25s;
-	}
-
-	@keyframes createBox {
-		from {
-			transform: scale(0);
-		}
-		to {
-			transform: scale(1);
-		}
-	}
+  @keyframes createBox {
+    from {
+      transform: scale(0);
+    }
+    to {
+      transform: scale(1);
+    }
+  }
 </style>
+
+<script>
+  // Handle close button
+  const pgpWindow = document.getElementById('PGP Key');
+  if (pgpWindow) {
+    const closeButtons = pgpWindow.querySelectorAll('.title-bar-controls .close');
+    closeButtons.forEach(button => {
+      button.addEventListener('click', () => {
+        pgpWindow.style.display = 'none';
+      });
+    });
+  }
+</script>

src/components/projects/imdb.astro

@@ -1,6 +1,5 @@
 ---
 import Item from './item.astro';
-import summizeExample from "../../assets/summizeExample.png";
 ---
 
 <Item projectName="imdb" title="IMDB Frontend">

src/components/projects/item.astro

@@ -1,95 +1,19 @@
 ---
-const { title, projectName, layout = {} } = Astro.props;
+import Win98Window from '../win98window.astro';
 
-const defaultLayout = {
-  mobile:   { left: '2%', top: '5%', width: '96%', height: 'auto' },
-  tablet:   { left: '10%', top: '10%', width: '80%', height: 'auto' },
-  desktop:  { left: '10%', top: '10%', width: '60%', height: '70%' }
-};
-
-const mergedLayout = {
-  mobile:   { ...defaultLayout.mobile, ...(layout.mobile || {}) },
-  tablet:   { ...defaultLayout.tablet, ...(layout.tablet || {}) },
-  desktop:  { ...defaultLayout.desktop, ...(layout.desktop || {}) }
-};
+const { title, projectName, id, layout = {} } = Astro.props;
+const windowId = projectName || id;
 ---
 
-<div
-    id={title}
-    class=`window projectwindow ${projectName}`
-    style="display: none;"
+<Win98Window
+  title={title}
+  id={windowId}
+  layout
 >
-    <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>
-        </div>
-    </div>
-    <div class="window-body" style="height: 100%;">
-        <slot/>
-    </div>
-</div>
-
-<style define:vars={{
-  mobileLeft: mergedLayout.mobile.left,
-  mobileTop: mergedLayout.mobile.top,
-  mobileWidth: mergedLayout.mobile.width,
-  mobileHeight: mergedLayout.mobile.height,
-  tabletLeft: mergedLayout.tablet.left,
-  tabletTop: mergedLayout.tablet.top,
-  tabletWidth: mergedLayout.tablet.width,
-  tabletHeight: mergedLayout.tablet.height,
-  desktopLeft: mergedLayout.desktop.left,
-  desktopTop: mergedLayout.desktop.top,
-  desktopWidth: mergedLayout.desktop.width,
-  desktopHeight: mergedLayout.desktop.height
-}}>
-.window {
-  animation: createBox 0.2s;
-  position: absolute;
-}
-
-@keyframes createBox {
-  from {
-    transform: scale(0);
-  }
-  to {
-    transform: scale(1);
-  }
-}
-
-/* Mobile */
-@media (max-width: 510px) {
-  .window {
-    left: var(--mobileLeft);
-    top: var(--mobileTop);
-    max-width: var(--mobileWidth);
-    max-height: var(--mobileHeight);
-  }
-}
-
-/* Tablet */
-@media (min-width: 541px) and (max-width: 1080px) {
-  .window {
-    left: var(--tabletLeft);
-    top: var(--tabletTop);
-    max-width: var(--tabletWidth);
-    max-height: var(--tabletHeight);
-  }
-}
-
-/* Desktop */
-@media (min-width: 1081px) {
-  .window {
-    left: var(--desktopLeft);
-    top: var(--desktopTop);
-    max-width: var(--desktopWidth);
-    max-height: var(--desktopHeight);
-
-    width: var(--desktopWidth);
-    height: var(--desktopHeight);
-
-  }
-}
-</style>
+  <div
+    id={`${windowId}-content`}
+    style="font-size: 22px; resize: none; padding: 10px; height:100%; overflow-y: auto; padding-top: 0px;"
+  >
+    <slot/>
+  </div>
+</Win98Window>

src/components/projects/notion.astro

@@ -2,20 +2,22 @@
 import Item from './item.astro';
 ---
 
-<Item title="Notion Canvas" projectName="notion" layout={{
-  desktop: { width: '50%', height: 'auto' }
+<Item title="Notion Canvas" id="notion" layout={{
+  desktop: { width: '50%', height: '500px' }
 }}>
   <div
     id="text206"
-    style="font-size: 22px; resize: none; padding: 10px; height:90%; overflow-y: hidden; padding-top: 0px; padding-bottom: 20px;"
+    style="font-size: 22px; resize: none; padding: 10px; height: 100%; overflow-y: auto; padding-top: 0px; display: flex; flex-direction: column; gap: 10px;"
   >
-    <a href="https://github.com/S1monlol/notionCanvas"><h1 style="width: fit-content;"><i><u><b>Notion Canvas</b></u></i></h1></a>
+    <a href="https://github.com/S1monlol/notionCanvas"><h1 style="width: fit-content; margin: 0;"><i><u><b>Notion Canvas</b></u></i></h1></a>
 
-    <h2>
+    <h2 style="margin: 0; flex-shrink: 0;">
       This project allows for integration between a Canvas calendar and a Notion database. It makes it easy to import assignments into your notion assignment database
     </h2>
 
-    <video id="vid" controls="true" src="/demo.mov" style="object-fit: fill; display: block;"></video>
+    <div style="flex: 1; overflow: hidden; display: flex; align-items: center; justify-content: center;">
+      <video id="vid" controls="true" src="/demo.mov" style="max-width: 100%; max-height: 100%; object-fit: contain;"></video>
+    </div>
   </div>
 </Item>
 

src/components/projects/summize.astro

@@ -3,9 +3,7 @@ import Item from './item.astro';
 import summizeExample from "../../assets/summizeExample.png";
 ---
 
-<Item id="summize" title="Summize - A Youtube Video Summarizer" layout={{
-  desktop: { width: '70%', height: '45%' }
-}}>
+<Item id="summize" title="Summize - A Youtube Video Summarizer" >
   <div
     id="text207"
     style="font-size: 22px; resize: none; padding: 10px; height:90%; overflow-y: auto; padding-top: 0px;"

src/components/win98window.astro

@@ -1,5 +1,7 @@
 ---
-const { title, layout = {} } = Astro.props;
+const { title, layout = {}, id } = Astro.props;
+
+const windowId = id || title;
 
 const defaultLayout = {
   mobile:   { left: '2%', top: '5%', width: '96%', height: 'auto' },
@@ -15,12 +17,12 @@ const mergedLayout = {
 ---
 
 <div
-    id={title}
-    class="window"
+    id={windowId}
+    class={`window ${title.replace(/\s+/g, '-')} ${id ? id : ''}`}
     data-redirectUrl="test"
     style="display: none;"
 >
-    <div id={`${title}header`} class="title-bar">
+    <div id={`${windowId}header`} class="title-bar">
         <div class="title-bar-text">{title}</div>
         <div class="title-bar-controls">
             <button class="close" aria-label="Minimize" style="background-color: silver;"></button>
@@ -44,6 +46,8 @@ const mergedLayout = {
   desktopHeight: mergedLayout.desktop.height
 }}>
 
+
+
 .title-bar-text {
     font-size: 14px;
 }
@@ -53,6 +57,10 @@ const mergedLayout = {
   position: absolute;
 }
 
+.window-body {
+    overflow: auto;
+}
+
 
 .closed {
   animation: destroyBox 0.15s;
@@ -77,8 +85,9 @@ const mergedLayout = {
   }
 
   .window-body {
-      height: var(--desktopHeight);
-      max-height: calc(var(--desktopHeight) - 45px);
+      height: 100%;
+      /*max-height: calc(var(--desktopHeight) - 45px);*/
+
   }
 }
 
@@ -90,17 +99,18 @@ const mergedLayout = {
 
     /*width: var(--desktopWidth);*/
     max-width: var(--desktopWidth);
+    height: var(--desktopHeight);
 
-    /*height: calc(var(--desktopHeight));*/
-    max-height: calc(var(--desktopHeight));
   }
 
   .window-body {
-      height: var(--desktopHeight);
+      height: 100%;
       max-height: calc(var(--desktopHeight) - 45px);
 
       width: var(--desktopWitdth);
       max-widtH: (var--desktopWidth);
+
+
   }
 
 }

src/pages/index.astro

@@ -32,6 +32,11 @@ function dragElement(elmnt) {
 		pos3 = 0,
 		pos4 = 0;
 
+	// Skip dragging for fullscreen PGP window
+	if (elmnt.id === "PGP Key" || elmnt.classList.contains("pgp-fullscreen")) {
+		return;
+	}
+
 	if (document.getElementById(elmnt.id + "header")) {
 		// If present, the header is where you move the DIV from:
 		document.getElementById(elmnt.id + "header").onmousedown = dragMouseDown;
@@ -90,23 +95,25 @@ function dragElement(elmnt) {
 
 /** Raise up window with given ID */
 function raiseUpSpec(id: string) {
-	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;
 
 	for (let element in elArray) {
-		let zindex = parseInt(elArray[element].style.zIndex);
+		let zindexStr = elArray[element].style.zIndex;
+		let zindex = parseInt(zindexStr) || 0;
 		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 using ID
+	const windowEl = document.getElementById(id) as HTMLElement | null;
+	if (windowEl) {
+		windowEl.style.zIndex = (highestIndex + 1).toString();
+	}
 }
 
 function updateRedirectMessage() {
@@ -133,7 +140,8 @@ let apps: app[] = [
 		logo: me.src,
 		onclick: () => {
 			raiseUpSpec("About Me");
-			document.getElementById("About Me").style.display = "block";
+			const windowEl = document.getElementById("About Me") as HTMLElement | null;
+			if (windowEl) windowEl.style.display = "block";
 		},
 		row: 1,
 	},
@@ -142,9 +150,9 @@ let apps: app[] = [
 		logo: blog.src,
 		onclick: () => {
 			raiseUpSpec("Redirect");
-			document.getElementById("Redirect").style.display = "block";
-			document.getElementById("Redirect").dataset.redirecturl =
-				"https://blog.simo.ng/";
+			const windowEl = document.getElementById("Redirect") as HTMLElement | null;
+			if (windowEl) windowEl.style.display = "block";
+			if (windowEl) (windowEl as any).dataset.redirecturl = "https://blog.simo.ng/";
 			updateRedirectMessage();
 		},
 		row: 1,
@@ -154,7 +162,8 @@ let apps: app[] = [
 		logo: projects.src,
 		onclick: () => {
 			raiseUpSpec("Projects ");
-			document.getElementById("Projects ").style.display = "block";
+			const windowEl = document.getElementById("Projects ") as HTMLElement | null;
+			if (windowEl) windowEl.style.display = "block";
 		},
 		row: 1,
 	},
@@ -169,9 +178,9 @@ let apps: app[] = [
 		onclick: () => {
 			// ignore
 			raiseUpSpec("Redirect");
-			document.getElementById("Redirect").style.display = "block";
-			document.getElementById("Redirect").dataset.redirecturl =
-				"https://github.com/s1monlol/";
+			const windowEl = document.getElementById("Redirect") as HTMLElement | null;
+			if (windowEl) windowEl.style.display = "block";
+			if (windowEl) (windowEl as any).dataset.redirecturl = "https://github.com/s1monlol/";
 			updateRedirectMessage();
 		},
 		row: 2,
@@ -181,8 +190,9 @@ let apps: app[] = [
 		logo: contact.src,
 		row: 2,
 		onclick: () => {
-			raiseUpSpec("contact");
-			document.getElementById("contact").style.display = "block";
+			raiseUpSpec("Contact");
+			const windowEl = document.getElementById("Contact") as HTMLElement | null;
+			if (windowEl) windowEl.style.display = "block";
 		},
 	},
 	{
@@ -190,9 +200,12 @@ let apps: app[] = [
 		logo: pgp.src,
 		row: 2,
 		onclick: () => {
-			raiseUpSpec("pgp");
-			document.getElementById("pgp").classList.add("fullscreen");
-			document.getElementById("pgp").style.display = "block";
+			raiseUpSpec("PGP Key");
+			const windowEl = document.getElementById("PGP Key") as HTMLElement | null;
+			if (windowEl) {
+				windowEl.classList.add("fullscreen");
+				windowEl.style.display = "block";
+			}
 		},
 	},
 ];
@@ -306,11 +319,12 @@ apps = apps.map((item) => {
 		if (id == "pgpcord") {
 			project.onclick = () => {
 				setTimeout(() => {
-					raiseUpSpec("redirect");
-					document.getElementById("redirect").style.display = "block";
-					document.getElementById("redirect").dataset.redirecturl =
-						"https://blog.simo.ng/articles/WIP/pgpcord";
-
+					raiseUpSpec("Redirect");
+					const windowEl = document.getElementById("Redirect");
+					if (windowEl) {
+						windowEl.style.display = "block";
+						windowEl.dataset.redirecturl = "https://blog.simo.ng/articles/WIP/pgpcord";
+					}
 					updateRedirectMessage();
 				}, 1);
 			};
@@ -319,8 +333,11 @@ apps = apps.map((item) => {
 		}
 		project.onclick = () => {
 			setTimeout(() => {
-				document.getElementsByClassName(id)[0].style.display = "block";
-				raiseUpSpec(document.getElementsByClassName(id)[0].id);
+				const projectWindow = document.getElementById(id);
+				if (projectWindow) {
+					projectWindow.style.display = "block";
+					raiseUpSpec(projectWindow.id);
+				}
 			}, 1);
 		};
 	});
@@ -342,7 +359,7 @@ apps = apps.map((item) => {
 					e.preventDefault();
 
 					setTimeout(() => {
-						raiseUpSpec("redirect");
+						raiseUpSpec("Redirect");
 					}, 1);
 
 					return false;
@@ -538,30 +555,20 @@ 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");
+		const githubWindow = document.getElementById("Top Languages");
+		if (githubWindow) {
+			githubWindow.style.display = "block";
+			githubWindow.classList.add("show");
+			raiseUpSpec("Top Languages");
 
-		// Remove animation class after it completes
-		setTimeout(() => {
-			githubWindow.classList.remove("show");
-		}, 400);
+			// Remove animation class after it completes
+			setTimeout(() => {
+				githubWindow.classList.remove("show");
+			}, 400);
+		}
 	}
 
 	// Track start button clicks
@@ -573,8 +580,6 @@ apps = apps.map((item) => {
 			if (startButtonClicks === 1) {
 			showGitHubGraph();
 
-			} else if (startButtonClicks === 2) {
-				showDuolingo();
 			}
 		});
 	}