GK Architects

Summary

• The challenge: Migrate a legacy, monolithic CMS platform to a modern decoupled architecture while selectively reusing legacy CSS structures to meet budget requirements, supporting RTL localization, and pivoting the design to a high-end editorial aesthetic.
• The solution: A fully headless JAMstack architecture utilizing Astro, Decap CMS, customized Sass pipelines, interaction-driven telemetry, and live Real User Monitoring (RUM).
• The impact: Flawless 100/100 Lighthouse scores for Accessibility, Best Practices, and SEO, paired with elite 93–100 sitewide Performance. Achieved 0 ms Total Blocking Time (TBT), sub-second desktop LCP, and a frictionless, autonomous content authoring experience for the client.

Responsive editorial UI: Transitioning away from heavy SaaS-style UI patterns to a curated, high-contrast exhibition aesthetic. Utilizing deliberate negative space, drafting-inspired typography (Manrope), and art direction ensures the architectural commissions command attention flawlessly across every viewport.

---

Overview

GK Architects is an architectural studio in Cyprus specializing in high-end private houses, residential, and commercial developments. When I built their original site five years ago, I drew inspiration from popular web trends, engineering UI patterns that I later realized were optimized for traditional SaaS marketing funnels. Those heavy UI elements ultimately competed with, rather than showcased, the architect's work. I initiated this complete rebuild with a dual purpose: to master modern headless architectures using Astro and Decap CMS, and to deeply research and execute the proper aesthetic for the architectural discipline. The goal was to pivot away from a conventional marketing website and engineer an editorial-style portfolio, a curated exhibition emphasizing exclusivity, deliberate negative space, and high-end craftsmanship.

Executed as a major migration and architectural redesign from a legacy October CMS platform to Astro and Decap CMS, the new website bridges the gap between elegant aesthetics and aggressive technical performance. To meet strict client budget and timeline constraints, I strategically retained the existing Bootstrap framework to reuse some legacy styles. Navigating Bootstrap's structural limitations required a highly customized approach compared to modern utility frameworks like Tailwind. To achieve robust RTL localization, I adopted the RTLCSS framework, engineering a custom Node.js script to resolve its incompatibilities with the Astro build pipeline. Furthermore, I optimized the CSS architecture by tapping directly into Bootstrap's source Sass files to customize variables, maps, and mixins. Every component was assigned its own dedicated stylesheet that selectively imported only the required dependencies. By pairing these highly optimized structural pipelines with strategic DOM management and rigorous asset optimization, the site achieves near-instant visual rendering and 0 ms Total Blocking Time without JavaScript bloat.

---

Performance & impact metrics

To validate the architecture, the site was audited using Lighthouse 13.3.0 simulation profiles to reflect real-world constraints rather than best-case laboratory scenarios:

• Mobile profile: Emulated Moto G Power, slow 4G network (1.6 Mbps throughput / 150ms RTT), 1.2x CPU slowdown.
• Desktop profile: Emulated Desktop, custom broadband (10 Mbps throughput / 40ms RTT), unthrottled CPU.

Mobile PageSpeed Insights audit (June 2026). Achieving a 99 Performance score on a throttled mobile connection while serving high-resolution architectural assets validates the highly optimized asset pipeline and 0ms Total Blocking Time.

Based on single-session audits across core routes, the architecture achieved a flawless 100/100 across Accessibility, Best Practices, and SEO, while safely passing Core Web Vitals and delivering elite rendering metrics:

• 0 ms Total Blocking Time (TBT): Maintained an absolute zero JavaScript execution block across all tested pages by deferring heavy tracking containers (Google Tag Manager) until explicit user interaction, ensuring immediate interactivity.
• Rapid First Contentful Paint (FCP): Rendered the initial DOM under 0.5s on Desktop and 1.5s on throttled Mobile, validating the optimization of the Sass pipeline and the unblocked critical rendering path.
• Optimized Largest Contentful Paint (LCP): Clocked ≤0.5s on Desktop and kept mobile LCP largely under 2.0s (peaking at 2.8s on the heaviest grid), which is exceptionally fast given the high-resolution imagery required for an architectural portfolio.
• Near-zero Cumulative Layout Shifts (CLS): Largely eliminated Cumulative Layout Shift via strict container dimensioning and Astro's Fonts API. By self-hosting web fonts at build time and leveraging the API's automatic optimizations, this architecture completely prevents font-swap layout shifts while inherently protecting user privacy by eliminating IP leaks to Google Fonts.

