add mobile support, add window minimization, add icon higlighted state

app/components/DesktopIcon.vue

@@ -1,22 +1,25 @@
 <template>
   <div
-    class="desktop-icon flex flex-col items-center cursor-pointer p-2 rounded select-none w-20"
+    class="desktop-icon flex flex-col items-center cursor-pointer p-1 md:p-2 rounded select-none w-16 md:w-20"
-    :class="{ 'bg-[#000080] bg-opacity-50': isSelected }"
+    :class="{ 'bg-gray-700 bg-opacity-15': isSelected }"
-    @click="$emit('click')"
+    @click="handleClick"
-    @dblclick="$emit('dblclick')"
+    @dblclick="handleDoubleClick"
+    @touchend="handleTouchEnd"
   >
-    <div class="icon-image w-12 h-12 mb-1 flex items-center justify-center">
+    <div class="icon-image w-10 h-10 md:w-12 md:h-12 mb-1 flex items-center justify-center">
       <component
         :is="icon"
-        :size="48"
+        :size="40"
+        class="md:w-12 md:h-12"
         color="white"
       />
     </div>
-    <span class="text-white text-xs text-center drop-shadow-lg">{{ label }}</span>
+    <span class="text-white text-[10px] md:text-xs text-center drop-shadow-lg">{{ label }}</span>
   </div>
 </template>
 
 <script setup lang="ts">
+import { ref } from 'vue'
 import type { Component } from 'vue'
 
 defineProps<{
@@ -25,14 +28,44 @@ defineProps<{
   isSelected?: boolean
 }>()
 
-defineEmits<{
+const emit = defineEmits<{
   click: []
   dblclick: []
 }>()
+
+// Double-tap detection for mobile
+const lastTapTime = ref(0)
+const DOUBLE_TAP_DELAY = 300 // milliseconds
+
+const handleClick = () => {
+  emit('click')
+}
+
+const handleDoubleClick = () => {
+  emit('dblclick')
+}
+
+const handleTouchEnd = (e: TouchEvent) => {
+  // Prevent the default behavior and mouse event emulation
+  e.preventDefault()
+
+  const currentTime = Date.now()
+  const timeDiff = currentTime - lastTapTime.value
+
+  if (timeDiff < DOUBLE_TAP_DELAY && timeDiff > 0) {
+    // Double tap detected
+    emit('dblclick')
+    lastTapTime.value = 0 // Reset
+  } else {
+    // Single tap
+    emit('click')
+    lastTapTime.value = currentTime
+  }
+}
 </script>
 
 <style scoped>
 .desktop-icon:hover {
-  background: rgba(0, 0, 128, 0.3);
+  background: rgba(75, 85, 99, 0.4);
 }
 </style>

app/components/TaskbarButton.vue

@@ -2,7 +2,7 @@
   <Transition name="taskbar-fade">
     <button
       v-if="isOpen"
-      class="taskbar-item px-3 py-1 border-2 text-sm"
+      class="taskbar-item px-1 md:px-3 py-1 border-2 text-xs md:text-sm min-w-0"
       :class="[
         isActive
           ? 'bg-[#000080] text-white border-[#808080] border-r-white border-b-white active-button'
@@ -14,8 +14,9 @@
         <component
           :is="icon"
           :size="16"
+          class="flex-shrink-0"
         />
-        <span>{{ label }}</span>
+        <span class="hidden sm:inline truncate">{{ label }}</span>
       </div>
     </button>
   </Transition>

app/components/Window.vue

@@ -2,24 +2,42 @@
 <template>
   <div
     ref="windowRef"
-    class="window absolute bg-[#c0c0c0] border-2 shadow-lg"
+    class="window bg-[#c0c0c0] border-2 shadow-lg"
     :style="windowStyle"
-    :class="{ 'z-50': isActive, 'z-10': !isActive }"
+    :class="[
+      { 'z-50': isActive, 'z-10': !isActive },
+      isMobile ? 'fixed' : 'absolute',
+      { 'minimize-animation': shouldAnimate && isMinimized }
+    ]"
     @mousedown="bringToFront"
   >
     <!-- Title Bar -->
     <div
-      class="title-bar flex items-center justify-between px-1 py-1 cursor-move select-none"
+      class="title-bar flex items-center justify-between px-1 py-1 select-none"
-      :class="isActive ? 'bg-[#000080]' : 'bg-[#808080]'"
+      :class="[
+        isActive ? 'bg-[#000080]' : 'bg-[#808080]',
+        isMobile ? '' : 'cursor-move'
+      ]"
       @mousedown="startDrag"
