goodbye react, hello vue

app/components/About.vue

@@ -0,0 +1,23 @@
+<template>
+  <pre class="text-terminal font-mono whitespace-pre-wrap">{{ aboutTxt }}</pre>
+</template>
+
+<script setup lang="ts">
+const aboutTxt = `
+@@@@@@@@@@@@@@@@@@@@@@@@@@@@    ---- Reading file about_me.inf ----
+@@@@@@@@@@@@@@@@@@@@@@@@@@@@    ---- File read successful ----
+@@@@@@@@@@@@@@@@@@@@@@@@@@@@    Name: SticksDev (Tanner Sommers)
+@@@@@@@@@@@@@@@@@@@@@@@@@@@@    Age: 21
+@@@@@@@@@@@****+++=@@@@@@@@@    Location: United States (UTC-5)
+@@@@@@@@@=-@@@@@@@@@@@@@@@@@    Occupation: Software Engineer/Freelancer
+@@@@@@@@@.:@@@@@@@@@@@@@@@@@    Skills: JavaScript, TypeScript, React, Svelte, Node.js, Python, C#, Java
+@@@@@@@@@@@------@@@@@@@@@@@    Interests: Web Development, Game Development, Cybersecurity
+@@@@@@@@@@@@@@@@@--@@@@@@@@@    Hobbies: Coding, Gaming, Chess, Music
+@@@@@@@@@==+++***@@@@@@@@@@@    Bio:
+@@@@@@@@@%%%%@@%@@@@@@@@@@@@    Hi! I'm Tanner, a software engineer and freelancer from the United States.
+@@@@@@@@@@@@@@@@@@@@@@@@@@@@    I love coding, gaming, and learning new things. I'm always looking for new
+@@@@@@@@@@@@@@@@@@@@@@@@@@@@    opportunities to grow and expand my skillset. Feel free to reach out to me
+@@@@@@@@@@@@@@@@@@@@@@@@@@@@    if you have any questions or just want to chat!
+@@@@@@@@@@@@@@@@@@@@@@@@@@@@    ---- End of file ----
+`
+</script>

app/components/Contact.vue

@@ -0,0 +1,34 @@
+<template>
+  <div class="font-mono">
+    <h1 class="text-2xl font-bold mb-2">Contact</h1>
+    <p class="text-terminal-dim mb-2">
+      You can reach me at the following email address:
+    </p>
+    <a
+      href="mailto:tanner@teamhydra.dev"
+      class="text-terminal-dim hover:text-terminal hover:underline transition-colors"
+    >
+      tanner@teamhydra.dev
+    </a>
+    <br />
+    <span class="text-terminal-dim">-- or --</span>
+    <br />
+    <a
+      href="https://discord.gg/zira"
+      target="_blank"
+      class="text-terminal-dim hover:text-terminal hover:underline transition-colors"
+    >
+      Via Discord
+    </a>
+    <p class="text-terminal-dim mt-2">
+      Please use the #other-support channel to get in touch with me. My
+      username is sticksdev.
+    </p>
+    <p class="text-terminal-dim mt-2">
+      I look forward to hearing from you soon :)
+    </p>
+  </div>
+</template>
+
+<script setup lang="ts">
+</script>

app/components/DesktopIcon.vue

@@ -0,0 +1,32 @@
+<template>
+  <div
+    class="desktop-icon flex flex-col items-center cursor-pointer p-2 rounded select-none w-20"
+    :class="{ 'bg-[#000080] bg-opacity-50': isSelected }"
+    @click="$emit('click')"
+    @dblclick="$emit('dblclick')"
+  >
+    <div class="icon-image w-12 h-12 mb-1 flex items-center justify-center text-4xl">
+      {{ icon }}
+    </div>
+    <span class="text-white text-xs text-center drop-shadow-lg">{{ label }}</span>
+  </div>
+</template>
+
+<script setup lang="ts">
+defineProps<{
+  icon: string
+  label: string
+  isSelected?: boolean
+}>()
+
+defineEmits<{
+  click: []
+  dblclick: []
+}>()
+</script>
+
+<style scoped>
+.desktop-icon:hover {
+  background: rgba(0, 0, 128, 0.3);
+}
+</style>

