[{"data":1,"prerenderedAt":208},["ShallowReactive",2],{"navigation":3,"i-lucide:home":30,"i-lucide:folder":34,"i-lucide:file-text":36,"i-lucide:user":38,"i-simple-icons:linkedin":40,"i-simple-icons:github":43,"about":45,"mdc-18lwbc-key":64,"i-lucide:hash":206},[4],{"title":5,"path":6,"stem":7,"children":8,"page":29},"Blog","\u002Fblog","blog",[9,13,17,21,25],{"title":10,"path":11,"stem":12},"From Code to Production: My End-to-End Frontend Development Workflow","\u002Fblog\u002Fend-to-end-frontend","blog\u002Fend-to-end-frontend",{"title":14,"path":15,"stem":16},"From Mockup to Market: My End-to-End Product Design Process","\u002Fblog\u002Ffrom-mockup-to-market","blog\u002Ffrom-mockup-to-market",{"title":18,"path":19,"stem":20},"How I Built My Design System from Scratch","\u002Fblog\u002Fhow-i-built-my-own-design-system-from-scratch","blog\u002Fhow-i-built-my-own-design-system-from-scratch",{"title":22,"path":23,"stem":24},"The Psychology of Color in UI Design","\u002Fblog\u002Fpsychology-of-color-in-ui-design","blog\u002Fpsychology-of-color-in-ui-design",{"title":26,"path":27,"stem":28},"The Case for Slow Design in a Fast-Paced Digital World","\u002Fblog\u002Fslow-design-in-fast-paced-digital-world","blog\u002Fslow-design-in-fast-paced-digital-world",false,{"left":31,"top":31,"width":32,"height":32,"rotate":31,"vFlip":29,"hFlip":29,"body":33},0,24,"\u003Cg fill=\"none\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\">\u003Cpath d=\"M15 21v-8a1 1 0 0 0-1-1h-4a1 1 0 0 0-1 1v8\"\u002F>\u003Cpath d=\"M3 10a2 2 0 0 1 .709-1.528l7-6a2 2 0 0 1 2.582 0l7 6A2 2 0 0 1 21 10v9a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z\"\u002F>\u003C\u002Fg>",{"left":31,"top":31,"width":32,"height":32,"rotate":31,"vFlip":29,"hFlip":29,"body":35},"\u003Cpath fill=\"none\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M20 20a2 2 0 0 0 2-2V8a2 2 0 0 0-2-2h-7.9a2 2 0 0 1-1.69-.9L9.6 3.9A2 2 0 0 0 7.93 3H4a2 2 0 0 0-2 2v13a2 2 0 0 0 2 2Z\"\u002F>",{"left":31,"top":31,"width":32,"height":32,"rotate":31,"vFlip":29,"hFlip":29,"body":37},"\u003Cg fill=\"none\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\">\u003Cpath d=\"M6 22a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h8a2.4 2.4 0 0 1 1.704.706l3.588 3.588A2.4 2.4 0 0 1 20 8v12a2 2 0 0 1-2 2z\"\u002F>\u003Cpath d=\"M14 2v5a1 1 0 0 0 1 1h5M10 9H8m8 4H8m8 4H8\"\u002F>\u003C\u002Fg>",{"left":31,"top":31,"width":32,"height":32,"rotate":31,"vFlip":29,"hFlip":29,"body":39},"\u003Cg fill=\"none\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\">\u003Cpath d=\"M19 21v-2a4 4 0 0 0-4-4H9a4 4 0 0 0-4 4v2\"\u002F>\u003Ccircle cx=\"12\" cy=\"7\" r=\"4\"\u002F>\u003C\u002Fg>",{"left":31,"top":31,"width":32,"height":32,"rotate":31,"vFlip":29,"hFlip":29,"body":41,"hidden":42},"\u003Cpath fill=\"currentColor\" d=\"M20.447 20.452h-3.554v-5.569c0-1.328-.027-3.037-1.852-3.037c-1.853 0-2.136 1.445-2.136 2.939v5.667H9.351V9h3.414v1.561h.046c.477-.9 1.637-1.85 3.37-1.85c3.601 0 4.267 2.37 4.267 5.455v6.286zM5.337 7.433a2.06 2.06 0 0 1-2.063-2.065a2.064 2.064 0 1 1 2.063 2.065m1.782 13.019H3.555V9h3.564zM22.225 0H1.771C.792 0 0 .774 0 1.729v20.542C0 23.227.792 24 1.771 24h20.451C23.2 24 24 23.227 24 22.271V1.729C24 .774 23.2 0 22.222 0z\"\u002F>",true,{"left":31,"top":31,"width":32,"height":32,"rotate":31,"vFlip":29,"hFlip":29,"body":44},"\u003Cpath fill=\"currentColor\" d=\"M12 .297c-6.63 0-12 5.373-12 12c0 5.303 3.438 9.8 8.205 11.385c.6.113.82-.258.82-.577c0-.285-.01-1.04-.015-2.04c-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729c1.205.084 1.838 1.236 1.838 1.236c1.07 1.835 2.809 1.305 3.495.998c.108-.776.417-1.305.76-1.605c-2.665-.3-5.466-1.332-5.466-5.93c0-1.31.465-2.38 1.235-3.22c-.135-.303-.54-1.523.105-3.176c0 0 1.005-.322 3.3 1.23c.96-.267 1.98-.399 3-.405c1.02.006 2.04.138 3 .405c2.28-1.552 3.285-1.23 3.285-1.23c.645 1.653.24 2.873.12 3.176c.765.84 1.23 1.91 1.23 3.22c0 4.61-2.805 5.625-5.475 5.92c.42.36.81 1.096.81 2.22c0 1.606-.015 2.896-.015 3.286c0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12\"\u002F>",{"id":46,"title":47,"body":48,"content":49,"description":50,"extension":51,"images":52,"meta":59,"navigation":42,"path":60,"seo":61,"stem":62,"__hash__":63},"about\u002Fabout.yml","About Me",null,"Hi, I'm **Syamsul Amin**, a Frontend Developer with a strong focus on crafting reliable, scalable, and user-centered digital interfaces. Over the past six years, I’ve worked across various industries building products that merge thoughtful design with clean, maintainable code.\n\nMy journey into front-end development started with a deep curiosity for how interfaces work—how a simple interaction or a well-crafted component can dramatically improve a user’s experience. As I grew more immersed in the field, I found my passion at the intersection of **design clarity and technical precision**, especially in modern JavaScript ecosystems like Vue.js, Nuxt.js, and Node-based tooling.\n\n### My Frontend Philosophy\n\nMy approach to front-end development revolves around three principles: **performance**, **accessibility**, and **scalability**.\n\n- I believe performance is a form of user respect—fast load times and smooth interactions keep people engaged.\n- Accessibility ensures that every person, regardless of ability or device, can use the product comfortably.\n- Scalability means building systems and components that grow with the product, not against it.\n\nWhether I'm architecting a new design system, optimizing a Nuxt 3 application, or bringing UI\u002FUX mockups to life with reusable components, my priority is always a seamless, intuitive experience powered by solid engineering.\n\n### What Motivates Me\n\nI’m driven by the challenge of turning complex requirements into elegant solutions. Solving real-world problems through clean code, collaborating with designers, and enhancing user flows are the parts of my work that motivate me daily.\n\nI also enjoy staying updated with the latest frontend innovations—from SSR frameworks and state management patterns to performance profiling and tooling improvements. Constant learning is simply part of the craft.\n\n### Outside of Code\n\nWhen I’m not working on front-end projects, I enjoy exploring local coffee shops, cycling, and experimenting with side projects that let me try new technologies. I also contribute to open-source when possible, especially around tooling and UI component patterns.\n\nThanks for visiting my page. Feel free to explore my [projects](\u002Fprojects) or [Latest CV](https:\u002F\u002Fdocs.google.com\u002Fdocument\u002Fd\u002F180-oVkB8XaTL6-BLPwhYwV89IYHegjVmku863HRpQh4\u002Fedit?usp=sharing) if you’d like to collaborate or discuss an upcoming idea!\n","Learn more about my journey as a Frontend Developer, my development philosophy, and my passion for building fast, accessible, and intuitive digital experiences. \n","yml",[53,56],{"src":54,"alt":55},"https:\u002F\u002Fimages.unsplash.com\u002Fphoto-1744877478622-a78c7a3336f6?q=80&w=1587&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D","My workspace setup",{"src":57,"alt":58},"https:\u002F\u002Fimages.unsplash.com\u002Fphoto-1744429523595-2c06b8611242?q=80&w=1587&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D","Exploring new places",{},"\u002Fabout",{"title":47,"description":50},"about","03r-v_8-gvjj2KEeagFT116If5hk2GQBRsHJegWI2Gg",{"data":65,"body":66},{},{"type":67,"children":68},"root",[69,85,97,104,130,150,155,161,166,171,177,182],{"type":70,"tag":71,"props":72,"children":73},"element","p",{},[74,77,83],{"type":75,"value":76},"text","Hi, I'm ",{"type":70,"tag":78,"props":79,"children":80},"strong",{},[81],{"type":75,"value":82},"Syamsul Amin",{"type":75,"value":84},", a Frontend Developer with a strong focus on crafting reliable, scalable, and user-centered digital interfaces. Over the past six years, I’ve worked across various industries building products that merge thoughtful design with clean, maintainable code.",{"type":70,"tag":71,"props":86,"children":87},{},[88,90,95],{"type":75,"value":89},"My journey into front-end development started with a deep curiosity for how interfaces work—how a simple interaction or a well-crafted component can dramatically improve a user’s experience. As I grew more immersed in the field, I found my passion at the intersection of ",{"type":70,"tag":78,"props":91,"children":92},{},[93],{"type":75,"value":94},"design clarity and technical precision",{"type":75,"value":96},", especially in modern JavaScript ecosystems like Vue.js, Nuxt.js, and Node-based tooling.",{"type":70,"tag":98,"props":99,"children":101},"h3",{"id":100},"my-frontend-philosophy",[102],{"type":75,"value":103},"My Frontend Philosophy",{"type":70,"tag":71,"props":105,"children":106},{},[107,109,114,116,121,123,128],{"type":75,"value":108},"My approach to front-end development revolves around three principles: ",{"type":70,"tag":78,"props":110,"children":111},{},[112],{"type":75,"value":113},"performance",{"type":75,"value":115},", ",{"type":70,"tag":78,"props":117,"children":118},{},[119],{"type":75,"value":120},"accessibility",{"type":75,"value":122},", and ",{"type":70,"tag":78,"props":124,"children":125},{},[126],{"type":75,"value":127},"scalability",{"type":75,"value":129},".",{"type":70,"tag":131,"props":132,"children":133},"ul",{},[134,140,145],{"type":70,"tag":135,"props":136,"children":137},"li",{},[138],{"type":75,"value":139},"I believe performance is a form of user respect—fast load times and smooth interactions keep people engaged.",{"type":70,"tag":135,"props":141,"children":142},{},[143],{"type":75,"value":144},"Accessibility ensures that every person, regardless of ability or device, can use the product comfortably.",{"type":70,"tag":135,"props":146,"children":147},{},[148],{"type":75,"value":149},"Scalability means building systems and components that grow with the product, not against it.",{"type":70,"tag":71,"props":151,"children":152},{},[153],{"type":75,"value":154},"Whether I'm architecting a new design system, optimizing a Nuxt 3 application, or bringing UI\u002FUX mockups to life with reusable components, my priority is always a seamless, intuitive experience powered by solid engineering.",{"type":70,"tag":98,"props":156,"children":158},{"id":157},"what-motivates-me",[159],{"type":75,"value":160},"What Motivates Me",{"type":70,"tag":71,"props":162,"children":163},{},[164],{"type":75,"value":165},"I’m driven by the challenge of turning complex requirements into elegant solutions. Solving real-world problems through clean code, collaborating with designers, and enhancing user flows are the parts of my work that motivate me daily.",{"type":70,"tag":71,"props":167,"children":168},{},[169],{"type":75,"value":170},"I also enjoy staying updated with the latest frontend innovations—from SSR frameworks and state management patterns to performance profiling and tooling improvements. Constant learning is simply part of the craft.",{"type":70,"tag":98,"props":172,"children":174},{"id":173},"outside-of-code",[175],{"type":75,"value":176},"Outside of Code",{"type":70,"tag":71,"props":178,"children":179},{},[180],{"type":75,"value":181},"When I’m not working on front-end projects, I enjoy exploring local coffee shops, cycling, and experimenting with side projects that let me try new technologies. I also contribute to open-source when possible, especially around tooling and UI component patterns.",{"type":70,"tag":71,"props":183,"children":184},{},[185,187,194,196,204],{"type":75,"value":186},"Thanks for visiting my page. Feel free to explore my ",{"type":70,"tag":188,"props":189,"children":191},"a",{"href":190},"\u002Fprojects",[192],{"type":75,"value":193},"projects",{"type":75,"value":195}," or ",{"type":70,"tag":188,"props":197,"children":201},{"href":198,"rel":199},"https:\u002F\u002Fdocs.google.com\u002Fdocument\u002Fd\u002F180-oVkB8XaTL6-BLPwhYwV89IYHegjVmku863HRpQh4\u002Fedit?usp=sharing",[200],"nofollow",[202],{"type":75,"value":203},"Latest CV",{"type":75,"value":205}," if you’d like to collaborate or discuss an upcoming idea!",{"left":31,"top":31,"width":32,"height":32,"rotate":31,"vFlip":29,"hFlip":29,"body":207},"\u003Cpath fill=\"none\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M4 9h16M4 15h16M10 3L8 21m8-18l-2 18\"\u002F>",1785733925102]