Sitewide rendering audit (Snapshot)

Route	Viewport	Perf	LCP	FCP	TBT	CLS
Home	Mobile / Desktop	99 / 100	1.7s / 0.4s	1.5s / 0.4s	0 ms	0 / 0
Projects Archive	Mobile / Desktop	93 / 99	2.8s / 0.5s	1.5s / 0.4s	0 ms	0 / 0.067
Typology Archive	Mobile / Desktop	99 / 100	2.0s / 0.4s	1.4s / 0.3s	0 ms	0 / 0.036
Single Project	Mobile / Desktop	96 / 100	1.4s / 0.5s	1.4s / 0.3s	0 ms	0.121 / 0
Journal Archive	Mobile / Desktop	100 / 100	1.4s / 0.3s	1.1s / 0.3s	0 ms	0 / 0
Single Article	Mobile / Desktop	97 / 100	1.8s / 0.5s	1.4s / 0.4s	0 ms	0 / 0
Contact	Mobile / Desktop	99 / 100	1.8s / 0.4s	1.4s / 0.3s	0 ms	0 / 0

---

Architectural highlights

Editorial UI & content guardrails

• Curated exhibition aesthetic: I abandoned heavy UI cards and alternating background colors in favor of a unified #fafafa canvas. By utilizing generous negative space and asymmetric image grids, the design removes traditional web boundaries.
• Typographic precision: I transitioned to a high-contrast "Perfect Fourth" editorial typographic scale using Manrope. Coupled with responsive fluid typography utilizing calc(), the text scales flawlessly across all viewports.
• Foolproof CMS guardrails: To prevent content editors from breaking designs or SEO hierarchies, I implemented robust field-level validation across Decap CMS. This includes strict character-length constraints to protect UI containment and enforce SEO metadata limits, precise regex validation for URLs and emails, and strict image format requirements.

Un-brickable content architecture: I engineered strict Decap CMS validations to protect the site's layout and SEO. By enforcing Regex character limits, strict image aspect ratios, and explicit routing warnings directly in the UI, the marketing team enjoys total autonomy without the risk of breaking the frontend design or creating 404 loops.

High-performance engineering

• Real User Monitoring (RUM) telemetry: Laboratory metrics are only half the picture. I integrated the web-vitals library to capture live field data, pushing precise LCP, INP, and CLS values and unique IDs directly into the dataLayer for GA4 custom metrics. This allows the marketing team to correlate Core Web Vitals directly with user conversion rates in GA4.
• Data-driven art direction & precise asset pipelines: To protect critical Largest Contentful Paint (LCP) times, I engineered a dual-strategy image architecture. For the high-impact hero slider, I bypassed Astro's native limitations by integrating @unpic/astro. By nesting Unpic's Source and Image components within a native <picture> element, I mapped art-directed crops to strict hardware media queries. To prevent the framework from generating dozens of arbitrary, unused image sizes, I extracted global screen resolution data from Statcounter and passed explicit breakpoints arrays to serve pixel-perfect assets for real-world devices. Across the rest of the site, I standardized asset delivery using Astro's native <Image/> component with exact widths and sizes attributes, eliminating build-time and CDN overhead.
• Interaction-based telemetry execution: I engineered an interaction-driven lazy-loading strategy. Heavy tracking containers (Google Tag Manager) are deferred until explicit user intent is detected (scroll, touch, or mouse movement), preserving near-zero Total Blocking Time (TBT).
• Local font optimization: Utilized Astro's Fonts API to download and cache fonts at build time, eliminating layout shifts, removing third-party network requests, and ensuring GDPR compliance by preventing IP leaks to Google.

i18n & RTL infrastructure

• Dynamic RTL build pipeline: Wrote a custom Node.js post-build script that integrates RTLCSS into the Astro pipeline. It automatically generates .rtl.css files from the scoped Sass files and dynamically swaps stylesheets on load.
• Intelligent translation fallbacks: Configured a robust headless localization system where languages inherit the default English content if a specific translation is not yet provided, mimicking real-world project workflows.
• Deep UI translation: Localization extends to all UI strings, labels, and aria-attributes for global accessibility compliance.