+      @touchstart="startDrag"
     >
       <span class="text-white font-bold text-sm px-2">{{ title }}</span>
-      <button
+      <div class="flex gap-0.5">
-        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]"
+        <button
-        @click="$emit('close')"
+          class="title-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.stop="$emit('minimize')"
-         <X :size="60" />
+          title="Minimize"
-      </button>
+        >
+          <Minus :size="16" />
+        </button>
+        <button
+          class="title-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.stop="$emit('close')"
+          title="Close"
+        >
+          <X :size="16" />
+        </button>
+      </div>
     </div>
 
     <!-- Window Content -->
@@ -30,8 +48,8 @@
 </template>
 
 <script setup lang="ts">
-import { X } from 'lucide-vue-next';
+import { X, Minus } from 'lucide-vue-next';
-import { ref, computed, onMounted, onUnmounted } from 'vue'
+import { ref, computed, watch, onMounted, onUnmounted } from 'vue'
 
 const props = defineProps<{
   title: string
@@ -40,11 +58,13 @@ const props = defineProps<{
   width?: number
   height?: number
   isActive?: boolean
+  isMinimized?: boolean
 }>()
 
 const emit = defineEmits<{
   close: []
   activate: []
+  minimize: []
 }>()
 
 const windowRef = ref<HTMLElement | null>(null)
@@ -53,29 +73,68 @@ const y = ref(props.initialY ?? 100)
 const isDragging = ref(false)
 const dragStartX = ref(0)
 const dragStartY = ref(0)
+const isMobile = ref(false)
+const wasMinimized = ref(false)
+const shouldAnimate = ref(false)
 
-const windowStyle = computed(() => ({
+// Check if device is mobile
-  left: `${x.value}px`,
+const checkMobile = () => {
-  top: `${y.value}px`,
+  if (typeof window !== 'undefined') {
-  width: props.width ? `${props.width}px` : '600px',
+    isMobile.value = window.innerWidth < 768
-}))
+  }
+}
 
-const contentStyle = computed(() => ({
+const windowStyle = computed(() => {
-  height: props.height ? `${props.height}px` : '400px',
+  if (isMobile.value) {
-}))
+    // On mobile, make windows fullscreen with small padding
+    return {
+      left: '10px',
+      top: '10px',
+      right: '10px',
+      bottom: '50px', // Leave room for taskbar
+      width: 'calc(100vw - 20px)',
+      height: 'calc(100vh - 60px)',
+    }
+  }
+
+  return {
+    left: `${x.value}px`,
+    top: `${y.value}px`,
+    width: props.width ? `${props.width}px` : '600px',
+  }
+})
+
+const contentStyle = computed(() => {
+  if (isMobile.value) {
+    return {
+      height: 'calc(100% - 32px)', // Subtract title bar height
+    }
+  }
+
+  return {
+    height: props.height ? `${props.height}px` : '400px',
+  }
+})
+
+const startDrag = (e: MouseEvent | TouchEvent) => {
+  // Don't allow dragging on mobile
+  if (isMobile.value) return
 
-const startDrag = (e: MouseEvent) => {
   isDragging.value = true
-  dragStartX.value = e.clientX - x.value
+  const clientX = 'touches' in e ? e.touches[0]!.clientX : e.clientX
-  dragStartY.value = e.clientY - y.value
+  const clientY = 'touches' in e ? e.touches[0]!.clientY : e.clientY
+  dragStartX.value = clientX - x.value
+  dragStartY.value = clientY - y.value
   emit('activate')
 }
 
-const onDrag = (e: MouseEvent) => {
+const onDrag = (e: MouseEvent | TouchEvent) => {
-  if (!isDragging.value) return
+  if (!isDragging.value || isMobile.value) return
 
-  x.value = e.clientX - dragStartX.value
+  const clientX = 'touches' in e ? e.touches[0]!.clientX : e.clientX
-  y.value = e.clientY - dragStartY.value
+  const clientY = 'touches' in e ? e.touches[0]!.clientY : e.clientY
+  x.value = clientX - dragStartX.value
+  y.value = clientY - dragStartY.value
 }
 
 const stopDrag = () => {
@@ -86,14 +145,35 @@ const bringToFront = () => {
   emit('activate')
 }
 
+// Watch for minimize state changes
+watch(() => props.isMinimized, (newVal, oldVal) => {
+  // Only animate if transitioning from false to true (not minimized -> minimized)
+  if (newVal && !oldVal) {
+    shouldAnimate.value = true
+    wasMinimized.value = true
+  } else if (!newVal && oldVal) {
+    // Restore from minimized - no animation needed, just reset
+    shouldAnimate.value = false
+    wasMinimized.value = false
+  }
+})
+
 onMounted(() => {
+  checkMobile()
+  wasMinimized.value = props.isMinimized ?? false
+  window.addEventListener('resize', checkMobile)
   document.addEventListener('mousemove', onDrag)
   document.addEventListener('mouseup', stopDrag)
+  document.addEventListener('touchmove', onDrag)
+  document.addEventListener('touchend', stopDrag)
 })
 
 onUnmounted(() => {
+  window.removeEventListener('resize', checkMobile)
   document.removeEventListener('mousemove', onDrag)
   document.removeEventListener('mouseup', stopDrag)
+  document.removeEventListener('touchmove', onDrag)
+  document.removeEventListener('touchend', stopDrag)
 })
 </script>
 
@@ -106,7 +186,23 @@ onUnmounted(() => {
   background: linear-gradient(90deg, #000080, #1084d0);
 }
 
-.close-btn:active {
+.title-btn:active {
   border-style: inset;
 }
+
+.minimize-animation {
+  animation: minimize 0.3s ease-out forwards;
+  transform-origin: bottom left;
+}
+
+@keyframes minimize {
+  0% {
+    transform: scale(1) translateY(0);
+    opacity: 1;
+  }
+  100% {
+    transform: scale(0.1) translateY(calc(100vh - 100px));
+    opacity: 0;
+  }
+}
 </style>

app/pages/desktop.vue

@@ -1,7 +1,11 @@
 <template>
-  <div class="desktop-container min-h-screen bg-[#008080] relative overflow-hidden" :class="{ 'hourglass-cursor': isLoading || isDesktopLoading }">
+  <div
+    class="desktop-container min-h-screen bg-[#008080] relative overflow-hidden"
+    :class="{ 'hourglass-cursor': isLoading || isDesktopLoading }"
+    @click="handleDesktopClick"
+  >
     <!-- Desktop Background -->
-    <div class="absolute inset-0 flex flex-col items-center justify-center opacity-50 pointer-events-none">
+    <div class="desktop-background absolute inset-0 flex flex-col items-center justify-center opacity-50 pointer-events-none">
       <div class="w-[600px] h-[600px] pointer-events-auto">
         <ClientOnly>
           <ShrimpRender />
@@ -37,12 +41,14 @@
     </div>
 
     <!-- Desktop Icons -->
-    <div class="desktop-icons absolute top-4 left-4 flex flex-col gap-2">
+    <div class="desktop-icons absolute top-4 left-4 flex flex-col gap-2 md:gap-4">
       <Transition name="icon-fade">
         <DesktopIcon
           v-if="visibleIcons >= 1"
           :icon="User"
           label="About Me"
+          :is-selected="selectedIcon === 'about'"
+          @click="selectIcon('about')"
           @dblclick="openWindow('about')"
         />
       </Transition>
@@ -51,6 +57,8 @@
           v-if="visibleIcons >= 2"
           :icon="Briefcase"
           label="Projects"
+          :is-selected="selectedIcon === 'projects'"
+          @click="selectIcon('projects')"
           @dblclick="openWindow('projects')"
         />
       </Transition>
@@ -59,6 +67,8 @@
           v-if="visibleIcons >= 3"
           :icon="GraduationCap"
           label="Experience"
+          :is-selected="selectedIcon === 'experience'"
+          @click="selectIcon('experience')"
           @dblclick="openWindow('experience')"
         />
       </Transition>
@@ -67,6 +77,8 @@
           v-if="visibleIcons >= 4"
           :icon="Mail"
           label="Contact"
+          :is-selected="selectedIcon === 'contact'"
+          @click="selectIcon('contact')"
           @dblclick="openWindow('contact')"
         />
       </Transition>
@@ -75,6 +87,8 @@
           v-if="visibleIcons >= 5"
           :icon="FileText"
           label="Blog"
+          :is-selected="selectedIcon === 'blog'"
+          @click="selectIcon('blog')"
           @dblclick="openWindow('blog')"
         />
       </Transition>
@@ -89,8 +103,10 @@
       :width="1200"
       :height="550"
       :is-active="activeWindow === 'about'"
+      :is-minimized="minimizedWindows.about"
       @close="closeWindow('about')"
       @activate="activeWindow = 'about'"
+      @minimize="minimizeWindow('about')"
     >
       <About />
     </Window>
@@ -103,8 +119,10 @@
       :width="900"
       :height="650"
       :is-active="activeWindow === 'projects'"
+      :is-minimized="minimizedWindows.projects"
       @close="closeWindow('projects')"
       @activate="activeWindow = 'projects'"
+      @minimize="minimizeWindow('projects')"
     >
       <Projects />
     </Window>
@@ -117,8 +135,10 @@
       :width="1200"
       :height="700"
       :is-active="activeWindow === 'experience'"
+      :is-minimized="minimizedWindows.experience"
       @close="closeWindow('experience')"
       @activate="activeWindow = 'experience'"
+      @minimize="minimizeWindow('experience')"
     >
       <Experience />
     </Window>
@@ -131,8 +151,10 @@
       :width="700"
       :height="500"
       :is-active="activeWindow === 'contact'"
+      :is-minimized="minimizedWindows.contact"
       @close="closeWindow('contact')"
       @activate="activeWindow = 'contact'"
+      @minimize="minimizeWindow('contact')"
     >
       <Contact />
     </Window>
@@ -145,8 +167,10 @@
       :width="1000"
       :height="650"
       :is-active="activeWindow === 'blog'"
+      :is-minimized="minimizedWindows.blog"
       @close="closeWindow('blog')"
       @activate="activeWindow = 'blog'"
+      @minimize="minimizeWindow('blog')"
     >
       <Blog />
     </Window>
@@ -154,7 +178,7 @@
     <!-- Start Menu -->
     <div
       v-if="showStartMenu"
-      class="start-menu absolute bottom-10 left-0 w-64 bg-[#c0c0c0] border-2 border-white border-r-[#808080] border-b-[#808080] shadow-2xl z-50"
+      class="start-menu absolute bottom-10 left-0 w-64 md:w-64 max-w-[calc(100vw-20px)] bg-[#c0c0c0] border-2 border-white border-r-[#808080] border-b-[#808080] shadow-2xl z-50"
     >
       <!-- Start Menu Header -->
       <div class="bg-gradient-to-r from-[#000080] to-[#1084d0] text-white px-3 py-2 font-bold text-sm flex items-center gap-2">
@@ -233,55 +257,55 @@
     </div>
 
     <!-- Taskbar -->
-    <div class="taskbar absolute bottom-0 left-0 right-0 h-10 bg-[#c0c0c0] border-t-2 border-white flex items-center px-2 shadow-lg z-50">
+    <div class="taskbar absolute bottom-0 left-0 right-0 h-10 md:h-10 bg-[#c0c0c0] border-t-2 border-white flex items-center px-1 md:px-2 shadow-lg z-50">
       <button
         @click="showStartMenu = !showStartMenu"
-        class="start-button px-3 py-1 bg-[#c0c0c0] border-2 font-bold flex items-center gap-2 hover:bg-[#dfdfdf]"
+        class="start-button px-2 md:px-3 py-1 bg-[#c0c0c0] border-2 font-bold flex items-center gap-1 md:gap-2 hover:bg-[#dfdfdf] text-xs md:text-base"
         :class="showStartMenu ? 'border-[#808080] border-r-white border-b-white' : 'border-white border-r-[#808080] border-b-[#808080]'"
       >
-        <span class="text-lg">🦐</span>
+        <span class="text-base md:text-lg">🦐</span>
-        <span>Start</span>
+        <span class="hidden sm:inline">Start</span>
       </button>
 
-      <div class="flex-1 flex gap-1 ml-2">
+      <div class="flex-1 flex gap-1 ml-1 md:ml-2 overflow-x-auto">
         <TaskbarButton
           :icon="User"
           label="About Me"
           :isOpen="windows.about"
-          :isActive="activeWindow === 'about'"
+          :isActive="activeWindow === 'about' && !minimizedWindows.about"
-          @click="activeWindow = 'about'"
+          @click="toggleMinimize('about')"
         />
         <TaskbarButton
           :icon="Briefcase"
           label="Projects"
           :isOpen="windows.projects"
-          :isActive="activeWindow === 'projects'"
+          :isActive="activeWindow === 'projects' && !minimizedWindows.projects"
-          @click="activeWindow = 'projects'"
+          @click="toggleMinimize('projects')"
         />
         <TaskbarButton
           :icon="GraduationCap"
           label="Experience"
           :isOpen="windows.experience"
-          :isActive="activeWindow === 'experience'"
+          :isActive="activeWindow === 'experience' && !minimizedWindows.experience"
-          @click="activeWindow = 'experience'"
+          @click="toggleMinimize('experience')"
         />
         <TaskbarButton
           :icon="Mail"
           label="Contact"
           :isOpen="windows.contact"
-          :isActive="activeWindow === 'contact'"
+          :isActive="activeWindow === 'contact' && !minimizedWindows.contact"
-          @click="activeWindow = 'contact'"
+          @click="toggleMinimize('contact')"
         />
         <TaskbarButton
           :icon="FileText"
           label="Blog"
           :isOpen="windows.blog"
-          :isActive="activeWindow === 'blog'"
+          :isActive="activeWindow === 'blog' && !minimizedWindows.blog"
-          @click="activeWindow = 'blog'"
+          @click="toggleMinimize('blog')"
         />
       </div>
 
-      <div class="time px-2 border-2 border-[#808080] border-t-white border-l-white text-sm">
+      <div class="time px-1 md:px-2 border-2 border-[#808080] border-t-white border-l-white text-xs md:text-sm">
         {{ currentTime }}
       </div>
     </div>
@@ -309,7 +333,16 @@ const windows = reactive({
   blog: false,
 })
 
+const minimizedWindows = reactive({
+  about: false,
+  projects: false,
+  experience: false,
+  contact: false,
+  blog: false,
+})
+
 const activeWindow = ref<string | null>(null)
+const selectedIcon = ref<string | null>(null)
 const isLoading = ref(false)
 const currentTime = ref('')
 const isDesktopLoading = ref(true)
@@ -322,13 +355,42 @@ const isShuttingDown = ref(false)
 const shutdownStage = ref<'shutting-down' | 'safe-to-turn-off'>('shutting-down')
 const shutdownMessage = ref('Shutting down...')
 
+const selectIcon = (iconName: string) => {
+  selectedIcon.value = iconName
+}
+
+const handleDesktopClick = (e: Event) => {
+  // Check if click was directly on the desktop (not on icons, windows, taskbar, etc.)
+  const target = e.target as HTMLElement
+
+  // Deselect icons when clicking on desktop background or the shrimp container
+  if (
+    target.classList.contains('desktop-container') ||
+    target.classList.contains('desktop-background') ||
+    target.closest('.desktop-background')
+  ) {
+    selectedIcon.value = null
+  }
+}
+
 const openWindow = (windowName: keyof typeof windows) => {
+  // Clear icon selection when opening window
+  selectedIcon.value = null
+
+  // If window is minimized, restore it immediately
+  if (minimizedWindows[windowName]) {
+    minimizedWindows[windowName] = false
+    activeWindow.value = windowName
+    return
+  }
+
   // Show hourglass cursor
   isLoading.value = true
 
   // Simulate loading delay
   setTimeout(() => {
     windows[windowName] = true
+    minimizedWindows[windowName] = false
     activeWindow.value = windowName
     isLoading.value = false
   }, 500)
@@ -336,11 +398,33 @@ const openWindow = (windowName: keyof typeof windows) => {
 
 const closeWindow = (windowName: keyof typeof windows) => {
   windows[windowName] = false
+  minimizedWindows[windowName] = false
   if (activeWindow.value === windowName) {
     activeWindow.value = null
   }
 }
 
+const minimizeWindow = (windowName: keyof typeof windows) => {
+  minimizedWindows[windowName] = true
+  if (activeWindow.value === windowName) {
+    activeWindow.value = null
+  }
+}
+
+const toggleMinimize = (windowName: keyof typeof windows) => {
+  if (minimizedWindows[windowName]) {
+    // Restore the window
+    minimizedWindows[windowName] = false
+    activeWindow.value = windowName
+  } else if (activeWindow.value === windowName) {
+    // Minimize if it's the active window
+    minimizeWindow(windowName)
+  } else {
+    // Just activate if it's not active
+    activeWindow.value = windowName
+  }
+}
+
 const startShutdown = async () => {
   showStartMenu.value = false
   isShuttingDown.value = true