balla

package.json

@@ -19,6 +19,8 @@
     "vite": "^5.0.11"
   },
   "devDependencies": {
+    "postcss": "^8.4.33",
+    "postcss-nesting": "^12.0.4",
     "prettier": "^3.0.3",
     "prettier-plugin-tailwindcss": "^0.5.4"
   }

pnpm-lock.yaml

@@ -1,9 +1,5 @@
 lockfileVersion: '6.0'
 
-settings:
-  autoInstallPeers: true
-  excludeLinksFromLockfile: false
-
 dependencies:
   '@astrojs/svelte':
     specifier: ^4.0.0
@@ -28,6 +24,12 @@ dependencies:
     version: 5.0.11
 
 devDependencies:
+  postcss:
+    specifier: ^8.4.33
+    version: 8.4.33
+  postcss-nesting:
+    specifier: ^12.0.4
+    version: 12.0.4(postcss@8.4.33)
   prettier:
     specifier: ^3.0.3
     version: 3.2.2
@@ -363,6 +365,15 @@ packages:
       to-fast-properties: 2.0.0
     dev: false
 
+  /@csstools/selector-specificity@3.0.2(postcss-selector-parser@6.0.15):
+    resolution: {integrity: sha512-RpHaZ1h9LE7aALeQXmXrJkRG84ZxIsctEN2biEUmFyKpzFM3zZ35eUMcIzZFsw/2olQE6v69+esEqU2f1MKycg==}
+    engines: {node: ^14 || ^16 || >=18}
+    peerDependencies:
+      postcss-selector-parser: ^6.0.13
+    dependencies:
+      postcss-selector-parser: 6.0.15
+    dev: true
+
   /@esbuild/aix-ppc64@0.19.11:
     resolution: {integrity: sha512-FnzU0LyE3ySQk7UntJO4+qIiQgI7KoODnZg5xzXIrFJlKd2P2gwHsHY4927xj9y5PJmJSzULiUCWmv7iWnNa7g==}
     engines: {node: '>=12'}
@@ -1522,7 +1533,6 @@ packages:
     resolution: {integrity: sha512-/Tb/JcjK111nNScGob5MNtsntNM1aCNUDipB/TkwZFhyDrrE47SOx/18wF2bbjgc3ZzCSKW1T5nt5EbFoAz/Vg==}
     engines: {node: '>=4'}
     hasBin: true
-    dev: false
 
   /debug@2.6.9:
     resolution: {integrity: sha512-bC7ElrdJaJnPbAP+1EotYvqZsb3ecl5wi6Bfi6BJTUcNowp6cvspg0jXznRTKDjm/E7AdgFBVeAPVMNcKGsHMA==}
@@ -2924,7 +2934,6 @@ packages:
     resolution: {integrity: sha512-eSRppjcPIatRIMC1U6UngP8XFcz8MQWGQdt1MTBQ7NaAmvXDfvNxbvWV3x2y6CdEUciCSsDHDQZbhYaB8QEo2g==}
     engines: {node: ^10 || ^12 || ^13.7 || ^14 || >=15.0.1}
     hasBin: true
-    dev: false
 
   /napi-build-utils@1.0.2:
     resolution: {integrity: sha512-ONmRUqK7zj7DWX0D9ADe03wbwOBZxNAfF20PlGfCWQcD3+/MakShIHrMqx9YwPTfxDdF1zLeL+RGZiR9kGMLdg==}
@@ -3155,7 +3164,6 @@ packages:
 
   /picocolors@1.0.0:
     resolution: {integrity: sha512-1fygroTLlHu66zi26VoTDv8yRgm0Fccecssto+MhsZ0D/DGW2sm8E8AjW7NU5VVTRt5GxbeZ5qBuJr+HyLYkjQ==}
-    dev: false
 
   /picomatch@2.3.1:
     resolution: {integrity: sha512-JU3teHTNjmE2VCGFzuY8EXzCDVwEqB2a8fsIvwaStHhAWJEeVd1o1QD80CU6+ZdEXXSLbSsuLwJjkCBWqRQUVA==}
@@ -3233,13 +3241,23 @@ packages:
       postcss-selector-parser: 6.0.15
     dev: false
 
