src/components/contact.astro

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

@@ -1,151 +1,206 @@
 ---
-import Win98Window from "./win98window.astro";
 import duolingoImg from "../assets/dualingo.png";
 ---
 
-<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>
+<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>
 
 <script>
-  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'] });
-  }
+	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'] });
+	}
 </script>

src/components/githubgraph.astro

@@ -1,19 +1,74 @@
 ---
-import Win98Window from "./win98window.astro";
 ---
 
-<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>
+<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>

src/components/pgp.astro

@@ -1,22 +1,23 @@
----
-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-----
+<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-----
 
 mQGNBGWThaoBDADcX0fnmDhAGGiFSqi5Q9JElQnrqMg7JiLlkOj1Uy0tEU3RpHpu
 yOYEbOvguopLQS6kAW4C3x+De0dwmec1eFshb4meEFAgEuyKaGdOPtiJwCWDaAcE
@@ -57,59 +58,37 @@ VkQ6xUK3vi2XL/wqWGPc9NZSP0PsBJVgNjzBYkuco/YVTMtR9czq7gTbab35Tmh9
 NQ==
 =/BYv
 -----END PGP PUBLIC KEY BLOCK-----</textarea>
-    </div>
-  </div>
+		</div>
+	</div>
 </div>
 
-<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;
-  }
+<script>
+	document.querySelector("#minimize").addEventListener("click", () => {
+		let window = document.getElementById("pgp");
 
-  #PGP\ Key.pgp-fullscreen .window-body {
-    height: calc(100% - 24px) !important;
-    max-height: calc(100% - 24px) !important;
-  }
+		window.classList.remove("fullscreen");
 
-  #PGP\ Key.pgp-fullscreen textarea {
-    resize: none !important;
-  }
+		window.style.display = "none";
 
-  .field-row-stacked {
-    height: 100%;
-  }
+});
+</script>
 
-  #text204 {
-    height: 100% !important;
-  }
+<style>
+	/* Default style for mobile and smaller devices */
+	#pgp {
+		/* transition: all 0.4s linear; */
+		height: 100%;
+		width: 100%;
 
-  @keyframes createBox {
-    from {
-      transform: scale(0);
-    }
-    to {
-      transform: scale(1);
-    }
-  }
-</style>
+		animation: createBox 0.25s;
+	}
 
-<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>
+	@keyframes createBox {
+		from {
+			transform: scale(0);
+		}
+		to {
+			transform: scale(1);
+		}
+	}
+</style>

src/components/projects/glance.astro

@@ -0,0 +1,19 @@
+---
+import Item from './item.astro';
+---
+
+<Item projectName="glance" title="Glance">
+  <div
+    id="text205"
+    style="font-size: 22px; resize: none; padding: 10px; height:90%; overflow-y: hidden; padding-top: 0px; padding-bottom: 20px;"
+  >
+    <a href="https://glance.simo.ng"><h1 style="width: fit-content;"><i><u><b>Glance</b></u></i></h1></a>
+
+    <h2>
+        A customizable dashboard optimized for E-Ink Displays
+    </h2>
+
+    <iframe src="https://glance.simo.ng/demo" width="600" height="400" frameborder="0" allowfullscreen="">
+    </iframe>
+  </div>
+</Item>

src/components/projects/item.astro

@@ -1,19 +1,95 @@
 ---
-import Win98Window from '../win98window.astro';
+const { title, projectName, layout = {} } = Astro.props;
 
-const { title, projectName, id, layout = {} } = Astro.props;
-const windowId = projectName || id;
+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 || {}) }
+};
 ---
 
-<Win98Window
-  title={title}
-  id={windowId}
-  layout
+<div
+    id={title}
+    class=`window projectwindow ${projectName}`
+    style="display: none;"
 >
-  <div
-    id={`${windowId}-content`}
-    style="font-size: 22px; resize: none; padding: 10px; height:100%; overflow-y: auto; padding-top: 0px;"
-  >
-    <slot/>
-  </div>
-</Win98Window>
+    <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>

src/components/projects/notion.astro

@@ -2,22 +2,20 @@
 import Item from './item.astro';
 ---
 