app/components/Experience.vue

@@ -0,0 +1,84 @@
+<template>
+  <div class="font-mono">
+    <h1 class="text-2xl font-bold mb-2">Experience</h1>
+    <p class="text-terminal-dim mb-4">
+      Use the buttons below to navigate through my experience.
+    </p>
+    <div class="flex justify-between mb-4">
+      <button
+        @click="handlePrev"
+        :disabled="index === 0"
+        class="text-terminal-dim hover:text-terminal transition-colors disabled:opacity-30 disabled:cursor-not-allowed"
+      >
+        Previous
+      </button>
+      <button
+        @click="handleNext"
+        :disabled="index === experience.length - 1"
+        class="text-terminal-dim hover:text-terminal transition-colors disabled:opacity-30 disabled:cursor-not-allowed"
+      >
+        Next
+      </button>
+    </div>
+    <div>
+      <pre class="whitespace-pre-wrap text-terminal">{{ experience[index] }}</pre>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue'
+
+const experience = [
+  `
+                      @@@@@@@@@@
+                     @@@@@*:@@@@@
+                     @#*@+**-@:@@
+             @#@@@  @@@**@**@:*@@   @@@*@
+          @@+@@@:@@@@@*%*@**@*.%@@@@@:@@@+@@
+@@@@@@@@@@@@@@*@*:#*@@@@@***:@#@@@**:*@*@@@@@@@@@@@%@@    Company Name: Team Hydra
+   @@@%%@@***********@@********@@**+*******+@@**@@@       Position: Software Developer
+      @@@#%@********+*@********@*************@@@          Start Date: 2020-09-01
+        @@@@%********.*@*%**@*@+.*********@@@@            End: Present
+         @@@@#**@*%**+@@*@@@@+@@+****@**+@@@@             About:
+          @@@@**@@*****@@*@@=@@*****@@%*@@@@              I've worked with team hydra on a variety of projects,
+          @  @@+*@@@*****@#@@*****@@@#*@@  @              including developing web applications, mobile apps, discord bots,
+          @@@ @@%%@@@@@***@@***@@@@@%@@@ @@@              and APIs. It's a great team to work with, and I've learned a lot.
+               @@@%@@@@*****+**@@@@%@@@                   I highly recommend them to anyone looking for software development
+               @@@%%%***#@**@****%%%@@@                   services and a career in software development.
+              @@@@@@@@@@@@@@@@@@@@@@@@@@
+                @@                  @@
+   `,
+  `
+             *###########*
+           ################*
+          ########   *####
+         ######         *
+        *####*
+        #####      #########
+        #####      #########    ordon food services
+        #####*     #########    Position: Network Engineer/IT Specialist
+         ######        *####    Start Date: 2022-06-01
+          #######*   =######    End: 2024-06-01
+           #################    About: I worked with Gordon food services to help maintain their network infrastructure
+             ############*      and provide IT support to their employees. I was responsible for troubleshooting network
+                #######         issues, setting up new network equipment, and providing support to employees with IT issues.
+                  ####          I was laid off, but I enjoyed my time there and learned a lot about network engineering and
+                     *          IT support.
+   `,
+]
+
+const index = ref(0)
+
+const handleNext = () => {
+  if (index.value < experience.length - 1) {
+    index.value++
+  }
+}
+
+const handlePrev = () => {
+  if (index.value > 0) {
+    index.value--
+  }
+}
+</script>

app/components/Projects.vue

