started projects panel

astro.config.mjs

@@ -1,9 +1,9 @@
-import { defineConfig } from 'astro/config';
+import { defineConfig } from "astro/config";
 import svelte from "@astrojs/svelte";
 
 import tailwind from "@astrojs/tailwind";
 
 // https://astro.build/config
 export default defineConfig({
-  integrations: [svelte(), tailwind()]
-});
+	integrations: [svelte(), tailwind()],
+});

src/components/aboutme.astro

@@ -19,7 +19,7 @@
         style="font-size: 25px; resize: none; padding: 10px; height: 37vh;"
         >I'm Simon, a self taught programmer 
         
-My programming skills include proficiency in Javascript, Typescript, Html, CSS 
+My programming skills include proficiency in Javascript, Typescript, Html, and CSS 
 
 My Web Framework knowlage includes Sveltekit, React, Astro 
 

src/components/projects.astro

@@ -0,0 +1,52 @@
+---
+import scriptIcon from "../assets/script.png"
+
+let projects = Astro.props.projects;
+
+console.log(projects);
+---
+
+<div
+	class="window"
+	id="projects"
+	style="width: 70%; height: 45%; position: absolute; left: 15%; top: 22%;"
+>
+	<div id="projectsheader" class="title-bar">
+		<div class="title-bar-text">Projects</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: 85%;">
+		<div id="inner">
+			<div class="h-80 flex items-start">
+				{projects.map((item) => 
+				<a href={item.link}>
+  <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.name}</h3>
+  </div>
+</a>
+				)}
+			</div>
+		</div>
+	</div>
+</div>
+
+<style>
+	#inner {
+		height: 100%;
+
+		appearance: none;
+		background-color: #fff;
+		border-radius: 0;
+		box-shadow:
+			inset -1px -1px #fff,
+			inset 1px 1px grey,
+			inset -2px -2px #dfdfdf,
+			inset 2px 2px #0a0a0a;
+		box-sizing: border-box;
+		padding: 3px 4px;
+	}
+</style>

src/components/redirect.astro

@@ -1,7 +1,7 @@
 <div
   id="redirect"
   class="window"
-  style="width: 65%; position: absolute; left: 15%; top: 22%; display: none;"
+  style="position: absolute; left: 15%; top: 22%; display: none;"
   data-redirectUrl="test"
 >
   <div id="redirectheader" class="title-bar">
@@ -24,6 +24,21 @@
 </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;
   }

src/env.d.ts

@@ -7,3 +7,9 @@ interface app {
     row: number;
     onclick?: (() => void) | string;
 }
+
+interface project {
+    name: string;
+    link: string;
+    
+}

src/pages/index.astro

@@ -13,9 +13,11 @@ import pastwork from "../assets/apps/pastWork.png";
 import projects from "../assets/apps/projects.png";
 import blog from "../assets/apps/blog.png";
 import contact from "../assets/apps/contact.png";
+
 import Redirect from "../components/redirect.astro";
+import Contact from "../components/contact.astro"
+import Projects from "../components/projects.astro"
 
-import Contact from "../components/contact.astro";
 
 function dragElement(elmnt) {
 	var pos1 = 0,
@@ -108,7 +110,7 @@ function updateRedirectMessage() {
 	const messageElement = redirectElement.querySelector("h2");
 	messageElement.innerHTML = `You are about to be redirected to <a class="redirUrl" style="  cursor: pointer;
     color: blue;
-    text-decoration: underline; " href="${redirectUrl}"">${redirectUrl}</a>`;
+    text-decoration: underline; " href="${redirectUrl}"">${redirectUrl.replace("https://", "")}</a>`;
 
 	const buttonElement = redirectElement.querySelector("#okButton");
 	// open redirect url
@@ -132,7 +134,6 @@ let apps: app[] = [
 		name: "Blog",
 		logo: blog.src,
 		onclick: () => {
-			// ignore
 			raiseUpSpec("redirect");
 			document.getElementById("redirect").style.display = "block";
 			document.getElementById("redirect").dataset.redirecturl =
@@ -175,6 +176,14 @@ let apps: app[] = [
 	},
 ];
 
+let projectsArr: project[] = [
+ {
+	name: "Blog",
+	link: "https://blog.simo.ng"
+ }
+
+]
+
 const row1Items = apps.filter((item) => item.row === 1);
 const row2Items = apps.filter((item) => item.row === 2);
 
@@ -210,6 +219,8 @@ apps = apps.map((item) => {
 <Contact />
 <Taskbar />
 
+<Projects projects={projectsArr} />
+
 <script define:vars={{ apps, clientFunctions }}>
 	for (func in clientFunctions) {
 		eval(clientFunctions[func]);