Modernizing SICAP’s Web Presence with Angular and WordPress Headless CMS
SICAP is a Mexican organization that provides consulting, certification, and training services in occupational safety and civil protection. Their mission demanded a digital presence that not only looked professional and trustworthy but could also be easily managed by non-technical staff. Additionally, the site needed to be responsive, fast, and adaptable to future growth.
To meet these requirements, I developed a fully decoupled web application using WordPress as a headless CMS and Angular for the frontend. This setup offered the best of both worlds: a user-friendly backend for content editors and a high-performance frontend capable of delivering a smooth and modern user experience.
Backend (WordPress as Headless CMS)
On the backend, WordPress was customized to serve as a structured content hub:
- Advanced Custom Fields (ACF): Used to model complex content blocks like services, certifications, and contact information.
- Custom Post Type UI (CPT UI): Helped to organize key areas like service categories, certifications, and downloadable forms.
- Simplified Admin Interface: Focused on usability for non-technical staff, making routine content updates fast and safe.
Frontend (Angular)
For the frontend, I used Angular with standalone components and Angular Router to keep the architecture modular and scalable:
- TailwindCSS: Provided a consistent, utility-first approach to responsive styling.
- RxJS: Used to cache API responses and optimize data fetching, reducing load times and unnecessary HTTP requests.
- EmailJS: Integrated to handle form submissions securely without requiring backend logic.
- Semantic HTML: Ensured good SEO and accessibility foundations.
Performance Results
After deployment, the site was tested using Google PageSpeed Insights and produced excellent scores:
- Performance: 81
- Accessibility: 88
- Best Practices: 93
- SEO: 100
These results demonstrate a strong balance between frontend performance, accessibility, and SEO. The 81 performance score reflects a well-optimized Angular application, considering it's a dynamic SPA consuming content via REST APIs. The perfect score in SEO confirms that the semantic HTML structure and metadata were correctly implemented even without SSR.
Conclusion
This project successfully met all client requirements: an easy-to-use CMS, a modern design, and technical robustness. It’s fast, mobile-friendly, and future-ready — built with scalability in mind. I’m proud of how the combination of WordPress and Angular delivered a flexible yet maintainable solution for an organization like SICAP, helping them showcase their expertise and build trust with potential clients.
You can see the page below ⬇️