sticks/portfolio
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
Tanner Sommers
2026-01-30 20:46:44 -05:00
parent f678313f4c
commit 7f56539831
4 changed files with 273 additions and 59 deletions
Download Patch File Download Diff File Expand all files Collapse all files

51
app/components/DesktopIcon.vue
View File

@@ -1,22 +1,25 @@
<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')"
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-gray-700 bg-opacity-15': isSelected }"
@click="handleClick"
@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>

5
app/components/TaskbarButton.vue
View File

@@ -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>

152
app/components/Window.vue
View File

@@ -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="isActive ? 'bg-[#000080]' : 'bg-[#808080]'"
class="title-bar flex items-center justify-between px-1 py-1 select-none"
: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
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')"
>
<X :size="60" />
</button>
<div class="flex gap-0.5">
<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('minimize')"
title="Minimize"
>
<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 { ref, computed, onMounted, onUnmounted } from 'vue'
import { X, Minus } from 'lucide-vue-next';
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(() => ({
left: `${x.value}px`,
top: `${y.value}px`,
width: props.width ? `${props.width}px` : '600px',
}))
// Check if device is mobile
const checkMobile = () => {
if (typeof window !== 'undefined') {
isMobile.value = window.innerWidth < 768
}
}
const contentStyle = computed(() => ({
height: props.height ? `${props.height}px` : '400px',
}))
const windowStyle = computed(() => {
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
dragStartY.value = e.clientY - y.value
const clientX = 'touches' in e ? e.touches[0]!.clientX : e.clientX
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) => {
if (!isDragging.value) return
const onDrag = (e: MouseEvent | TouchEvent) => {
if (!isDragging.value || isMobile.value) return
x.value = e.clientX - dragStartX.value
y.value = e.clientY - dragStartY.value
const clientX = 'touches' in e ? e.touches[0]!.clientX : e.clientX
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>

124
app/pages/desktop.vue
View File

@@ -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>Start</span>
<span class="text-base md:text-lg">🦐</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'"
@click="activeWindow = 'about'"
:isActive="activeWindow === 'about' && !minimizedWindows.about"
@click="toggleMinimize('about')"
/>
<TaskbarButton
:icon="Briefcase"
label="Projects"
:isOpen="windows.projects"
:isActive="activeWindow === 'projects'"
@click="activeWindow = 'projects'"
:isActive="activeWindow === 'projects' && !minimizedWindows.projects"
@click="toggleMinimize('projects')"
/>
<TaskbarButton
:icon="GraduationCap"
label="Experience"
:isOpen="windows.experience"
:isActive="activeWindow === 'experience'"
@click="activeWindow = 'experience'"
:isActive="activeWindow === 'experience' && !minimizedWindows.experience"
@click="toggleMinimize('experience')"
/>
<TaskbarButton
:icon="Mail"
label="Contact"
:isOpen="windows.contact"
:isActive="activeWindow === 'contact'"
@click="activeWindow = 'contact'"
:isActive="activeWindow === 'contact' && !minimizedWindows.contact"
@click="toggleMinimize('contact')"
/>
<TaskbarButton
:icon="FileText"
label="Blog"
:isOpen="windows.blog"
:isActive="activeWindow === 'blog'"
@click="activeWindow = 'blog'"
:isActive="activeWindow === 'blog' && !minimizedWindows.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