[{"data":1,"prerenderedAt":894},["ShallowReactive",2],{"site":3,"fte-projects":48,"consulting-projects":356,"hobby-projects":544,"all-posts":764},{"hero":4,"about":8},{"workLabel":5,"ctaHeading":6,"ctaDescription":7},"SELECTED WORK — 2018 \u002F 2025","Let's build\nsomething together","Have a project in mind? I'm open to select consulting and collaboration work.",{"sections":9,"currently":34,"contacts":35},[10,16,21,26],{"title":11,"paragraphs":12},"Who I am",[13,14,15],"I'm Lucas Souza, but most people call me Los (like \"loss\") — an engineer with a huge focus on UX with over eight years of experience designing and developing scalable, high-quality applications. I'm Brazilian, based in Sorocaba, São Paulo, and I've spent most of my career working remotely with teams across the world.","I have a hybrid skill set that lets me bridge design and engineering. I can lead UI\u002FUX work in Figma, build design systems from scratch, and ship pixel-perfect, high-performance frontends. My work has spanned startups and large enterprises — including **Tim**, **Bradesco**, and **Vivo** — products reaching millions of monthly active users.","I focus on building intuitive, maintainable, and scalable user experiences, and I care about the small details: motion that feels right, type that holds up at every scale, interfaces that quietly get out of the way.",{"title":17,"paragraphs":18},"What I've been doing lately",[19,20],"Since August 2023 I've been Founding UX Engineer at **Launchbrightly**, where I own a 120+ component design system in Figma + Vue 3 + Storybook. Most of my week goes into the system: shipping new components, writing engineering specs in Figma, and keeping the Vue implementation pixel-perfect against the source of truth.","I'm test-driven by default — full coverage with Vitest, Vue Testing Library, and VTU sits at 85% across the app, which has measurably reduced regression. I also work directly with the CEO and CPO on product strategy and UX decisions, and design end-to-end high-fidelity prototypes.",{"title":22,"paragraphs":23},"Beyond the screen",[24,25],"Outside work I'm into gaming, travel, airsoft, taekwondo, shooting, and playing on my small home studio. I'm married, have two stepchildren, a baby, two dogs, and a snake. ADHD brain, INTJ-A personality, introvert by nature.","I moved from São Paulo's capital to Sorocaba in 2020 — a quieter city of ~700k people — for a better cost of living and quality of life. I've been working remotely with global teams ever since.",{"title":27,"last":28,"paragraphs":29},"How I started",true,[30,31,32,33],"I got into tech through gaming. In 2006 I started exploring addons for Counter-Strike. By 2008 I was creating MU Online servers to play with friends — my first contact with HTML\u002FPHP. Then from 2009 to 2015 I wrote scripts, gamemodes, and plugins for GTA San Andreas's SA:MP community that achieved 100k+ downloads.","In 2018 I was hired by **Vivo** and started modernizing their stack from jQuery to Vue, and a year later at Accenture I helped build an in-house JS framework for *Tim*, one of Brazil's largest telecoms. After that I led frontend at **Bradesco** (Brazil's third-largest bank), then shipped embedded UI for set-top boxes at **Claro**.","A long detour through **FileCloud**, **Alvin AI**, and a stint as founder of **BateVolta** taught me how teams of every size ship. At **FileCloud** I won the company's Technical Achievement Reward — the first in fourteen years — and was named Developer MVP for 2021.","Most of what I make now lives in the overlap between design and code, but still with that passion with gaming industry.","Founding UX Engineer at Launchbrightly",[36,40,44],{"label":37,"value":38,"href":39},"Email","loszera.dev@gmail.com","mailto:loszera.dev@gmail.com",{"label":41,"value":42,"href":43},"LinkedIn","in\u002Flucas-o-863a90397","https:\u002F\u002Fwww.linkedin.com\u002Fin\u002Flucas-o-863a90397\u002F",{"label":45,"value":46,"href":47},"GitHub","@lucassouza","#",[49,99,133,173,231,258,288,324],{"id":50,"title":51,"accent":52,"art":53,"body":54,"category":61,"contributions":62,"description":58,"extension":69,"highlight":61,"imageNote":61,"images":70,"links":74,"meta":78,"navigation":28,"note":61,"order":79,"path":80,"role":81,"seo":82,"stack":83,"stem":93,"subtitle":94,"summary":95,"tag":96,"year":97,"__hash__":98},"projects\u002Fprojects\u002Flaunchbrightly.md","Launchbrightly","oklch(74% 0.14 158)","atlas",{"type":55,"value":56,"toc":57},"minimark",[],{"title":58,"searchDepth":59,"depth":59,"links":60},"",2,[],null,[63,64,65,66,67,68],"Built and maintains a 150+ component design system in Figma + Vue 3","Authored engineering specs in Figma that make implementation nearly mechanical","Implemented full test coverage with Vitest, Vue Testing Library, and VTU — 85% codebase coverage","Dealing with complex product requirements and design decisions","Using Amplify for backend and GraphQL for data fetching","Designed end-to-end UX flows, from low-fidelity wireframes to high-fidelity prototypes","md",[71,72,73],"\u002Fimages\u002Flaunchbrightly\u002Fgallery.png","\u002Fimages\u002Flaunchbrightly\u002Fkanban.png","\u002Fimages\u002Flaunchbrightly\u002Fcomparison.png",[75],{"label":76,"href":77},"Visit","https:\u002F\u002Fwww.launchbrightly.com",{},1,"\u002Fprojects\u002Flaunchbrightly","UX Engineer",{"title":51,"description":58},[84,85,86,87,88,89,90,91,92],"Vue 3","TypeScript","Figma","Composition API","Pinia","TailwindCSS","GraphQL","Amplify","Vitest","projects\u002Flaunchbrightly","Design system & product UI for a screenshot automation platform","I own the creation and maintenance of a 150+ component design system. I work directly with the CEO and CPO on product strategy, write engineering specs in Figma, and ship the Vue 3 implementation behind them. I am the main responsible for the company UX decisions, research and development.\n","SaaS","Aug 2023 — Now","4UmV-MixtYJbD3pKAgnT4BgsTD1JrKoGDinfsy-ASXI",{"id":100,"title":101,"accent":102,"art":103,"body":104,"category":61,"contributions":108,"description":58,"extension":69,"highlight":61,"imageNote":61,"images":114,"links":116,"meta":119,"navigation":28,"note":61,"order":59,"path":120,"role":121,"seo":122,"stack":123,"stem":127,"subtitle":128,"summary":129,"tag":130,"year":131,"__hash__":132},"projects\u002Fprojects\u002Fbatevolta.md","BateVolta","oklch(74% 0.14 30)","beacon",{"type":55,"value":105,"toc":106},[],{"title":58,"searchDepth":59,"depth":59,"links":107},[],[109,110,111,112,113],"Designed two full design systems (MVP + Gold Release) with Figma + Vue + Storybook","Designed and implemented the complete UX flow for agencies and travelers","Built a scalable frontend on Nuxt 3, Tailwind and Supabase","Managed a team of six engineers and owned product strategy + technical execution","Raised a $20k angel investment to fund the early build",[115],"\u002Fimages\u002Fbatevolta\u002Ftrip-page.png",[117],{"label":118,"href":47},"Case study",{},"\u002Fprojects\u002Fbatevolta","CEO",{"title":101,"description":58},[124,84,85,125,89,126,86],"Nuxt 3","Supabase","Storybook","projects\u002Fbatevolta","A travel platform I founded, designed, managed, and built end-to-end","Founded and led a venture-backed travel platform connecting agencies and travelers. I owned both design and engineering — two full design systems, the full UX flow, and the Nuxt 3 architecture. Led 9 employees, dealing with investors, selling and managing the product development.\n","Travel","Oct 2022 — Aug 2023","YsJUY7HY4ht8so5ZPtMVDic9a1gqobuUqP7cXo6if3M",{"id":134,"title":135,"accent":136,"art":137,"body":138,"category":61,"contributions":142,"description":58,"extension":69,"highlight":148,"imageNote":151,"images":152,"links":154,"meta":157,"navigation":28,"note":61,"order":158,"path":159,"role":160,"seo":161,"stack":162,"stem":167,"subtitle":168,"summary":169,"tag":170,"year":171,"__hash__":172},"projects\u002Fprojects\u002Falvin.md","Alvin AI","oklch(74% 0.14 220)","pulse",{"type":55,"value":139,"toc":140},[],{"title":58,"searchDepth":59,"depth":59,"links":141},[],[143,144,145,146,147],"Built and maintained their first design system, tuned to a very specific product surface","Refactored 85% of the application to improve reusability and reduce maintenance cost","Established the architecture: ESLint, Stylelint, Postcss, Prettier, Husky, docs","Started the migration from Vue 2 to Vue 3 with the Composition API","Won an internal hackathon on data dashboards using Svelte",{"label":149,"text":150},"Hackathon winner","I won a hackathon on data dashboards using Svelte","Product under NDA — Screenshot is from a public video published by the company.",[153],"\u002Fimages\u002Falvin\u002Fdatalineage.png",[155],{"label":76,"href":156},"https:\u002F\u002Fwww.alvin.ai\u002F",{},3,"\u002Fprojects\u002Falvin","Lead UX Engineer",{"title":135,"description":58},[84,163,86,85,164,165,166],"Quasar","Jest","Vue 2","Svelte","projects\u002Falvin","Leading frontend development & UX for a Estonian data tooling product startup","Alvin's first dedicated UX hire. I built the first design system, refactored 85% of the application for reuse, and led the technical direction for UI\u002FUX across the team. Also I was the main responsible for the migration from Vue 2 (class components) to Vue 3 (Composition API).\n","Data & AI","Feb 2022 — Oct 2022","rZveYOjd0AibaHIPBHWVVrhkr9uACrFv51dZv1EAatw",{"id":174,"title":175,"accent":176,"art":177,"body":178,"category":61,"contributions":182,"description":58,"extension":69,"highlight":190,"imageNote":61,"images":193,"links":201,"meta":215,"navigation":28,"note":216,"order":217,"path":218,"role":219,"seo":220,"stack":221,"stem":225,"subtitle":226,"summary":227,"tag":228,"year":229,"__hash__":230},"projects\u002Fprojects\u002Ffilecloud.md","FileCloud","oklch(74% 0.14 80)","loop",{"type":55,"value":179,"toc":180},[],{"title":58,"searchDepth":59,"depth":59,"links":181},[],[183,184,185,186,187,188,189],"Core member of the 4-engineer team that built FileCloud Aurora — a full product rewrite from Java GWT to Vue.js","Built a no-code automation workflow with drag-and-drop for file-based actions, enabling users to create custom file automations without code","Led the responsiveness redesign — made the entire web application fully adaptive across screen sizes","Developed a fully integrated WebEditor for markdown and text file editing\u002Fpreview","Contributed to VPAT (Voluntary Product Accessibility Template) compliance, improving accessibility for users with disabilities","Designed and shipped multiple UX\u002FUI improvements in Figma and implemented them in Vue 2","Featured by name on the company blog for the GWT-to-Vue migration effort",{"label":191,"text":192},"Technical Achievement Award","First recipient in 14 years of FileCloud's Technical Achievement Reward — awarded for the automation workflow feature. Also named Developer MVP 2021 and earned 2x higher end-of-year bonuses based on performance.",[194,195,196,197,198,199,200],"\u002Fimages\u002Ffilecloud\u002Fwf_1.webp","\u002Fimages\u002Ffilecloud\u002Fwf_2.webp","\u002Fimages\u002Ffilecloud\u002Fwf_3.webp","\u002Fimages\u002Ffilecloud\u002Fwf_4.webp","\u002Fimages\u002Ffilecloud\u002Fwf_5.webp","\u002Fimages\u002Ffilecloud\u002Fwf_6.webp","https:\u002F\u002Fwww.youtube.com\u002Fwatch?v=0w95Gjksi7A",[202,204,207,210,213],{"label":76,"href":203},"https:\u002F\u002Fwww.filecloud.com\u002F",{"label":205,"href":206},"GWT to Vue blog","https:\u002F\u002Fwww.filecloud.com\u002Fblog\u002Fthe-new-filecloud-experience-migrating-from-gwt-to-vue-js\u002F",{"label":208,"href":209},"Aurora launch","https:\u002F\u002Fwww.filecloud.com\u002Fblog\u002Fupdate-20-2-introducing-filecloud-aurora",{"label":211,"href":212},"Workflow feature","https:\u002F\u002Fwww.filecloud.com\u002Fworkflow-automation\u002F",{"label":214,"href":200},"Demo video",{},"First winner in 14 years of the Technical Achievement Reward for the automation workflow development. Named Developer MVP 2021. Earned 2x higher EOY bonuses based on performance.\n",5,"\u002Fprojects\u002Ffilecloud","UI Developer",{"title":175,"description":58},[165,222,223,86,224],"SASS\u002FSCSS","Vuex","Java GWT","projects\u002Ffilecloud","Help building FileCloud Aurora — a full product revamp from GWT to Vue","One of four engineers responsible for revamping the entire FileCloud platform into Aurora — a complete rewrite migrating from Java GWT to Vue.js. I built the no-code automation workflow feature, led the responsive redesign, shipped a fully integrated WebEditor, and contributed to VPAT accessibility compliance. Featured by name in the company blog for the GWT-to-Vue migration.\n","Enterprise SaaS","Jun 2020 — Feb 2022","jwcmEfz06C2Yptubx0Op0f1_rlGChX0RC6c6KWsTdpw",{"id":232,"title":233,"accent":234,"art":235,"body":236,"category":61,"contributions":240,"description":58,"extension":69,"highlight":61,"imageNote":244,"images":245,"links":61,"meta":247,"navigation":28,"note":61,"order":248,"path":249,"role":219,"seo":250,"stack":251,"stem":252,"subtitle":253,"summary":254,"tag":255,"year":256,"__hash__":257},"projects\u002Fprojects\u002Fclaro.md","ClaroTV","oklch(74% 0.14 180)","field",{"type":55,"value":237,"toc":238},[],{"title":58,"searchDepth":59,"depth":59,"links":239},[],[241,242,243],"Developed UI for set-top box software running on millions of devices","Focused on performance optimization, improving UI fluidity on low-resource hardware","Improved design-to-code consistency, ensuring pixel-perfect implementation","This is a TV software. Image is from public content from Claro.",[246],"\u002Fimages\u002Fclaro\u002Fui.webp",{},6,"\u002Fprojects\u002Fclaro",{"title":233,"description":58},[222],"projects\u002Fclaro","UI for set-top boxes and TV interfaces, optimized for low-resource hardware","I developed UI for set-top box software shipping on TVs across Brazil. Constraints were tight: vanilla JS, pure CSS, low memory, careful animation.\n","Telecom","Dec 2019 — Jun 2020","FgN14o_zeetRjDwV0LmsKjwN9TupsHo-yQhNIENQL9I",{"id":259,"title":260,"accent":261,"art":262,"body":263,"category":61,"contributions":267,"description":58,"extension":69,"highlight":61,"imageNote":272,"images":273,"links":61,"meta":275,"navigation":28,"note":61,"order":276,"path":277,"role":160,"seo":278,"stack":279,"stem":282,"subtitle":283,"summary":284,"tag":285,"year":286,"__hash__":287},"projects\u002Fprojects\u002Fbradesco.md","Bradesco","oklch(74% 0.14 60)","vector",{"type":55,"value":264,"toc":265},[],{"title":58,"searchDepth":59,"depth":59,"links":266},[],[268,269,270,271],"Led all frontend architecture decisions and development as the sole frontend engineer","Built new features for a car financing system using Vue.js, Vuex, and Socket.io","Developed mobile apps for internal users using Ionic 3","Owned the full frontend stack for a major financial institution","Product under NDA - Internal financial tool, not possible taking screenshots",[274],"\u002Fimages\u002Fbradesco\u002Fbrafin.webp",{},7,"\u002Fprojects\u002Fbradesco",{"title":260,"description":58},[165,223,222,280,281,85],"Socket.io","Ionic 3","projects\u002Fbradesco","Frontend lead for a car financing system at Brazil's third-largest bank","One-man frontend army, leading architecture decisions and development for Bradesco — the third-largest bank in Brazil. I built features for an internal car financing system and shipped mobile apps with Ionic.\n","Banking","Jul 2019 — Dec 2019","ncXQgq81u10wV6gzAqa43ouKpdxTa69rht_gJZIhJTA",{"id":289,"title":290,"accent":291,"art":137,"body":292,"category":61,"contributions":296,"description":58,"extension":69,"highlight":61,"imageNote":301,"images":302,"links":306,"meta":313,"navigation":28,"note":61,"order":314,"path":315,"role":316,"seo":317,"stack":318,"stem":319,"subtitle":320,"summary":321,"tag":255,"year":322,"__hash__":323},"projects\u002Fprojects\u002Ftim.md","TIM","oklch(74% 0.14 250)",{"type":55,"value":293,"toc":294},[],{"title":58,"searchDepth":59,"depth":59,"links":295},[],[297,298,299,300],"Built 8+ landing pages including homepage and flagship products (70M+\u002Fmonth access)","Co-created an internal JavaScript framework inspired by React's architecture","Mentored junior engineers and conducted technical interviews","Occasionally stepped in as tech lead for frontend delivery, interviews and code reviews","These screenshots were taken using Wayback Machine and might not reflect the current state of the site.",[303,304,305],"\u002Fimages\u002Ftim\u002Fbeta.png","\u002Fimages\u002Ftim\u002Fblack-familia.mp4","\u002Fimages\u002Ftim\u002Fb2b.png",[307,310],{"label":308,"href":309},"TIM Black Familia (2019 version)","https:\u002F\u002Fweb.archive.org\u002Fweb\u002F20191015001327\u002Fhttps:\u002F\u002Fwww.tim.com.br\u002Fsp\u002Fpara-voce\u002Fplanos\u002Fpos-pago\u002Ftim-black-familia",{"label":311,"href":312},"TIM Beta (2019 version)","https:\u002F\u002Fweb.archive.org\u002Fweb\u002F20191015001204\u002Fhttps:\u002F\u002Fwww.tim.com.br\u002Fsp\u002Fpara-voce\u002Fplanos\u002Fbeta",{},8,"\u002Fprojects\u002Ftim","Senior Frontend Engineer",{"title":290,"description":58},[222,85],"projects\u002Ftim","Homepage and flagship products for a telecom with 70M+ monthly visits","At Accenture, I built landing pages for TIM — including their homepage and flagship product pages reaching 70M+ monthly visitors. I also helped create an internal JS framework inspired by React.\n","Feb 2019 — Jul 2019","kAsQF_8C2st7OSQALNLtnKYE1gUxlV7XXfd_PVG6vmo",{"id":325,"title":326,"accent":327,"art":235,"body":328,"category":61,"contributions":332,"description":58,"extension":69,"highlight":61,"imageNote":337,"images":338,"links":341,"meta":344,"navigation":28,"note":61,"order":345,"path":346,"role":347,"seo":348,"stack":349,"stem":351,"subtitle":352,"summary":353,"tag":255,"year":354,"__hash__":355},"projects\u002Fprojects\u002Fvivo.md","Vivo","oklch(74% 0.14 280)",{"type":55,"value":329,"toc":330},[],{"title":58,"searchDepth":59,"depth":59,"links":331},[],[333,334,335,336],"Built 25+ landing pages from scratch for Vivo's e-commerce platform","Migrated the team's tech stack from jQuery to Vue.js, mentoring other developers","Created a landing page boilerplate that reduced build time from days to hours","Focused on accessibility and responsive design across all deliverables","Screenshots from 2026 and does not reflect my work in 2018\u002F2019",[339,340],"\u002Fimages\u002Fvivo\u002Fcontrole.png","\u002Fimages\u002Fvivo\u002Fsmart-wifi.png",[342],{"label":118,"href":343},"https:\u002F\u002Fvivo.com.br\u002F",{},9,"\u002Fprojects\u002Fvivo","Frontend Engineer",{"title":326,"description":58},[165,350,222],"jQuery","projects\u002Fvivo","Landing pages and jQuery-to-Vue migration for Brazil's largest telecom","My first formal dev role at Wunderman Thompson, building landing pages for Vivo — Brazil's biggest telecom. I modernized the stack from jQuery to Vue and built a boilerplate that saved days of work per project.\n\nMost of the landing pages I built for Vivo have since been migrated to their new CMS, which also uses Vue under the hood (Adobe AEM).\n\nI trained all the 12 agency developers so they could build landing pages faster and more efficiently with Vue.js too.\n","Feb 2018 — Feb 2019","BjIrbKedve5_Ihv2j0r73JtdNodZMailj3nnvjp7tXo",[357,394,428,457,486,517],{"id":358,"title":359,"accent":360,"art":137,"body":361,"category":365,"contributions":366,"description":58,"extension":69,"highlight":61,"imageNote":61,"images":375,"links":378,"meta":381,"navigation":28,"note":61,"order":79,"path":382,"role":316,"seo":383,"stack":384,"stem":388,"subtitle":389,"summary":390,"tag":391,"year":392,"__hash__":393},"projects\u002Fprojects\u002Fjohn-smedley.md","John Smedley","oklch(74% 0.14 45)",{"type":55,"value":362,"toc":363},[],{"title":58,"searchDepth":59,"depth":59,"links":364},[],"consulting",[367,368,369,370,371,372,373,374],"Set up the entire project scaffolding with Nuxt 4, Vue 3, and TypeScript","Contributed to the design direction and UI decisions","Integrated Dato CMS for content management","Integrated GlobalE for globalization","Developed a component library and established a design system","Homepage, CMS pages, PLPs, Blog and Header all built by me","Connected Centra ecommerce store for product catalog and checkout","Established development patterns and project architecture",[376,377],"\u002Fimages\u002Fjs\u002Fjs-home.png","\u002Fimages\u002Fjs\u002Fjs-demo.mp4",[379],{"label":76,"href":380},"https:\u002F\u002Fwww.johnsmedley.com",{},"\u002Fprojects\u002Fjohn-smedley",{"title":359,"description":58},[385,84,85,386,387,89],"Nuxt 4","Dato CMS","Centra","projects\u002Fjohn-smedley","Luxury clothing ecommerce built with Nuxt 4, Dato CMS and Centra","John Smedley is a prestigious UK luxury clothing brand. As part of a small team, I helped shape the design direction and built the entire project scaffolding — a Nuxt 4, Vue 3, TypeScript application consuming Dato CMS for content and Centra as the ecommerce platform. I was the main responsible for creating a component library and establishing a design system. The components I built were used across the entire site. I was also the developer responsible for the header component, which was a very complex and interactive component.\n","Ecommerce","2025","8HaojOlStPMDIlwq3-k4Yt0BvGolYyoj6mi8A9amPEs",{"id":395,"title":396,"accent":397,"art":53,"body":398,"category":365,"contributions":402,"description":58,"extension":69,"highlight":61,"imageNote":61,"images":408,"links":415,"meta":416,"navigation":28,"note":61,"order":59,"path":417,"role":418,"seo":419,"stack":420,"stem":423,"subtitle":424,"summary":425,"tag":391,"year":426,"__hash__":427},"projects\u002Fprojects\u002Floyalty-brand.md","Loyalty Brand Marketing","oklch(74% 0.14 340)",{"type":55,"value":399,"toc":400},[],{"title":58,"searchDepth":59,"depth":59,"links":401},[],[403,404,405,406,407],"Sole engineer responsible for all ecommerce frontend, backend, CMS, and platform","Advice and guidance on technical decisions, and technology stack","Built and maintained storefronts for three distinct clothing brands","Developed some backend functionality with PHP","Managed the full technical infrastructure and deployment pipeline",[409,410,411,412,413,414],"\u002Fimages\u002Flbm\u002Fmembers-area.png","\u002Fimages\u002Flbm\u002Fcategory.png","\u002Fimages\u002Flbm\u002Fmembers-area-2.png","\u002Fimages\u002Flbm\u002Fupsells.png","\u002Fimages\u002Flbm\u002Fpf-home.png","\u002Fimages\u002Flbm\u002Fpf-wishlist.png",[],{},"\u002Fprojects\u002Floyalty-brand","Principal Frontend Engineer",{"title":396,"description":58},[84,85,89,421,422],"PHP","Sanity","projects\u002Floyalty-brand","Full-stack ecommerce platform for a US multi-brand clothing company","Loyalty Brand Marketing is a US-based company operating three clothing brands. As the sole engineer in the company, I owned the entire technical stack — ecommerce frontend, backend, CMS, and shopping platform. I also worked on backend development with PHP.\nUnfortunately, in this project I was not responsible or had any freedom on the design part.\n","2022 - 2024","LNIh7CNkXLeQ20JawkmtdxS9tpOVEGGR0UoPRJQidwk",{"id":429,"title":430,"accent":431,"art":177,"body":432,"category":365,"contributions":436,"description":58,"extension":69,"highlight":61,"imageNote":61,"images":441,"links":443,"meta":446,"navigation":28,"note":61,"order":158,"path":447,"role":316,"seo":448,"stack":449,"stem":451,"subtitle":452,"summary":453,"tag":454,"year":455,"__hash__":456},"projects\u002Fprojects\u002Fheidrick.md","Heidrick & Struggles","oklch(74% 0.14 200)",{"type":55,"value":433,"toc":434},[],{"title":58,"searchDepth":59,"depth":59,"links":435},[],[437,438,439,440],"Developed and maintained an internal Angular recruiting application","Built interfaces for managing executive search engagements and candidate tracking","Worked with cross-functional teams to improve recruiter workflows","Delivered features that streamlined the executive placement process",[442],"\u002Fimages\u002Fheidrick\u002Fheidrick.png",[444],{"label":76,"href":445},"https:\u002F\u002Fwww.heidrick.com",{},"\u002Fprojects\u002Fheidrick",{"title":430,"description":58},[450,85,222],"Angular","projects\u002Fheidrick","Internal recruiting tool for a global executive search firm","Heidrick & Struggles is a premier global executive search and leadership consulting firm. I worked as a Frontend Developer on their internal recruiting tool, an Angular application used by consultants to manage executive search engagements and candidate pipelines.\n","Executive Search","2022","MEL2qpxLdbjB9whE7BhydV2mHnNc1s9UCHS6j4llVK8",{"id":458,"title":459,"accent":460,"art":262,"body":461,"category":365,"contributions":465,"description":58,"extension":69,"highlight":61,"imageNote":470,"images":471,"links":474,"meta":476,"navigation":28,"note":61,"order":477,"path":478,"role":316,"seo":479,"stack":480,"stem":481,"subtitle":482,"summary":483,"tag":484,"year":455,"__hash__":485},"projects\u002Fprojects\u002Ftropee.md","Tropee","oklch(74% 0.14 300)",{"type":55,"value":462,"toc":463},[],{"title":58,"searchDepth":59,"depth":59,"links":464},[],[466,467,468,469],"Built the NFT minting flow with wallet connection and transaction handling","Designed and shipped the notifications system with real-time updates","Implemented the wallet UX — connect, switch network, recover from failure","Wrote unit tests and reusable component primitives consumed across the app","The company pivoted in 2024 and the project was shut down. The images are from the old site.",[472,473],"\u002Fimages\u002Ftropee\u002Findex.png","\u002Fimages\u002Ftropee\u002Findex-2.png",[475],{"label":76,"href":47},{},4,"\u002Fprojects\u002Ftropee",{"title":459,"description":58},[84,86,89],"projects\u002Ftropee","Web3 platform that helped brands to reward their community members","Worked through Lemon as a senior consultant on Tropee — building NFT minting, wallet connection, and the notifications system for an early Web3 marketplace.\n","Web3","trA-66zAbs1StAfN64eVkd4jqQgvz8bwcKQb5A3tz6E",{"id":487,"title":488,"accent":489,"art":103,"body":490,"category":365,"contributions":494,"description":58,"extension":69,"highlight":61,"imageNote":499,"images":500,"links":503,"meta":507,"navigation":28,"note":61,"order":217,"path":508,"role":316,"seo":509,"stack":510,"stem":511,"subtitle":512,"summary":513,"tag":514,"year":515,"__hash__":516},"projects\u002Fprojects\u002Fskore.md","Skore","oklch(74% 0.14 120)",{"type":55,"value":491,"toc":492},[],{"title":58,"searchDepth":59,"depth":59,"links":493},[],[495,496,497,498],"Developed and maintained the corporate learning platform frontend","Built interactive course and training module interfaces","Collaborated with product and design teams on user experience improvements","Contributed to the platform that supported enterprise-scale deployments","Content taken from Skore's Help Center",[501,502],"\u002Fimages\u002Fskore\u002Fskore.png","\u002Fimages\u002Fskore\u002Fgamification.gif",[504],{"label":505,"href":506},"Qulture Rocks","https:\u002F\u002Fwww.qulture.rocks",{},"\u002Fprojects\u002Fskore",{"title":488,"description":58},[165,85,222],"projects\u002Fskore","Enterprise educational platform for corporate learning and development","Skore was an enterprise educational startup focused on corporate learning experiences. I worked as a Senior Frontend Developer building the platform that helped companies deliver training and development programs. The company was later rebranded to Qulture Rocks and acquired by UOL EdTech.\n","EdTech","2018 — 2019","VhxqzhxkERFoUulYCOjv5fx2Q8_gEPTJ3txeDt_1lZo",{"id":518,"title":519,"accent":431,"art":103,"body":520,"category":365,"contributions":524,"description":58,"extension":69,"highlight":61,"imageNote":61,"images":528,"links":531,"meta":534,"navigation":28,"note":61,"order":248,"path":535,"role":347,"seo":536,"stack":537,"stem":538,"subtitle":539,"summary":540,"tag":541,"year":542,"__hash__":543},"projects\u002Fprojects\u002Fsmsja.md","SMSJA",{"type":55,"value":521,"toc":522},[],{"title":58,"searchDepth":59,"depth":59,"links":523},[],[525,526,527],"Built a complete website for a local Brazilian business","First professional paid development work","Handled design, development, and deployment independently",[529,530],"\u002Fimages\u002Fsmsja\u002F1.png","\u002Fimages\u002Fsmsja\u002F2.png",[532],{"label":76,"href":533},"https:\u002F\u002Fsmsja.com.br\u002F",{},"\u002Fprojects\u002Fsmsja",{"title":519,"description":58},[421],"projects\u002Fsmsja","My first paid project — a website for a local business in Brazil","SMSJA was the first project I ever got paid to build. A website for a local Brazilian business — marking the moment I went from hobby coding to professional development. This project proved I could deliver real work for real clients.\n","Local Business","2017","rhDv2Q0grJd_ZNIVI12a7BGKEbA0I04oYKxFyFZw4Uo",[545,573,603,627,653,680,709,737],{"id":546,"title":547,"accent":261,"art":103,"body":548,"category":552,"contributions":553,"description":58,"extension":69,"highlight":61,"imageNote":558,"images":61,"links":559,"meta":562,"navigation":28,"note":61,"order":79,"path":563,"role":564,"seo":565,"stack":566,"stem":568,"subtitle":569,"summary":570,"tag":571,"year":542,"__hash__":572},"projects\u002Fprojects\u002Fcef-boilerplate.md","CEF Boilerplate",{"type":55,"value":549,"toc":550},[],{"title":58,"searchDepth":59,"depth":59,"links":551},[],"hobby",[554,555,556,557],"Created a reusable boilerplate for CEF-based game UI development","Set up hot reload and modern build tooling for in-game web UIs","Built a communication bridge between game logic and the web layer","Published as open source for the game development community","This is a developer tool \u002F boilerplate — no UI to screenshot.",[560],{"label":45,"href":561},"https:\u002F\u002Fgithub.com\u002FLos\u002Fcef-boilerplate",{},"\u002Fprojects\u002Fcef-boilerplate","Solo Developer",{"title":547,"description":58},[567],"Webpack","projects\u002Fcef-boilerplate","A boilerplate for Chromium Embedded Framework to simplify UI development in games","A boilerplate I created for Chromium Embedded Framework (CEF) to make UI development for games significantly easier. It provided a pre-configured setup with hot reload, build tooling, and communication bridge between the game and the web UI layer.\n","Developer Tools","LWvU1xinFpyfa5hGwQ1vc6v4V84K6Or6cFyCsvt8VNg",{"id":574,"title":575,"accent":234,"art":177,"body":576,"category":552,"contributions":580,"description":58,"extension":69,"highlight":61,"imageNote":61,"images":585,"links":589,"meta":592,"navigation":28,"note":61,"order":59,"path":593,"role":564,"seo":594,"stack":595,"stem":598,"subtitle":599,"summary":600,"tag":601,"year":542,"__hash__":602},"projects\u002Fprojects\u002Fpc-rpg-gtmp.md","PC:RPG GT-MP",{"type":55,"value":577,"toc":578},[],{"title":58,"searchDepth":59,"depth":59,"links":579},[],[581,582,583,584],"Pioneered Vue.js integration inside a game via Chromium Embedded Framework","Built in-game UI with reactive Vue components rendered over the game","Ported RPG mechanics from SA:MP to the GTA V multiplayer platform","Proved the concept of modern web UIs in game development",[586,587,588],"\u002Fimages\u002Fpcrpg-gtmp\u002Fpcrpg-inventory.png","\u002Fimages\u002Fpcrpg-gtmp\u002Fpcrpg-chat.png","https:\u002F\u002Fwww.youtube.com\u002Fwatch?v=R16eYB2FuMM",[590],{"label":45,"href":591},"https:\u002F\u002Fgithub.com\u002FParadise-Devs\u002Fpc-rpg-gt-mp",{},"\u002Fprojects\u002Fpc-rpg-gtmp",{"title":575,"description":58},[165,596,597],"Weboack","CEF","projects\u002Fpc-rpg-gtmp","The first time I added Vue inside a game using CEF (Chromium Embedded Framework)","A GTA V gamemode for GT-MP (Grand Theft Multiplayer) that used Chromium Embedded Framework to render Vue.js interfaces directly inside the game. This was the first time I integrated a modern web framework into a game UI — a technique that later became standard in multiplayer game development.\n","Gaming","KbCbcqNzMKdf7EXMNbWbEZAfwPgisZwrlqhGUpD4bko",{"id":604,"title":605,"accent":489,"art":53,"body":606,"category":552,"contributions":610,"description":58,"extension":69,"highlight":61,"imageNote":61,"images":615,"links":617,"meta":618,"navigation":28,"note":61,"order":158,"path":619,"role":121,"seo":620,"stack":621,"stem":622,"subtitle":623,"summary":624,"tag":625,"year":542,"__hash__":626},"projects\u002Fprojects\u002Fwullo.md","Wullo",{"type":55,"value":607,"toc":608},[],{"title":58,"searchDepth":59,"depth":59,"links":609},[],[611,612,613,614],"Co-founded a software development company","Handled client pitches and project scoping","Built initial prototypes and demos for potential clients","Learned early lessons about business, partnerships, and entrepreneurship",[616],"\u002Fimages\u002Fwullo\u002Fwullo.webp",[],{},"\u002Fprojects\u002Fwullo",{"title":605,"description":58},[165,421],"projects\u002Fwullo","My first attempt at starting a software development company with a friend","Wullo was my first attempt at entrepreneurship. Together with a friend, we tried to build a software development company. While the business didn't take off, it was a formative experience that taught me about running a company, pitching to clients, and working as a team outside of a job. We've got 4 clients in a year.\n","Software Agency","2aeG6Yg5rnSh-e-jWhbObTMZn8g6oz4W8RPGnCrHWuo",{"id":628,"title":629,"accent":630,"art":103,"body":631,"category":552,"contributions":635,"description":58,"extension":69,"highlight":61,"imageNote":61,"images":638,"links":640,"meta":643,"navigation":28,"note":61,"order":477,"path":644,"role":564,"seo":645,"stack":646,"stem":648,"subtitle":649,"summary":650,"tag":571,"year":651,"__hash__":652},"projects\u002Fprojects\u002Fcolor-picker.md","Color Picker","oklch(74% 0.14 330)",{"type":55,"value":632,"toc":633},[],{"title":58,"searchDepth":59,"depth":59,"links":634},[],[636,637],"Built a color picker tool from scratch","Published as open source on GitHub",[639],"\u002Fimages\u002Fcolorpicker\u002Fimg.png",[641],{"label":45,"href":642},"https:\u002F\u002Fgithub.com\u002FLos\u002Fcolor-picker",{},"\u002Fprojects\u002Fcolor-picker",{"title":629,"description":58},[647],"C#","projects\u002Fcolor-picker","Open-source color picker tool","A simple, open-source color picker utility. One of my earliest published projects on GitHub.\n","2016","4gtkz3P_nW03itjD7s68wEBgE8khHQPbzwiG_VQXyNc",{"id":654,"title":655,"accent":656,"art":53,"body":657,"category":552,"contributions":661,"description":58,"extension":69,"highlight":61,"imageNote":61,"images":666,"links":668,"meta":671,"navigation":28,"note":61,"order":217,"path":672,"role":564,"seo":673,"stack":674,"stem":676,"subtitle":677,"summary":678,"tag":601,"year":651,"__hash__":679},"projects\u002Fprojects\u002Fpc-rpg-ucp.md","PC:RPG UCP","oklch(74% 0.14 260)",{"type":55,"value":658,"toc":659},[],{"title":58,"searchDepth":59,"depth":59,"links":660},[],[662,663,664,665],"Built a full user control panel with Laravel and Vue.js","First introduction to Vue.js in 2016","Implemented character management, stats, and server interaction","Connected to the game server's MySQL database for live data",[667],"\u002Fimages\u002Fpcrpg-ucp\u002Fpcrpg.webp",[669],{"label":45,"href":670},"https:\u002F\u002Fgithub.com\u002FParadise-Devs\u002Fpc-rpg-ucp",{},"\u002Fprojects\u002Fpc-rpg-ucp",{"title":655,"description":58},[165,421,675],"MySQL","projects\u002Fpc-rpg-ucp","My first published website — a user control panel built with Laravel and Vue","The User Control Panel for Paradise City RPG. This was my first published website, built with Laravel on the backend and Vue.js on the frontend — marking my introduction to Vue back in 2016. Players could manage their characters, view stats, and interact with the server through the web.\n","iRqSeJ8eoDeAJSwi8z8S2EnpEqOeKUQdOj38UAVTVTE",{"id":681,"title":682,"accent":683,"art":137,"body":684,"category":552,"contributions":688,"description":58,"extension":69,"highlight":61,"imageNote":693,"images":694,"links":696,"meta":699,"navigation":28,"note":61,"order":248,"path":700,"role":564,"seo":701,"stack":702,"stem":704,"subtitle":705,"summary":706,"tag":601,"year":707,"__hash__":708},"projects\u002Fprojects\u002Flhouse.md","LHouse","oklch(74% 0.14 140)",{"type":55,"value":685,"toc":686},[],{"title":58,"searchDepth":59,"depth":59,"links":687},[],[689,690,691,692],"Built a complete dynamic housing system with buy\u002Fsell mechanics","Implemented furniture placement and interior customization","Created persistent data storage for house ownership and state","Became one of the most downloaded SA:MP scripts in the community","In-game script with no standalone UI — visuals were rendered inside GTA San Andreas.",[695],"https:\u002F\u002Fwww.youtube.com\u002Fwatch?v=A3zmXfdRu4E",[697],{"label":45,"href":698},"https:\u002F\u002Fgithub.com\u002FLos\u002FLHouse",{},"\u002Fprojects\u002Flhouse",{"title":682,"description":58},[703,675],"Pawn","projects\u002Flhouse","My biggest and most popular script for SA:MP — a full housing system","LHouse was the most popular housing system script for San Andreas Multiplayer. It provided a full dynamic house system with buying, selling, furniture placement, and persistent storage — used by hundreds of servers worldwide.\n","2013","oJPt83K7thuZADR7zmU0ri3CWDyWlUTdOZyxb0XYx6w",{"id":710,"title":711,"accent":360,"art":235,"body":712,"category":552,"contributions":716,"description":58,"extension":69,"highlight":61,"imageNote":61,"images":721,"links":724,"meta":727,"navigation":28,"note":61,"order":276,"path":728,"role":729,"seo":730,"stack":731,"stem":732,"subtitle":733,"summary":734,"tag":601,"year":735,"__hash__":736},"projects\u002Fprojects\u002Fpc-rpg.md","PC:RPG",{"type":55,"value":713,"toc":714},[],{"title":58,"searchDepth":59,"depth":59,"links":715},[],[717,718,719,720],"Co-created and led development of a large-scale RPG gamemode","Built systems for jobs, factions, properties, vehicles, and economy","Managed a community with thousands of concurrent players","Designed and implemented the game's core architecture and data layer",[722,723],"\u002Fimages\u002Fpcrpg-samp\u002Fimg.png","https:\u002F\u002Fwww.youtube.com\u002Fwatch?v=flAH4SFWamk",[725],{"label":45,"href":726},"https:\u002F\u002Fgithub.com\u002FParadise-Devs\u002Fpc-rpg-gamemode",{},"\u002Fprojects\u002Fpc-rpg","Co-Creator & Lead Developer",{"title":711,"description":58},[703,675],"projects\u002Fpc-rpg","One of the most popular RPG gamemodes for SA:MP","Paradise City RPG was one of the most popular RPG gamemodes in the San Andreas Multiplayer community. A massive multiplayer roleplay experience with jobs, factions, properties, vehicles, and a full economy system — attracting thousands of concurrent players at its peak.\n","2012 — 2015","Okgm-EN1aS8tL39n--_2KtOynbanHpgMBR2KL_bFhsw",{"id":738,"title":739,"accent":740,"art":262,"body":741,"category":552,"contributions":745,"description":58,"extension":69,"highlight":61,"imageNote":750,"images":61,"links":751,"meta":755,"navigation":28,"note":61,"order":314,"path":756,"role":564,"seo":757,"stack":758,"stem":759,"subtitle":760,"summary":761,"tag":601,"year":762,"__hash__":763},"projects\u002Fprojects\u002Fsamp-scripts.md","SA:MP Scripts","oklch(74% 0.14 10)",{"type":55,"value":742,"toc":743},[],{"title":58,"searchDepth":59,"depth":59,"links":744},[],[746,747,748,749],"Wrote dozens of scripts and plugins for the SA:MP community","Built gamemodes, filterscripts, and server utilities in Pawn","Published scripts on community forums and Pastebin","First exposure to programming, networking, and server architecture","Server-side scripts with no visual UI — all gameplay logic ran in-game.",[752],{"label":753,"href":754},"Scripts","https:\u002F\u002Fpastebin.com\u002Fu\u002Flosnato",{},"\u002Fprojects\u002Fsamp-scripts",{"title":739,"description":58},[703],"projects\u002Fsamp-scripts","Multiple scripts and plugins for the San Andreas Multiplayer community","A collection of scripts, gamemodes, and plugins written for the San Andreas Multiplayer (SA:MP) community between 2009 and 2015. This was my entry point into programming — years of writing Pawn scripts for GTA San Andreas servers.\n","2009 — 2015","KQGBYaR4_jNFn6XPa52Dxjq5-GseiuBZW2Ot0y8l1aQ",[765,836],{"id":766,"title":767,"body":768,"date":826,"description":827,"extension":69,"meta":828,"navigation":28,"path":829,"seo":830,"stem":831,"tags":832,"__hash__":835},"blog\u002Fblog\u002Fbuilding-design-systems-at-scale.md","Building Design Systems at Scale",{"type":55,"value":769,"toc":820},[770,774,779,787,790,794,797,800,804,807,810,814,817],[771,772,773],"p",{},"After two years of building and maintaining a design system with over 120 components, I've collected a set of hard-won lessons about what works — and what quietly falls apart.",[775,776,778],"h2",{"id":777},"start-with-the-spec-not-the-code","Start with the spec, not the code",[771,780,781,782,786],{},"The single biggest unlock was writing engineering specs ",[783,784,785],"em",{},"in Figma"," before touching any code. Each component gets a page that defines every prop, state, slot, and edge case. When the spec is tight enough, implementation becomes almost mechanical.",[771,788,789],{},"This flips the usual workflow. Instead of designers handing off a static mockup and engineers interpreting it, the spec becomes a shared contract. Ambiguity drops. Review cycles shrink.",[775,791,793],{"id":792},"tokens-are-the-foundation","Tokens are the foundation",[771,795,796],{},"Every visual decision — color, spacing, radius, shadow, motion — flows from tokens. Not from Tailwind classes, not from hardcoded values. Tokens.",[771,798,799],{},"In practice this means a single source of truth in Figma variables that maps 1:1 to CSS custom properties. When the brand evolves, you change the token. Everything downstream updates.",[775,801,803],{"id":802},"test-what-matters","Test what matters",[771,805,806],{},"Full coverage sounds good on paper. In practice, 85% line coverage with focused tests on interaction, accessibility, and edge cases catches more real bugs than 100% coverage that tests implementation details.",[771,808,809],{},"We use Vitest with Vue Testing Library. The rule is simple: test what the user sees and does, not how the component is wired internally.",[775,811,813],{"id":812},"ship-incrementally","Ship incrementally",[771,815,816],{},"A design system is never done. The best approach is to ship small, stable increments. Each component goes through: spec → implementation → review → docs → release. No batching. No big-bang launches.",[771,818,819],{},"This keeps the system honest. If a component is hard to document, it's probably too complex. If it's hard to test, the API needs work.",{"title":58,"searchDepth":59,"depth":59,"links":821},[822,823,824,825],{"id":777,"depth":59,"text":778},{"id":792,"depth":59,"text":793},{"id":802,"depth":59,"text":803},{"id":812,"depth":59,"text":813},"2025-04-10","Lessons learned from creating and maintaining a 120+ component design system across Figma and Vue 3.",{},"\u002Fblog\u002Fbuilding-design-systems-at-scale",{"title":767,"description":827},"blog\u002Fbuilding-design-systems-at-scale",[833,834,86],"Design Systems","Vue","mH54WOowtdttF6S6aV3Ew2hDmQ39ndg4XTAXLtCYVhQ",{"id":837,"title":838,"body":839,"date":884,"description":885,"extension":69,"meta":886,"navigation":28,"path":887,"seo":888,"stem":889,"tags":890,"__hash__":893},"blog\u002Fblog\u002Ffrom-jquery-to-vue-a-decade-of-frontend.md","From jQuery to Vue — A Decade of Frontend",{"type":55,"value":840,"toc":879},[841,844,848,851,855,858,869,873,876],[771,842,843],{},"I started writing interfaces as a teenager, hand-coding HTML pages and figuring out CSS floats. By the time I joined my first agency in 2018, jQuery was still the default. A year later, I was helping build a custom JavaScript framework at Accenture.",[775,845,847],{"id":846},"the-jquery-era","The jQuery era",[771,849,850],{},"jQuery wasn't bad — it was practical. You grabbed a DOM node, attached a handler, and things happened. The problem was scale. At a certain point, you're managing state in data attributes, toggling classes manually, and praying that your event delegation doesn't conflict with someone else's.",[775,852,854],{"id":853},"the-component-shift","The component shift",[771,856,857],{},"Vue changed everything for me. The idea that UI is a function of state — that you declare what the screen should look like for a given data shape, and the framework handles the DOM — was a fundamental shift.",[771,859,860,861,864,865,868],{},"Composition API took this further. Instead of organizing code by ",[783,862,863],{},"option type"," (data, methods, computed), you organize by ",[783,866,867],{},"concern",". A composable that handles authentication logic stays together, not scattered across the options object.",[775,870,872],{"id":871},"what-stayed-the-same","What stayed the same",[771,874,875],{},"Despite all the tooling changes, the fundamentals haven't moved. Accessibility still matters. Performance still matters. Semantic HTML is still the foundation. The tools got better at helping us do these things well, but they didn't replace the need to care about them.",[771,877,878],{},"The best frontend engineers I've worked with share one trait: they care about the person using the thing they built. Everything else is tooling.",{"title":58,"searchDepth":59,"depth":59,"links":880},[881,882,883],{"id":846,"depth":59,"text":847},{"id":853,"depth":59,"text":854},{"id":871,"depth":59,"text":872},"2025-02-18","Reflections on how the frontend landscape evolved from DOM manipulation to reactive component architectures.",{},"\u002Fblog\u002Ffrom-jquery-to-vue-a-decade-of-frontend",{"title":838,"description":885},"blog\u002Ffrom-jquery-to-vue-a-decade-of-frontend",[891,892,834],"Frontend","Career","hi1wJ616qLO2w8WuXWVqNqJ9MPstNxi033gpSs0KASI",1778901917621]