+  /postcss-nesting@12.0.4(postcss@8.4.33):
+    resolution: {integrity: sha512-WuCe0KnP4vKjLZK8VNoUWKL8ZLOv/5jiM94mHcI3VszLropHwmjotdUyP/ObzqZpXuQKP2Jf9R12vIHKFSStKw==}
+    engines: {node: ^14 || ^16 || >=18}
+    peerDependencies:
+      postcss: ^8.4
+    dependencies:
+      '@csstools/selector-specificity': 3.0.2(postcss-selector-parser@6.0.15)
+      postcss: 8.4.33
+      postcss-selector-parser: 6.0.15
+    dev: true
+
   /postcss-selector-parser@6.0.15:
     resolution: {integrity: sha512-rEYkQOMUCEMhsKbK66tbEU9QVIxbhN18YiniAwA7XQYTVBqrBy+P2p5JcdqsHgKM2zWylp8d7J6eszocfds5Sw==}
     engines: {node: '>=4'}
     dependencies:
       cssesc: 3.0.0
       util-deprecate: 1.0.2
-    dev: false
 
   /postcss-value-parser@4.2.0:
     resolution: {integrity: sha512-1NNCs6uurfkVbeXG4S8JFT9t19m45ICnif8zWLd5oPSZ50QnwMfK+H3jv408d4jw/7Bttv5axS5IiHoLaVNHeQ==}
@@ -3252,7 +3270,6 @@ packages:
       nanoid: 3.3.7
       picocolors: 1.0.0
       source-map-js: 1.0.2
-    dev: false
 
   /prebuild-install@7.1.1:
     resolution: {integrity: sha512-jAXscXWMcCK8GgCoHOfIr0ODh5ai8mj63L2nWrjuAgXE6tDyYGnx4/8o/rCgU+B4JSyZBKbeZqzhtwtC3ovxjw==}
@@ -3701,7 +3718,6 @@ packages:
   /source-map-js@1.0.2:
     resolution: {integrity: sha512-R0XvVJ9WusLiqTCEiGCmICCMplcCkIwwR11mOSD9CR5u+IXYdiseeEuXCVAjS54zqwkLcPNnmU4OeJ6tUrWhDw==}
     engines: {node: '>=0.10.0'}
-    dev: false
 
   /space-separated-tokens@2.0.2:
     resolution: {integrity: sha512-PEGlAwrG8yXGXRjW32fGbg66JAlOAwbObuqVoJpv/mRgoWDQfgH1wDPvtzWyUSNAXBGSk8h755YDbbcEy3SH2Q==}
@@ -4130,7 +4146,6 @@ packages:
 
   /util-deprecate@1.0.2:
     resolution: {integrity: sha512-EPD5q1uXyFxJpCrLnCc1nHnq3gOa6DZBocAIiI2TaSCA7VCJ1UJDMagCzIkXNsUYfD1daK//LTEQ8xiIbrHtcw==}
-    dev: false
 
   /uvu@0.5.6:
     resolution: {integrity: sha512-+g8ENReyr8YsOc6fv/NVJs2vFdHBnBNdfE49rshrTzDWOlUx4Gq7KOS2GD8eqhy2j+Ejq29+SbKH8yjkAqXqoA==}
@@ -4378,3 +4393,7 @@ packages:
   /zwitch@2.0.4:
     resolution: {integrity: sha512-bXE4cR/kVZhKZX/RjPEflHaKVhUVl85noU3v6b8apfQEc1x4A+zBxjZ4lN8LqGd6WZ3dl98pY4o717VFmoPp+A==}
     dev: false
+
+settings:
+  autoInstallPeers: true
+  excludeLinksFromLockfile: false

src/components/app.astro

@@ -1,34 +1,41 @@
 ---
 let app = Astro.props.item;
 
-
-
-let itemName = app.name.replace(" ", "")
-
+let itemName = app.name.replace(" ", "");
 ---
 
 <a id={itemName} data-id={app.name} href={app.link}>
-  <div class="h-100 m-4">
-    <img src={app.logo} class="w-auto h-16 mx-auto my-2" />
-    <h3 class="font-sans text-white text-center">{app.name}</h3>
-  </div>
+	<div class="h-100 m-4">
+		<img src={app.logo} class="w-auto h-16 mx-auto my-2" />
+		<h3 class="font-sans text-white text-center">{app.name}</h3>
+	</div>
 </a>
 
-
 <style>
-  h3 {
-    font-weight: 300;
-    font-family: Arial, sans-serif;
-  }
-
-  a {
-    cursor: pointer;
-  }
-
-  .link {
-    width: 100%;
-    height: 100%;
-
-    z-index: 1;
-  }
+	@font-face {
+		font-family: "Pixelated MS Sans Serif";
+		src: url(https://unpkg.com/98.css@0.1.16/dist/ms_sans_serif.woff)
+			format("woff");
+		src: url(https://unpkg.com/98.css@0.1.16/dist/ms_sans_serif.woff2)
+			format("woff2");
+		font-weight: 400;
+		font-style: normal;
+	}
+	h3 {
+		font-weight: 300;
+		/* font-family: Arial, sans-serif; */
+		font-family: "Pixelated MS Sans Serif", Arial;
+	}
+
+	a {
+		cursor: pointer;
+		user-select: none;
+	}
+
+	.link {
+		width: 100%;
+		height: 100%;
+
+		z-index: 1;
+	}
 </style>

src/components/contact.astro

@@ -19,28 +19,26 @@
           style="font-size: 25px; resize: none; padding: 10px;"
           >Email : simon@simo.ng
 Discord : s1monlol
-        </textarea>
+</textarea>
 		</div>
 	</div>
 </div>
 
 <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) {
+	/* Default style for mobile and smaller devices */
 	#contact {
-    width: 60%;
-  }
-}
+		width: 30%;
+	}
 
