[{"data":1,"prerenderedAt":69},["ShallowReactive",2],{"project:dreamos:en":3,"i-tabler:app-window":62,"i-tabler:radio":65,"i-tabler:language":67},{"slug":4,"name":5,"summary":6,"role":-1,"updateNote":-1,"meta":7,"coverUrl":19,"lang":22,"isFallback":23,"featuredRank":24,"badge":25,"lastActivity":18,"tapeNumber":26,"blocks":27},"dreamos","夢 -ヴェイパーウェーブ- 2.0","A vaporwave-style simulated operating system that presents my résumé and work through a windowed interface.",{"origin":8,"categories":9,"tags":11,"released":18,"cover":19,"links":20},"personal",[10],"frontend",[12,13,14,15,16,17],"nuxt","unocss","pinia","vueuse","animejs","interactjs","2025-09-06","\u002F_nuxt\u002Fcover.BAlcmKfk.webp",{"demo":21},"https:\u002F\u002Fdreamos.net","en",false,0,null,4,[28,43,50,56],{"type":29,"items":30},"features",[31,35,39],{"title":32,"description":33,"icon":34},"Windowed interface","Modeled on how an operating system works: every section is its own window you can interact with.","tabler:app-window",{"title":36,"description":37,"icon":38},"Radio","A music player built on the browser’s native Audio API, with track controls so you can listen while you browse.","tabler:radio",{"title":40,"description":41,"icon":42},"Three languages","The system language switches between Traditional Chinese, Simplified Chinese and English.","tabler:language",{"type":44,"title":45,"problem":46,"solution":48},"challenge","Keeping windows inside the viewport",[47],"Dragging a window means working out its position against the screen edges so it can’t be dragged out of view.",[49],"Used AI to help derive the boundary math and tune the parameters, reducing the risk of calculation errors. interact.js handles the low-level dragging details that are easy to overlook.",{"type":44,"title":51,"problem":52,"solution":54},"Windows misplaced after the browser is resized",[53],"When the browser is resized, windows that aren’t recalculated can’t position themselves correctly at the new size, which causes unpredictable errors while dragging.",[55],"A debounce waits until the user stops resizing, then :key recreates each window centered on screen so the user can drag it back. Users rarely keep resizing, so this is simpler and more reliable than scaling positions proportionally.",{"type":44,"title":57,"problem":58,"solution":60},"Bringing the clicked window to the front",[59],"Like a real operating system, whichever window is clicked should move to the top.",[61],"Track the highest z-index in use and give a clicked window that value plus one. The z-index limit is 2147483647, which normal use will practically never reach.",{"left":24,"top":24,"width":63,"height":63,"rotate":24,"vFlip":23,"hFlip":23,"body":64},24,"\u003Cpath fill=\"none\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M3 7a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2v10a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2zm3 1h.01M9 8h.01\"\u002F>",{"left":24,"top":24,"width":63,"height":63,"rotate":24,"vFlip":23,"hFlip":23,"body":66},"\u003Cpath fill=\"none\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M14 3L4.629 6.749A1 1 0 0 0 4 7.677V19a1 1 0 0 0 1 1h14a1 1 0 0 0 1-1V8a1 1 0 0 0-1-1H4.5M4 12h16M7 12v-2m10 6v.01M13 16v.01\"\u002F>",{"left":24,"top":24,"width":63,"height":63,"rotate":24,"vFlip":23,"hFlip":23,"body":68},"\u003Cg fill=\"none\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\">\u003Cpath d=\"M9 6.371C9 10.789 6.761 13 4 13m0-6.629h7\"\u002F>\u003Cpath d=\"M5 9c0 2.144 2.252 3.908 6 4m1 7l4-9l4 9m-.9-2h-6.2M6.694 3l.793.582\"\u002F>\u003C\u002Fg>",1793948871848]