The problem
The initial feedback from the client below.
The existing site uses outdated technology and non-standard CSS, hindering maintenance and collaboration. Migrating to Astro/Svelte for JavaScript and implementing Tailwind CSS for styling will modernize the project, improve code quality, and ensure compatibility with industry standards.
Solution
The project required replicating the structural layout, page elements, and animations. I followed a systematic approach, familiarized myself with the original website, set up the Astro & Tailwind environment, recreated the layout and page elements, implemented animations. The client request a similar representation of the original site with a few modernisations. Shown below.
Features
- Svelte components for the GSAP animated background and search
- Applied animations to background using GSAP on page load
- Used Intersection Observer to detect when elements became visible, triggering the entrance animations.
- Contact Form Integration with CRM and Spam Protection:
- Integrated the website's contact form with the existing CRM system for efficient lead management.
- Implemented robust spam protection mechanisms to ensure the integrity of user submissions.
- Integration with Zaraz and Google Analytics for tracking events
- Enabled gtag events on video play, download and page views.
- Use of gradients and animations to modernise the site
- Hover around cards, gradient on title.
- MDX conversion of blog posts
- Converted the existing blog posts to use MDX and created reusable components
- Dark Theme
- Used local storage and CSS variables to implement a site wide, persistent dark mode.
Results