+	/* 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/projects.astro

@@ -20,15 +20,25 @@ console.log(projects);
 	</div>
 	<div class="window-body" style="height: 85%;">
 		<div id="inner">
-			<div class="h-80 flex items-start">
+			<div
+				id="projects-container"
+				style="display: flex; flex-wrap: wrap; justify-content: flex-start; align-items: flex-start; gap: 10px;"
+			>
 				{
 					projects.map((item) => (
-						<a class="project" id={`${item.id}item`}>
-							<div class="h-100 m-4">
-								<img src={scriptIcon.src} class="w-auto h-16 mx-auto my-2" />
-								<h3 class="font-sans text-lg text-center">{item.title}</h3>
-							</div>
-						</a>
+						<div
+							class="project"
+							id={`${item.id}item`}
+							style="display: flex; flex-direction: column; align-items: left; margin: 1px; width: 120px;"
+						>
+							<img src={scriptIcon.src} class="w-auto h-16" />
+							<h3
+								class="font-sans text-lg"
+								style="white-space: normal; overflow-wrap: break-word; text-align: center;"
+							>
+								{item.title}
+							</h3>
+						</div>
 					))
 				}
 			</div>
@@ -50,5 +60,30 @@ console.log(projects);
 			inset 2px 2px #0a0a0a;
 		box-sizing: border-box;
 		padding: 3px 4px;
+
+		overflow: auto;
+	}
+
+	.project {
+		user-select: none;
+
+		flex: 0 0 110px; /* Flex-grow | Flex-shrink | Flex-basis */
+
+		height: 150px;
+
+		display: flex;
+
+		align-items: center;
+	}
+
+	#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%;
 	}
 </style>

src/components/projects/notion.astro

@@ -0,0 +1,38 @@
+<div
+	id="notion"
+	class="window projectwindow"
+	style="width: 50%; position: absolute; left: 10%; top: 55%; display: none; max-height: 620px; min-width: 400px;"
+>
+	<div id="notionheader" class="title-bar">
+		<div class="title-bar-text">Notion Canvas</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%;">
+		<div class="field-row-stacked" style="height: 100%;">
+			<!-- prettier-ignore -->
+			<div
+        id="text20"
+        style="font-size: 25px; 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;"><i><u><b>Notion Canvas</b></u></i></h1></a>
+
+		<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>
+
+		<video id="vid" controls="true" src="/demo.mov" style="object-fit: fill; display: block;"></video>
+	</div>
+		</div>
+	</div>
+</div>
+
+<script>
+	// if document is phone size, hide video
+	if (window.innerWidth < 900) {
+		document.getElementById("vid").style.display = "none";
+	}
+</script>

src/components/projects/summize.astro

@@ -4,8 +4,8 @@ import summizeExample from "../../assets/summizeExample.png";
 
 <div
 	id="summize"