Technical SEO & accessibility (A11y)

• Exceptionally semantic HTML: The architecture utilizes a deep semantic HTML structure with robust aria-attributes to ensure maximum accessibility for assistive technologies.
• Route-based typology filtering: I replaced legacy AJAX-based filters with distinct page routes (e.g., /projects/private-houses/). This maintains visual UX while allowing search engines to index specific, keyword-rich category pages.
• Paginated archives: The journal archive is fully paginated with SEO-friendly paths (e.g., /journal/page/2/), featuring standard rel="prev" and rel="next" attributes on pagination components for optimal crawler traversal.
• Configuration-as-code redirects: Permanent URL mappings are managed directly within astro.config, eliminating the need for bloated redirection plugins.
• Editor-optimized parsing: I configured a custom marked parser to intercept Decap CMS content at build time, automatically injecting target="_blank" and rel="noopener noreferrer" attributes to external links while adding a 🔗 icon for clarity.

Conversion tracking, compliance & infrastructure

• Data pipelines & preemptive future-proofing: Architected a highly secure, Netlify-handled contact form integrated with intlTelInput for strict E.164 phone number formatting and dynamic country code extraction. I engineered a dataLayer payload that segments lead data, routing non-PII behavioral indicators (typology, word count) to GA4 to measure lead quality. Even though the client is not currently running paid ads, I preemptively structured an encrypted PII payload (user_data) strictly for Google Ads and Meta Conversions APIs. This future-proofs their infrastructure for Enhanced Conversions, granting the marketing team zero-ticket scalability to launch highly-optimized campaigns on day one without requiring developer intervention.
• Strict GDPR & GCM v2 compliance: Integrated CookieYes and mapped it to Google Consent Mode v2 via GTM. This architecture ensures tracking tags respect regional privacy laws dynamically, utilizing cookie-less pings for behavioral modeling when consent is denied.
• Automated deployments: Git-based CI/CD pipeline integrated with Netlify Edge, with webhooks for incremental static regeneration upon content publication.

Architecting pristine data pipelines: Triggering a strict lead_generated event upon server validation guarantees data accuracy. By explicitly structuring a user_data payload, the architecture is preemptively future-proofed for Enhanced Conversions.

Real User Monitoring (RUM) in action: By pushing live Core Web Vitals directly into the dataLayer, the marketing team can correlate actual field performance with user conversion rates in GA4, moving beyond isolated laboratory Lighthouse scores.

---

Architectural trade-offs: SPA-like navigation vs. telemetry reliability

Initially, I added support for View Transitions by integrating Astro's <ClientRouter> component to deliver SPA-like animated transitions. However, this caused incompatibilities with GTM-injected tools like CookieYes, which do not inherently support client-side routing.

While I could have engineered a bespoke, SPA-compatible consent management solution from scratch, doing so would have required significant development time and inflated the cost.

After weighing the financial cost against the benefit, I made the deliberate decision to revert to standard MPA navigation. By relying on standard page loads, GTM and the consent manager function exactly as designed. More importantly, this guarantees zero-maintenance scalability for the marketing team. Any future tracking pixels, heatmaps, or conversion tools they deploy via GTM will function flawlessly out-of-the-box, preserving their autonomy without requiring ongoing developer intervention or hacky lifecycle workarounds.

---

Roadmap & future enhancements

1. Immersive interactions: Integrate scroll-based 2D animations via GSAP to enhance the editorial narrative, optimized to ensure fluid execution.
2. JSON-LD structured data: Implementation of comprehensive dynamic JSON-LD schemas for rich snippet generation.
3. Granular SEO: Add CMS fields to allow the user to specify custom canonical URLs on a per-page basis.
4. Email/Phone obfuscation: Implement JS-based obfuscation to protect contact details from scrapers without harming UX.

---

Conclusion

Redesigning the GK Architects website was an exercise in balancing aesthetic restraint with pragmatic performance engineering. While modern architectures often tempt developers to chase the latest shiny features, this project reinforced the importance of evaluating technology against real-world business requirements. The final build proves that a website can embody a luxurious feel while maintaining strict 100/100 PageSpeed fundamentals.