[{"data":1,"prerenderedAt":368},["ShallowReactive",2],{"navigation":3,"/projects/dynamic-page-builder":14,"/projects/dynamic-page-builder-surround":357},[4],{"title":5,"path":6,"stem":7,"children":8,"page":13},"Blog","/blog","blog",[9],{"title":10,"path":11,"stem":12},"My Experience as a Junior Software Engineer (First Year)","/blog/my-experience-as-a-junior-software-engineer","blog/my-experience-as-a-junior-software-engineer",false,{"id":15,"title":16,"body":17,"buttonLabel":341,"date":342,"description":343,"extension":344,"image":345,"meta":346,"navigation":347,"path":348,"seo":349,"stem":350,"tags":351,"__hash__":356},"projects/projects/dynamic-page-builder.md","Dynamic Content Page Builder",{"type":18,"value":19,"toc":328},"minimark",[20,25,29,32,39,42,46,49,54,59,72,77,88,93,100,114,121,125,179,181,185,189,210,214,217,219,223,226,232,238,249,259,270,273,279,290,292,296,322,324],[21,22,24],"h2",{"id":23},"the-challenge","THE CHALLENGE",[26,27,28],"p",{},"At Summit Media, every article looked the same. Writers were locked into rigid layouts—no matter if they were writing a photo essay, a breaking news story, or an in-depth feature. They all got the same template.",[26,30,31],{},"The problem? Writers are creative. They had visions for how their stories should look, but no way to execute them without waiting on developers.",[26,33,34,38],{},[35,36,37],"strong",{},"Our mission:"," Give them the tools to build their own story layouts.",[40,41],"hr",{},[21,43,45],{"id":44},"the-solution","THE SOLUTION",[26,47,48],{},"We built a component-based page builder with 15+ reusable blocks that writers could mix and match:",[50,51,53],"h3",{"id":52},"technical-approach","Technical Approach",[26,55,56],{},[35,57,58],{},"Architecture Decision:",[60,61,62,66,69],"ul",{},[63,64,65],"li",{},"Component-driven design using Vue 3 Composition API",[63,67,68],{},"Centralized state management with Pinia for layout configuration",[63,70,71],{},"JSON schema storage for each article's unique layout",[26,73,74],{},[35,75,76],{},"Key Components I Built:",[60,78,79,82,85],{},[63,80,81],{},"📸 Photo & Video Carousel with inline media player",[63,83,84],{},"🎯 Pull quotes and callouts",[63,86,87],{},"🔗 Interactive embed blocks",[26,89,90],{},[35,91,92],{},"The Hardest Part (and what I'm proudest of):",[26,94,95,96,99],{},"The ",[35,97,98],{},"state management"," was complex. Each component needed to:",[60,101,102,105,108,111],{},[63,103,104],{},"Maintain its own configuration",[63,106,107],{},"Communicate with parent layout",[63,109,110],{},"Preserve state during drag/reorder operations",[63,112,113],{},"Render consistently across edit/preview modes",[26,115,116,117,120],{},"I also built a ",[35,118,119],{},"custom media carousel"," that handles both photos and videos with smooth transitions and inline playback—this was my first time building something like this from scratch.",[50,122,124],{"id":123},"code-philosophy","Code Philosophy",[126,127,132],"pre",{"className":128,"code":129,"language":130,"meta":131,"style":131},"language-javascript shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","// I focused on making components reusable and predictable\n// Each block follows the same contract:\nconst ComponentBlock = {\n  props: [\"config\", \"content\", \"isEditing\"],\n  emits: [\"update:config\", \"update:content\"],\n  // Clean, consistent interface for every component\n};\n","javascript","",[133,134,135,143,149,155,161,167,173],"code",{"__ignoreMap":131},[136,137,140],"span",{"class":138,"line":139},"line",1,[136,141,142],{},"// I focused on making components reusable and predictable\n",[136,144,146],{"class":138,"line":145},2,[136,147,148],{},"// Each block follows the same contract:\n",[136,150,152],{"class":138,"line":151},3,[136,153,154],{},"const ComponentBlock = {\n",[136,156,158],{"class":138,"line":157},4,[136,159,160],{},"  props: [\"config\", \"content\", \"isEditing\"],\n",[136,162,164],{"class":138,"line":163},5,[136,165,166],{},"  emits: [\"update:config\", \"update:content\"],\n",[136,168,170],{"class":138,"line":169},6,[136,171,172],{},"  // Clean, consistent interface for every component\n",[136,174,176],{"class":138,"line":175},7,[136,177,178],{},"};\n",[40,180],{},[21,182,184],{"id":183},"the-impact","THE IMPACT",[50,186,188],{"id":187},"results","Results:",[60,190,191,198,204],{},[63,192,193,194,197],{},"✅ ",[35,195,196],{},"50% reduction"," in content creation time",[63,199,193,200,203],{},[35,201,202],{},"15+ reusable components"," in the library",[63,205,193,206,209],{},[35,207,208],{},"Zero developer intervention"," needed after launch",[50,211,213],{"id":212},"what-this-means","What This Means:",[26,215,216],{},"Writers went from \"Can you help me add a photo gallery?\" to \"I just published a multimedia story with video, pull quotes, and an interactive timeline—by myself.\"",[40,218],{},[21,220,222],{"id":221},"what-i-learned","WHAT I LEARNED",[26,224,225],{},"This project transformed how I think about frontend development:",[26,227,228,231],{},[35,229,230],{},"1. User-Centric Design Matters","\nEven though I never talked directly to writers, building tools FOR them (not just for specs) changed my approach. I had to imagine: \"If I were writing a story, what would I want?\"",[26,233,234,237],{},[35,235,236],{},"2. Component Architecture at Scale","\nManaging 15+ components taught me patterns I now use everywhere:",[60,239,240,243,246],{},[63,241,242],{},"Consistent prop interfaces",[63,244,245],{},"Predictable state flow",[63,247,248],{},"Reusability > quick hacks",[26,250,251,254,255,258],{},[35,252,253],{},"3. Fast-Paced Learning","\nMost of the patterns here were ",[35,256,257],{},"first-time"," for me:",[60,260,261,264,267],{},[63,262,263],{},"Dynamic component rendering",[63,265,266],{},"Complex state management across nested components",[63,268,269],{},"Building accessible media players",[26,271,272],{},"I used AI (Claude, ChatGPT) to accelerate learning while understanding the \"why\" behind patterns. This let me deliver fast without sacrificing code quality.",[26,274,275,278],{},[35,276,277],{},"4. Clean Code is a Gift","\nKnowing other devs would maintain this, I obsessed over:",[60,280,281,284,287],{},[63,282,283],{},"Clear variable names",[63,285,286],{},"Commented complex logic",[63,288,289],{},"Consistent formatting",[40,291],{},[21,293,295],{"id":294},"tech-stack","TECH STACK",[60,297,298,304,310,316],{},[63,299,300,303],{},[35,301,302],{},"Framework:"," Vue 3 (Composition API), Nuxt 3",[63,305,306,309],{},[35,307,308],{},"State Management:"," Pinia",[63,311,312,315],{},[35,313,314],{},"Styling:"," Tailwind CSS",[63,317,318,321],{},[35,319,320],{},"Storage:"," JSON schema for layout persistence",[40,323],{},[325,326,327],"style",{},"html .light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html.light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}",{"title":131,"searchDepth":145,"depth":145,"links":329},[330,331,335,339,340],{"id":23,"depth":145,"text":24},{"id":44,"depth":145,"text":45,"children":332},[333,334],{"id":52,"depth":151,"text":53},{"id":123,"depth":151,"text":124},{"id":183,"depth":145,"text":184,"children":336},[337,338],{"id":187,"depth":151,"text":188},{"id":212,"depth":151,"text":213},{"id":221,"depth":145,"text":222},{"id":294,"depth":145,"text":295},"View Case Study","2024","15+ reusable components giving writers creative freedom. Reduced content creation time by 50% and eliminated developer dependencies. Built with Vue 3 & Nuxt 3 component architecture and Pinia state management.","md","/projects/drag&drop.gif",{},true,"/projects/dynamic-page-builder",{"title":16,"description":343},"projects/dynamic-page-builder",[352,353,354,355],"Vue.js","Nuxt.js","Component Architecture","Tailwind CSS","_E77UCsuAg-nEi4yNIelKge7cIeS1ddrgzUo9o-oF90",[358,363],{"title":359,"path":360,"stem":361,"description":362,"children":-1},"Enterprise CRM Platform for Advertising Sales","/projects/crm-platform","projects/crm-platform","Mission-critical platform serving 15+ sales team members. Built complex dashboards, filtering systems, and PDF generation. My biggest technical challenge: delivering enterprise features under tight deadlines.",{"title":364,"path":365,"stem":366,"description":367,"children":-1},"Website Performance Optimization","/projects/homepage-revamp","projects/homepage-revamp","25%+ PageSpeed improvements across multiple sites. Server-side rendering, code optimization, and modern UI/UX. Fast delivery without technical debt.",1782865071730]