GK Architects | Marios Sofokleous

Overview

GK Architects is an architectural studio in Cyprus specializing in high-end private houses, residential and commercial developments. Having built their original site five years ago, I was tasked with a complete architectural and visual redesign. The goal was to pivot away from a traditional marketing website and create a 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 page loads without JavaScript bloat, consistently scoring 95+ across all Core Web Vitals.

Key features

Editorial UI & aesthetic architecture

Curated minimalism: Abandoned heavy cards and alternating background colors in favor of a unified gallery white canvas, deliberately chosen to match physical museum walls. By utilizing deliberate negative space and asymmetry, the design allows the architectural imagery to command attention, exactly like an art exhibition.
Typographic precision: Transitioned to a "Perfect Fourth" 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.
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.
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 that when these parallax effects are introduced, they will execute fluidly without degrading the site's aggressive performance metrics.

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.
Upcoming third-party script optimization: To protect the Time to Interactive (TTI) metric as marketing efforts scale, I plan to integrate Partytown to offload the Google Tag Manager container. This architectural update will shift GA4 and non-critical tracking to a web worker, and I am currently prototyping solutions to ensure GTM-injected DOM elements, like our consent manager, maintain flawless execution within the proxy environment.
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.

Share this page