Custom CMS Architecture & Full-Stack Development for Sempact AG

export class QuotesSliderComponent extends BaseComponent {
constructor() {
super();
}
async _connectedCallback() {
this.render();
this.startAnimation();
}
render() {
this.appendChild(wrapper);
}
startAnimation() {
const wrapper = this.querySelector('.slider-wrapper');
const panels = this.querySelectorAll('.slider-wrapper > blockquote');
const totalPanels = panels.length;
const containerWidth = this.offsetWidth;
let currentPanel = 0;
panels[currentPanel].classList.add('active');
setInterval(() => {
panels[currentPanel].classList.remove('active');
currentPanel = (currentPanel + 1) % totalPanels;
panels[currentPanel].classList.add('active');
const offset = -currentPanel * containerWidth;
wrapper.style.transform = </span><span class="token string">translateX(</span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>offset<span class="token interpolation-punctuation punctuation">}</span></span><span class="token string">px)</span><span class="token template-punctuation string">;
}, 5000);
}
}
customElements.define('quote-slider', QuotesSliderComponent);

Custom CMS Architecture & Full-Stack Development for Sempact AG, combining sustainable web practices with modern system design. The project involved architecting and implementing a custom PHP-based content management system from scratch.

Architecture Challenge: Design a lightweight, performant CMS architecture that eliminates third-party dependencies while providing flexible content management and excellent performance (LCP < 1 second).

Solution Architecture: Custom PHP CMS with modular component architecture, Web Components-based frontend, TailwindCSS utility-first styling, and custom API design. The system achieves 969ms LCP and 467kb page weight through architectural optimization.

Technical Implementation: Frontend architecture built with Web Components ensuring modularity and reusability. Backend architecture leverages custom PHP CMS with no-code editing capabilities for content managers. TailwindCSS provides utility-first styling approach. Custom API structures eliminate third-party integrations improving performance, reliability, and data sovereignty. Comprehensive accessibility implementation following WCAG guidelines. Performance optimization through lazy loading, adaptive loading, and resource optimization achieving an "A" rating on websitecarbon.com.

Sustainable Architecture: The system architecture prioritizes web sustainability through lightweight code (467kb total page weight), optimized resource consumption, and green hosting. The platform serves as a demonstration of environmentally conscious web development, aligning with Sempact AG's mission while delivering excellent user experience and performance.