-	class="window"
-	style="width: 70%; height: 45%; position: absolute; left: 15%; top: 22%; display: none;"
+	class="window projectwindow"
+	style="width: 70%; height: 45%; position: absolute; left: 30%; top: 10%; display: none;"
 >
 	<div id="summizeheader" class="title-bar">
 		<div class="title-bar-text">Summize</div>
@@ -14,14 +14,14 @@ import summizeExample from "../../assets/summizeExample.png";
 			<button class="close" aria-label="Close"></button>
 		</div>
 	</div>
-	<div class="window-body">
-		<div class="field-row-stacked">
+	<div class="window-body" style="height: 100%;">
+		<div class="field-row-stacked" style="height: 100%;">
 			<!-- prettier-ignore -->
 			<div
         id="text20"
-        style="font-size: 25px; resize: none; padding: 10px; height: 37vh;"
+        style="font-size: 25px; resize: none; padding: 10px; height:90%; overflow-y: auto; padding-top: 0px;" 
         >
-		<a href="https://github.com/S1monlol/summize"><h1><i><u><b>Summize - A Youtube Video Summarizer</b></u></i></h1></a>
+		<a href="https://github.com/S1monlol/summize"><h1 style="width: fit-content;"><i><u><b>Summize - A Youtube Video Summarizer</b></u></i></h1></a>
 		<img src={summizeExample.src}>
 		<h2>
 			Summize is a browser extension that summarizes YouTube videos using OpenAI's GPT-3.5 language model. 

src/components/redirect.astro

@@ -1,50 +1,48 @@
 <div
-  id="redirect"
-  class="window"
-  style="position: absolute; left: 15%; top: 22%; display: none;"
-  data-redirectUrl="test"
+	id="redirect"
+	class="window"
+	style="position: absolute; left: 12%; top: 22%; display: none;"
+	data-redirectUrl="test"
 >
-  <div id="redirectheader" class="title-bar">
-    <div class="title-bar-text">Redirect</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">
-    <!-- prettier-ignore -->
-    <h2>You are about to be redirected to</h2>
-    <section class="field-row" style="justify-content: flex-end">
-      <button id="okButton">OK</button>
-      <button
-        class="close">Cancel</button
-      >
-    </section>
-  </div>
+	<div id="redirectheader" class="title-bar">
+		<div class="title-bar-text">Redirect</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">
+		<!-- prettier-ignore -->
+		<h2>You are about to be redirected to</h2>
+		<section class="field-row" style="justify-content: flex-end">
+			<button id="okButton">OK</button>
+			<button class="close">Cancel</button>
+		</section>
+	</div>
 </div>
 
 <style>
-  #redirect {
-  width: 30%;
-}
-
-/* Style for tablets, desktops, and larger devices */
-@media (max-width: 540px) {
-	#redirect {
-    width: 80%;
-  }
-}
-@media (max-width: 1080px) and (min-width: 540px) {
 	#redirect {
-    width: 60%;
-  }
-}
-  button {
-    margin-top: 0;
-  }
+		width: 30%;
+	}
+
+	/* Style for tablets, desktops, and larger devices */
+	@media (max-width: 540px) {
+		#redirect {
+			width: 80%;
+		}
+	}
+	@media (max-width: 1080px) and (min-width: 540px) {
+		#redirect {
+			width: 60%;
+		}
+	}
+	button {
+		margin-top: 0;
+	}
 
-  h2 {
-    margin-bottom: 10px;
-    font-size: 20px;
-  }
+	h2 {
+		margin-bottom: 10px;
+		font-size: 20px;
+	}
 </style>

src/components/taskbar.astro

@@ -3,7 +3,7 @@
 ---
 
 <div
-  class="bg-gray-300 h-14 w-full absolute bottom-0 flex px-4 py-2 z-50 justify-between shadow-[0_-2px_#fffdfc,0_-4px_#cce9eb]"
+  class="bg-gray-300 h-14 w-full absolute bottom-0 flex px-4 py-2 justify-between shadow-[0_-2px_#fffdfc,0_-4px_#cce9eb] z-0"
 >
   <button >
     <!-- <img class="h-full w-full" src={start.src} alt="start" /> -->

src/layouts/Layout.astro

@@ -1,6 +1,6 @@
 ---
 interface Props {
-  title: string;
+	title: string;
 }
 
 const { title } = Astro.props;
