A&F Advertising: from Framer to Astro

Portfolio project

A&F Advertising — From Framer to a Custom Astro Website

This project is a good example of how my website workflow has changed over the last year.

I first built a concise Framer website for A&F Advertising, an outdoor advertising agency in Dubai working with billboards and digital screens across the UAE. The first version put the visual work first, with a clear structure and images generated in ChatGPT. I later carried the design into a custom Astro codebase, keeping its visual character, layout and motion.

The migration covered the design, implementation, CMS and deployment while preserving the client’s existing email service.

The production site uses Astro, TypeScript and Tailwind CSS, with static output and Pages CMS connected to GitHub for content editing.

Arabic version

I now build my websites multilingual by default for the UAE market — English, Russian and Arabic. I treat all three languages as part of the product architecture from day one, including routing, content structure, SEO metadata and proper RTL support for Arabic.

Stack

Astro · TypeScript · Tailwind CSS · Pages CMS · Cloudflare Pages · Cloudflare Functions

One of the more important parts of the migration was the infrastructure itself.

The client already had their domain and business email on Tasjeel, so I deliberately left that infrastructure untouched. DNS, mailbox, MX, SPF and DKIM remain with Tasjeel, while the public website is served from Cloudflare Pages.

That meant I could replace the Framer frontend without risking the client’s existing email setup.

I also kept a temporary origin switch between the old Framer version and the new Astro build, which made the migration safer and gave me a clear rollback path during the transition.

For me, this project represents a broader shift in how I now build websites:

Framer for fast visual exploration when it makes sense — custom code for long-term ownership, flexibility and lower infrastructure cost.

With AI coding tools, rebuilding a Framer design into a clean Astro codebase is now fast enough that I increasingly prefer this model for production websites.

If you already have a site in Framer, Webflow or another visual builder and want to move it to a maintainable custom stack without losing the design, I can handle the migration end to end — from the existing interface to code, CMS, hosting and deployment.