Jhonatan Arenas 🎨
Explore a curated selection of my projects and case studies that showcase my ability to turn ideas into impactful digital products.
Client For:
Personal Project
Services:
Frontend Architecture, Server Side Rendering, Secure Form Handling, Deployment Automation
https://cl.iforwhile.comOverview
This personal project represents the very first public website for my technical brand. The application was built using Angular 19 with a standalone, module less architecture, enhanced by native server side rendering (SSR) to improve SEO and initial load performance. It includes a secure contact form integrated with reCAPTCHA and powered by a NestJS backend REST API. The system is deployed via Docker on a self managed VPS using CapRover, and integrates Google Tag Manager (GTM) for analytics and visitor tracking.
Challenges
Building this project required hands on implementation across both frontend and backend stacks, while also managing self hosted infrastructure. Achieving full SSR compatibility with Angular 19, integrating secure third party services like reCAPTCHA and GTM, and deploying the entire system on a self managed VPS posed key challenges that were addressed through modular design, testing, and automation.
SSR with Module less Angular 19
- Challenge: Migrating and configuring Angular’s module less architecture to support native SSR without Angular Universal.
- Solution: Leveraged @angular/ssr for pre rendering and hydration across views, ensuring content visibility to search engines and improved UX on first load.
Form Validation with reCAPTCHA
- Challenge: Ensuring the contact form was protected from spam while maintaining a seamless user experience.
- Solution: Implemented Google reCAPTCHA v2 in the frontend and verified tokens in the NestJS backend before processing submissions.
Google Tag Manager Integration
- Challenge: Integrating GTM without interfering with pre rendered HTML or hydration logic.
- Solution: Injected GTM scripts in SSR compatible layout templates, ensuring analytics and event tracking work without performance regression.
Deployment on Self Hosted Infrastructure
- Challenge: Managing Docker containers, SSL certificates, and routing rules on a personal Linux VPS.
- Solution: Used CapRover to automate Docker deployments, handle HTTPS via Let's Encrypt, and route requests securely to the backend and frontend services.
Results/Conclusion:
The completed site is fast, SEO optimized, and fully self hosted. It serves as both a technical showcase and a centralized platform for my professional identity. Through this project, I refined my understanding of Angular SSR, Docker orchestration, and secure API development in a self managed hosting environment.
