Integrate J-Space UI into QCX Dashboard

app/layout.tsx

@@ -4,9 +4,9 @@ import './globals.css'
 import 'katex/dist/katex.min.css';
 import { cn } from '@/lib/utils'
 import { ThemeProvider } from '@/components/theme-provider'
-import Header from '@/components/header'
-import Footer from '@/components/footer'
-import { Sidebar } from '@/components/sidebar'
+// import Header from '@/components/header'
+// import Footer from '@/components/footer'
+// import { Sidebar } from '@/components/sidebar'
 import { Analytics } from "@vercel/analytics/next"
 import { SpeedInsights } from "@vercel/speed-insights/next"
 import { Toaster } from '@/components/ui/sonner'
@@ -109,11 +109,11 @@ export default function RootLayout({
                   >
                     <MapContextProvider>
                       <MapLoadingProvider>
-                        <Header />
+                        {/* <Header /> */}
                         <ConditionalLottie />
                         {children}
-                        <HistorySidebar />
-                        <Footer />
+                        {/* <HistorySidebar /> */}
+                        {/* <Footer /> */}
                         <Toaster />
                       </MapLoadingProvider>
                     </MapContextProvider>

app/page.tsx

@@ -1,18 +1,11 @@
-import { Chat } from '@/components/chat'
-import { nanoid } from '@/lib/utils'
-import { AI } from './actions'
+import { JSpaceUI } from '@/components/j-space-ui'
 
 export const maxDuration = 60
 
-import { MapDataProvider } from '@/components/map/map-data-context'
-
 export default function Page() {
-  const id = nanoid()
   return (
-    <AI initialAIState={{ chatId: id, messages: [] }}>
-      <MapDataProvider>
-        <Chat id={id} />
-      </MapDataProvider>
-    </AI>
+    <main>
+      <JSpaceUI />
+    </main>
   )
 }

components/j-space-content.ts

@@ -0,0 +1,62 @@
+export const content = {
+  aboutMe: {
+    name: "Jeremy Liu",
+    title: "Computer Engineer Undergrad @ UofT",
+    bio: "I am dedicated to inspiring people and creating positive spaces around the world.",
+    currentActivities: [
+      "Building personal tools & student projects",
+      "Expanding my knowledge in object-oriented programming",
+      "Learning full-stack web dev",
+      "Exploring robotics and AI",
+    ],
+  },
+  skills: {
+    programmingLanguages: "Python, C, JavaScript, TypeScript, MATLAB, SQL",
+    webUI: "React, Next.js, HTML, CSS, Bootstrap, Tailwind, Vite",
+    roboticsSystems: "ROS2, Linux (Ubuntu), Arduino, OpenCV",
+    dataML: "Pytorch, Scikit-learn, Matplotlib, Pandas, NumPy, OpenCV, BeautifulSoup, Selenium",
+    developerTools: "Git, Node.js, AWS, PostgreSQL, Postman, VS Code, Claude, Cursor.ai",
+  },
+  projects: [
+    {
+      title: "Sinatra",
+      description: "A DAW that turns your voice into any instrument of your choice.",
+      image: "sinatra",
+      github: "https://github.com/e-yang6/sinatra",
+      website: "https://sinatra-daw.vercel.app/",
+    },
+    {
+      title: "LockBlock",
+      description: "A smart security system using Arduino and computer vision to block deadbolts when unknown faces are detected.",
+      image: "lockblock",
+      github: "https://github.com/Jeremyliu-621/lockblock",
+    },
+    {
+      title: "UFC Index website",
+      description: "A website that shows scraped stats for UFC Fighters.",
+      image: "ufc-search",
+      github: "https://github.com/Jeremyliu-621/UFC-Elo-Calculator",
+      website: "https://ufc-elo-calculator.vercel.app/",
+    },
+    {
+      title: "Binder",
+      description: "A swipe-based interface for thrifting.",
+      image: "binder_action",
+      github: "https://github.com/Jeremyliu-621/binder",
+    },
+    {
+      title: "stop! don't go on.",
+      description: "Water Sprayer that stops bad habits.",
+      image: "stop_dont_go_on_grey",
+      website: "https://stop-dont-go-on.vercel.app/",
+      github: "https://github.com/Jeremyliu-621/stop-dont-go-on",
+    },
+    {
+      title: "j-space",
+      description: "A space that focuses on my creativity and ideas.",
+      image: "j-gif-space",
+      website: "https://j-space.vercel.app/",
+      github: "https://github.com/Jeremyliu-621/j-space",
+    },
+  ],
+};

components/j-space-ui.tsx

@@ -0,0 +1,146 @@
+'use client'
+
+import React, { useEffect, useState } from 'react'
+import '98.css'
+import { content } from './j-space-content'
+
+export function JSpaceUI() {
+  const [isLoaded, setIsLoaded] = useState(false)
+
+  useEffect(() => {
+    // Import 98-components only on the client side
+    import('98-components').then(() => {
+      setIsLoaded(true)
+    })
+  }, [])
+
+  if (!isLoaded) return null
+
+  const getImageUrl = (filename: string) => {
+    return `/j-space/assets/${filename}`
+  }
+
+  return (
+    <div className="j-space-container" style={{ 
+      fontFamily: '"Jersey 10", sans-serif',
+      backgroundColor: '#c0c0c0',
+      width: '100vw',
+      height: '100vh',
+      overflow: 'hidden',
+      position: 'relative'
+    }}>
+      {/* @ts-ignore */}
+      <win98-desktop style={{ height: '100%', width: '100%' }}>
+        {/* About Me Window */}
+        {/* @ts-ignore */}
+        <win98-window title="About_Me.exe" resizable show-minimize class="window-about-me" style={{
+          position: 'absolute',
+          top: '10vh',
+          left: '10vw',
+          width: '22vw',
+          height: '55vh',
+          zIndex: 10
+        }}>
+          <div className="window-body">
+            <div style={{ display: 'flex', justifyContent: 'center', marginBottom: '10px' }}>
+              <img src={getImageUrl('Jeremypixel.png')} alt="Jeremy Pixel" style={{ width: '100px', border: '2px solid #808080' }} />
+            </div>
+            <h2 style={{ textAlign: 'center', margin: '5px 0' }}>{content.aboutMe.name}</h2>
+            <p style={{ textAlign: 'center', fontWeight: 'bold' }}>{content.aboutMe.title}</p>
+            <p>{content.aboutMe.bio}</p>
+            <hr />
+            <h3>Current Activities:</h3>
+            <ul>
+              {content.aboutMe.currentActivities.map((activity, i) => (
+                <li key={i}>{activity}</li>
+              ))}
+            </ul>
+          </div>
+        {/* @ts-ignore */}
+        </win98-window>
+
+        {/* Skills Window */}
+        {/* @ts-ignore */}
+        <win98-window title="Skills.exe" resizable show-minimize class="window-skills" style={{
+          position: 'absolute',
+          top: '13vh',
+          right: '6vw',
+          width: '18vw',
+          height: '35vh',
+          zIndex: 10
+        }}>
+          <div className="window-body">
+            <h3>Programming Languages</h3>
+            <p>{content.skills.programmingLanguages}</p>
+            <hr />
+            <h3>Web & UI</h3>
+            <p>{content.skills.webUI}</p>
+            <hr />
+            <h3>Developer Tools</h3>
+            <p>{content.skills.developerTools}</p>
+          </div>
+        {/* @ts-ignore */}
+        </win98-window>
+
+        {/* Projects Window */}
+        {/* @ts-ignore */}
+        <win98-window title="Projects.exe" resizable show-minimize class="window-projects" style={{
+          position: 'absolute',
+          top: '2vh',
+          left: '33vw',
+          width: '42vw',
+          height: '88vh',
+          zIndex: 10
+        }}>
+          <div className="window-body" style={{ overflowY: 'auto', height: 'calc(100% - 40px)' }}>
+            {content.projects.map((project, i) => (
+              <div key={i} style={{ marginBottom: '20px', borderBottom: '1px solid #808080', paddingBottom: '10px' }}>
+                <h3>{project.title}</h3>
+                <p>{project.description}</p>
+                {project.image && (
+                  <img src={getImageUrl(`${project.image}.png`)} alt={project.title} style={{ width: '100%', border: '1px solid #808080' }} 
+                       onError={(e) => { (e.target as HTMLImageElement).src = getImageUrl(`${project.image}.gif`) }} />
+                )}
+                <div style={{ marginTop: '10px' }}>
+                  {project.github && <a href={project.github} target="_blank" rel="noreferrer"><button>GitHub</button></a>}
+                  {project.website && <a href={project.website} target="_blank" rel="noreferrer"><button style={{ marginLeft: '5px' }}>Website</button></a>}
+                </div>
+              </div>
+            ))}
+          </div>
+        {/* @ts-ignore */}
+        </win98-window>
+
+        {/* Taskbar */}
+        {/* @ts-ignore */}
+        <win98-taskbar slot="taskbar"></win98-taskbar>
+      </win98-desktop>
+
+      <style jsx global>{`
+        @import url('https://fonts.googleapis.com/css2?family=Jersey+10&display=swap');
+
+        .j-space-container * {
+          cursor: default !important;
+        }
+        .j-space-container a, 
+        .j-space-container button,
+        .j-space-container [role="button"] {
+          cursor: pointer !important;
+        }
+
+        .window-body h3 {
+          font-size: 1.2em;
+          margin: 10px 0 5px 0;
+        }
+
+        .window-body p {
+          margin: 5px 0;
+        }
+
+        .window-body ul {
+          padding-left: 20px;
+        }
+      `}</style>
+    </div>
+  )
+}

package.json

@@ -16,6 +16,8 @@
     "test:e2e:debug": "playwright test --debug"
   },
   "dependencies": {
+    "98-components": "^0.1.1",
+    "98.css": "^0.1.21",
     "@ai-sdk/amazon-bedrock": "^1.1.6",
     "@ai-sdk/anthropic": "^1.2.12",
     "@ai-sdk/google": "^1.2.22",