-<Item title="Notion Canvas" id="notion" layout={{
-  desktop: { width: '50%', height: '500px' }
+<Item title="Notion Canvas" projectName="notion" layout={{
+  desktop: { width: '50%', height: 'auto' }
 }}>
   <div
     id="text206"
-    style="font-size: 22px; resize: none; padding: 10px; height: 100%; overflow-y: auto; padding-top: 0px; display: flex; flex-direction: column; gap: 10px;"
+    style="font-size: 22px; resize: none; padding: 10px; height:90%; overflow-y: hidden; padding-top: 0px; padding-bottom: 20px;"
   >
-    <a href="https://github.com/S1monlol/notionCanvas"><h1 style="width: fit-content; margin: 0;"><i><u><b>Notion Canvas</b></u></i></h1></a>
+    <a href="https://github.com/S1monlol/notionCanvas"><h1 style="width: fit-content;"><i><u><b>Notion Canvas</b></u></i></h1></a>
 
-    <h2 style="margin: 0; flex-shrink: 0;">
+    <h2>
       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>
 
-    <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>
+    <video id="vid" controls="true" src="/demo.mov" style="object-fit: fill; display: block;"></video>
   </div>
 </Item>
 

src/components/projects/imdb.astro → src/components/projects/old/imdb.astro

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

src/components/projects/summize.astro

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

src/components/win98window.astro

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

src/pages/index.astro

@@ -14,7 +14,7 @@ import GitHubGraph from "../components/githubgraph.astro";
 // Projects
 import Summize from "../components/projects/summize.astro";
 import Notion from "../components/projects/notion.astro";
-import Imdb from "../components/projects/imdb.astro";
+// import Imdb from "../components/projects/imdb.astro";
 
 import "../styles/global.css";
 
@@ -25,6 +25,7 @@ import projects from "../assets/apps/projects.png";
 import blog from "../assets/apps/blog.png";
 import contact from "../assets/apps/contact.png";
 import pgp from "../assets/apps/pgp.png";
+import Glance from "../components/projects/glance.astro";
 
 function dragElement(elmnt) {
 	var pos1 = 0,
@@ -32,11 +33,6 @@ 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;
@@ -95,25 +91,23 @@ 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 zindexStr = elArray[element].style.zIndex;
-		let zindex = parseInt(zindexStr) || 0;
+		let zindex = parseInt(elArray[element].style.zIndex);
 		if (zindex > highestIndex) {
 			highestIndex = zindex;
 		}
 	}
 
-	// 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();
-	}
+	// set the highest z-index plus one
+	document.getElementById(id).style.zIndex = (highestIndex + 1).toString();
 }
 
 function updateRedirectMessage() {
@@ -140,30 +134,28 @@ let apps: app[] = [
 		logo: me.src,
 		onclick: () => {
 			raiseUpSpec("About Me");
-			const windowEl = document.getElementById("About Me") as HTMLElement | null;
-			if (windowEl) windowEl.style.display = "block";
-		},
-		row: 1,
-	},
-	{
-		name: "Blog",
-		logo: blog.src,
-		onclick: () => {
-			raiseUpSpec("Redirect");
-			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();
+			document.getElementById("About Me").style.display = "block";
 		},
 		row: 1,
 	},
+	// {
+	// 	name: "Blog",
+	// 	logo: blog.src,
+	// 	onclick: () => {
+	// 		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,
 		onclick: () => {
 			raiseUpSpec("Projects ");
-			const windowEl = document.getElementById("Projects ") as HTMLElement | null;
-			if (windowEl) windowEl.style.display = "block";
+			document.getElementById("Projects ").style.display = "block";
 		},
 		row: 1,
 	},