@@ -0,0 +1,57 @@
+<template>
+  <div class="font-mono">
+    <h1 class="text-terminal text-md mb-4">
+      --- Reading database projects.db ---<br>
+      Found {{ projects.length }} projects in database. Displaying all projects:
+    </h1>
+    <div v-for="(project, index) in preparedProjects" :key="index" class="flex flex-row flex-wrap mb-1">
+      <p class="text-terminal">{{ project.title }}</p>
+      <span class="text-terminal">&nbsp;|&nbsp;</span>
+      <p class="text-terminal">{{ project.description }}</p>
+      <span class="text-terminal">|</span>
+      <a
+        :href="project.link"
+        class="text-terminal-dim hover:text-terminal transition-colors ml-1"
+        target="_blank"
+      >
+        {{ project.link }}
+      </a>
+    </div>
+    <h1 class="text-terminal text-md mt-4">
+      --- End of database ---
+    </h1>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue'
+
+const projects = [
+  {
+    title: 'BambuConnect',
+    description: 'A simple 3rd party client for managing your 3D printer.',
+    link: 'https://github.com/SticksDev/BambuConnect',
+  },
+  {
+    title: 'VRDCN_NetworkTest',
+    description: 'A simple network test for a VR Streaming service. Written in Go.',
+    link: 'https://github.com/SticksDev/VRCDN_NetworkTest',
+  },
+  {
+    title: 'Runic Spells',
+    description: 'A simple spell system for Minecraft using Java and PaperMC APIs.',
+    link: 'https://github.com/SticksDev/runic_spells',
+  },
+]
+
+const preparedProjects = computed(() => {
+  const maxTitleLength = Math.max(...projects.map((project) => project.title.length))
+  const maxDescriptionLength = Math.max(...projects.map((project) => project.description.length))
+
+  return projects.map((project) => ({
+    ...project,
+    title: project.title.padEnd(maxTitleLength, ' '),
+    description: project.description.padEnd(maxDescriptionLength, ' '),
+  }))
+})
+</script>

app/components/ShrimpRender.vue

@@ -0,0 +1,116 @@
+<template>
+  <div ref="containerRef" class="shrimp w-full h-full cursor-pointer" @click="toggleRotation"></div>
+</template>
+
+<script setup lang="ts">
+import { ref, onMounted, onUnmounted } from 'vue'
+import * as THREE from 'three'
+import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader.js'
+import { AsciiEffect } from 'three/examples/jsm/effects/AsciiEffect.js'
+
+const containerRef = ref<HTMLDivElement | null>(null)
+const isRotating = ref(false)
+
+let scene: THREE.Scene
+let camera: THREE.PerspectiveCamera
+let renderer: THREE.WebGLRenderer
+let effect: AsciiEffect
+let model: THREE.Group
+let animationId: number
+
+const toggleRotation = () => {
+  isRotating.value = !isRotating.value
+}
+
+onMounted(() => {
+  if (!containerRef.value) return
+
+  // Scene setup
+  scene = new THREE.Scene()
+  scene.background = null
+
+  // Camera
+  camera = new THREE.PerspectiveCamera(
+    60,
+    containerRef.value.clientWidth / containerRef.value.clientHeight,
+    1,
+    1000
+  )
+  camera.position.set(0, 50, 15)
+  camera.lookAt(0, 0, 0)
+
+  // Renderer
+  renderer = new THREE.WebGLRenderer({ antialias: true })
+  renderer.setSize(containerRef.value.clientWidth, containerRef.value.clientHeight)
+  renderer.setPixelRatio(window.devicePixelRatio)
+
+  // ASCII Effect
+  effect = new AsciiEffect(renderer, ' .:-=+*#%@', { invert: false })
+  effect.setSize(containerRef.value.clientWidth, containerRef.value.clientHeight)
+  effect.domElement.style.color = 'rgba(0, 255, 65, 0.7)'
+  effect.domElement.style.backgroundColor = 'transparent'
+  containerRef.value.appendChild(effect.domElement)
+
+  // Lighting
+  const ambientLight = new THREE.AmbientLight(0xffffff, Math.PI / 2)
+  scene.add(ambientLight)
+
+  // Load GLTF model
+  const loader = new GLTFLoader()
+  loader.load('/shrimp_smol.glb', (gltf) => {
+    model = new THREE.Group()
+    model.position.set(0, -1, 0)
+
+    // Find and add the mesh
+    const mesh = gltf.scene.getObjectByName('Mesh_Mesh_head_geo001_lambert2SG001')
+    if (mesh) {
+      mesh.rotation.x = -Math.PI / 2
+      model.add(mesh)
+    }
+
+    scene.add(model)
+  })
+
+  // Animation loop
+  const animate = () => {
+    animationId = requestAnimationFrame(animate)
+
+    if (model) {
+      model.rotation.z += 0.01
+    }
+
+    effect.render(scene, camera)
+  }
+  animate()
+
+  // Handle window resize
+  const handleResize = () => {
+    if (!containerRef.value) return
+
+    camera.aspect = containerRef.value.clientWidth / containerRef.value.clientHeight
+    camera.updateProjectionMatrix()
+
+    renderer.setSize(containerRef.value.clientWidth, containerRef.value.clientHeight)
+    effect.setSize(containerRef.value.clientWidth, containerRef.value.clientHeight)
+  }
+  window.addEventListener('resize', handleResize)
+})
+
+onUnmounted(() => {
+  if (animationId) {
+    cancelAnimationFrame(animationId)
+  }
+
+  if (effect && effect.domElement && containerRef.value) {
+    containerRef.value.removeChild(effect.domElement)
+  }
+
+  window.removeEventListener('resize', () => {})
+})
+</script>
+
+<style scoped>
+.shrimp {
+  min-height: 400px;
+}
+</style>

