GK Architects

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 relied heavily on popular web themes and Behance/Dribbble trends, incorporating features that I later realized were optimized for traditional marketing funnels and SaaS landing pages. Those heavy UI patterns 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 without JavaScript bloat, easily passing all real-world Core Web Vitals assessments.

Key features

Editorial UI & aesthetic architecture

• Curated exhibition aesthetic: I abandoned heavy UI cards, borders, and alternating background colors in favor of a unified #fafafa canvas. This palette was deliberately chosen to mimic the neutral walls of a physical museum. By utilizing generous negative space and asymmetric image grids, particularly on individual project pages, the design removes traditional web boundaries and allows the architectural photography to command the room.
• Cinematic hero sections: The full-screen hero slider establishes an immediate editorial tone. Each slide pairs massive, high-contrast typography with high-resolution architectural photography. I specifically curated the image framing to ensure the top third of the viewport is dominated by sky. This creates natural negative space, making the typography highly legible without needing dark overlays or heavy gradients that would dull the images.
• Asymmetrical visual pacing: Instead of rigidly symmetrical image grids, I implemented staggered, asymmetrical layouts for the individual project galleries. This intentional break in the grid mimics the layout of a high-end physical monograph. It naturally forces the user's eye to slow down and deliberately process each photograph rather than mindlessly scrolling through a wall of images.
• Typographic precision: I transitioned to a high-contrast "Perfect Fourth" editorial typographic scale using Manrope, a geometric sans-serif whose clean, mathematical proportions directly mirror modern architectural discipline. This ensures a highly structured, premium aesthetic while maintaining excellent legibility. Coupled with responsive fluid typography utilizing calc(), the text scales flawlessly across all viewports.
• Upcoming immersive interactions: To elevate the editorial aesthetic in a future release, I am planning to integrate scroll-based 2D animations via GSAP. The current rendering pipeline is already optimized to ensure these parallax effects will execute fluidly without degrading the site's aggressive performance metrics.
• SPA-like navigation and the decision to revert it: Initially integrated Astro's <ClientRouter> to deliver seamless cross-document fade transitions and an SPA-like experience. In practice, the feature introduced a class of subtle but compounding incompatibilities with third-party tools injected via Google Tag Manager. Because <ClientRouter> replaces the entire <body> on every navigation rather than performing a full browser reload, GTM-injected elements, specifically the CookieYes consent manager's DOM nodes, styles, and script, were silently wiped out on each page change. Attempts to preserve them via astro:before-swap lifecycle hooks restored the visual structure, but CookieYes's internal JavaScript state had been initialized against the original document context and could not be trivially re-attached to a new one. After weighing the cost against the benefit (smooth SPA-like transitions vs. an ongoing maintenance burden every time a new GTM tag is introduced), I made the deliberate decision to revert to standard MPA navigation. GTM, CookieYes, and all third-party tooling now function exactly as designed, with zero lifecycle hacks required.

High-performance engineering

• Zero-shift asset pipelines: Implemented Astro's <Image /> component with strict srcset and sizes attributes, alongside @unpic/astro for viewport-specific art direction. All images are automatically converted to WebP and natively lazy-loaded, drastically reducing Largest Contentful Paint (LCP) times.
• Data-driven art direction: Rather than relying on arbitrary responsive breakpoints for the full-page sliders, I engineered the <picture> elements using real-world global viewport statistics. By analyzing exact CSS width clusters, I isolated perfect hardware thresholds: tall mobile crops up to 430px (served at 3x density for modern OLEDs), portrait tablet crops up to 1024px (served at 2x density to target Retina iPad Pros), and wide 16:9 4K assets for everything above 1025px. Furthermore, by passing strictly calculated breakpoints arrays into the @unpic/astro’s Image and Source components, I prevented the framework from auto-generating dozens of unused image sizes, drastically reducing Astro's build times and CDN processing overhead while ensuring pixel-perfect sharpness.
• Interaction-based telemetry execution: To protect the site’s aggressive performance metrics, I engineered an interaction-driven lazy-loading strategy for third-party scripts. Instead of allowing heavy tracking containers like Google Tag Manager to bottleneck the main CPU thread during the initial load, the architecture defers their execution until explicit user intent is detected (scroll, touch, or mouse movement). This strict resource prioritization preserves a flawless 95+ mobile PageSpeed score and near-zero Total Blocking Time (TBT), consciously trading the analytics data of "zero-interaction bouncers" for elite technical SEO and a frictionless user experience.
• Local font optimization: Utilized Astro's Fonts Provider API to download fonts at build time, eliminating layout shifts, removing third-party network requests, and ensuring privacy compliance by preventing IP leaks to Google.

Custom 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 BEM Sass components and dynamically swaps stylesheets on load for RTL languages.
• Headless localization: Configured Decap CMS for complete multi-language authoring, paired with Astro's native i18n routing and custom UI dictionaries to ensure every label, route, and post is perfectly translated.

Technical SEO & content strategy

• Route-based filtering: Replaced legacy AJAX category filters with highly optimized, distinct page routes (e.g., Private Houses, Commercial). This maintains the visual UX of a filter while allowing search engines to index highly specific, keyword-rich category pages.
• Strategic DOM management: Injected hidden <details> and <summary> sections at the bottom of masonry grids, allowing for heavy, SEO-boosting copy to exist in the DOM without destroying the minimalist visual hierarchy.
• Automated SEO generation: Engineered automated pipelines for JSON-LD schemas, XML sitemaps, and Open Graph tags. Granted the client granular control over canonical URLs, noindex, and nofollow directives directly within the Decap CMS.
• Duplicate content prevention: Enforced strict non-trailing path redirects at the astro.config level to ensure a single source of truth for all indexed pages.
• Editor-optimized rendering pipelines: Engineered a custom marked parser utility to intercept Decap CMS content at build time. It intelligently parses standard Markdown links to automatically inject target="_blank" and rel="noopener noreferrer" attributes, alongside an external link icon (🔗) exclusively for external URLs. This zero-configuration approach empowers the client to seamlessly author legal and editorial content without touching raw HTML, while strictly enforcing security and UX best practices.

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.

By prioritizing a highly optimized, standard MPA architecture over brittle SPA transitions, the final build guarantees that business-critical tracking, consent management, and marketing scripts remain inherently stable and resilient. It stands as proof that a website can embody the luxurious, interactive feel of a heavy application while maintaining strict 95+ PageSpeed fundamentals, creating an incredibly fast, maintainable foundation designed to support long-term growth.