[{"data":1,"prerenderedAt":343},["ShallowReactive",2],{"content-collection-types":3,"content-project-links":238,"content-project-3d-rotational-cards-scroll":302},{"clients":4,"stacks":126,"roles":201},[5,10,16,21,26,31,36,41,46,51,56,61,66,71,76,81,86,91,96,101,106,111,116,121],{"code":6,"title":7,"logo":8},"ajinomoto","Ajinomoto",{"url":9,"alternativeText":7},"/media/brands/ajinomoto-white.png",{"code":11,"title":12,"logo":13},"asb","Asia School of Business",{"url":14,"alternativeText":15},"/media/brands/asb-white.png","Asia Business School",{"code":17,"title":18,"logo":19},"aff","Asean Football Federation",{"url":20,"alternativeText":18},null,{"code":22,"title":23,"logo":24},"cagamas","Cagamas",{"url":25,"alternativeText":23},"/media/brands/cagamas-white.png",{"code":27,"title":28,"logo":29},"divinestellar","Divine Stellar",{"url":30,"alternativeText":28},"/media/brands/divine-stellar.png",{"code":32,"title":33,"logo":34},"dofd","Democracy of Dreams",{"url":35,"alternativeText":33},"/media/brands/dofd-small-white.png",{"code":37,"title":38,"logo":39},"ecosys","Ecosys",{"url":40,"alternativeText":38},"/media/brands/ecosys-white.png",{"code":42,"title":43,"logo":44},"ecotree-hk","Ecotree Hong Kong",{"url":45,"alternativeText":43},"/media/brands/ecotree-hk-white.svg",{"code":47,"title":48,"logo":49},"eureka-efektif","Eureka Efektif",{"url":20,"alternativeText":50},"Eureke Efektif",{"code":52,"title":53,"logo":54},"flexcare","Flexcare",{"url":55,"alternativeText":53},"/media/brands/flexcare-white.png",{"code":57,"title":58,"logo":59},"gogoco","Gogoco",{"url":60,"alternativeText":58},"/media/brands/gogoco-white.png",{"code":62,"title":63,"logo":64},"ioi","IOI",{"url":65,"alternativeText":63},"/media/brands/ioi-group-white.png",{"code":67,"title":68,"logo":69},"ioi-pg","IOI Palm Garden Golf",{"url":70,"alternativeText":68},"/media/brands/ioi-pg-white.png",{"code":72,"title":73,"logo":74},"jugo","Júgo",{"url":75,"alternativeText":73},"/media/brands/jugo-white.svg",{"code":77,"title":78,"logo":79},"kirin","Kirin",{"url":80,"alternativeText":78},"/media/brands/kirin-white.png",{"code":82,"title":83,"logo":84},"mkjr","MKJR",{"url":85,"alternativeText":83},"/media/brands/mkjr-white.png",{"code":87,"title":88,"logo":89},"mypower","MyPower",{"url":90,"alternativeText":88},"/media/brands/mypower-white.png",{"code":92,"title":93,"logo":94},"ncer","NCER",{"url":95,"alternativeText":93},"/media/brands/ncer-white.png",{"code":97,"title":98,"logo":99},"ock","OCK",{"url":100,"alternativeText":98},"/media/brands/ock-white.png",{"code":102,"title":103,"logo":104},"sanki","Sanki",{"url":105,"alternativeText":103},"/media/brands/sanki-white.png",{"code":107,"title":108,"logo":109},"silcotech","Silcotech",{"url":110,"alternativeText":108},"/media/brands/silcotech.png",{"code":112,"title":113,"logo":114},"ssg","Sincere Surgery Group",{"url":115,"alternativeText":113},"/media/brands/sincere-surgery-white.png",{"code":117,"title":118,"logo":119},"thp","Teh Hong Piow Foundation",{"url":120,"alternativeText":118},"/media/brands/thp-white.svg",{"code":122,"title":123,"logo":124},"xenergi","Xenergi",{"url":125,"alternativeText":123},"/media/brands/xenergi-white.png",[127,132,137,142,146,151,156,161,166,171,176,181,186,191,196],{"code":128,"title":129,"logo":130},"nuxt","Nuxt",{"url":131,"alternativeText":20},"https://healing-morning-3f30c21d5e.media.strapiapp.com/nuxt_primary_c5bd311103.png",{"code":133,"title":134,"logo":135},"strapi","Strapi",{"url":136,"alternativeText":20},"https://healing-morning-3f30c21d5e.media.strapiapp.com/strapi_primary_9fe205414a.png",{"code":138,"title":139,"logo":140},"laravel","Laravel",{"url":141,"alternativeText":20},"https://healing-morning-3f30c21d5e.media.strapiapp.com/laravel_primary_5e19864cce.png",{"code":143,"title":144,"logo":145},"cpanel","CPanel",{"url":141,"alternativeText":20},{"code":147,"title":148,"logo":149},"bootstrap","Bootstrap",{"url":150,"alternativeText":20},"https://healing-morning-3f30c21d5e.media.strapiapp.com/bootstrap_e819dbf9ab.png",{"code":152,"title":153,"logo":154},"cpp","C++",{"url":155,"alternativeText":20},"https://healing-morning-3f30c21d5e.media.strapiapp.com/c_311cf4ed37.png",{"code":157,"title":158,"logo":159},"css","CSS",{"url":160,"alternativeText":20},"https://healing-morning-3f30c21d5e.media.strapiapp.com/css3_8a9e7d7c12.png",{"code":162,"title":163,"logo":164},"figma","Figma",{"url":165,"alternativeText":20},"https://healing-morning-3f30c21d5e.media.strapiapp.com/figma_8b3b6e5c3a.png",{"code":167,"title":168,"logo":169},"html","HTML",{"url":170,"alternativeText":20},"https://healing-morning-3f30c21d5e.media.strapiapp.com/html5_4337343270.png",{"code":172,"title":173,"logo":174},"solidworks","Solidworks",{"url":175,"alternativeText":20},"https://healing-morning-3f30c21d5e.media.strapiapp.com/solidworks_7016472005.png",{"code":177,"title":178,"logo":179},"material-ui","Material UI",{"url":180,"alternativeText":20},"https://healing-morning-3f30c21d5e.media.strapiapp.com/mui_43438b7fb1.png",{"code":182,"title":183,"logo":184},"react","React",{"url":185,"alternativeText":20},"https://healing-morning-3f30c21d5e.media.strapiapp.com/react_3426e9ede2.png",{"code":187,"title":188,"logo":189},"studio","Stud.io",{"url":190,"alternativeText":20},"https://healing-morning-3f30c21d5e.media.strapiapp.com/stud_io_22172dc0ac.png",{"code":192,"title":193,"logo":194},"javascript","Javascript",{"url":195,"alternativeText":20},"https://healing-morning-3f30c21d5e.media.strapiapp.com/javascript_bd2ef6cb10.png",{"code":197,"title":198,"logo":199},"tailwind","Tailwind",{"url":200,"alternativeText":20},"https://healing-morning-3f30c21d5e.media.strapiapp.com/tailwind_ff011b41ff.png",[202,205,208,211,214,217,220,223,226,229,232,235],{"code":203,"title":204},"frontend-cms-dev","Frontend & CMS Dev",{"code":206,"title":207},"frontend-backend-dev","Frontend & Backend Dev",{"code":209,"title":210},"frontend-dev","Frontend Developer",{"code":212,"title":213},"cms-dev","CMS Developer",{"code":215,"title":216},"backend-dev","Backend Developer",{"code":218,"title":219},"fullstack-dev","Fullstack Developer",{"code":221,"title":222},"maintenance","Maintenance",{"code":224,"title":225},"ui-ux","UI/UX",{"code":227,"title":228},"builder","Builder",{"code":230,"title":231},"project-lead","Project Lead",{"code":233,"title":234},"developer","Developer",{"code":236,"title":237},"researcher","Researcher",[239,242,243,245,246,247,248,251,254,257,260,263,266,268,269,272,275,278,279,280,281,284,285,287,290,293,296,299],{"slug":87,"title":240,"isArchived":241},"MyPOWER",false,{"slug":77,"title":78,"isArchived":241},{"slug":72,"title":244,"isArchived":241},"Jugo",{"slug":102,"title":103,"isArchived":241},{"slug":117,"title":118,"isArchived":241},{"slug":37,"title":38,"isArchived":241},{"slug":249,"title":250,"isArchived":241},"3d-rotational-cards-scroll","3D Rotational Cards Scroll",{"slug":252,"title":253,"isArchived":241},"cagamas-scholarship-portal","Scholarship Portal",{"slug":255,"title":256,"isArchived":241},"cagamas-ssbt","Cagamas SSBT",{"slug":258,"title":259,"isArchived":241},"portfolio-2026","Portfolio 2026",{"slug":261,"title":262,"isArchived":241},"letter-wedding-digital-invite","Letter Themed Digital Invite",{"slug":264,"title":265,"isArchived":241},"bento-themed-digital-invite","Bento Themed Digital Invite",{"slug":267,"title":33,"isArchived":241},"democracy-of-dreams",{"slug":47,"title":48,"isArchived":241},{"slug":270,"title":271,"isArchived":241},"cagamas-srp","Cagamas SRP",{"slug":273,"title":274,"isArchived":241},"ioi-group","IOI Group",{"slug":276,"title":277,"isArchived":241},"sincere-surgery","Sincere Surgery",{"slug":57,"title":58,"isArchived":241},{"slug":82,"title":83,"isArchived":241},{"slug":107,"title":108,"isArchived":241},{"slug":282,"title":283,"isArchived":241},"cagamas-whistleblowing-form","Cagamas Whistleblowing Form",{"slug":122,"title":123,"isArchived":241},{"slug":286,"title":68,"isArchived":241},"ioi-palm-garden-golf",{"slug":288,"title":289,"isArchived":241},"ecotree-hotel-hk","Ecotree Hotel HK",{"slug":291,"title":292,"isArchived":241},"asb-executive-education","ASB Executive Education",{"slug":294,"title":295,"isArchived":241},"portfolio-2024","Portfolio 2024",{"slug":297,"title":298,"isArchived":241},"news-dashboard","News Dashboard",{"slug":300,"title":301,"isArchived":241},"food-webapp","Food Webapp",{"id":303,"title":250,"_incomplete":20,"agency":20,"buttons":20,"category":304,"client":20,"contents":305,"createdAt":20,"date":312,"description":313,"extension":314,"isArchived":241,"meta":315,"publishedAt":20,"rarity_star":319,"roles":335,"slug":249,"specialEffect":20,"stacks":336,"stem":337,"summary":318,"thumbnail_image":338,"types":339,"updatedAt":20,"url":20,"__hash__":342},"projects/projects/ux-3d-rotational-cards-scroll.json",{"title":225,"slug":224},[306],{"__component":307,"title":20,"description":20,"images":308,"videos":309},"partial.content-intro",[],[310],{"url":311,"alternativeText":20},"/media/projects/video-demos/3D-Rotational-Cards.webm","2026-06-15","\u003Cp data-start=\"5996\" data-end=\"6139\">An experimental UI component designed for this portfolio — featuring a 3D rotational scroll interaction inspired by card-based game interfaces.\u003C/p>\u003Cp data-start=\"5996\" data-end=\"6139\"> \u003C/p>\u003Cp>\u003Cvideo class=\"video\" width=\"100%\" controls=\"\" autoplay=\"\" muted=\"\" loop=\"\">\u003Csource src=\"/media/projects/video-demos/3D-Rotational-Cards.webm\" type=\"video/webm\">\u003C/video>\u003C/p>\u003Cp> \u003C/p>\u003Ch3 data-section-id=\"1lgcq4j\" data-start=\"6168\" data-end=\"6186\">What I Built\u003C/h3>\u003Cp data-start=\"6187\" data-end=\"6288\">I developed a CSS-based rotational system where cards move in a circular/3D axis as the user scrolls.\u003C/p>\u003Cp data-start=\"6290\" data-end=\"6306\">The goal was to:\u003C/p>\u003Cul data-start=\"6307\" data-end=\"6396\">\u003Cli data-section-id=\"ejrl99\" data-start=\"6307\" data-end=\"6347\">create a dynamic browsing experience\u003C/li>\u003Cli data-section-id=\"uq89nm\" data-start=\"6348\" data-end=\"6396\">match the “card game” theme of the portfolio\u003C/li>\u003C/ul>\u003Cp> \u003C/p>\u003Ch3 data-section-id=\"qkox2m\" data-start=\"6403\" data-end=\"6435\">What Needs To Improve\u003C/h3>\u003Cp data-start=\"6470\" data-end=\"6503\">Some area I found I can improve and focus on later are:\u003C/p>\u003Cul data-start=\"6505\" data-end=\"6700\">\u003Cli data-section-id=\"87vxp9\" data-start=\"6505\" data-end=\"6560\">it conflicted with the overall minimal UX direction\u003C/li>\u003Cli data-section-id=\"1e8xsld\" data-start=\"6561\" data-end=\"6598\">it reduced readability of content\u003C/li>\u003Cli data-section-id=\"1rhferr\" data-start=\"6599\" data-end=\"6644\">it clashed with the card flip interaction\u003C/li>\u003Cli data-section-id=\"1scmhrz\" data-start=\"6645\" data-end=\"6700\">it lacked interaction control (CSS-only limitation)\u003C/li>\u003C/ul>\u003Cp data-start=\"6864\" data-end=\"6887\"> \u003C/p>\u003Ch3 data-section-id=\"mlm2cg\" data-start=\"6894\" data-end=\"6907\">Insight\u003C/h3>\u003Cp data-start=\"6908\" data-end=\"6986\">Good design isn’t just what you build —\u003Cbr>it’s what you’re willing to \u003Cstrong data-start=\"6978\" data-end=\"6985\">improvise\u003C/strong>.\u003C/p>","json",{"path":316,"body":317},"/projects/ux-3d-rotational-cards-scroll",{"title":250,"slug":249,"summary":318,"url":20,"isArchived":241,"rarity_star":319,"client":20,"agency":20,"date":312,"description":313,"thumbnail_image":320,"category":322,"types":323,"stacks":328,"roles":329,"contents":330},"A game-inspired rotational card browsing system. Explored immersive card-based navigation concepts while critically evaluating usability, readability, and interaction balance.",5,{"url":321,"alternativeText":20},"/media/projects/thumbnails/3d-rotational-card.png",{"title":225,"slug":224},[324,327],{"title":325,"slug":326},"Dev","dev",{"title":225,"slug":224},[157],[209],[331],{"__component":307,"title":20,"description":20,"images":332,"videos":333},[],[334],{"url":311,"alternativeText":20},[209],[157],"projects/ux-3d-rotational-cards-scroll",{"url":321,"alternativeText":20},[340,341],{"title":325,"slug":326},{"title":225,"slug":224},"tFm1TxMI-fl1kXK7KH_RjFpgDwxKzsVyyjYhht_eNDg",1791727488532]