app/components/Window.vue

@@ -0,0 +1,112 @@
+<template>
+  <div
+    ref="windowRef"
+    class="window absolute bg-[#c0c0c0] border-2 shadow-lg"
+    :style="windowStyle"
+    :class="{ 'z-50': isActive, 'z-10': !isActive }"
+    @mousedown="bringToFront"
+  >
+    <!-- Title Bar -->
+    <div
+      class="title-bar flex items-center justify-between px-1 py-1 cursor-move select-none"
+      :class="isActive ? 'bg-[#000080]' : 'bg-[#808080]'"
+      @mousedown="startDrag"
+    >
+      <span class="text-white font-bold text-sm px-2">{{ title }}</span>
+      <button
+        class="close-btn w-5 h-5 bg-[#c0c0c0] border border-white border-b-[#808080] border-r-[#808080] flex items-center justify-center text-xs font-bold hover:bg-[#dfdfdf]"
+        @click="$emit('close')"
+      >
+        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-10">
+          <path stroke-linecap="round" stroke-linejoin="round" d="M6 18 18 6M6 6l12 12" />
+        </svg>
+      </button>
+    </div>
+
+    <!-- Window Content -->
+    <div class="window-content bg-white border-2 border-[#808080] border-t-white border-l-white p-6 overflow-auto text-black" :style="contentStyle">
+      <slot />
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, computed, onMounted, onUnmounted } from 'vue'
+
+const props = defineProps<{
+  title: string
+  initialX?: number
+  initialY?: number
+  width?: number
+  height?: number
+  isActive?: boolean
+}>()
+
+const emit = defineEmits<{
+  close: []
+  activate: []
+}>()
+
+const windowRef = ref<HTMLElement | null>(null)
+const x = ref(props.initialX ?? 100)
+const y = ref(props.initialY ?? 100)
+const isDragging = ref(false)
+const dragStartX = ref(0)
+const dragStartY = ref(0)
+
+const windowStyle = computed(() => ({
+  left: `${x.value}px`,
+  top: `${y.value}px`,
+  width: props.width ? `${props.width}px` : '600px',
+}))
+
+const contentStyle = computed(() => ({
+  height: props.height ? `${props.height}px` : '400px',
+}))
+
+const startDrag = (e: MouseEvent) => {
+  isDragging.value = true
+  dragStartX.value = e.clientX - x.value
+  dragStartY.value = e.clientY - y.value
+  emit('activate')
+}
+
+const onDrag = (e: MouseEvent) => {
+  if (!isDragging.value) return
+
+  x.value = e.clientX - dragStartX.value
+  y.value = e.clientY - dragStartY.value
+}
+
+const stopDrag = () => {
+  isDragging.value = false
+}
+
+const bringToFront = () => {
+  emit('activate')
+}
+
+onMounted(() => {
+  document.addEventListener('mousemove', onDrag)
+  document.addEventListener('mouseup', stopDrag)
+})
+
+onUnmounted(() => {
+  document.removeEventListener('mousemove', onDrag)
+  document.removeEventListener('mouseup', stopDrag)
+})
+</script>
+
+<style scoped>
+.window {
+  box-shadow: 2px 2px 0 rgba(0, 0, 0, 0.5);
+}
+
+.title-bar {
+  background: linear-gradient(90deg, #000080, #1084d0);
+}
+
+.close-btn:active {
+  border-style: inset;
+}
+</style>