730.0e7969df20e445f9.js

"use strict";(self.webpackChunkportfolio=self.webpackChunkportfolio||[]).push([[730],{5730:(x,c,i)=>{i.r(c),i.d(c,{ShowcaseworkModule:()=>h});var r=i(6814),s=i(6743),e=i(4946);function p(n,a){if(1&n&&(e.TgZ(0,"li"),e._uU(1),e.qZA()),2&n){const t=a.$implicit;e.xp6(1),e.Oqu(t)}}const l=function(n){return{open:n}};function g(n,a){if(1&n){const t=e.EpF();e.TgZ(0,"div",4)(1,"div",5),e.NdJ("click",function(){const f=e.CHM(t).$implicit,v=e.oxw();return e.KtG(v.toggle(f))}),e.TgZ(2,"h4",6),e._uU(3),e.qZA(),e.TgZ(4,"span",7),e._uU(5,"\u25bc"),e.qZA()(),e.TgZ(6,"div",8)(7,"h4",9)(8,"strong"),e._uU(9,"Role:"),e.qZA(),e._uU(10),e.qZA(),e.TgZ(11,"h4",10)(12,"strong"),e._uU(13,"Technologies Used:"),e.qZA(),e._uU(14),e.qZA(),e.TgZ(15,"p",11),e._uU(16),e.qZA(),e.TgZ(17,"div",12)(18,"h4"),e._uU(19,"Key Contributions:"),e.qZA(),e.TgZ(20,"ul"),e.YNc(21,p,2,1,"li",13),e.qZA()()()()}if(2&n){const t=a.$implicit;e.xp6(3),e.Oqu(t.title),e.xp6(1),e.Q6J("ngClass",e.VKq(7,l,t.isOpen)),e.xp6(2),e.Q6J("ngClass",e.VKq(9,l,t.isOpen)),e.xp6(4),e.hij(" ",t.role,""),e.xp6(4),e.hij(" ",t.technologies,""),e.xp6(2),e.Oqu(t.description),e.xp6(5),e.Q6J("ngForOf",t.contributions)}}const m=[{path:"projects-overview",component:(()=>{class n{constructor(){this.projects=[{title:"Insurance Client-Facing Application for Fund Switching",role:"UI Developer",technologies:"Angular, RxJS, TypeScript, Angular Material",description:"Developed and maintained a sophisticated Angular web application for an insurance client, facilitating fund switching and policy detail viewing for users. Implemented complex state management and reactive programming techniques using RxJS to enhance application performance and user experience. Single-handedly completed all tasks on the UI side, including development, unit testing, deployment, and maintaining code quality. Utilized TypeScript to write scalable and maintainable code, improving overall code quality and reducing bugs. Created responsive and visually appealing user interfaces with Angular Material, ensuring compatibility across various devices and browsers. Enhanced application interactivity and performance by leveraging modern JavaScript frameworks and libraries such as Angular. Followed Agile methodologies and participated in regular sprints, stand-ups, and code reviews, contributing to continuous improvement.",contributions:["Developed UI components for fund switching functionality.","Implemented responsive design using Angular Material.","Optimized performance using RxJS for state management.","Ensured cross-browser compatibility and accessibility.","Managed end-to-end UI development and deployment."],isOpen:!1},{title:"Performance Optimization of Svelte.js Web Application",role:"Frontend Developer",technologies:"Svelte.js, JavaScript, CSS",description:"Successfully improved the performance of the web application, resulting in faster load times, enhanced user experience, and better resource utilization. The optimizations led to a more efficient and responsive application, meeting the client\u2019s performance goals and user expectations.",contributions:["Optimized code for faster load times.","Implemented efficient state management.","Enhanced application responsiveness and performance.","Utilized modern JavaScript techniques for optimization.","Conducted performance testing and improvements."],isOpen:!1},{title:"High-Quality User-Friendly Applications",role:"Full Stack Developer",technologies:"React, Node.js, Express, MongoDB",description:"Successfully delivered several high-quality, user-friendly applications that met or exceeded client expectations. The focus on responsive design and code quality resulted in applications that performed well across devices and were easy to maintain and extend.",contributions:["Designed and developed responsive applications.","Ensured high code quality and maintainability.","Implemented scalable solutions using modern frameworks.","Collaborated with clients to meet their requirements.","Delivered projects on time with high client satisfaction."],isOpen:!1}]}ngOnInit(){this.projects.length>0&&(this.projects[0].isOpen=!0)}toggle(t){this.projects.forEach(o=>{o!==t&&(o.isOpen=!1)}),t.isOpen=!t.isOpen}static#e=this.\u0275fac=function(o){return new(o||n)};static#n=this.\u0275cmp=e.Xpm({type:n,selectors:[["app-projects-overview"]],decls:6,vars:1,consts:[[1,"container"],[1,"page-header"],[1,"projects-container"],["class","project-card",4,"ngFor","ngForOf"],[1,"project-card"],[1,"accordion-header",3,"click"],[1,"project-title"],[1,"arrow",3,"ngClass"],[1,"accordion-content",3,"ngClass"],[1,"role"],[1,"technologies"],[1,"description"],[1,"contributions"],[4,"ngFor","ngForOf"]],template:function(o,d){1&o&&(e.TgZ(0,"div",0)(1,"div",1)(2,"h3"),e._uU(3,"Detailed Overview of My Professional Project Experience and Achievements"),e.qZA()(),e.TgZ(4,"div",2),e.YNc(5,g,22,11,"div",3),e.qZA()()),2&o&&(e.xp6(5),e.Q6J("ngForOf",d.projects))},dependencies:[r.mk,r.sg],styles:["@keyframes _ngcontent-%COMP%_easeIn{0%{opacity:0;transform:scale(.6)}to{opacity:1;transform:scale(1)}}@keyframes _ngcontent-%COMP%_fadeIn{0%{opacity:0;transform:translateY(-50px)}to{opacity:1;transform:translateY(0)}}html[_ngcontent-%COMP%], body[_ngcontent-%COMP%]{margin:0;padding:0;overflow:hidden;height:100%}.container[_ngcontent-%COMP%]{width:70%;margin:0 auto;padding:20px;box-sizing:border-box;animation:_ngcontent-%COMP%_fadeIn 1s ease 0s 1 normal forwards}@media (max-width: 768px){.container[_ngcontent-%COMP%]{width:100%}}.page-header[_ngcontent-%COMP%]{text-align:center;margin-bottom:20px}.page-header[_ngcontent-%COMP%]   h1[_ngcontent-%COMP%]{color:#004b87;font-size:2.5rem;margin:0}.projects-container[_ngcontent-%COMP%]{box-sizing:border-box}@media (max-width: 768px){.projects-container[_ngcontent-%COMP%]{padding:0}}.project-card[_ngcontent-%COMP%]{background:white;border:1px solid #ddd;box-shadow:0 4px 8px #0003;overflow:hidden;margin-bottom:20px;box-sizing:border-box;transition:box-shadow .3s ease}.accordion-header[_ngcontent-%COMP%]{background-color:#004b87;color:#fff;cursor:pointer;padding:15px;display:flex;align-items:center;justify-content:space-between;position:relative;transition:background-color .3s;font-size:16px;font-weight:700}.accordion-header[_ngcontent-%COMP%]:hover{background-color:#003d6b}.arrow[_ngcontent-%COMP%]{font-size:18px;transition:transform .3s}.arrow.open[_ngcontent-%COMP%]{transform:rotate(180deg)}.accordion-content[_ngcontent-%COMP%]{max-height:0;overflow:hidden;background-color:transparent;opacity:0;padding:0 20px;transition:max-height .5s ease,opacity .5s ease}.accordion-content.open[_ngcontent-%COMP%]{max-height:500px;opacity:1}.project-title[_ngcontent-%COMP%]{color:#fff;margin:0}.role[_ngcontent-%COMP%], .technologies[_ngcontent-%COMP%]{color:#004b87;margin:10px 0}.description[_ngcontent-%COMP%]{margin-bottom:10px}.contributions[_ngcontent-%COMP%]{margin-top:10px}h3[_ngcontent-%COMP%]{background-color:#656464;color:#fff;padding:15px;text-align:left}@media (max-width: 768px){h3[_ngcontent-%COMP%]{font-size:16px}}.contributions[_ngcontent-%COMP%]   h4[_ngcontent-%COMP%]{color:#004b87;margin-bottom:10px;text-align:left}.contributions[_ngcontent-%COMP%]   ul[_ngcontent-%COMP%]{list-style-type:disc;padding-left:20px;margin:0}.contributions[_ngcontent-%COMP%]   li[_ngcontent-%COMP%]{background:none;border:none;margin-bottom:10px;padding:0;color:#333}html[_ngcontent-%COMP%], body[_ngcontent-%COMP%]{margin:0;padding:0;height:100%;overflow:hidden}"]})}return n})()},{path:"",redirectTo:"projects-overview",pathMatch:"full"}];let u=(()=>{class n{static#e=this.\u0275fac=function(o){return new(o||n)};static#n=this.\u0275mod=e.oAB({type:n});static#t=this.\u0275inj=e.cJS({imports:[s.Bz.forChild(m),s.Bz]})}return n})(),h=(()=>{class n{static#e=this.\u0275fac=function(o){return new(o||n)};static#n=this.\u0275mod=e.oAB({type:n});static#t=this.\u0275inj=e.cJS({imports:[r.ez,u]})}return n})()}}]);