Sentri Morph
A high-performance cybersecurity website built with Framer, featuring custom code components, integrated email services, reCAPTCHA security, and a fully customized CMS for dynamic content management.
Project Overview
SentriMorph presented a unique challenge: building a production-ready cybersecurity website using Framer — a platform I had never used for a real project before. The project required going beyond Framer's no-code capabilities by implementing custom JavaScript code, integrating third-party services (Email.js, Mailjet, reCAPTCHA), setting up tracking pixels (Facebook, Google Analytics, LinkedIn), and customizing Framer CMS for a dynamic blog system. This was a journey of rapid learning, creative problem-solving, and pushing Framer's limits to deliver a fully functional, SEO-optimized website.
Objective
The primary objective was to build a production-ready cybersecurity website using Framer while maintaining full control over functionality and integrations. The main challenge was learning Framer's ecosystem from scratch — understanding its component system, CMS architecture, and code limitations — while implementing advanced features like custom forms, email automation, security layers, and analytics tracking that typically require full-stack development capabilities.
Approach
I approached this project as a learning journey, starting by deeply understanding Framer's architecture and limitations. I implemented custom JavaScript code components for features that required advanced functionality beyond Framer's built-in capabilities. For the contact form, I integrated Email.js with Mailjet as a backup email service, and added reCAPTCHA for security. I customized Framer CMS components to create a flexible blog system, designed custom icons, and integrated multiple tracking pixels for analytics. Throughout development, I had to creatively work around Framer's pre-coded functions and limited customization access, finding innovative solutions to achieve traditional web development functionality within Framer's constraints.
Deliverables
Custom Contact Form System
Fully functional contact form with dual email service
- Email.js integration for primary email delivery
- Mailjet as backup email service
- Google reCAPTCHA v2 security integration
- Real-time form validation
- Success/error state handling
- Custom JavaScript code components
Framer CMS Integration
Customized CMS for dynamic blog content
- Custom blog collection setup in Framer CMS
- Customized CMS components for blog posts
- Dynamic blog listing and detail pages
- Category and tag filtering
- SEO-friendly URLs and metadata
- Responsive blog layouts
Analytics & Tracking Integration
Multi-platform tracking implementation
- Facebook Pixel integration
- Google Analytics (gtag.js) setup
- LinkedIn Insight Tag implementation
- Custom event tracking
- Conversion tracking setup
- Privacy-compliant tracking code
Custom Design Components
Bespoke icons and UI elements
- Custom SVG icons design
- Interactive hover states
- Custom animations using Framer Motion
- Responsive component variants
- Reusable component library
- Brand-consistent design system
SEO & Performance Optimization
Search engine and speed optimization
- Lighthouse 100% Best Practices score
- GTmetrix: 84% Performance, 90% Structure
- Meta tags and Open Graph setup
- Schema markup implementation
- Image optimization and lazy loading
- Mobile-first responsive design
Production Deployment
Live website with bug fixes and optimization
- Published to custom domain
- Fixed post-launch bugs
- Cross-browser compatibility testing
- Mobile responsiveness verification
- Form submission testing
- Performance monitoring setup
Technical Breakdown
Contact Form — Email.js + Mailjet + reCAPTCHA Integration
Built a custom contact form using Framer's code component feature, integrating Email.js as the primary email service with Mailjet as a backup. Added Google reCAPTCHA v2 for spam protection. This was my first experience implementing such a complex integration within Framer's constraints.
Created custom JavaScript code component in Framer for form handling
Integrated Email.js SDK for primary email delivery with custom templates
Set up Mailjet API as fallback email service for reliability
Implemented Google reCAPTCHA v2 with proper token validation
Built real-time form validation with custom error messages
Added loading states and success/error feedback animations
Handled edge cases like network failures and API errors gracefully
Framer CMS — Custom Blog System
Set up and customized Framer CMS to create a fully functional blog system. This required learning Framer's CMS architecture from scratch and creating custom components that could dynamically render blog content with proper SEO optimization.
Configured Framer CMS collections for blog posts with custom fields
Created custom CMS components for blog listing and detail views
Implemented dynamic routing for individual blog posts
Built category and tag filtering system using CMS data
Added dynamic meta tags and Open Graph data for SEO
Designed responsive blog layouts that adapt to content length
Customized CMS field types for rich text, images, and metadata
Analytics Tracking — Multi-Platform Integration
Implemented comprehensive tracking across Facebook, Google, and LinkedIn platforms. Had to inject custom JavaScript code into Framer's head section and implement event tracking throughout the site.
Integrated Facebook Pixel with custom event tracking
Set up Google Analytics (gtag.js) with conversion tracking
Implemented LinkedIn Insight Tag for B2B tracking
Created custom event triggers for key user actions
Ensured GDPR compliance with consent management
Tested tracking across all pages and interactions
Debugged pixel firing issues using browser developer tools
Custom Code Components — Icons & Interactions
Designed and implemented custom SVG icons and interactive elements using Framer's code component system. Had to balance Framer's design capabilities with custom code for advanced interactions.
Created custom SVG icon components with proper sizing and colors
Implemented hover animations using Framer Motion API
Built reusable component variants for different states
Ensured icons are accessible with proper ARIA labels
Optimized SVG code for performance and file size
Created consistent spacing and alignment system
Exported components for reuse across multiple pages
Learning Framer's Ecosystem — From Zero to Production
This was my first real project using Framer. I had to quickly learn Framer's component system, understand its constraints, and figure out how to implement traditional web development features within a primarily no-code platform.
Studied Framer's documentation and component architecture
Learned the difference between Framer components and code components
Understood Framer's responsive breakpoint system
Discovered how to inject custom code for advanced functionality
Learned to work with Framer CMS and its data binding
Figured out deployment process and custom domain setup
Mastered debugging techniques specific to Framer environment
Working Around Framer's Limitations
Encountered several limitations where Framer's pre-coded functions couldn't be modified. Had to find creative workarounds to achieve the desired functionality while maintaining code quality and performance.
Identified which features required custom code vs. Framer's built-in tools
Found workarounds for non-customizable pre-coded functions
Balanced between Framer's design tools and custom JavaScript
Dealt with limited access to underlying code structure
Created hybrid solutions combining Framer components with code
Optimized code to work within Framer's constraints
Documented limitations and solutions for future reference
Key Technical Challenges & Learnings
First-Time Framer Experience — Steep Learning Curve
This was my first real project using Framer. I had to quickly understand Framer's entire ecosystem — its component system, CMS architecture, code component limitations, and deployment process — all while building a production website.
I dedicated the first few days to intensively studying Framer's documentation, watching tutorials, and experimenting with the platform. I created a learning roadmap, identified which features I needed to master first, and progressively built complexity. I also joined Framer communities to learn from experienced developers and find solutions to specific problems.
Limited Customization Access — Working Within Constraints
Framer has pre-coded functions that cannot be modified, which was frustrating as a web developer used to having full control over code. Some features I wanted to implement were either impossible or required creative workarounds.
I learned to think differently about implementation — instead of fighting the platform, I worked with its strengths. I identified which features could use Framer's built-in tools and which required custom code components. For non-customizable functions, I built wrapper components or used JavaScript injection to add functionality. I documented all workarounds for future projects.
Complex Form Integration — Email.js + Mailjet + reCAPTCHA
Implementing a dual email service system with spam protection in Framer was challenging. Email.js and Mailjet required different API approaches, and integrating reCAPTCHA within Framer's code component system was non-trivial.
I created a custom code component that handled all three services. I implemented Email.js as the primary service with promise-based error handling, so if it failed, the system would automatically fall back to Mailjet. For reCAPTCHA, I injected the script into Framer's head and created a custom validation flow. I tested all edge cases including network failures, API timeouts, and invalid tokens.
Understanding Framer's Component System
Framer's component system is different from traditional React development. Understanding the relationship between Framer components, code components, variants, and overrides took significant time and trial-and-error.
I systematically experimented with different component types, creating test components to understand how each feature worked. I learned when to use Framer's visual components versus code components, how to pass props between them, and how to create efficient component hierarchies. This hands-on experimentation accelerated my learning beyond just reading documentation.
Post-Launch Bug Fixes — Real-World Testing
After launching, several bugs appeared that weren't caught during development — form submission issues on certain browsers, tracking pixels not firing correctly, and mobile responsiveness problems.
I implemented a systematic debugging process: recreated issues in different browsers, used browser DevTools to identify problems, and fixed them one by one. For the form issues, I improved error handling and added better user feedback. For tracking pixels, I debugged using Facebook Pixel Helper and Google Tag Assistant. I also set up better testing procedures for future projects.
Outcome
Successfully launched a fully functional, production-ready cybersecurity website using Framer — a platform I had never used before. The project was completed in 2 weeks of development (1 month total including revisions and bug fixes). The site now runs smoothly with all features working as intended: contact form with dual email services, reCAPTCHA protection, multi-platform analytics tracking, and a fully customized CMS-powered blog. Post-launch bugs were systematically identified and fixed. The website achieves outstanding performance scores: Lighthouse 100% Best Practices, GTmetrix 84% Performance and 90% Structure, with full SEO optimization and mobile responsiveness.