[{"data":1,"prerenderedAt":1800},["ShallowReactive",2],{"navigation":3,"navigation-footer":57,"page-/archive":86,"content-projects":131,"content-collection-types":1613},{"id":4,"email":5,"extension":6,"main_navigations":7,"meta":25,"social_media_links":51,"stem":55,"__hash__":56},"navigation/menus/navigation.json","aneissofea@gmail.com","json",[8,13,17,21],{"label":9,"url":10,"open_link_in_new_tab":11,"items":12},"Home","/",null,[],{"label":14,"url":15,"open_link_in_new_tab":11,"items":16},"About","/#about",[],{"label":18,"url":19,"open_link_in_new_tab":11,"items":20},"Archive","/archive",[],{"label":22,"url":23,"open_link_in_new_tab":11,"items":24},"Contact","#contact",[],{"path":26,"body":27,"title":50},"/menus/navigation",{"email":5,"main_navigations":28,"social_media_links":37},[29,31,33,35],{"label":9,"url":10,"open_link_in_new_tab":11,"items":30},[],{"label":14,"url":15,"open_link_in_new_tab":11,"items":32},[],{"label":18,"url":19,"open_link_in_new_tab":11,"items":34},[],{"label":22,"url":23,"open_link_in_new_tab":11,"items":36},[],[38,42,46],{"label":39,"link":40,"icon":41},"Email","mailto:aneissofea@gmail.com","pi pi-envelope",{"label":43,"link":44,"icon":45},"Github","https://github.com/aneissofea","pi pi-github",{"label":47,"link":48,"icon":49},"Linkedin","https://www.linkedin.com/in/aneis-sofea/","pi pi-linkedin","Navigation",[52,53,54],{"label":39,"link":40,"icon":41},{"label":43,"link":44,"icon":45},{"label":47,"link":48,"icon":49},"menus/navigation","SGdzQkQuxdORDGmp3ibRY1Q_mGfakyHeTKHEuAho8Ds",{"id":4,"email":5,"extension":6,"main_navigations":58,"meta":67,"social_media_links":82,"stem":55,"__hash__":56},[59,61,63,65],{"label":9,"url":10,"open_link_in_new_tab":11,"items":60},[],{"label":14,"url":15,"open_link_in_new_tab":11,"items":62},[],{"label":18,"url":19,"open_link_in_new_tab":11,"items":64},[],{"label":22,"url":23,"open_link_in_new_tab":11,"items":66},[],{"path":26,"body":68,"title":50},{"email":5,"main_navigations":69,"social_media_links":78},[70,72,74,76],{"label":9,"url":10,"open_link_in_new_tab":11,"items":71},[],{"label":14,"url":15,"open_link_in_new_tab":11,"items":73},[],{"label":18,"url":19,"open_link_in_new_tab":11,"items":75},[],{"label":22,"url":23,"open_link_in_new_tab":11,"items":77},[],[79,80,81],{"label":39,"link":40,"icon":41},{"label":43,"link":44,"icon":45},{"label":47,"link":48,"icon":49},[83,84,85],{"label":39,"link":40,"icon":41},{"label":43,"link":44,"icon":45},{"label":47,"link":48,"icon":49},{"id":87,"title":18,"body":88,"description":11,"extension":6,"meta":117,"meta_description":90,"meta_title":89,"navigation":118,"path":19,"sections":119,"seo":128,"seo_settings":11,"stem":129,"__hash__":130},"pages/pages/archive.json",{"title":18,"path":19,"meta_title":89,"meta_description":90,"sections":91},"Archive — Aneis Sofea","An archive of digital artifacts ranging from large-scale production environments to granular interface experiments. Built with a focus on motion, utility, and visual precision.",[92,99,104],{"__component":93,"theme":94,"sectionId":95,"title":96,"description":97,"buttons":98},"section.page-banner","smoke","banner","ARCHIVES","\u003Cp>An archive of digital artifacts ranging from large-scale production environments to granular interface experiments. Built with a focus on motion, utility, and visual precision.\u003C/p>",[],{"__component":100,"theme":94,"sectionId":101,"listing":102,"title":11,"description":11,"buttons":103},"section.search-listing","archive","Projects",[],{"__component":105,"sectionId":106,"theme":94,"variant":107,"headline":11,"title":108,"description":109,"items":110},"section.contact-form","contact","Default","READY TO START THE NEXT ARCHIVE?","\u003Cp>Hiring for a remote frontend or CMS role? Tell me about the team, the work and the timeline.\u003C/p>",[111,114],{"label":112,"sublabel":113},"Availability","Open to remote agency roles",{"label":115,"sublabel":116},"Engagement","Contract · Full-time",{},true,[120,122,124],{"__component":93,"theme":94,"sectionId":95,"title":96,"description":97,"buttons":121},[],{"__component":100,"theme":94,"sectionId":101,"listing":102,"title":11,"description":11,"buttons":123},[],{"__component":105,"sectionId":106,"theme":94,"variant":107,"headline":11,"title":108,"description":109,"items":125},[126,127],{"label":112,"sublabel":113},{"label":115,"sublabel":116},{"title":18},"pages/archive","ebODXEkznuG4TaRyZFgQcFa198yECdBlhPntvzVd-3M",[132,203,256,312,362,413,472,514,589,647,689,725,764,842,895,947,1000,1058,1109,1159,1211,1272,1330,1385,1427,1497,1537,1578],{"id":133,"title":134,"_incomplete":11,"agency":135,"buttons":11,"category":136,"client":139,"contents":140,"createdAt":11,"date":161,"description":11,"extension":6,"isArchived":162,"meta":163,"publishedAt":11,"rarity_star":11,"roles":196,"slug":139,"specialEffect":11,"stacks":197,"stem":198,"summary":166,"thumbnail_image":199,"types":200,"updatedAt":11,"url":167,"__hash__":202},"projects/projects/mypower.json","MyPOWER","Orangesoft",{"title":137,"slug":138},"Corporate","corporate","mypower",[141,147,156],{"__component":142,"title":11,"description":11,"images":143,"videos":144},"partial.content-intro",[],[145],{"url":146,"alternativeText":11},"/media/projects/stocks/mypower/mypower-banner.mov",{"__component":142,"title":11,"description":11,"images":148,"videos":151},[149],{"url":150,"alternativeText":11},"/media/projects/stocks/mypower/mypower-programme.png",[152,154],{"url":153,"alternativeText":11},"/media/projects/stocks/mypower/mypower-slider.mov",{"url":155,"alternativeText":11},"/media/projects/stocks/mypower/mypower-marquee.mov",{"__component":142,"title":11,"description":11,"images":157,"videos":160},[158],{"url":159,"alternativeText":11},"/media/projects/stocks/mypower/mypower-cta.png",[],"2026-09-30",false,{"path":164,"body":165},"/projects/mypower",{"title":134,"slug":139,"summary":166,"url":167,"isArchived":162,"rarity_star":11,"client":139,"agency":135,"date":161,"description":11,"thumbnail_image":168,"category":170,"types":171,"stacks":175,"roles":178,"contents":181},"Malaysian government agency under PETRA leading electricity industry reform and nuclear energy planning. Site presents its programmes, mandate, and stakeholder partnerships shaping the nation's energy future.","https://www.mypower.gov.my/",{"url":169,"alternativeText":11},"/media/projects/thumbnails/mypower.webp",{"title":137,"slug":138},[172],{"title":173,"slug":174},"Work","work",[176,177],"nuxt","strapi",[179,180],"frontend-dev","cms-dev",[182,186,192],{"__component":142,"title":11,"description":11,"images":183,"videos":184},[],[185],{"url":146,"alternativeText":11},{"__component":142,"title":11,"description":11,"images":187,"videos":189},[188],{"url":150,"alternativeText":11},[190,191],{"url":153,"alternativeText":11},{"url":155,"alternativeText":11},{"__component":142,"title":11,"description":11,"images":193,"videos":195},[194],{"url":159,"alternativeText":11},[],[179,180],[176,177],"projects/mypower",{"url":169,"alternativeText":11},[201],{"title":173,"slug":174},"kBP83vMb5dHk_bSPGriv1ElOgESMYkoD9_Rto6Z1GP0",{"id":204,"title":205,"_incomplete":11,"agency":135,"buttons":11,"category":206,"client":207,"contents":208,"createdAt":11,"date":223,"description":224,"extension":6,"isArchived":162,"meta":225,"publishedAt":11,"rarity_star":230,"roles":249,"slug":207,"specialEffect":11,"stacks":250,"stem":251,"summary":228,"thumbnail_image":252,"types":253,"updatedAt":11,"url":229,"__hash__":255},"projects/projects/kirin.json","Kirin",{"title":137,"slug":138},"kirin",[209,214],{"__component":142,"title":11,"description":11,"images":210,"videos":211},[],[212],{"url":213,"alternativeText":11},"/media/projects/stocks/kirin/kirin-megamenu.mov",{"__component":142,"title":11,"description":11,"images":215,"videos":220},[216,218],{"url":217,"alternativeText":11},"/media/projects/stocks/kirin/kirin-counter.png",{"url":219,"alternativeText":11},"/media/projects/stocks/kirin/kirin-products.png",[221],{"url":222,"alternativeText":11},"/media/projects/stocks/kirin/kirin-product-selected.mov","2026-09-01","\u003Cp>A brand platform for Kirin Brewery built to serve several countries from a single site, where the market a visitor selects determines the content they see.\u003C/p>\u003Cp> \u003C/p>\u003Ch3>What Makes This Different\u003C/h3>\u003Cp>This isn't a translated site. Selecting a country swaps the \u003Cstrong>content itself\u003C/strong> — each market has its own products, campaigns and pages, so the same route can present entirely different material depending on where the visitor is.\u003C/p>\u003Cp> \u003C/p>\u003Ch3>Special Context\u003C/h3>\u003Cp>Two requirements shaped the build:\u003C/p>\u003Cul>\u003Cli>age verification gating entry to the site, as required for alcohol brands\u003C/li>\u003Cli>country selection driving which content set is served from that point on\u003C/li>\u003C/ul>\u003Cp>Both sit at the very start of the journey, before any page renders, so the content structure had to resolve the market first and the page second.\u003C/p>\u003Cp> \u003C/p>\u003Ch3>Insight\u003C/h3>\u003Cp>When one platform serves many markets, the hard part isn't the switch —\u003Cbr>it's \u003Cstrong>keeping every market consistent while letting each one differ\u003C/strong>.\u003C/p>",{"path":226,"body":227},"/projects/kirin",{"title":205,"slug":207,"summary":228,"url":229,"isArchived":162,"rarity_star":230,"client":207,"agency":135,"date":223,"description":224,"thumbnail_image":231,"category":233,"types":234,"stacks":236,"roles":237,"contents":238},"Regional arm of Japanese beverage giant Kirin. Site showcases its beer, RTD, and whisky products, distributor network, and sustainability commitments across Southeast Asia.","https://www.kirin-sea.com",4,{"url":232,"alternativeText":11},"/media/projects/thumbnails/kirin.webp",{"title":137,"slug":138},[235],{"title":173,"slug":174},[176],[179,180],[239,243],{"__component":142,"title":11,"description":11,"images":240,"videos":241},[],[242],{"url":213,"alternativeText":11},{"__component":142,"title":11,"description":11,"images":244,"videos":247},[245,246],{"url":217,"alternativeText":11},{"url":219,"alternativeText":11},[248],{"url":222,"alternativeText":11},[179,180],[176],"projects/kirin",{"url":232,"alternativeText":11},[254],{"title":173,"slug":174},"Af9im1VgEQ14-IdLaofFa2ZpJxIl9CU9htbpTbhKDHY",{"id":257,"title":258,"_incomplete":11,"agency":11,"buttons":259,"category":267,"client":270,"contents":271,"createdAt":11,"date":281,"description":11,"extension":6,"isArchived":162,"meta":282,"publishedAt":11,"rarity_star":11,"roles":305,"slug":270,"specialEffect":11,"stacks":306,"stem":307,"summary":285,"thumbnail_image":308,"types":309,"updatedAt":11,"url":11,"__hash__":311},"projects/projects/jugo.json","Jugo",[260],{"label":261,"url":262,"target":263,"style":264,"icon":265,"iconPos":266},"Visit Social Media","https://www.instagram.com/jugo.my","_blank","Secondary","pi pi-arrow-up-right","right",{"title":268,"slug":269},"Branding","branding","jugo",[272],{"__component":142,"title":11,"description":11,"images":273,"videos":280},[274,276,278],{"url":275,"alternativeText":11},"/media/projects/stocks/jugo/jugo-poster.png",{"url":277,"alternativeText":11},"/media/projects/stocks/jugo/jugo-color-palette.png",{"url":279,"alternativeText":11},"/media/projects/stocks/jugo/jugo-A1.png",[],"2026-08-01",{"path":283,"body":284},"/projects/jugo",{"title":258,"slug":270,"summary":285,"url":11,"isArchived":162,"rarity_star":11,"client":270,"agency":11,"date":281,"description":11,"thumbnail_image":286,"category":288,"types":289,"stacks":293,"roles":295,"buttons":296,"contents":298},"Fresh-pressed juice startup. Crafted the full brand identity and social presence, translating its fresh, natural product into a vibrant visual language.",{"url":287,"alternativeText":11},"/media/projects/thumbnails/jugo.webp",{"title":268,"slug":269},[290],{"title":291,"slug":292},"UI/UX","ui-ux",[294],"figma",[292],[297],{"label":261,"url":262,"target":263,"style":264,"icon":265,"iconPos":266},[299],{"__component":142,"title":11,"description":11,"images":300,"videos":304},[301,302,303],{"url":275,"alternativeText":11},{"url":277,"alternativeText":11},{"url":279,"alternativeText":11},[],[292],[294],"projects/jugo",{"url":287,"alternativeText":11},[310],{"title":291,"slug":292},"1agq1m9dEZzpzNvObNzl_5ivxhYHtsNaQgrr665xMmk",{"id":313,"title":314,"_incomplete":11,"agency":135,"buttons":11,"category":315,"client":316,"contents":317,"createdAt":11,"date":281,"description":11,"extension":6,"isArchived":162,"meta":332,"publishedAt":11,"rarity_star":11,"roles":355,"slug":316,"specialEffect":11,"stacks":356,"stem":357,"summary":335,"thumbnail_image":358,"types":359,"updatedAt":11,"url":336,"__hash__":361},"projects/projects/sanki.json","Sanki",{"title":137,"slug":138},"sanki",[318,325],{"__component":142,"title":11,"description":11,"images":319,"videos":320},[],[321,323],{"url":322,"alternativeText":11},"/media/projects/stocks/sanki/sanki-header.mov",{"url":324,"alternativeText":11},"/media/projects/stocks/sanki/sanki-slider-image.mov",{"__component":142,"title":11,"description":11,"images":326,"videos":331},[327,329],{"url":328,"alternativeText":11},"/media/projects/stocks/sanki/sanki-accordion-image.png",{"url":330,"alternativeText":11},"/media/projects/stocks/sanki/sanki-contact-form.png",[],{"path":333,"body":334},"/projects/sanki",{"title":314,"slug":316,"summary":335,"url":336,"isArchived":162,"rarity_star":11,"client":316,"agency":135,"date":281,"description":11,"thumbnail_image":337,"category":339,"types":340,"stacks":342,"roles":343,"contents":344},"Malaysian structural steel contractor since 1974. Site highlights engineering, fabrication, and erection capabilities, facilities, and project portfolio across industrial, infrastructure, and commercial sectors.","https://sanki.com.my/",{"url":338,"alternativeText":11},"/media/projects/thumbnails/sanki.webp",{"title":137,"slug":138},[341],{"title":173,"slug":174},[176,177],[179,180],[345,350],{"__component":142,"title":11,"description":11,"images":346,"videos":347},[],[348,349],{"url":322,"alternativeText":11},{"url":324,"alternativeText":11},{"__component":142,"title":11,"description":11,"images":351,"videos":354},[352,353],{"url":328,"alternativeText":11},{"url":330,"alternativeText":11},[],[179,180],[176,177],"projects/sanki",{"url":338,"alternativeText":11},[360],{"title":173,"slug":174},"0zZJlQGIFIiRA3-KHubjETZn4ukxSNu0O2o2CfHYNzY",{"id":363,"title":364,"_incomplete":11,"agency":135,"buttons":11,"category":365,"client":366,"contents":367,"createdAt":11,"date":382,"description":11,"extension":6,"isArchived":162,"meta":383,"publishedAt":11,"rarity_star":11,"roles":406,"slug":366,"specialEffect":11,"stacks":407,"stem":408,"summary":386,"thumbnail_image":409,"types":410,"updatedAt":11,"url":387,"__hash__":412},"projects/projects/thp.json","Teh Hong Piow Foundation",{"title":137,"slug":138},"thp",[368,375],{"__component":142,"title":11,"description":11,"images":369,"videos":370},[],[371,373],{"url":372,"alternativeText":11},"/media/projects/stocks/thp/thp-marquee.webm",{"url":374,"alternativeText":11},"/media/projects/stocks/thp/thp-time-slider.mov",{"__component":142,"title":11,"description":11,"images":376,"videos":379},[377],{"url":378,"alternativeText":11},"/media/projects/stocks/thp/thp-founder.png",[380],{"url":381,"alternativeText":11},"/media/projects/stocks/thp/thp-component-1.webm","2026-07-30",{"path":384,"body":385},"/projects/thp",{"title":364,"slug":366,"summary":386,"url":387,"isArchived":162,"rarity_star":11,"client":366,"agency":135,"date":382,"description":11,"thumbnail_image":388,"category":390,"types":391,"stacks":393,"roles":394,"contents":395},"Charitable foundation honouring Public Bank founder Teh Hong Piow. Site details its education, healthcare, and welfare initiatives guided by integrity, discipline, humility, and service.","https://www.thpfoundation.com",{"url":389,"alternativeText":11},"/media/projects/thumbnails/thpfoundation.webp",{"title":137,"slug":138},[392],{"title":173,"slug":174},[176,177],[180],[396,401],{"__component":142,"title":11,"description":11,"images":397,"videos":398},[],[399,400],{"url":372,"alternativeText":11},{"url":374,"alternativeText":11},{"__component":142,"title":11,"description":11,"images":402,"videos":404},[403],{"url":378,"alternativeText":11},[405],{"url":381,"alternativeText":11},[180],[176,177],"projects/thp",{"url":389,"alternativeText":11},[411],{"title":173,"slug":174},"0KtMIRnNHXJdE5xKXgBhqen77O7EbD5K-MNClYfZdWI",{"id":414,"title":415,"_incomplete":11,"agency":135,"buttons":11,"category":416,"client":417,"contents":418,"createdAt":11,"date":436,"description":437,"extension":6,"isArchived":162,"meta":438,"publishedAt":11,"rarity_star":443,"roles":465,"slug":417,"specialEffect":11,"stacks":466,"stem":467,"summary":441,"thumbnail_image":468,"types":469,"updatedAt":11,"url":442,"__hash__":471},"projects/projects/ecosys.json","Ecosys",{"title":137,"slug":138},"ecosys",[419,424,431],{"__component":142,"title":11,"description":11,"images":420,"videos":421},[],[422],{"url":423,"alternativeText":11},"/media/projects/stocks/ecosys/ecosys-banner.mov",{"__component":142,"title":11,"description":11,"images":425,"videos":428},[426],{"url":427,"alternativeText":11},"/media/projects/stocks/ecosys/ecosys-vision.png",[429],{"url":430,"alternativeText":11},"/media/projects/stocks/ecosys/ecosys-marquee.webm",{"__component":142,"title":11,"description":11,"images":432,"videos":435},[433],{"url":434,"alternativeText":11},"/media/projects/stocks/ecosys/ecosys-cta.png",[],"2026-07-01","\u003Cp data-start=\"4822\" data-end=\"4939\">A corporate website built to present sustainability-driven initiatives and services in a clear and structured format.\u003C/p>\u003Cp> \u003C/p>\u003Ch3 data-section-id=\"17qrq3i\" data-start=\"4946\" data-end=\"4977\">What Makes This Different\u003C/h3>\u003Cp data-start=\"4978\" data-end=\"5100\">The challenge was balancing \u003Cstrong data-start=\"5006\" data-end=\"5046\">informational depth with readability\u003C/strong>, ensuring users can quickly understand key offerings.\u003C/p>\u003Cp> \u003C/p>\u003Ch3 data-section-id=\"1deeg60\" data-start=\"5107\" data-end=\"5128\">Special Context\u003C/h3>\u003Cp data-start=\"5129\" data-end=\"5217\">The CMS allows flexible content updates while maintaining a consistent visual hierarchy.\u003C/p>\u003Cp> \u003C/p>\u003Ch3 data-section-id=\"mlm2cg\" data-start=\"5224\" data-end=\"5237\">Insight\u003C/h3>\u003Cp data-start=\"5238\" data-end=\"5334\">Sustainability messaging is only effective if users can \u003Cstrong data-start=\"5294\" data-end=\"5333\">quickly grasp what actually matters\u003C/strong>.\u003C/p>",{"path":439,"body":440},"/projects/ecosys",{"title":415,"slug":417,"summary":441,"url":442,"isArchived":162,"rarity_star":443,"client":417,"agency":135,"date":436,"description":437,"thumbnail_image":444,"category":446,"types":447,"stacks":449,"roles":450,"contents":451},"Engineering company serving semiconductor and solar industries. Site presents its patented gas abatement systems, ultra-high-purity components, and sustainability-aligned technology solutions.","https://www.ecosysgrp.com/",1,{"url":445,"alternativeText":11},"/media/projects/thumbnails/ecosys.webp",{"title":137,"slug":138},[448],{"title":173,"slug":174},[176,177],[179,180],[452,456,461],{"__component":142,"title":11,"description":11,"images":453,"videos":454},[],[455],{"url":423,"alternativeText":11},{"__component":142,"title":11,"description":11,"images":457,"videos":459},[458],{"url":427,"alternativeText":11},[460],{"url":430,"alternativeText":11},{"__component":142,"title":11,"description":11,"images":462,"videos":464},[463],{"url":434,"alternativeText":11},[],[179,180],[176,177],"projects/ecosys",{"url":445,"alternativeText":11},[470],{"title":173,"slug":174},"UGJpZGegfJMwzpTVmP7EO2wk2jEK66oWfsOaFAqT3fE",{"id":473,"title":474,"_incomplete":11,"agency":11,"buttons":11,"category":475,"client":11,"contents":476,"createdAt":11,"date":482,"description":483,"extension":6,"isArchived":162,"meta":484,"publishedAt":11,"rarity_star":489,"roles":506,"slug":487,"specialEffect":11,"stacks":507,"stem":508,"summary":488,"thumbnail_image":509,"types":510,"updatedAt":11,"url":11,"__hash__":513},"projects/projects/ux-3d-rotational-cards-scroll.json","3D Rotational Cards Scroll",{"title":291,"slug":292},[477],{"__component":142,"title":11,"description":11,"images":478,"videos":479},[],[480],{"url":481,"alternativeText":11},"/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>",{"path":485,"body":486},"/projects/ux-3d-rotational-cards-scroll",{"title":474,"slug":487,"summary":488,"url":11,"isArchived":162,"rarity_star":489,"client":11,"agency":11,"date":482,"description":483,"thumbnail_image":490,"category":492,"types":493,"stacks":498,"roles":500,"contents":501},"3d-rotational-cards-scroll","A game-inspired rotational card browsing system. Explored immersive card-based navigation concepts while critically evaluating usability, readability, and interaction balance.",5,{"url":491,"alternativeText":11},"/media/projects/thumbnails/3d-rotational-card.png",{"title":291,"slug":292},[494,497],{"title":495,"slug":496},"Dev","dev",{"title":291,"slug":292},[499],"css",[179],[502],{"__component":142,"title":11,"description":11,"images":503,"videos":504},[],[505],{"url":481,"alternativeText":11},[179],[499],"projects/ux-3d-rotational-cards-scroll",{"url":491,"alternativeText":11},[511,512],{"title":495,"slug":496},{"title":291,"slug":292},"tFm1TxMI-fl1kXK7KH_RjFpgDwxKzsVyyjYhht_eNDg",{"id":515,"title":516,"_incomplete":11,"agency":135,"buttons":11,"category":517,"client":520,"contents":521,"createdAt":11,"date":550,"description":11,"extension":6,"isArchived":162,"meta":551,"publishedAt":11,"rarity_star":489,"roles":582,"slug":554,"specialEffect":11,"stacks":583,"stem":584,"summary":555,"thumbnail_image":585,"types":586,"updatedAt":11,"url":556,"__hash__":588},"projects/projects/cagamas-scholarship-portal.json","Scholarship Portal",{"title":518,"slug":519},"Web Portal","web-portal","cagamas",[522,527,530,534,538,542,546],{"__component":142,"title":11,"description":11,"images":523,"videos":526},[524],{"url":525,"alternativeText":11},"/media/projects/stocks/cagamas-scholarship/scholarship-banner.png",[],{"__component":142,"title":11,"description":528,"images":529},"\u003Cp>This isn’t just a scholarship website — it’s a \u003Cstrong>two-sided system\u003C/strong> designed to handle real application workflows at scale.\u003C/p>\u003Cp>The platform supports both applicants and internal administrators, each with completely different needs, interfaces, and data interactions — all within a single system.\u003C/p>\u003Cp>\u003Cimg src=\"/media/projects/mockups/scholarship/panel.png\" sizes=\"100vw\" alt=\"image 4.png\" width=\"5572\" height=\"3536\" />\u003C/p>",[],{"__component":142,"title":531,"description":532,"images":533},"What I Built","\u003Cp>I developed the \u003Cstrong>Nuxt frontend layer\u003C/strong> for both the applicant and admin experiences, integrating closely with a \u003Cstrong>Laravel backend\u003C/strong>.\u003C/p>\u003Cp>Instead of treating it like a typical form-based site, I approached it as a \u003Cstrong data-start=\"1046\" data-end=\"1074\">state-driven application\u003C/strong>, where:\u003C/p>\u003Cul>\u003Cli>users don’t lose progress\u003C/li>\u003Cli>admins can process large volumes of data efficiently\u003C/li>\u003Cli>the UI adapts based on role and context\u003C/li>\u003C/ul>",[],{"__component":142,"title":535,"description":536,"images":537},"Key Decisions That Shaped the System","\u003Cp>\u003Cstrong>Designing for Two Completely Different Users\u003C/strong>\u003Cbr>Applicants need clarity and guidance.\u003Cbr>Admins need speed and control.\u003C/p>\u003Cp>I separated concerns at the UI and component level, while keeping a shared architecture underneath — so the system stays maintainable without duplicating logic.\u003C/p>\u003Cp>\u003Cstrong>Turning a Long Form into a Usable Flow\u003C/strong>\u003Cbr>Scholarship applications are naturally long and error-prone.\u003C/p>\u003Cp>Instead of dumping everything into one page, I broke it into a \u003Cstrong>multi-step flow with controlled progression\u003C/strong>, where:\u003C/p>\u003Cul>\u003Cli>each step validates before moving forward\u003C/li>\u003Cli>data persists even if the session is interrupted\u003C/li>\u003Cli>users always know where they are in the process\u003C/li>\u003C/ul>\u003Cimg src=\"/media/projects/mockups/scholarship/panel.png\" alt=\"image 4.png\" sizes=\"100vw\" width=\"5572\" height=\"3536\">\u003Cp>\u003Cstrong>Handling Real Data, Not Just Inputs\u003C/strong>\u003Cbr>This wasn’t just “collect and submit”.\u003C/p>\u003Cp>The form deals with:\u003C/p>\u003Cul>\u003Cli>structured personal + academic data\u003C/li>\u003Cli>document uploads\u003C/li>\u003Cli>conditional inputs depending on user responses\u003C/li>\u003C/ul>\u003Cp>I built reusable form patterns to handle these consistently, instead of hardcoding one-off solutions.\u003C/p>\u003Cp>\u003Cstrong>Admin Experience = Data Navigation, Not Pretty UI\u003C/strong>\u003Cbr>The admin panel is where the real complexity lives.\u003C/p>\u003Cp>I focused on making large datasets usable:\u003C/p>\u003Cul>\u003Cli>filtering and scanning applications quickly\u003C/li>\u003Cli>clear status visibility\u003C/li>\u003Cli>minimizing friction when reviewing entries\u003C/li>\u003C/ul>",[],{"__component":142,"title":539,"description":540,"images":541},"Technical Notes","\u003Cul>\u003Cli>Nuxt-based frontend with modular component structure\u003C/li>\u003Cli>Laravel API integration\u003C/li>\u003Cli>Role-aware rendering (not just route-based protection)\u003C/li>\u003Cli>Persistent form state handling\u003C/li>\u003Cli>Reusable input + validation patterns\u003C/li>\u003C/ul>",[],{"__component":142,"title":543,"description":544,"images":545},"Challenges I Actually Had to Solve","\u003Cp>\u003Cstrong>Keeping Forms Reliable Across Sessions\u003C/strong>\u003Cbr>Multi-step forms tend to break when users refresh or navigate away.\u003C/p>\u003Cp>→ I implemented controlled state persistence so progress isn’t lost mid-way.\u003C/p>\u003Cp>\u003Cstrong>Avoiding “Admin UI Fatigue”\u003C/strong>\u003Cbr>Data-heavy dashboards can easily become slow or overwhelming.\u003C/p>\u003Cp>→ I prioritised clarity and scan-ability over decoration — making the interface fast to use, not just nice to look at.\u003C/p>",[],{"__component":142,"title":547,"description":548,"images":549},"Result","\u003Cp>A system that behaves less like a website and more like a \u003Cstrong>working tool\u003C/strong> — something both applicants and internal teams can rely on without friction.\u003C/p>",[],"2026-06-01",{"path":552,"body":553},"/projects/cagamas-scholarship-portal",{"title":516,"slug":554,"summary":555,"url":556,"isArchived":162,"rarity_star":489,"client":520,"agency":135,"date":550,"thumbnail_image":557,"category":559,"types":560,"stacks":562,"roles":564,"contents":565},"cagamas-scholarship-portal","Scholarship application system supporting applicant and administrator workflows. Designed scalable interfaces for real operational workflows instead of static informational pages.","https://scholarship.cagamas.com.my/",{"url":558,"alternativeText":11},"/media/projects/thumbnails/cagamas-scholarship.webp",{"title":518,"slug":519},[561],{"title":173,"slug":174},[176,563],"laravel",[179],[566,570,572,574,576,578,580],{"__component":142,"title":11,"description":11,"images":567,"videos":569},[568],{"url":525,"alternativeText":11},[],{"__component":142,"title":11,"description":528,"images":571},[],{"__component":142,"title":531,"description":532,"images":573},[],{"__component":142,"title":535,"description":536,"images":575},[],{"__component":142,"title":539,"description":540,"images":577},[],{"__component":142,"title":543,"description":544,"images":579},[],{"__component":142,"title":547,"description":548,"images":581},[],[179],[176,563],"projects/cagamas-scholarship-portal",{"url":558,"alternativeText":11},[587],{"title":173,"slug":174},"neTRs5UeIqamEE7Uy1o4yH9W3zMutZPHxw6LAg_MwUQ",{"id":590,"title":591,"_incomplete":11,"agency":135,"buttons":11,"category":592,"client":520,"contents":593,"createdAt":11,"date":550,"description":11,"extension":6,"isArchived":162,"meta":611,"publishedAt":11,"rarity_star":11,"roles":640,"slug":614,"specialEffect":11,"stacks":641,"stem":642,"summary":615,"thumbnail_image":643,"types":644,"updatedAt":11,"url":616,"__hash__":646},"projects/projects/cagamas-ssbt.json","Cagamas SSBT",{"title":137,"slug":138},[594,599,606],{"__component":142,"title":11,"description":11,"images":595,"videos":596},[],[597],{"url":598,"alternativeText":11},"/media/projects/stocks/ssbt/ssbt-banner.mov",{"__component":142,"title":11,"description":11,"images":600,"videos":603},[601],{"url":602,"alternativeText":11},"/media/projects/stocks/ssbt/ssbt-calculator.png",[604],{"url":605,"alternativeText":11},"/media/projects/stocks/ssbt/ssbt-marquee.webm",{"__component":142,"title":11,"description":11,"images":607,"videos":610},[608],{"url":609,"alternativeText":11},"/media/projects/stocks/ssbt/ssbt-cta.png",[],{"path":612,"body":613},"/projects/cagamas-ssbt",{"title":591,"slug":614,"summary":615,"url":616,"isArchived":162,"rarity_star":11,"client":520,"agency":135,"date":550,"description":11,"thumbnail_image":617,"category":619,"types":620,"stacks":622,"roles":624,"contents":626},"cagamas-ssbt","Retirement financing product by Cagamas, Malaysia's mortgage corporation. Site promotes a reverse-mortgage scheme offering monthly payouts while retaining home ownership, with eligibility tools.","https://ssbt.cagamas.com.my/",{"url":618,"alternativeText":11},"/media/projects/thumbnails/cagamas-ssbt.webp",{"title":137,"slug":138},[621],{"title":173,"slug":174},[176,623],"cpanel",[179,625],"backend-dev",[627,631,636],{"__component":142,"title":11,"description":11,"images":628,"videos":629},[],[630],{"url":598,"alternativeText":11},{"__component":142,"title":11,"description":11,"images":632,"videos":634},[633],{"url":602,"alternativeText":11},[635],{"url":605,"alternativeText":11},{"__component":142,"title":11,"description":11,"images":637,"videos":639},[638],{"url":609,"alternativeText":11},[],[179,625],[176,623],"projects/cagamas-ssbt",{"url":618,"alternativeText":11},[645],{"title":173,"slug":174},"iNTK4uDFPEGe8fw7IukZNbkIpgkRWoEnBqvJLp6BcOM",{"id":648,"title":649,"_incomplete":11,"agency":11,"buttons":11,"category":650,"client":11,"contents":653,"createdAt":11,"date":659,"description":660,"extension":6,"isArchived":162,"meta":661,"publishedAt":11,"rarity_star":666,"roles":681,"slug":664,"specialEffect":11,"stacks":682,"stem":683,"summary":665,"thumbnail_image":684,"types":685,"updatedAt":11,"url":11,"__hash__":688},"projects/projects/portfolio-2026.json","Portfolio 2026",{"title":651,"slug":652},"Frontend Development","frontend-development",[654],{"__component":142,"title":11,"description":11,"images":655,"videos":656},[],[657],{"url":658,"alternativeText":11},"/media/projects/video-demos/Portfolio-2026-demo.webm","2026-05-31","\u003Cp data-start=\"3078\" data-end=\"3241\">A personal playground built with \u003Cstrong data-start=\"3111\" data-end=\"3128\">Nuxt + Strapi\u003C/strong>, focused on exploring interaction, motion, and UX clarity — while still functioning as a professional portfolio.\u003C/p>\u003Cp> \u003C/p>\u003Cp>\u003Cvideo class=\"video\" width=\"100%\" controls=\"\" autoplay=\"\" muted=\"\" loop=\"\">\u003Csource src=\"/media/projects/video-demos/Portfolio-2026-demo.webm\" type=\"video/webm\">\u003C/video>\u003C/p>\u003Ch3 data-section-id=\"ayr0bx\" data-start=\"3248\" data-end=\"3272\">What I’m Exploring\u003C/h3>\u003Cp data-start=\"3273\" data-end=\"3321\">This project is intentionally more experimental:\u003C/p>\u003Cul data-start=\"3323\" data-end=\"3497\">\u003Cli data-section-id=\"1r71cw2\" data-start=\"3323\" data-end=\"3360\">interactive card-based navigation\u003C/li>\u003Cli data-section-id=\"jzwyhk\" data-start=\"3361\" data-end=\"3413\">hover-driven transformations (flip interactions)\u003C/li>\u003Cli data-section-id=\"ypale3\" data-start=\"3414\" data-end=\"3456\">controlled use of motion and animation\u003C/li>\u003Cli data-section-id=\"sx8uvu\" data-start=\"3457\" data-end=\"3497\">structured content for fast scanning\u003C/li>\u003C/ul>\u003Cp data-start=\"3499\" data-end=\"3567\">It’s not about adding effects — it’s about \u003Cstrong data-start=\"3542\" data-end=\"3566\">deciding when not to\u003C/strong>.\u003C/p>\u003Cp> \u003C/p>\u003Ch3 data-section-id=\"17scafv\" data-start=\"3868\" data-end=\"3891\">Design Philosophy\u003C/h3>\u003Cp data-start=\"3892\" data-end=\"3931\">The goal was simple UI, but refined UX:\u003C/p>\u003Cul data-start=\"3933\" data-end=\"4022\">\u003Cli data-section-id=\"7cpwz0\" data-start=\"3933\" data-end=\"3952\">minimal visuals\u003C/li>\u003Cli data-section-id=\"c3xtof\" data-start=\"3953\" data-end=\"3975\">intentional motion\u003C/li>\u003Cli data-section-id=\"16w0jnq\" data-start=\"3976\" data-end=\"3995\">clear hierarchy\u003C/li>\u003Cli data-section-id=\"6y1zwo\" data-start=\"3996\" data-end=\"4022\">reduced cognitive load\u003C/li>\u003C/ul>\u003Cp data-start=\"4024\" data-end=\"4101\">Every interaction is there for a reason — or removed if it doesn’t serve one.\u003C/p>\u003Cp> \u003C/p>\u003Ch3 data-section-id=\"mlm2cg\" data-start=\"4108\" data-end=\"4121\">Insight\u003C/h3>\u003Cp data-start=\"4122\" data-end=\"4207\">Good UX isn’t about how much you add —\u003Cbr>it’s about \u003Cstrong data-start=\"4174\" data-end=\"4207\">what you choose to leave out.\u003C/strong>\u003C/p>",{"path":662,"body":663},"/projects/portfolio-2026",{"title":649,"slug":664,"summary":665,"url":11,"isArchived":162,"rarity_star":666,"client":11,"agency":11,"date":659,"description":660,"thumbnail_image":667,"category":669,"types":670,"stacks":673,"roles":675,"contents":676},"portfolio-2026","A UX-focused portfolio exploring immersive interactions and motion systems.",3,{"url":668,"alternativeText":11},"/media/projects/thumbnails/portfolio-2026.webp",{"title":651,"slug":652},[671,672],{"title":495,"slug":496},{"title":291,"slug":292},[176,177,674],"tailwind",[292,179,180],[677],{"__component":142,"title":11,"description":11,"images":678,"videos":679},[],[680],{"url":658,"alternativeText":11},[292,179,180],[176,177,674],"projects/portfolio-2026",{"url":668,"alternativeText":11},[686,687],{"title":495,"slug":496},{"title":291,"slug":292},"UNwmCIi90OlpWJWir_Vkyl8n4iFzYTjyxtZ1BC34yoQ",{"id":690,"title":691,"_incomplete":11,"agency":11,"buttons":11,"category":692,"client":11,"contents":693,"createdAt":11,"date":699,"description":700,"extension":6,"isArchived":162,"meta":701,"publishedAt":11,"rarity_star":666,"roles":718,"slug":704,"specialEffect":11,"stacks":719,"stem":720,"summary":705,"thumbnail_image":721,"types":722,"updatedAt":11,"url":11,"__hash__":724},"projects/projects/ui-letter-wedding-digital-invite.json","Letter Themed Digital Invite",{"title":291,"slug":292},[694],{"__component":142,"title":11,"description":11,"images":695,"videos":696},[],[697],{"url":698,"alternativeText":11},"/media/projects/video-demos/Letter-Mobile.webm","2026-05-20","\u003Cp>A digital wedding invitation designed around the experience of opening a physical letter.\u003C/p>\u003Cp> \u003C/p>\u003Cp>\u003Cvideo class=\"video\" controls=\"\" width=\"375px\" mute=\"\" autoplay=\"\" loop=\"\">\u003Csource src=\"/media/projects/video-demos/Letter-Mobile.webm\" type=\"video/webm\">\u003C/video>\u003C/p>\u003Ch3 data-section-id=\"yejie\" data-start=\"4402\" data-end=\"4415\">Concept\u003C/h3>\u003Cp data-start=\"4416\" data-end=\"4499\">Instead of presenting information immediately, the interaction follows a narrative:\u003C/p>\u003Col data-start=\"4501\" data-end=\"4571\">\u003Cli data-section-id=\"1bzfq7e\" data-start=\"4501\" data-end=\"4528\">User taps the envelope\u003C/li>\u003Cli data-section-id=\"14v3y4g\" data-start=\"4529\" data-end=\"4546\">Letter opens\u003C/li>\u003Cli data-section-id=\"1214v2b\" data-start=\"4547\" data-end=\"4571\">Content is revealed\u003C/li>\u003C/ol>\u003Cp data-start=\"4573\" data-end=\"4630\">This mimics a real-world action in a digital environment.\u003C/p>\u003Cp> \u003C/p>\u003Ch3 data-section-id=\"1i6nwre\" data-start=\"4637\" data-end=\"4658\">What This Shows\u003C/h3>\u003Cp data-start=\"4659\" data-end=\"4719\">This project focuses on \u003Cstrong data-start=\"4683\" data-end=\"4718\">interaction design over visuals\u003C/strong>:\u003C/p>\u003Cul data-start=\"4721\" data-end=\"4832\">\u003Cli data-section-id=\"1gcjspc\" data-start=\"4721\" data-end=\"4757\">guiding users through a sequence\u003C/li>\u003Cli data-section-id=\"1is2j7p\" data-start=\"4758\" data-end=\"4805\">creating anticipation before content reveal\u003C/li>\u003Cli data-section-id=\"ynzh6j\" data-start=\"4806\" data-end=\"4832\">aligning UX with theme\u003C/li>\u003C/ul>\u003Cp> \u003C/p>\u003Ch3 data-section-id=\"mlm2cg\" data-start=\"4839\" data-end=\"4852\">Insight\u003C/h3>\u003Cp data-start=\"4853\" data-end=\"4984\">Sometimes the experience matters more than the content —\u003Cbr>\u003Cstrong data-start=\"4912\" data-end=\"4984\">how something is revealed can be just as important as what is shown.\u003C/strong>\u003C/p>",{"path":702,"body":703},"/projects/ui-letter-wedding-digital-invite",{"title":691,"slug":704,"summary":705,"url":11,"isArchived":162,"rarity_star":666,"client":11,"agency":11,"date":699,"description":700,"thumbnail_image":706,"category":708,"types":709,"stacks":711,"roles":712,"contents":713},"letter-wedding-digital-invite","A digital invitation designed around opening a physical letter.",{"url":707,"alternativeText":11},"/media/projects/thumbnails/letter-e-invite-mobile.webp",{"title":291,"slug":292},[710],{"title":291,"slug":292},[294],[292],[714],{"__component":142,"title":11,"description":11,"images":715,"videos":716},[],[717],{"url":698,"alternativeText":11},[292],[294],"projects/ui-letter-wedding-digital-invite",{"url":707,"alternativeText":11},[723],{"title":291,"slug":292},"V1TK3btDYmnRAzc1kGSLKy82gWmJZ0RCNDHYt78MaeE",{"id":726,"title":727,"_incomplete":11,"agency":11,"buttons":11,"category":728,"client":11,"contents":729,"createdAt":11,"date":737,"description":738,"extension":6,"isArchived":162,"meta":739,"publishedAt":11,"rarity_star":489,"roles":757,"slug":742,"specialEffect":11,"stacks":758,"stem":759,"summary":743,"thumbnail_image":760,"types":761,"updatedAt":11,"url":11,"__hash__":763},"projects/projects/ui-bento-themed-digital-invite.json","Bento Themed Digital Invite",{"title":291,"slug":292},[730],{"__component":142,"title":11,"description":11,"images":731,"videos":732},[],[733,735],{"url":734,"alternativeText":11},"/media/projects/video-demos/Bento-Desktop.webm",{"url":736,"alternativeText":11},"/media/projects/video-demos/Bento-Mobile.webm","2026-05-15","\u003Cp>A scroll-based wedding invitation designed with a bento-style layout — structured, compartmentalized, and visually balanced across both mobile and desktop.\u003C/p>\u003Cp> \u003C/p>\u003Cp>\u003Cvideo class=\"video\" controls=\"\" width=\"100%\" mute=\"\" autoplay=\"\" loop=\"\">\u003Csource src=\"/media/projects/video-demos/Bento-Desktop.webm\" type=\"video/webm\">\u003C/video>\u003C/p>\u003Cp> \u003C/p>\u003Cp>\u003Cvideo class=\"video\" controls=\"\" width=\"375px\" mute=\"\" autoplay=\"\" loop=\"\">\u003Csource src=\"/media/projects/video-demos/Bento-Mobile.webm\" type=\"video/webm\">\u003C/video>\u003C/p>\u003Cp> \u003C/p>\u003Ch3 data-section-id=\"17qrq3i\" data-start=\"5255\" data-end=\"5286\">What Makes This Different\u003C/h3>\u003Cp data-start=\"5287\" data-end=\"5345\">Most digital invites are mobile-first but neglect desktop.\u003C/p>\u003Cp data-start=\"5347\" data-end=\"5381\">This design intentionally ensures:\u003C/p>\u003Cul data-start=\"5382\" data-end=\"5520\">\u003Cli data-section-id=\"ewhvuv\" data-start=\"5382\" data-end=\"5430\">desktop layout feels complete, not stretched\u003C/li>\u003Cli data-section-id=\"30kjol\" data-start=\"5431\" data-end=\"5480\">content blocks remain structured and readable\u003C/li>\u003Cli data-section-id=\"9zf0m5\" data-start=\"5481\" data-end=\"5520\">scrolling feels guided, not endless\u003C/li>\u003C/ul>\u003Cp> \u003C/p>\u003Ch3 data-section-id=\"1mhymf1\" data-start=\"5527\" data-end=\"5549\">UX Consideration\u003C/h3>\u003Cp data-start=\"5550\" data-end=\"5598\">The layout borrows from bento design principles:\u003C/p>\u003Cul data-start=\"5599\" data-end=\"5662\">\u003Cli data-section-id=\"xwvl0u\" data-start=\"5599\" data-end=\"5617\">clear grouping\u003C/li>\u003Cli data-section-id=\"1u4o22z\" data-start=\"5618\" data-end=\"5638\">visual hierarchy\u003C/li>\u003Cli data-section-id=\"1f2omhk\" data-start=\"5639\" data-end=\"5662\">digestible and repeatable sections\u003C/li>\u003C/ul>\u003Cp> \u003C/p>\u003Ch3 data-section-id=\"mlm2cg\" data-start=\"5669\" data-end=\"5682\">Insight\u003C/h3>\u003Cp data-start=\"5683\" data-end=\"5793\">Responsive design isn’t just about resizing —\u003Cbr>it’s about \u003Cstrong data-start=\"5742\" data-end=\"5793\">rethinking how content behaves across contexts.\u003C/strong>\u003C/p>",{"path":740,"body":741},"/projects/ui-bento-themed-digital-invite",{"title":727,"slug":742,"summary":743,"url":11,"isArchived":162,"rarity_star":489,"client":11,"agency":11,"date":737,"description":738,"thumbnail_image":744,"category":746,"types":747,"stacks":749,"roles":750,"contents":751},"bento-themed-digital-invite","A digital invitation designed with equal emphasis on both mobile and desktop presentation.",{"url":745,"alternativeText":11},"/media/projects/thumbnails/bento-e-invite.webp",{"title":291,"slug":292},[748],{"title":291,"slug":292},[294],[292],[752],{"__component":142,"title":11,"description":11,"images":753,"videos":754},[],[755,756],{"url":734,"alternativeText":11},{"url":736,"alternativeText":11},[292],[294],"projects/ui-bento-themed-digital-invite",{"url":745,"alternativeText":11},[762],{"title":291,"slug":292},"VJi2KHaRrsx9DnSMWzrGfQL4yojuAAaFuwMW0v8dG5s",{"id":765,"title":766,"_incomplete":11,"agency":135,"buttons":11,"category":767,"client":768,"contents":769,"createdAt":11,"date":801,"description":802,"extension":6,"isArchived":162,"meta":803,"publishedAt":11,"rarity_star":230,"roles":835,"slug":806,"specialEffect":11,"stacks":836,"stem":837,"summary":807,"thumbnail_image":838,"types":839,"updatedAt":11,"url":808,"__hash__":841},"projects/projects/democracy-of-dreams.json","Democracy of Dreams",{"title":137,"slug":138},"dofd",[770,776,785,794],{"__component":142,"title":11,"description":771,"images":772,"videos":775},"\u003Cp>A highly flexible content-driven website pushing beyond typical CMS limitations to support customizable UI layouts.\u003C/p>",[773],{"url":774,"alternativeText":11},"/media/projects/stocks/dofd/dofd-banner.png",[],{"__component":142,"title":777,"description":778,"images":779,"videos":784},"What Makes This Different","\u003Cp>Strapi is typically structured and rigid — this project required bending it into a system that allows \u003Cstrong>dynamic, design-driven layouts controlled via CMS\u003C/strong>.\u003C/p>",[780,782],{"url":781,"alternativeText":11},"/media/projects/stocks/dofd/dofd-intro.png",{"url":783,"alternativeText":11},"/media/projects/stocks/dofd/dofd-icon-grid.png",[],{"__component":142,"title":786,"description":787,"images":788,"videos":793},"Special Context","\u003Cp>I engineered the CMS structure to support flexible UI composition, enabling non-developers to control layout variations.\u003C/p>",[789,791],{"url":790,"alternativeText":11},"/media/projects/stocks/dofd/dofd-card.png",{"url":792,"alternativeText":11},"/media/projects/stocks/dofd/dofd-featured-news.png",[],{"__component":142,"title":795,"description":796,"images":797,"videos":800},"Insight","\u003Cp>The real power of a CMS isn’t storing content —\u003Cbr>it’s \u003Cstrong>controlling how that content can be expressed\u003C/strong>.\u003C/p>",[798],{"url":799,"alternativeText":11},"/media/projects/stocks/dofd/dofd-form.png",[],"2026-05-01","\u003Cp data-start=\"5387\" data-end=\"5502\">A highly flexible content-driven website pushing beyond typical CMS limitations to support customizable UI layouts.\u003C/p>\u003Cp> \u003C/p>\u003Ch3 data-section-id=\"17qrq3i\" data-start=\"5509\" data-end=\"5540\">What Makes This Different\u003C/h3>\u003Cp data-start=\"5541\" data-end=\"5697\">Strapi is typically structured and rigid — this project required bending it into a system that allows \u003Cstrong data-start=\"5643\" data-end=\"5696\">dynamic, design-driven layouts controlled via CMS\u003C/strong>.\u003C/p>\u003Cp> \u003C/p>\u003Ch3 data-section-id=\"1deeg60\" data-start=\"5704\" data-end=\"5725\">Special Context\u003C/h3>\u003Cp data-start=\"5726\" data-end=\"5846\">I engineered the CMS structure to support flexible UI composition, enabling non-developers to control layout variations.\u003C/p>\u003Cp> \u003C/p>\u003Ch3 data-section-id=\"mlm2cg\" data-start=\"5853\" data-end=\"5866\">Insight\u003C/h3>\u003Cp data-start=\"5867\" data-end=\"5972\">The real power of a CMS isn’t storing content —\u003Cbr>it’s \u003Cstrong data-start=\"5922\" data-end=\"5971\">controlling how that content can be expressed\u003C/strong>.\u003C/p>",{"path":804,"body":805},"/projects/democracy-of-dreams",{"title":766,"slug":806,"summary":807,"url":808,"isArchived":162,"rarity_star":230,"client":768,"agency":135,"date":801,"description":802,"thumbnail_image":809,"category":811,"types":812,"stacks":814,"roles":815,"contents":816},"democracy-of-dreams","Flexible CMS-powered frontend enabling highly customizable UI composition.","https://www.democracyofdreams.com/",{"url":810,"alternativeText":11},"/media/projects/thumbnails/dofd.webp",{"title":137,"slug":138},[813],{"title":173,"slug":174},[176,177],[179,180],[817,821,826,831],{"__component":142,"title":11,"description":771,"images":818,"videos":820},[819],{"url":774,"alternativeText":11},[],{"__component":142,"title":777,"description":778,"images":822,"videos":825},[823,824],{"url":781,"alternativeText":11},{"url":783,"alternativeText":11},[],{"__component":142,"title":786,"description":787,"images":827,"videos":830},[828,829],{"url":790,"alternativeText":11},{"url":792,"alternativeText":11},[],{"__component":142,"title":795,"description":796,"images":832,"videos":834},[833],{"url":799,"alternativeText":11},[],[179,180],[176,177],"projects/democracy-of-dreams",{"url":810,"alternativeText":11},[840],{"title":173,"slug":174},"O2_AePypVgIoA1jYAIHkS6Tg-CEbyBp0qDZgncn3dwU",{"id":843,"title":844,"_incomplete":11,"agency":135,"buttons":11,"category":845,"client":846,"contents":847,"createdAt":11,"date":801,"description":11,"extension":6,"isArchived":162,"meta":864,"publishedAt":11,"rarity_star":11,"roles":888,"slug":846,"specialEffect":11,"stacks":889,"stem":890,"summary":867,"thumbnail_image":891,"types":892,"updatedAt":11,"url":868,"__hash__":894},"projects/projects/eureka-efektif.json","Eureka Efektif",{"title":137,"slug":138},"eureka-efektif",[848,855],{"__component":142,"title":11,"description":11,"images":849,"videos":852},[850],{"url":851,"alternativeText":11},"/media/projects/stocks/eureka-efektif/eureka-banner.png",[853],{"url":854,"alternativeText":11},"/media/projects/stocks/eureka-efektif/eureka-marquee.mov",{"__component":142,"title":11,"description":11,"images":856,"videos":863},[857,859,861],{"url":858,"alternativeText":11},"/media/projects/stocks/eureka-efektif/eureka-grid.png",{"url":860,"alternativeText":11},"/media/projects/stocks/eureka-efektif/eureka-tabs.png",{"url":862,"alternativeText":11},"/media/projects/stocks/eureka-efektif/eureka-clients.png",[],{"path":865,"body":866},"/projects/eureka-efektif",{"title":844,"slug":846,"summary":867,"url":868,"isArchived":162,"rarity_star":11,"client":846,"agency":135,"date":801,"description":11,"thumbnail_image":869,"category":871,"types":872,"stacks":874,"roles":875,"contents":876},"Malaysian pipeline solutions provider for oil & gas. Site covers pigging, inspection, cleaning, and repair technologies, with projects across Malaysia, Indonesia, Vietnam, and beyond.","https://www.eurekaefektif.com/",{"url":870,"alternativeText":11},"/media/projects/thumbnails/eureka-efektif.webp",{"title":137,"slug":138},[873],{"title":173,"slug":174},[176,177],[179,180],[877,882],{"__component":142,"title":11,"description":11,"images":878,"videos":880},[879],{"url":851,"alternativeText":11},[881],{"url":854,"alternativeText":11},{"__component":142,"title":11,"description":11,"images":883,"videos":887},[884,885,886],{"url":858,"alternativeText":11},{"url":860,"alternativeText":11},{"url":862,"alternativeText":11},[],[179,180],[176,177],"projects/eureka-efektif",{"url":870,"alternativeText":11},[893],{"title":173,"slug":174},"WQf9DE_co13ydjxrxg1X49wXZhvNqDDvTqg_YRoRwUU",{"id":896,"title":897,"_incomplete":11,"agency":135,"buttons":11,"category":898,"client":520,"contents":899,"createdAt":11,"date":914,"description":915,"extension":6,"isArchived":162,"meta":916,"publishedAt":11,"rarity_star":443,"roles":940,"slug":919,"specialEffect":11,"stacks":941,"stem":942,"summary":920,"thumbnail_image":943,"types":944,"updatedAt":11,"url":921,"__hash__":946},"projects/projects/cagamas-srp.json","Cagamas SRP",{"title":137,"slug":138},[900,909],{"__component":142,"title":11,"description":11,"images":901,"videos":906},[902,904],{"url":903,"alternativeText":11},"/media/projects/stocks/csrp/csrp-banner.png",{"url":905,"alternativeText":11},"/media/projects/stocks/csrp/csrp-trustee.png",[907],{"url":908,"alternativeText":11},"/media/projects/stocks/csrp/csrp-sliders.mov",{"__component":142,"title":11,"description":11,"images":910,"videos":913},[911],{"url":912,"alternativeText":11},"/media/projects/stocks/csrp/csrp-cta.png",[],"2026-04-01","\u003Cp data-start=\"6017\" data-end=\"6130\">An informational platform designed to communicate structured financial programme details clearly and efficiently.\u003C/p>\u003Cp> \u003C/p>\u003Ch3 data-section-id=\"17qrq3i\" data-start=\"6137\" data-end=\"6168\">What Makes This Different\u003C/h3>\u003Cp data-start=\"6169\" data-end=\"6281\">The focus here was on \u003Cstrong data-start=\"6191\" data-end=\"6225\">frontend clarity and hierarchy\u003C/strong>, ensuring complex information remains easy to navigate.\u003C/p>\u003Cp> \u003C/p>\u003Ch3 data-section-id=\"1deeg60\" data-start=\"6288\" data-end=\"6309\">Special Context\u003C/h3>\u003Cp data-start=\"6310\" data-end=\"6416\">Worked on the frontend layer to ensure consistency, readability, and structured presentation across pages.\u003C/p>\u003Cp> \u003C/p>\u003Ch3 data-section-id=\"mlm2cg\" data-start=\"6423\" data-end=\"6436\">Insight\u003C/h3>\u003Cp data-start=\"6437\" data-end=\"6525\">When content is complex, the UI’s job is simple:\u003Cbr>\u003Cstrong data-start=\"6488\" data-end=\"6524\">reduce friction to understanding\u003C/strong>.\u003C/p>",{"path":917,"body":918},"/projects/cagamas-srp",{"title":897,"slug":919,"summary":920,"url":921,"isArchived":162,"rarity_star":443,"client":520,"agency":135,"date":914,"description":915,"thumbnail_image":922,"category":924,"types":925,"stacks":927,"roles":928,"contents":929},"cagamas-srp","Cagamas's mortgage guarantee subsidiary. Site promotes programmes enabling up to 110% home financing for first-time and green-property buyers through participating Malaysian banks.","https://csrp.cagamas.com.my/",{"url":923,"alternativeText":11},"/media/projects/thumbnails/cagamas-csrp.webp",{"title":137,"slug":138},[926],{"title":173,"slug":174},[176,623],[179,625],[930,936],{"__component":142,"title":11,"description":11,"images":931,"videos":934},[932,933],{"url":903,"alternativeText":11},{"url":905,"alternativeText":11},[935],{"url":908,"alternativeText":11},{"__component":142,"title":11,"description":11,"images":937,"videos":939},[938],{"url":912,"alternativeText":11},[],[179,625],[176,623],"projects/cagamas-srp",{"url":923,"alternativeText":11},[945],{"title":173,"slug":174},"OxwjdLUrn37HNmC-FZtkezU-cOqMrMtuDzKQ5axRdoA",{"id":948,"title":949,"_incomplete":11,"agency":135,"buttons":11,"category":950,"client":951,"contents":952,"createdAt":11,"date":967,"description":11,"extension":6,"isArchived":162,"meta":968,"publishedAt":11,"rarity_star":11,"roles":993,"slug":971,"specialEffect":11,"stacks":994,"stem":995,"summary":972,"thumbnail_image":996,"types":997,"updatedAt":11,"url":973,"__hash__":999},"projects/projects/ioi-group.json","IOI Group",{"title":137,"slug":138},"ioi",[953,962],{"__component":142,"title":11,"description":11,"images":954,"videos":959},[955,957],{"url":956,"alternativeText":11},"/media/projects/stocks/ioi-group/ioi-group-banner.png",{"url":958,"alternativeText":11},"/media/projects/stocks/ioi-group/ioi-group-intro.png",[960],{"url":961,"alternativeText":11},"/media/projects/stocks/ioi-group/ioi-group-marquee.mov",{"__component":142,"title":11,"description":11,"images":963,"videos":966},[964],{"url":965,"alternativeText":11},"/media/projects/stocks/ioi-group/ioi-group-footer.png",[],"2026-03-01",{"path":969,"body":970},"/projects/ioi-group",{"title":949,"slug":971,"summary":972,"url":973,"isArchived":162,"rarity_star":11,"client":951,"agency":135,"date":967,"description":11,"thumbnail_image":974,"category":976,"types":977,"stacks":979,"roles":980,"contents":982},"ioi-group","Global integrated palm oil corporation. Site presents its plantation, manufacturing, and renewables businesses, sustainability commitments, and investor information for this Malaysian agribusiness leader.","https://www.ioigroup.com",{"url":975,"alternativeText":11},"/media/projects/thumbnails/ioi-group.webp",{"title":137,"slug":138},[978],{"title":173,"slug":174},[176,563],[981],"maintenance",[983,989],{"__component":142,"title":11,"description":11,"images":984,"videos":987},[985,986],{"url":956,"alternativeText":11},{"url":958,"alternativeText":11},[988],{"url":961,"alternativeText":11},{"__component":142,"title":11,"description":11,"images":990,"videos":992},[991],{"url":965,"alternativeText":11},[],[981],[176,563],"projects/ioi-group",{"url":975,"alternativeText":11},[998],{"title":173,"slug":174},"iNGTK9EhorB7NI7gccqAW6e6k-ciKb-1mbGy8bM4Wio",{"id":1001,"title":1002,"_incomplete":11,"agency":135,"buttons":11,"category":1003,"client":1006,"contents":1007,"createdAt":11,"date":1024,"description":1025,"extension":6,"isArchived":162,"meta":1026,"publishedAt":11,"rarity_star":443,"roles":1051,"slug":1029,"specialEffect":11,"stacks":1052,"stem":1053,"summary":1030,"thumbnail_image":1054,"types":1055,"updatedAt":11,"url":1031,"__hash__":1057},"projects/projects/sincere-surgery.json","Sincere Surgery",{"title":1004,"slug":1005},"Healthcare","healthcare","ssg",[1008,1015],{"__component":142,"title":11,"description":11,"images":1009,"videos":1012},[1010],{"url":1011,"alternativeText":11},"/media/projects/stocks/sincere-surgery/ssg-banner.png",[1013],{"url":1014,"alternativeText":11},"/media/projects/stocks/sincere-surgery/ssg-marquee.mov",{"__component":142,"title":11,"description":11,"images":1016,"videos":1023},[1017,1019,1021],{"url":1018,"alternativeText":11},"/media/projects/stocks/sincere-surgery/ssg-component-1.png",{"url":1020,"alternativeText":11},"/media/projects/stocks/sincere-surgery/ssg-component-2.png",{"url":1022,"alternativeText":11},"/media/projects/stocks/sincere-surgery/ssg-cta.png",[],"2026-02-13","\u003Cp data-start=\"2383\" data-end=\"2501\">A medical-focused website built to communicate services, credibility, and trust through a structured digital presence.\u003C/p>\u003Cp> \u003C/p>\u003Ch3 data-section-id=\"17qrq3i\" data-start=\"2508\" data-end=\"2539\">What Makes This Different\u003C/h3>\u003Cp data-start=\"2540\" data-end=\"2669\">This platform incorporates appointment booking system.\u003C/p>\u003Cp data-start=\"2698\" data-end=\"2816\"> \u003C/p>\u003Ch3 data-section-id=\"mlm2cg\" data-start=\"2823\" data-end=\"2836\">Insight\u003C/h3>\u003Cp data-start=\"2837\" data-end=\"2956\">In certain industries, design isn’t about standing out —\u003Cbr>it’s about \u003Cstrong data-start=\"2907\" data-end=\"2955\">building trust through clarity and restraint\u003C/strong>.\u003C/p>",{"path":1027,"body":1028},"/projects/sincere-surgery",{"title":1002,"slug":1029,"summary":1030,"url":1031,"isArchived":162,"rarity_star":443,"client":1006,"agency":135,"date":1024,"description":1025,"thumbnail_image":1032,"category":1034,"types":1035,"stacks":1037,"roles":1038,"contents":1039},"sincere-surgery","Singapore colorectal and general surgery practice led by Dr Sim Hsien Lin. Site details services like colonoscopy, laparoscopic surgery, and hernia repair, with booking.","https://www.sinceresurgery.com.sg/",{"url":1033,"alternativeText":11},"/media/projects/thumbnails/sinceresurgery.webp",{"title":1004,"slug":1005},[1036],{"title":173,"slug":174},[176,177],[179,180],[1040,1045],{"__component":142,"title":11,"description":11,"images":1041,"videos":1043},[1042],{"url":1011,"alternativeText":11},[1044],{"url":1014,"alternativeText":11},{"__component":142,"title":11,"description":11,"images":1046,"videos":1050},[1047,1048,1049],{"url":1018,"alternativeText":11},{"url":1020,"alternativeText":11},{"url":1022,"alternativeText":11},[],[179,180],[176,177],"projects/sincere-surgery",{"url":1033,"alternativeText":11},[1056],{"title":173,"slug":174},"HxIo7b7ydcJKn0R7_MwLSCJWNw_ogWluWS1xMX7pLRM",{"id":1059,"title":1060,"_incomplete":11,"agency":135,"buttons":11,"category":1061,"client":1064,"contents":1065,"createdAt":11,"date":1079,"description":1080,"extension":6,"isArchived":162,"meta":1081,"publishedAt":11,"rarity_star":443,"roles":1102,"slug":1064,"specialEffect":11,"stacks":1103,"stem":1104,"summary":1084,"thumbnail_image":1105,"types":1106,"updatedAt":11,"url":1085,"__hash__":1108},"projects/projects/gogoco.json","Gogoco",{"title":1062,"slug":1063},"Informational","informational","gogoco",[1066],{"__component":142,"title":11,"description":11,"images":1067,"videos":1078},[1068,1070,1072,1074,1076],{"url":1069,"alternativeText":11},"/media/projects/stocks/gogoco/gogoco-banner.png",{"url":1071,"alternativeText":11},"/media/projects/stocks/gogoco/gogoco-intro.png",{"url":1073,"alternativeText":11},"/media/projects/stocks/gogoco/gogoco-vission-mission.png",{"url":1075,"alternativeText":11},"/media/projects/stocks/gogoco/gogoco-products.png",{"url":1077,"alternativeText":11},"/media/projects/stocks/gogoco/gogoco-footer.png",[],"2026-02-01","\u003Cp data-start=\"7604\" data-end=\"7695\">A single-page landing site designed to communicate key information quickly and effectively.\u003C/p>\u003Cp> \u003C/p>\u003Ch3 data-section-id=\"17qrq3i\" data-start=\"7702\" data-end=\"7733\">What Makes This Different\u003C/h3>\u003Cp data-start=\"7734\" data-end=\"7835\">With only one page, every section needs to be intentional — there’s no room for unnecessary elements.\u003C/p>\u003Cp> \u003C/p>\u003Ch3 data-section-id=\"1deeg60\" data-start=\"7842\" data-end=\"7863\">Special Context\u003C/h3>\u003Cp data-start=\"7864\" data-end=\"7948\">Structured content flow to guide users from introduction to action without friction.\u003C/p>\u003Cp> \u003C/p>\u003Ch3 data-section-id=\"mlm2cg\" data-start=\"7955\" data-end=\"7968\">Insight\u003C/h3>\u003Cp data-start=\"7969\" data-end=\"8024\">On a landing page, clarity beats creativity every time.\u003C/p>",{"path":1082,"body":1083},"/projects/gogoco",{"title":1060,"slug":1064,"summary":1084,"url":1085,"isArchived":162,"rarity_star":443,"client":1064,"agency":135,"date":1079,"description":1080,"thumbnail_image":1086,"category":1088,"types":1089,"stacks":1091,"roles":1092,"contents":1093},"Malaysian coconut products brand since 2015. Site showcases coconut milk powder and desiccated coconut products, sourcing process, and recipes, exported to 25+ countries.","https://www.gogoco.com.my",{"url":1087,"alternativeText":11},"/media/projects/thumbnails/gogoco.webp",{"title":1062,"slug":1063},[1090],{"title":173,"slug":174},[176,177],[179,180],[1094],{"__component":142,"title":11,"description":11,"images":1095,"videos":1101},[1096,1097,1098,1099,1100],{"url":1069,"alternativeText":11},{"url":1071,"alternativeText":11},{"url":1073,"alternativeText":11},{"url":1075,"alternativeText":11},{"url":1077,"alternativeText":11},[],[179,180],[176,177],"projects/gogoco",{"url":1087,"alternativeText":11},[1107],{"title":173,"slug":174},"TBiBmHJvuvvePGNc2EjFAYu20b-GGLPvJPKNlHqYmY8",{"id":1110,"title":1111,"_incomplete":11,"agency":135,"buttons":11,"category":1112,"client":1113,"contents":1114,"createdAt":11,"date":1079,"description":11,"extension":6,"isArchived":162,"meta":1129,"publishedAt":11,"rarity_star":443,"roles":1152,"slug":1113,"specialEffect":11,"stacks":1153,"stem":1154,"summary":1132,"thumbnail_image":1155,"types":1156,"updatedAt":11,"url":1133,"__hash__":1158},"projects/projects/mkjr.json","MKJR",{"title":137,"slug":138},"mkjr",[1115,1120],{"__component":142,"title":11,"description":11,"images":1116,"videos":1117},[],[1118],{"url":1119,"alternativeText":11},"/media/projects/stocks/mkjr/mkjr-banner.mov",{"__component":142,"title":11,"description":11,"images":1121,"videos":1126},[1122,1124],{"url":1123,"alternativeText":11},"/media/projects/stocks/mkjr/mkjr-about.png",{"url":1125,"alternativeText":11},"/media/projects/stocks/mkjr/mkjr-flipcard.png",[1127],{"url":1128,"alternativeText":11},"/media/projects/stocks/mkjr/mkjr-cta.mov",{"path":1130,"body":1131},"/projects/mkjr",{"title":1111,"slug":1113,"summary":1132,"url":1133,"isArchived":162,"rarity_star":443,"client":1113,"agency":135,"date":1079,"description":11,"thumbnail_image":1134,"category":1136,"types":1137,"stacks":1139,"roles":1140,"contents":1141},"Malaysian government road safety council. Site shares road safety data, awareness campaigns, and programmes like Safe School Zone aimed at reducing road fatalities.","https://mkjr.my/",{"url":1135,"alternativeText":11},"/media/projects/thumbnails/mkjr.webp",{"title":137,"slug":138},[1138],{"title":173,"slug":174},[176,177],[179,180],[1142,1146],{"__component":142,"title":11,"description":11,"images":1143,"videos":1144},[],[1145],{"url":1119,"alternativeText":11},{"__component":142,"title":11,"description":11,"images":1147,"videos":1150},[1148,1149],{"url":1123,"alternativeText":11},{"url":1125,"alternativeText":11},[1151],{"url":1128,"alternativeText":11},[179,180],[176,177],"projects/mkjr",{"url":1135,"alternativeText":11},[1157],{"title":173,"slug":174},"k3OX2bF7cracYbK5oWQEPJvHKiXY27eWSKDasuqbNo4",{"id":1160,"title":1161,"_incomplete":11,"agency":135,"buttons":11,"category":1162,"client":1163,"contents":1164,"createdAt":11,"date":1179,"description":1180,"extension":6,"isArchived":162,"meta":1181,"publishedAt":11,"rarity_star":443,"roles":1204,"slug":1163,"specialEffect":11,"stacks":1205,"stem":1206,"summary":1184,"thumbnail_image":1207,"types":1208,"updatedAt":11,"url":1185,"__hash__":1210},"projects/projects/silcotech.json","Silcotech",{"title":137,"slug":138},"silcotech",[1165,1170],{"__component":142,"title":11,"description":11,"images":1166,"videos":1167},[],[1168],{"url":1169,"alternativeText":11},"/media/projects/stocks/silcotech/silcotech-banner.mov",{"__component":142,"title":11,"description":11,"images":1171,"videos":1178},[1172,1174,1176],{"url":1173,"alternativeText":11},"/media/projects/stocks/silcotech/silcotech-hover-state.png",{"url":1175,"alternativeText":11},"/media/projects/stocks/silcotech/silcotech-card-sticky.png",{"url":1177,"alternativeText":11},"/media/projects/stocks/silcotech/silcotech-contact-form.png",[],"2025-12-01","\u003Cp data-start=\"3008\" data-end=\"3133\">An industrial website focused on presenting technical capabilities, services, and company information in a structured format.\u003C/p>\u003Cp> \u003C/p>\u003Ch3 data-section-id=\"17qrq3i\" data-start=\"3140\" data-end=\"3171\">What Makes This Different\u003C/h3>\u003Cp data-start=\"3172\" data-end=\"3310\">Industrial content tends to be dense and technical — the challenge was to organise it into a format that is \u003Cstrong data-start=\"3280\" data-end=\"3309\">easy to scan and navigate\u003C/strong>.\u003C/p>\u003Cp> \u003C/p>\u003Ch3 data-section-id=\"1deeg60\" data-start=\"3317\" data-end=\"3338\">Special Context\u003C/h3>\u003Cp data-start=\"3339\" data-end=\"3436\">The CMS enables structured service listings and updates without requiring technical intervention.\u003C/p>\u003Cp> \u003C/p>\u003Ch3 data-section-id=\"mlm2cg\" data-start=\"3443\" data-end=\"3456\">Insight\u003C/h3>\u003Cp data-start=\"3457\" data-end=\"3562\">Good structure turns complex information into something users can \u003Cstrong data-start=\"3523\" data-end=\"3561\">understand in seconds, not minutes\u003C/strong>.\u003C/p>",{"path":1182,"body":1183},"/projects/silcotech",{"title":1161,"slug":1163,"summary":1184,"url":1185,"isArchived":162,"rarity_star":443,"client":1163,"agency":135,"date":1179,"description":1180,"thumbnail_image":1186,"category":1188,"types":1189,"stacks":1191,"roles":1192,"contents":1193},"Malaysian precision rubber and silicone manufacturer since 2006. Site details cleanroom manufacturing and tooling capabilities serving medical, food, electronics, and automotive industries.","https://www.silcotechindustry.com/",{"url":1187,"alternativeText":11},"/media/projects/thumbnails/silcotech.webp",{"title":137,"slug":138},[1190],{"title":173,"slug":174},[176,177],[179,180],[1194,1198],{"__component":142,"title":11,"description":11,"images":1195,"videos":1196},[],[1197],{"url":1169,"alternativeText":11},{"__component":142,"title":11,"description":11,"images":1199,"videos":1203},[1200,1201,1202],{"url":1173,"alternativeText":11},{"url":1175,"alternativeText":11},{"url":1177,"alternativeText":11},[],[179,180],[176,177],"projects/silcotech",{"url":1187,"alternativeText":11},[1209],{"title":173,"slug":174},"OpFO0agtqEn9Rj8WzUiAU8dmnTHbAxDPH24FlQerh2w",{"id":1212,"title":1213,"_incomplete":11,"agency":135,"buttons":11,"category":1214,"client":520,"contents":1217,"createdAt":11,"date":1238,"description":11,"extension":6,"isArchived":162,"meta":1239,"publishedAt":11,"rarity_star":489,"roles":1265,"slug":1242,"specialEffect":11,"stacks":1266,"stem":1267,"summary":1243,"thumbnail_image":1268,"types":1269,"updatedAt":11,"url":11,"__hash__":1271},"projects/projects/cagamas-whistleblowing-form.json","Cagamas Whistleblowing Form",{"title":1215,"slug":1216},"Web App","web-app",[1218,1221,1224,1228,1231,1235],{"__component":142,"title":11,"description":1219,"images":1220},"\u003Cp>This project wasn’t about visuals — it was about \u003Cstrong>trust\u003C/strong>.\u003C/p>\u003Cp>The whistleblowing form needed to handle sensitive submissions in a way that is:\u003C/p>\u003Cul>\u003Cli>secure\u003C/li>\u003Cli>resistant to abuse\u003C/li>\u003Cli>safe for users to interact with\u003C/li>\u003C/ul>\u003Cp>Which meant treating every input as a potential risk.\u003C/p>\u003Cp>\u003Cimg src=\"/media/projects/mockups/whistleblowing/whistleblowing_form.png\" alt=\"Whistleblowing form\" sizes=\"100vw\" width=\"5880\" height=\"7280\">\u003C/p>",[],{"__component":142,"title":531,"description":1222,"images":1223},"\u003Cp>I developed the frontend form with a \u003Cstrong>defensive approach\u003C/strong>, ensuring that the system cannot be easily exploited through:\u003C/p>\u003Cul>\u003Cli>file uploads\u003C/li>\u003Cli>malformed inputs\u003C/li>\u003Cli>intentional misuse\u003C/li>\u003C/ul>\u003Cp>This wasn’t just validation — it was about \u003Cstrong>closing gaps before they exist\u003C/strong>.\u003C/p>",[],{"__component":142,"title":1225,"description":1226,"images":1227},"Key Decisions That Matter","\u003Cp>\u003Cstrong>File Uploads Are Attack Surfaces\u003C/strong>\u003Cbr>Allowing uploads introduces real risk.\u003C/p>\u003Cp>So I enforced strict controls:\u003C/p>\u003Cul>\u003Cli>blocked executable and unsafe file types\u003C/li>\u003Cli>constrained file sizes\u003C/li>\u003Cli>ensured only expected formats are accepted\u003C/li>\u003C/ul>\u003Cp>No “trust the user” shortcuts.\u003C/p>\u003Cp>\u003Cstrong>Validation Is Not Just UI Feedback\u003C/strong>\u003Cbr>Most forms validate for UX.\u003C/p>\u003Cp>This one validates for \u003Cstrong>security\u003C/strong>.\u003C/p>\u003Cp>Every input is treated as untrusted:\u003C/p>\u003Cul>\u003Cli>sanitized before submission\u003C/li>\u003Cli>structured to avoid injection risks\u003C/li>\u003Cli>aligned with backend expectations\u003C/li>\u003C/ul>\u003Cp>\u003Cstrong>Keeping It Simple (On Purpose)\u003C/strong>\u003Cbr>Security-heavy forms often become intimidating.\u003C/p>\u003Cp>I kept the interface minimal and direct, so users can focus on reporting — not figuring out how to use the form.\u003C/p>",[],{"__component":142,"title":539,"description":1229,"images":1230},"\u003Cul>\u003Cli>Nuxt-based frontend\u003C/li>\u003Cli>Strict file validation logic\u003C/li>\u003Cli>Input sanitization strategies\u003C/li>\u003Cli>Defensive form handling patterns\u003C/li>\u003C/ul>",[],{"__component":142,"title":1232,"description":1233,"images":1234},"Challenges I Had to Think Through","\u003Cp>\u003Cstrong>Balancing Security vs Usability\u003C/strong>\u003Cbr>Too strict → users get blocked\u003Cbr>Too loose → system gets abused\u003C/p>\u003Cp>→ I implemented constraints that protect the system without making the form frustrating to complete.\u003C/p>\u003Cp>\u003Cstrong>Preventing Misuse Without Overengineering\u003C/strong>\u003Cbr>It’s easy to overcomplicate “secure systems”.\u003C/p>\u003Cp>→ I focused on practical safeguards that actually reduce risk, instead of adding unnecessary complexity.\u003C/p>",[],{"__component":142,"title":547,"description":1236,"images":1237},"\u003Cp>A form that doesn’t just “work” — it \u003Cstrong>holds up under bad input\u003C/strong>, which is exactly what it’s supposed to do.\u003C/p>",[],"2025-11-01",{"path":1240,"body":1241},"/projects/cagamas-whistleblowing-form",{"title":1213,"slug":1242,"summary":1243,"url":11,"isArchived":162,"rarity_star":489,"client":520,"agency":135,"date":1238,"thumbnail_image":1244,"category":1246,"types":1247,"stacks":1249,"roles":1250,"contents":1252},"cagamas-whistleblowing-form","Confidential reporting platform with validation handling. Implemented defensive validation strategies to reduce risk from unsafe file submissions and exploit attempts.",{"url":1245,"alternativeText":11},"/media/projects/thumbnails/cagamas-whistleblowing.webp",{"title":1215,"slug":1216},[1248],{"title":173,"slug":174},[176,623],[1251],"fullstack-dev",[1253,1255,1257,1259,1261,1263],{"__component":142,"title":11,"description":1219,"images":1254},[],{"__component":142,"title":531,"description":1222,"images":1256},[],{"__component":142,"title":1225,"description":1226,"images":1258},[],{"__component":142,"title":539,"description":1229,"images":1260},[],{"__component":142,"title":1232,"description":1233,"images":1262},[],{"__component":142,"title":547,"description":1236,"images":1264},[],[1251],[176,623],"projects/cagamas-whistleblowing-form",{"url":1245,"alternativeText":11},[1270],{"title":173,"slug":174},"3PPn3STJ3-zn0CY0VYTd0BrkgkhNpJ68Ecnr1Mhf1KY",{"id":1273,"title":1274,"_incomplete":11,"agency":135,"buttons":11,"category":1275,"client":1276,"contents":1277,"createdAt":11,"date":1296,"description":1297,"extension":6,"isArchived":162,"meta":1298,"publishedAt":11,"rarity_star":666,"roles":1323,"slug":1276,"specialEffect":11,"stacks":1324,"stem":1325,"summary":1301,"thumbnail_image":1326,"types":1327,"updatedAt":11,"url":1302,"__hash__":1329},"projects/projects/xenergi.json","Xenergi",{"title":137,"slug":138},"xenergi",[1278,1283],{"__component":142,"title":11,"description":11,"images":1279,"videos":1280},[],[1281],{"url":1282,"alternativeText":11},"/media/projects/stocks/xenergi/xenergi-banner.webm",{"__component":142,"title":11,"description":11,"images":1284,"videos":1295},[1285,1287,1289,1291,1293],{"url":1286,"alternativeText":11},"/media/projects/stocks/xenergi/xenergi-intro.png",{"url":1288,"alternativeText":11},"/media/projects/stocks/xenergi/xenergi-component-1.png",{"url":1290,"alternativeText":11},"/media/projects/stocks/xenergi/xenergi-page-banner.png",{"url":1292,"alternativeText":11},"/media/projects/stocks/xenergi/xenergi-projects.png",{"url":1294,"alternativeText":11},"/media/projects/stocks/xenergi/xenergi-cta.png",[],"2025-10-10","\u003Cp data-start=\"1118\" data-end=\"1236\">A corporate website built to communicate complex energy solutions through a clean, structured, and scalable interface.\u003C/p>\u003Cp> \u003C/p>\u003Ch3 data-section-id=\"17qrq3i\" data-start=\"1243\" data-end=\"1274\">What Makes This Different\u003C/h3>\u003Cp data-start=\"1275\" data-end=\"1412\">The challenge here was simplifying dense, technical content into something that’s \u003Cstrong data-start=\"1357\" data-end=\"1385\">digestible and navigable\u003C/strong>, without losing its depth.\u003C/p>\u003Cp> \u003C/p>\u003Ch3 data-section-id=\"1deeg60\" data-start=\"1419\" data-end=\"1440\">Special Context\u003C/h3>\u003Cp data-start=\"1441\" data-end=\"1579\">The CMS was structured to support long-term content growth, ensuring new services and updates can be added without redesigning the system.\u003C/p>\u003Cp> \u003C/p>\u003Ch3 data-section-id=\"mlm2cg\" data-start=\"1586\" data-end=\"1599\">Insight\u003C/h3>\u003Cp data-start=\"1600\" data-end=\"1702\">Clarity in UI often comes from \u003Cstrong data-start=\"1631\" data-end=\"1678\">how content is structured behind the scenes\u003C/strong>, not just how it looks.\u003C/p>",{"path":1299,"body":1300},"/projects/xenergi",{"title":1274,"slug":1276,"summary":1301,"url":1302,"isArchived":162,"rarity_star":666,"client":1276,"agency":135,"date":1296,"description":1297,"thumbnail_image":1303,"category":1305,"types":1306,"stacks":1308,"roles":1309,"contents":1310},"Malaysian renewable energy and sustainability solutions provider. Site covers solar installations, energy efficiency retrofits, and consultancy services for residential, commercial, and industrial clients.","https://xenergi.co/",{"url":1304,"alternativeText":11},"/media/projects/thumbnails/xenergi.webp",{"title":137,"slug":138},[1307],{"title":173,"slug":174},[176,177],[179,180],[1311,1315],{"__component":142,"title":11,"description":11,"images":1312,"videos":1313},[],[1314],{"url":1282,"alternativeText":11},{"__component":142,"title":11,"description":11,"images":1316,"videos":1322},[1317,1318,1319,1320,1321],{"url":1286,"alternativeText":11},{"url":1288,"alternativeText":11},{"url":1290,"alternativeText":11},{"url":1292,"alternativeText":11},{"url":1294,"alternativeText":11},[],[179,180],[176,177],"projects/xenergi",{"url":1304,"alternativeText":11},[1328],{"title":173,"slug":174},"hGp6iiaZWk-s_Ay5solSfdEwR6uo0W40_cuO9N6WTlQ",{"id":1331,"title":1332,"_incomplete":11,"agency":135,"buttons":11,"category":1333,"client":1334,"contents":1335,"createdAt":11,"date":1352,"description":11,"extension":6,"isArchived":162,"meta":1353,"publishedAt":11,"rarity_star":443,"roles":1378,"slug":1356,"specialEffect":11,"stacks":1379,"stem":1380,"summary":1357,"thumbnail_image":1381,"types":1382,"updatedAt":11,"url":1358,"__hash__":1384},"projects/projects/ioi-palm-garden-golf.json","IOI Palm Garden Golf",{"title":137,"slug":138},"ioi-pg",[1336,1341],{"__component":142,"title":11,"description":11,"images":1337,"videos":1338},[],[1339],{"url":1340,"alternativeText":11},"/media/projects/stocks/pgg/pgg-banner.mov",{"__component":142,"title":11,"description":11,"images":1342,"videos":1351},[1343,1345,1347,1349],{"url":1344,"alternativeText":11},"/media/projects/stocks/pgg/pgg-intro.png",{"url":1346,"alternativeText":11},"/media/projects/stocks/pgg/pgg-rate.png",{"url":1348,"alternativeText":11},"/media/projects/stocks/pgg/pgg-golf-layout.png",{"url":1350,"alternativeText":11},"/media/projects/stocks/pgg/pgg-form.png",[],"2025-10-01",{"path":1354,"body":1355},"/projects/ioi-palm-garden-golf",{"title":1332,"slug":1356,"summary":1357,"url":1358,"isArchived":162,"rarity_star":443,"client":1334,"agency":135,"date":1352,"description":11,"thumbnail_image":1359,"category":1361,"types":1362,"stacks":1364,"roles":1365,"contents":1366},"ioi-palm-garden-golf","Modern corporate platform focused on scalable CMS integration and responsive frontend experience.","https://www.palmgardengolf.com/",{"url":1360,"alternativeText":11},"/media/projects/thumbnails/palmgardengolf.webp",{"title":137,"slug":138},[1363],{"title":173,"slug":174},[176,177],[179,180,981],[1367,1371],{"__component":142,"title":11,"description":11,"images":1368,"videos":1369},[],[1370],{"url":1340,"alternativeText":11},{"__component":142,"title":11,"description":11,"images":1372,"videos":1377},[1373,1374,1375,1376],{"url":1344,"alternativeText":11},{"url":1346,"alternativeText":11},{"url":1348,"alternativeText":11},{"url":1350,"alternativeText":11},[],[179,180,981],[176,177],"projects/ioi-palm-garden-golf",{"url":1360,"alternativeText":11},[1383],{"title":173,"slug":174},"qdcL6m-VgUVI3JKum72XFMKqeXM14Fd2Jy-o0sDFUjk",{"id":1386,"title":1387,"_incomplete":11,"agency":135,"buttons":11,"category":1388,"client":1389,"contents":1390,"createdAt":11,"date":1398,"description":1399,"extension":6,"isArchived":162,"meta":1400,"publishedAt":11,"rarity_star":1406,"roles":1420,"slug":1403,"specialEffect":11,"stacks":1421,"stem":1422,"summary":1404,"thumbnail_image":1423,"types":1424,"updatedAt":11,"url":1405,"__hash__":1426},"projects/projects/ecotree-hotel-hk.json","Ecotree Hotel HK",{"title":137,"slug":138},"ecotree-hk",[1391],{"__component":142,"title":11,"description":11,"images":1392,"videos":1397},[1393,1395],{"url":1394,"alternativeText":11},"/media/projects/stocks/ecotree-hk/ecotree-hk-banner.png",{"url":1396,"alternativeText":11},"/media/projects/stocks/ecotree-hk/ecotree-hk-attractions.png",[],"2025-07-01","\u003Cp data-start=\"4206\" data-end=\"4327\">A multi-location hotel website with bilingual support, designed to handle content across different regions and audiences.\u003C/p>\u003Cp> \u003C/p>\u003Ch3 data-section-id=\"17qrq3i\" data-start=\"4334\" data-end=\"4365\">What Makes This Different\u003C/h3>\u003Cp data-start=\"4366\" data-end=\"4489\">The site operates across \u003Cstrong data-start=\"4391\" data-end=\"4427\">multiple locations and languages\u003C/strong>, requiring careful handling of content structure and routing.\u003C/p>\u003Cp> \u003C/p>\u003Ch3 data-section-id=\"1deeg60\" data-start=\"4496\" data-end=\"4517\">Special Context\u003C/h3>\u003Cp data-start=\"4518\" data-end=\"4655\">I implemented a dual-path structure within the CMS and frontend to manage location-based content while keeping the experience consistent.\u003C/p>\u003Cp> \u003C/p>\u003Ch3 data-section-id=\"mlm2cg\" data-start=\"4662\" data-end=\"4675\">Insight\u003C/h3>\u003Cp data-start=\"4676\" data-end=\"4776\">Multi-language isn’t just translation —\u003Cbr>it’s \u003Cstrong data-start=\"4723\" data-end=\"4775\">structuring content so it scales across contexts\u003C/strong>.\u003C/p>",{"path":1401,"body":1402},"/projects/ecotree-hotel-hk",{"title":1387,"slug":1403,"summary":1404,"url":1405,"isArchived":162,"rarity_star":1406,"client":1389,"agency":135,"date":1398,"description":1399,"thumbnail_image":1407,"category":1409,"types":1410,"stacks":1412,"roles":1413,"contents":1414},"ecotree-hotel-hk","Dual-language hospitality platform supporting multiple hotel web paths. Built scalable multilingual structures capable of supporting multiple hotel properties under one ecosystem.","https://ecotreehotel.com.hk",2,{"url":1408,"alternativeText":11},"/media/projects/thumbnails/ecotreehotel-hk.webp",{"title":137,"slug":138},[1411],{"title":173,"slug":174},[176,177],[179,180],[1415],{"__component":142,"title":11,"description":11,"images":1416,"videos":1419},[1417,1418],{"url":1394,"alternativeText":11},{"url":1396,"alternativeText":11},[],[179,180],[176,177],"projects/ecotree-hotel-hk",{"url":1408,"alternativeText":11},[1425],{"title":173,"slug":174},"oh5ASNn33IVTgpOJ-ORs0nueN40Tht3sW558RaPVvSE",{"id":1428,"title":1429,"_incomplete":11,"agency":135,"buttons":11,"category":1430,"client":1433,"contents":1434,"createdAt":11,"date":1459,"description":11,"extension":6,"isArchived":162,"meta":1460,"publishedAt":11,"rarity_star":666,"roles":1490,"slug":1463,"specialEffect":11,"stacks":1491,"stem":1492,"summary":1464,"thumbnail_image":1493,"types":1494,"updatedAt":11,"url":1465,"__hash__":1496},"projects/projects/asb-executive-education.json","ASB Executive Education",{"title":1431,"slug":1432},"Web Platform","web-platform","asb",[1435,1441,1447,1453],{"__component":142,"title":11,"description":1436,"images":1437,"videos":1440},"\u003Cp>A content-heavy academic platform designed to manage and present executive programmes, with a structured CMS powering frequent updates.\u003C/p>",[1438],{"url":1439,"alternativeText":11},"/media/projects/stocks/asb/asb-banner.png",[],{"__component":142,"title":777,"description":1442,"images":1443,"videos":1446},"\u003Cp>This isn’t just a frontend build — it’s a \u003Cstrong>content system designed for non-technical users\u003C/strong>, where programme data, schedules, and content need to be easily managed without breaking layout consistency.\n\n\u003C/p>",[1444],{"url":1445,"alternativeText":11},"/media/projects/stocks/asb/asb-intro.png",[],{"__component":142,"title":786,"description":1448,"images":1449,"videos":1452},"\u003Cp>I built both the frontend and the CMS structure, and continue maintaining it — which means designing not just for launch, but for \u003Cstrong>long-term content operations\u003C/strong>.\u003C/p>",[1450],{"url":1451,"alternativeText":11},"/media/projects/stocks/asb/asb-track-record.png",[],{"__component":142,"title":795,"description":1454,"images":1455,"videos":1458},"\u003Cp>A good CMS setup isn’t about flexibility alone — it’s about giving editors freedom without giving them ways to break things.\u003C/p>",[1456],{"url":1457,"alternativeText":11},"/media/projects/stocks/asb/asb-cta.png",[],"2025-06-01",{"path":1461,"body":1462},"/projects/asb-executive-education",{"title":1429,"slug":1463,"summary":1464,"url":1465,"isArchived":162,"rarity_star":666,"client":1433,"agency":135,"date":1459,"thumbnail_image":1466,"category":1468,"types":1469,"stacks":1471,"roles":1472,"contents":1473},"asb-executive-education","Executive education platform with course registration and scalable CMS architecture.","https://exec.asb.edu.my/",{"url":1467,"alternativeText":11},"/media/projects/thumbnails/asb.webp",{"title":1431,"slug":1432},[1470],{"title":173,"slug":174},[176,177,563],[179,180,981],[1474,1478,1482,1486],{"__component":142,"title":11,"description":1436,"images":1475,"videos":1477},[1476],{"url":1439,"alternativeText":11},[],{"__component":142,"title":777,"description":1442,"images":1479,"videos":1481},[1480],{"url":1445,"alternativeText":11},[],{"__component":142,"title":786,"description":1448,"images":1483,"videos":1485},[1484],{"url":1451,"alternativeText":11},[],{"__component":142,"title":795,"description":1454,"images":1487,"videos":1489},[1488],{"url":1457,"alternativeText":11},[],[179,180,981],[176,177,563],"projects/asb-executive-education",{"url":1467,"alternativeText":11},[1495],{"title":173,"slug":174},"qFQdIQAl9af2kkSlRVJLwI5jZUHq41u0vumomBsPS_0",{"id":1498,"title":1499,"_incomplete":11,"agency":11,"buttons":11,"category":1500,"client":11,"contents":1501,"createdAt":11,"date":1507,"description":1508,"extension":6,"isArchived":162,"meta":1509,"publishedAt":11,"rarity_star":1514,"roles":1529,"slug":1512,"specialEffect":11,"stacks":1530,"stem":1531,"summary":1513,"thumbnail_image":1532,"types":1533,"updatedAt":11,"url":11,"__hash__":1536},"projects/projects/portfolio-2024.json","Portfolio 2024",{"title":651,"slug":652},[1502],{"__component":142,"title":11,"description":11,"images":1503,"videos":1504},[],[1505],{"url":1506,"alternativeText":11},"/media/projects/video-demos/Portfolio-2024-demo.webm","2024-11-01","\u003Cp data-start=\"2158\" data-end=\"2303\">My first complete portfolio — built from scratch using HTML, CSS, and JavaScript, focused on turning ideas into a functional, responsive website.\u003C/p>\u003Cp data-start=\"2158\" data-end=\"2303\"> \u003C/p>\u003Cp>\u003Cvideo class=\"video\" width=\"100%\" controls=\"\" autoplay=\"\" muted=\"\" loop=\"\">\u003Csource src=\"/media/projects/video-demos/Portfolio-2024-demo.webm\" type=\"video/webm\">\n                    \u003C/video>\u003C/p>\u003Cp> \u003C/p>\u003Ch3 data-section-id=\"1lgcq4j\" data-start=\"2332\" data-end=\"2350\">What I Built\u003C/h3>\u003Cp data-start=\"2351\" data-end=\"2431\">This project was where I started translating design ideas into working features:\u003C/p>\u003Cul data-start=\"2433\" data-end=\"2642\">\u003Cli data-section-id=\"1ejknxw\" data-start=\"2433\" data-end=\"2459\">light/dark mode toggle\u003C/li>\u003Cli data-section-id=\"vi14hx\" data-start=\"2460\" data-end=\"2482\">interactive slider\u003C/li>\u003Cli data-section-id=\"1tv7b3b\" data-start=\"2483\" data-end=\"2514\">hover-based UI interactions\u003C/li>\u003Cli data-section-id=\"1bgjb5d\" data-start=\"2515\" data-end=\"2562\">contact form with email + database handling\u003C/li>\u003Cli data-section-id=\"147rm3\" data-start=\"2563\" data-end=\"2614\">timezone detection for international visibility\u003C/li>\u003Cli data-section-id=\"gluz2c\" data-start=\"2615\" data-end=\"2642\">fully responsive layout\u003C/li>\u003C/ul>\u003Cp> \u003C/p>\u003Ch3 data-section-id=\"qqetxa\" data-start=\"2649\" data-end=\"2672\">What Matters Here\u003C/h3>\u003Cp data-start=\"2673\" data-end=\"2740\">Looking back, the implementation is simple — but the intent wasn’t.\u003C/p>\u003Cp data-start=\"2742\" data-end=\"2771\">I was already thinking about:\u003C/p>\u003Cul data-start=\"2772\" data-end=\"2903\">\u003Cli data-section-id=\"hzi8w7\" data-start=\"2772\" data-end=\"2809\">user context (timezone awareness)\u003C/li>\u003Cli data-section-id=\"1a4mi18\" data-start=\"2810\" data-end=\"2855\">interaction feedback (hover, transitions)\u003C/li>\u003Cli data-section-id=\"1im55tj\" data-start=\"2856\" data-end=\"2903\">accessibility of information across devices\u003C/li>\u003C/ul>\u003Cp>\u003Cimg src=\"https://healing-morning-3f30c21d5e.media.strapiapp.com/Portfolio_2024_mockup_78e8c2bb7b.png\" alt=\"Portfolio-2024-mockup.png\" srcset=\"https://healing-morning-3f30c21d5e.media.strapiapp.com/thumbnail_Portfolio_2024_mockup_78e8c2bb7b.png 64w,https://healing-morning-3f30c21d5e.media.strapiapp.com/small_Portfolio_2024_mockup_78e8c2bb7b.png 204w,https://healing-morning-3f30c21d5e.media.strapiapp.com/medium_Portfolio_2024_mockup_78e8c2bb7b.png 306w,https://healing-morning-3f30c21d5e.media.strapiapp.com/large_Portfolio_2024_mockup_78e8c2bb7b.png 408w,\" sizes=\"100vw\" width=\"2940\" height=\"7200\">\u003C/p>\u003Ch3 data-section-id=\"mlm2cg\" data-start=\"2910\" data-end=\"2923\">Insight\u003C/h3>\u003Cp data-start=\"2924\" data-end=\"3018\">This project marks the shift from “learning syntax” to \u003Cstrong data-start=\"2981\" data-end=\"3018\">building experiences with intent.\u003C/strong>\u003C/p>",{"path":1510,"body":1511},"/projects/portfolio-2024",{"title":1499,"slug":1512,"summary":1513,"url":11,"isArchived":162,"rarity_star":1514,"client":11,"agency":11,"date":1507,"description":1508,"thumbnail_image":1515,"category":1517,"types":1518,"stacks":1521,"roles":1523,"contents":1524},"portfolio-2024","An early frontend portfolio focused on responsive UI and accessibility.",0,{"url":1516,"alternativeText":11},"/media/projects/thumbnails/portfolio-2024.webp",{"title":651,"slug":652},[1519,1520],{"title":495,"slug":496},{"title":291,"slug":292},[294,1522,499],"html",[292,179],[1525],{"__component":142,"title":11,"description":11,"images":1526,"videos":1527},[],[1528],{"url":1506,"alternativeText":11},[292,179],[294,1522,499],"projects/portfolio-2024",{"url":1516,"alternativeText":11},[1534,1535],{"title":495,"slug":496},{"title":291,"slug":292},"3d-oj9IP5EsoKjEmsgUIYaxaZ3wlHIV27F1_KUltHLY",{"id":1538,"title":1539,"_incomplete":11,"agency":11,"buttons":11,"category":1540,"client":11,"contents":1543,"createdAt":11,"date":1549,"description":1550,"extension":6,"isArchived":162,"meta":1551,"publishedAt":11,"rarity_star":11,"roles":1571,"slug":1554,"specialEffect":11,"stacks":1572,"stem":1573,"summary":1555,"thumbnail_image":1574,"types":1575,"updatedAt":11,"url":11,"__hash__":1577},"projects/projects/webapp-news-dashboard.json","News Dashboard",{"title":1541,"slug":1542},"Case Study","case-study",[1544],{"__component":142,"title":11,"description":11,"images":1545,"videos":1546},[],[1547],{"url":1548,"alternativeText":11},"/media/projects/video-demos/News-Webapp.webm","2024-08-01","\u003Cp>A React-based news browsing dashboard built as a functional prototype for testing authentication flows, API integration, and state-driven UI interactions.\u003C/p>\u003Cp>\u003Cvideo class=\"video\" controls=\"\" width=\"100%\" autoplay=\"\" loop=\"\" muted=\"\">\u003Csource src=\"/media/projects/video-demos/News-Webapp.webm\" type=\"video/webm\">\u003C/video>\u003C/p>\u003Cp> \u003C/p>\u003Ch3>What This Project Does\u003C/h3>\u003Cp>After login (username/password), users can:\u003C/p>\u003Cul>\u003Cli>browse real-time news fetched from an external API\u003C/li>\u003Cli>like articles\u003C/li>\u003Cli>view liked articles in a persistent sidebar\u003C/li>\u003C/ul>\u003Cp> \u003C/p>\u003Ch3>What I Was Testing\u003C/h3>\u003Cp>This project was less about production polish and more about understanding:\u003C/p>\u003Cul>\u003Cli>authentication flow structure\u003C/li>\u003Cli>API data handling in React\u003C/li>\u003Cli>global state management for liked items\u003C/li>\u003Cli>sidebar-based UI architecture\u003C/li>\u003C/ul>\u003Cp> \u003C/p>\u003Ch3>Tech Focus\u003C/h3>\u003Cul>\u003Cli>React\u003C/li>\u003Cli>Material UI\u003C/li>\u003Cli>External News API integration\u003C/li>\u003Cli>Client-side state handling\u003C/li>\u003C/ul>\u003Cp> \u003C/p>\u003Ch3>Insight\u003C/h3>\u003Cp>This was one of my first projects where I started thinking in terms of:\u003Cbr>\u003Cstrong>“data flow + user interaction states” instead of just components.\u003C/strong>\u003C/p>",{"path":1552,"body":1553},"/projects/webapp-news-dashboard",{"title":1539,"slug":1554,"summary":1555,"url":11,"isArchived":162,"rarity_star":11,"client":11,"agency":11,"date":1549,"description":1550,"thumbnail_image":1556,"category":1558,"types":1559,"stacks":1561,"roles":1564,"contents":1566},"news-dashboard","News browsing application featuring authentication, live news fetching, and interactive user engagement features.",{"url":1557,"alternativeText":11},"/media/projects/thumbnails/news-app.webp",{"title":1541,"slug":1542},[1560],{"title":495,"slug":496},[1562,1563],"react","material-ui",[1565],"developer",[1567],{"__component":142,"title":11,"description":11,"images":1568,"videos":1569},[],[1570],{"url":1548,"alternativeText":11},[1565],[1562,1563],"projects/webapp-news-dashboard",{"url":1557,"alternativeText":11},[1576],{"title":495,"slug":496},"M20hUxfoYvIGZFSbyw2mzJzaXdaUUMyvT9WltvJg6Qg",{"id":1579,"title":1580,"_incomplete":11,"agency":11,"buttons":11,"category":1581,"client":11,"contents":1582,"createdAt":11,"date":1549,"description":1588,"extension":6,"isArchived":162,"meta":1589,"publishedAt":11,"rarity_star":11,"roles":1606,"slug":1592,"specialEffect":11,"stacks":1607,"stem":1608,"summary":1593,"thumbnail_image":1609,"types":1610,"updatedAt":11,"url":11,"__hash__":1612},"projects/projects/webapp-pizza.json","Food Webapp",{"title":1541,"slug":1542},[1583],{"__component":142,"title":11,"description":11,"images":1584,"videos":1585},[],[1586],{"url":1587,"alternativeText":11},"/media/projects/video-demos/Pizzeria-Webapp.webm","\u003Cp>A mini full-stack-style UI system simulating a food ordering platform with separate user and admin functionality.\u003C/p>\u003Cp> \u003C/p>\u003Cp>\u003Cvideo class=\"video\" controls=\"\" width=\"100%\" mute=\"\" autoplay=\"\" loop=\"\">\u003Csource src=\"/media/projects/video-demos/Pizzeria-Webapp.webm\" type=\"video/webm\">\u003C/video>\u003C/p>\u003Cp style=\"text-align:center;\"> \u003C/p>\u003Ch3 data-section-id=\"1lt45zq\" data-start=\"2411\" data-end=\"2433\">System Structure\u003C/h3>\u003Cp data-start=\"2435\" data-end=\"2448\">\u003Cstrong data-start=\"2435\" data-end=\"2448\">User Side\u003C/strong>\u003C/p>\u003Cul data-start=\"2449\" data-end=\"2572\">\u003Cli data-section-id=\"1h261i6\" data-start=\"2449\" data-end=\"2497\">browse food cards (name, description, price)\u003C/li>\u003Cli data-section-id=\"qb0df4\" data-start=\"2498\" data-end=\"2519\">add items to cart\u003C/li>\u003Cli data-section-id=\"1nmrux\" data-start=\"2520\" data-end=\"2572\">adjust quantity (increase/decrease/remove items)\u003C/li>\u003C/ul>\u003Cp data-start=\"2574\" data-end=\"2588\">\u003Cstrong data-start=\"2574\" data-end=\"2588\">Admin Side\u003C/strong>\u003C/p>\u003Cul data-start=\"2589\" data-end=\"2687\">\u003Cli data-section-id=\"1ap5l0x\" data-start=\"2589\" data-end=\"2611\">add new food items\u003C/li>\u003Cli data-section-id=\"1cvht23\" data-start=\"2612\" data-end=\"2637\">remove existing items\u003C/li>\u003Cli data-section-id=\"1j3odqb\" data-start=\"2638\" data-end=\"2687\">changes reflect immediately on user interface\u003C/li>\u003C/ul>\u003Cp> \u003C/p>\u003Ch3 data-section-id=\"wfdqm4\" data-start=\"2694\" data-end=\"2720\">What I Was Exploring\u003C/h3>\u003Cp data-start=\"2721\" data-end=\"2761\">This project was designed to understand:\u003C/p>\u003Cul data-start=\"2762\" data-end=\"2934\">\u003Cli data-section-id=\"xrz2rl\" data-start=\"2762\" data-end=\"2808\">shared state between roles (admin vs user)\u003C/li>\u003Cli data-section-id=\"1qmcitd\" data-start=\"2809\" data-end=\"2847\">cart logic and quantity management\u003C/li>\u003Cli data-section-id=\"wpmzjm\" data-start=\"2848\" data-end=\"2889\">UI consistency across dynamic updates\u003C/li>\u003Cli data-section-id=\"1v8dp1a\" data-start=\"2890\" data-end=\"2934\">separation of concerns in a small system\u003C/li>\u003C/ul>\u003Cp> \u003C/p>\u003Ch3 data-section-id=\"mzir3k\" data-start=\"2941\" data-end=\"2957\">Tech Focus\u003C/h3>\u003Cul data-start=\"2958\" data-end=\"3065\">\u003Cli data-section-id=\"ka8bft\" data-start=\"2958\" data-end=\"2967\">React\u003C/li>\u003Cli data-section-id=\"7b7ym7\" data-start=\"2968\" data-end=\"2983\">Material UI\u003C/li>\u003Cli data-section-id=\"1c8tfjv\" data-start=\"2984\" data-end=\"3028\">State synchronization between components\u003C/li>\u003Cli data-section-id=\"1p8bm6z\" data-start=\"3029\" data-end=\"3065\">CRUD + cart logic implementation\u003C/li>\u003C/ul>\u003Cp> \u003C/p>\u003Ch3 data-section-id=\"mlm2cg\" data-start=\"3072\" data-end=\"3085\">Insight\u003C/h3>\u003Cp data-start=\"3086\" data-end=\"3211\">This project introduced me to the idea of a \u003Cstrong data-start=\"3130\" data-end=\"3168\">mini ecosystem inside a single app\u003C/strong> — where one role directly affects another.\u003C/p>",{"path":1590,"body":1591},"/projects/webapp-pizza",{"title":1580,"slug":1592,"summary":1593,"url":11,"isArchived":162,"rarity_star":11,"client":11,"agency":11,"date":1549,"description":1588,"thumbnail_image":1594,"category":1596,"types":1597,"stacks":1599,"roles":1600,"contents":1601},"food-webapp","A mini food ordering system featuring user cart interactions and admin-controlled product management. Simulated a dual-role ecosystem where admin-side product updates dynamically reflected across the user ordering interface.",{"url":1595,"alternativeText":11},"/media/projects/thumbnails/food-app.webp",{"title":1541,"slug":1542},[1598],{"title":495,"slug":496},[1562,1563],[1565],[1602],{"__component":142,"title":11,"description":11,"images":1603,"videos":1604},[],[1605],{"url":1587,"alternativeText":11},[1565],[1562,1563],"projects/webapp-pizza",{"url":1595,"alternativeText":11},[1611],{"title":495,"slug":496},"tHF969L2sBQu072zbASAxmiRTDmbmqdgxFYym4Mwu_Q",{"clients":1614,"stacks":1706,"roles":1771},[1615,1620,1625,1629,1633,1638,1641,1644,1648,1651,1656,1659,1663,1666,1670,1673,1676,1680,1685,1690,1693,1696,1700,1703],{"code":1616,"title":1617,"logo":1618},"ajinomoto","Ajinomoto",{"url":1619,"alternativeText":1617},"/media/brands/ajinomoto-white.png",{"code":1433,"title":1621,"logo":1622},"Asia School of Business",{"url":1623,"alternativeText":1624},"/media/brands/asb-white.png","Asia Business School",{"code":1626,"title":1627,"logo":1628},"aff","Asean Football Federation",{"url":11,"alternativeText":1627},{"code":520,"title":1630,"logo":1631},"Cagamas",{"url":1632,"alternativeText":1630},"/media/brands/cagamas-white.png",{"code":1634,"title":1635,"logo":1636},"divinestellar","Divine Stellar",{"url":1637,"alternativeText":1635},"/media/brands/divine-stellar.png",{"code":768,"title":766,"logo":1639},{"url":1640,"alternativeText":766},"/media/brands/dofd-small-white.png",{"code":417,"title":415,"logo":1642},{"url":1643,"alternativeText":415},"/media/brands/ecosys-white.png",{"code":1389,"title":1645,"logo":1646},"Ecotree Hong Kong",{"url":1647,"alternativeText":1645},"/media/brands/ecotree-hk-white.svg",{"code":846,"title":844,"logo":1649},{"url":11,"alternativeText":1650},"Eureke Efektif",{"code":1652,"title":1653,"logo":1654},"flexcare","Flexcare",{"url":1655,"alternativeText":1653},"/media/brands/flexcare-white.png",{"code":1064,"title":1060,"logo":1657},{"url":1658,"alternativeText":1060},"/media/brands/gogoco-white.png",{"code":951,"title":1660,"logo":1661},"IOI",{"url":1662,"alternativeText":1660},"/media/brands/ioi-group-white.png",{"code":1334,"title":1332,"logo":1664},{"url":1665,"alternativeText":1332},"/media/brands/ioi-pg-white.png",{"code":270,"title":1667,"logo":1668},"Júgo",{"url":1669,"alternativeText":1667},"/media/brands/jugo-white.svg",{"code":207,"title":205,"logo":1671},{"url":1672,"alternativeText":205},"/media/brands/kirin-white.png",{"code":1113,"title":1111,"logo":1674},{"url":1675,"alternativeText":1111},"/media/brands/mkjr-white.png",{"code":139,"title":1677,"logo":1678},"MyPower",{"url":1679,"alternativeText":1677},"/media/brands/mypower-white.png",{"code":1681,"title":1682,"logo":1683},"ncer","NCER",{"url":1684,"alternativeText":1682},"/media/brands/ncer-white.png",{"code":1686,"title":1687,"logo":1688},"ock","OCK",{"url":1689,"alternativeText":1687},"/media/brands/ock-white.png",{"code":316,"title":314,"logo":1691},{"url":1692,"alternativeText":314},"/media/brands/sanki-white.png",{"code":1163,"title":1161,"logo":1694},{"url":1695,"alternativeText":1161},"/media/brands/silcotech.png",{"code":1006,"title":1697,"logo":1698},"Sincere Surgery Group",{"url":1699,"alternativeText":1697},"/media/brands/sincere-surgery-white.png",{"code":366,"title":364,"logo":1701},{"url":1702,"alternativeText":364},"/media/brands/thp-white.svg",{"code":1276,"title":1274,"logo":1704},{"url":1705,"alternativeText":1274},"/media/brands/xenergi-white.png",[1707,1711,1715,1719,1722,1727,1732,1736,1740,1744,1749,1753,1757,1762,1767],{"code":176,"title":1708,"logo":1709},"Nuxt",{"url":1710,"alternativeText":11},"https://healing-morning-3f30c21d5e.media.strapiapp.com/nuxt_primary_c5bd311103.png",{"code":177,"title":1712,"logo":1713},"Strapi",{"url":1714,"alternativeText":11},"https://healing-morning-3f30c21d5e.media.strapiapp.com/strapi_primary_9fe205414a.png",{"code":563,"title":1716,"logo":1717},"Laravel",{"url":1718,"alternativeText":11},"https://healing-morning-3f30c21d5e.media.strapiapp.com/laravel_primary_5e19864cce.png",{"code":623,"title":1720,"logo":1721},"CPanel",{"url":1718,"alternativeText":11},{"code":1723,"title":1724,"logo":1725},"bootstrap","Bootstrap",{"url":1726,"alternativeText":11},"https://healing-morning-3f30c21d5e.media.strapiapp.com/bootstrap_e819dbf9ab.png",{"code":1728,"title":1729,"logo":1730},"cpp","C++",{"url":1731,"alternativeText":11},"https://healing-morning-3f30c21d5e.media.strapiapp.com/c_311cf4ed37.png",{"code":499,"title":1733,"logo":1734},"CSS",{"url":1735,"alternativeText":11},"https://healing-morning-3f30c21d5e.media.strapiapp.com/css3_8a9e7d7c12.png",{"code":294,"title":1737,"logo":1738},"Figma",{"url":1739,"alternativeText":11},"https://healing-morning-3f30c21d5e.media.strapiapp.com/figma_8b3b6e5c3a.png",{"code":1522,"title":1741,"logo":1742},"HTML",{"url":1743,"alternativeText":11},"https://healing-morning-3f30c21d5e.media.strapiapp.com/html5_4337343270.png",{"code":1745,"title":1746,"logo":1747},"solidworks","Solidworks",{"url":1748,"alternativeText":11},"https://healing-morning-3f30c21d5e.media.strapiapp.com/solidworks_7016472005.png",{"code":1563,"title":1750,"logo":1751},"Material UI",{"url":1752,"alternativeText":11},"https://healing-morning-3f30c21d5e.media.strapiapp.com/mui_43438b7fb1.png",{"code":1562,"title":1754,"logo":1755},"React",{"url":1756,"alternativeText":11},"https://healing-morning-3f30c21d5e.media.strapiapp.com/react_3426e9ede2.png",{"code":1758,"title":1759,"logo":1760},"studio","Stud.io",{"url":1761,"alternativeText":11},"https://healing-morning-3f30c21d5e.media.strapiapp.com/stud_io_22172dc0ac.png",{"code":1763,"title":1764,"logo":1765},"javascript","Javascript",{"url":1766,"alternativeText":11},"https://healing-morning-3f30c21d5e.media.strapiapp.com/javascript_bd2ef6cb10.png",{"code":674,"title":1768,"logo":1769},"Tailwind",{"url":1770,"alternativeText":11},"https://healing-morning-3f30c21d5e.media.strapiapp.com/tailwind_ff011b41ff.png",[1772,1775,1778,1780,1782,1784,1786,1788,1789,1792,1795,1797],{"code":1773,"title":1774},"frontend-cms-dev","Frontend & CMS Dev",{"code":1776,"title":1777},"frontend-backend-dev","Frontend & Backend Dev",{"code":179,"title":1779},"Frontend Developer",{"code":180,"title":1781},"CMS Developer",{"code":625,"title":1783},"Backend Developer",{"code":1251,"title":1785},"Fullstack Developer",{"code":981,"title":1787},"Maintenance",{"code":292,"title":291},{"code":1790,"title":1791},"builder","Builder",{"code":1793,"title":1794},"project-lead","Project Lead",{"code":1565,"title":1796},"Developer",{"code":1798,"title":1799},"researcher","Researcher",1791727487878]