@@ -8,27 +8,30 @@ const { title } = Astro.props;
 
 <!doctype html>
 <html lang="en">
-  <head>
-    <meta charset="UTF-8" />
-    <meta name="description" content="Astro description" />
-    <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1">    <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
-    <link rel="stylesheet" href="https://unpkg.com/98.css" />
-    <meta name="generator" content={Astro.generator} />
-    <title>{title}</title>
-  </head>
-  <body>
-    <slot />
-  </body>
-
+	<head>
+		<meta charset="UTF-8" />
+		<meta name="description" content="Astro description" />
+		<meta name="viewport" content="width=device-width, initial-scale=1" />
+		<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
+		<link rel="stylesheet" href="https://unpkg.com/98.css" />
+		<meta name="generator" content={Astro.generator} />
+		<title>{title}</title>
+	</head>
+	<body>
+		<slot />
+	</body>
 </html>
 <style is:global>
-  body {
-    background-color: #008080;
-    max-width: 100%;
-    max-height: 100%;
-    overflow-x: hidden;
-    overflow-y: hidden;
-    /* position:relative */
-  }
+	body {
+		background-color: #008080;
+		max-width: 100vw;
+		max-height: 100vh;
+		overflow-x: hidden !important;
+		overflow-y: hidden;
+		/* position:relative */
+	}
 
+	.title-bar {
+		user-select: none;
+	}
 </style>

src/pages/index.astro

@@ -10,6 +10,7 @@ import Projects from "../components/projects.astro";
 
 // Projects
 import Summize from "../components/projects/summize.astro";
+import Notion from "../components/projects/notion.astro";
 
 import "../styles/global.css";
 
@@ -117,7 +118,7 @@ function updateRedirectMessage() {
 	// open redirect url
 	buttonElement.setAttribute(
 		"onclick",
-		`window.location.href = "${redirectUrl}"`,
+		`window.location.href = "${redirectUrl}"`
 	);
 }
 
@@ -146,6 +147,10 @@ let apps: app[] = [
 	{
 		name: "Projects",
 		logo: projects.src,
+		onclick: () => {
+			raiseUpSpec("projects");
+			document.getElementById("projects").style.display = "block";
+		},
 		row: 1,
 	},
 	{
@@ -182,6 +187,14 @@ let projectsArr: project[] = [
 		title: "Summize",
 		id: "summize",
 	},
+	{
+		title: "Notion Canvas",
+		id: "notion",
+	},
+	{
+		title: "PGPCord",
+		id: "pgpcord",
+	},
 ];
 
 const row1Items = apps.filter((item) => item.row === 1);
@@ -191,6 +204,7 @@ let clientFunctions: Function[] | String[] = [
 	raiseUpSpec,
 	updateRedirectMessage,
 	dragElement,
+	updateRedirectMessage,
 ];
 
 clientFunctions = clientFunctions.map((item) => String(item));
@@ -223,6 +237,7 @@ apps = apps.map((item) => {
 
 <!-- Projects -->
 <Summize />
+<Notion />
 
 <script define:vars={{ apps, projectsArr, clientFunctions }}>
 	for (func in clientFunctions) {
@@ -235,6 +250,21 @@ apps = apps.map((item) => {
 		let id = projectsArr.find((i) => i.id + "item" == project.id).id;
 
 		console.log(id);
+
+		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";
+
+					updateRedirectMessage();
+				}, 1);
+			};
+
+			return;
+		}
 		project.onclick = () => {
 			setTimeout(() => {
 				document.getElementById(id).style.display = "block";
@@ -251,6 +281,24 @@ apps = apps.map((item) => {
 			raiseUpSpec(window.id);
 		});
 
+		Array.from(document.querySelectorAll(".projectwindow a")).forEach(
+			(link) => {
+				link.addEventListener("click", (e) => {
+					document.getElementById("redirect").style.display = "block";
+					document.getElementById("redirect").dataset.redirecturl = link.href;
+					updateRedirectMessage();
+
+					e.preventDefault();
+
+					setTimeout(() => {
+						raiseUpSpec("redirect");
+					}, 1);
+
+					return false;
+				});
+			}
+		);
+
 		Array.from(window.getElementsByClassName("close")).forEach((button) => {
 			button.addEventListener("click", () => {
 				window.style.display = "none";