@@ -173,14 +165,14 @@ let apps: app[] = [
 	// 	row: 1,
 	// },
 	{
-		name: "Github",
+		name: "Git",
 		logo: github.src,
 		onclick: () => {
 			// ignore
 			raiseUpSpec("Redirect");
-			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/";
+			document.getElementById("Redirect").style.display = "block";
+			document.getElementById("Redirect").dataset.redirecturl =
+				"https://git.simo.ng/simo";
 			updateRedirectMessage();
 		},
 		row: 2,
@@ -190,27 +182,27 @@ let apps: app[] = [
 		logo: contact.src,
 		row: 2,
 		onclick: () => {
-			raiseUpSpec("Contact");
-			const windowEl = document.getElementById("Contact") as HTMLElement | null;
-			if (windowEl) windowEl.style.display = "block";
+			raiseUpSpec("contact");
+			document.getElementById("contact").style.display = "block";
 		},
 	},
 	{
 		name: "PGP Key",
 		logo: pgp.src,
-		row: 2,
+		row: 1,
 		onclick: () => {
-			raiseUpSpec("PGP Key");
-			const windowEl = document.getElementById("PGP Key") as HTMLElement | null;
-			if (windowEl) {
-				windowEl.classList.add("fullscreen");
-				windowEl.style.display = "block";
-			}
+			raiseUpSpec("pgp");
+			document.getElementById("pgp").classList.add("fullscreen");
+			document.getElementById("pgp").style.display = "block";
 		},
 	},
 ];
 
 let projectsArr: project[] = [
+ 	{
+		title: "Glance",
+		id: "glance",
+	},
 	{
 		title: "Summize",
 		id: "summize",
@@ -219,14 +211,6 @@ let projectsArr: project[] = [
 		title: "Notion2Canvas",
 		id: "notion",
 	},
-	{
-		title: "PGPCord",
-		id: "pgpcord",
-	},
-	{
-		title: "IMDB Frontend",
-		id: "imdb",
-	},
 ];
 
 const row1Items = apps.filter((item) => item.row === 1);
@@ -272,7 +256,7 @@ apps = apps.map((item) => {
 		<Projects projects={projectsArr} />
 		<Summize />
 		<Notion />
-		<Imdb />
+		<Glance />
 		<Duolingo />
 		<GitHubGraph />
 	</div>
@@ -319,12 +303,11 @@ apps = apps.map((item) => {
 		if (id == "pgpcord") {
 			project.onclick = () => {
 				setTimeout(() => {
-					raiseUpSpec("Redirect");
-					const windowEl = document.getElementById("Redirect");
-					if (windowEl) {
-						windowEl.style.display = "block";
-						windowEl.dataset.redirecturl = "https://blog.simo.ng/articles/WIP/pgpcord";
-					}
+					raiseUpSpec("redirect");
+					document.getElementById("redirect").style.display = "block";
+					document.getElementById("redirect").dataset.redirecturl =
+						"https://blog.simo.ng/articles/WIP/pgpcord";
+
 					updateRedirectMessage();
 				}, 1);
 			};
@@ -333,11 +316,9 @@ apps = apps.map((item) => {
 		}
 		project.onclick = () => {
 			setTimeout(() => {
-				const projectWindow = document.getElementById(id);
-				if (projectWindow) {
-					projectWindow.style.display = "block";
-					raiseUpSpec(projectWindow.id);
-				}
+			  console.log(id)
+				document.getElementsByClassName(id)[0].style.display = "block";
+				raiseUpSpec(document.getElementsByClassName(id)[0].id);
 			}, 1);
 		};
 	});
@@ -359,7 +340,7 @@ apps = apps.map((item) => {
 					e.preventDefault();
 
 					setTimeout(() => {
-						raiseUpSpec("Redirect");
+						raiseUpSpec("redirect");
 					}, 1);
 
 					return false;
@@ -555,20 +536,30 @@ 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("Top Languages");
-		if (githubWindow) {
-			githubWindow.style.display = "block";
-			githubWindow.classList.add("show");
-			raiseUpSpec("Top Languages");
+		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);
-		}
+		// Remove animation class after it completes
+		setTimeout(() => {
+			githubWindow.classList.remove("show");
+		}, 400);
 	}
 
 	// Track start button clicks
@@ -580,6 +571,8 @@ apps = apps.map((item) => {
 			if (startButtonClicks === 1) {
 			showGitHubGraph();
 
+			} else if (startButtonClicks === 2) {
+				showDuolingo();
 			}
 		});
 	}