GK Architects

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.

Rebuilt from the ground up using Astro and Decap CMS, the new website bridges the gap between elegant, minimalist aesthetics and aggressive technical performance. By implementing animated transitions between different website views, custom Node.js build scripts for RTL localization, and rigorous asset optimization, the site achieves a near-instant, SPA-like navigation experience without the 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 stone 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 Noto Serif Display and Noto Sans, ensuring elegant contrast and seamless multi-language support. Implemented responsive fluid typography utilizing calc() for flawless scaling across all viewports.
• SPA-like navigation: Integrated the View Transitions API with intent-driven link prefetching to deliver seamless cross-document fades, matching the premium feel of a Single Page Application using purely native web APIs.
• Immersive interactions: Engineered scroll-based 2D animations and parallax effects using GSAP to add sophisticated motion without compromising rendering speed.

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.
• Third-party script offloading: Integrated Partytown to execute GA4 and other non-critical marketing scripts within a web worker, freeing up the main thread and protecting the Time to Interactive (TTI) metric.
• Local font optimization: Utilized Astro's Fonts 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 Arabic/RTL users.
• 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.

Conclusion

Redesigning the GK Architects website was a masterclass in balancing aesthetic restraint with aggressive performance optimization.

By pushing the boundaries of Astro's static generation and engineering custom workarounds for legacy frameworks (such as tree-shaking Bootstrap 5 and scripting automated RTL conversions), I was able to deliver a highly semantic, globally accessible portfolio. It proves that a website can look and feel like a heavy, luxurious, interactive application while maintaining the strict, 100/100 PageSpeed fundamentals of a modern JAMStack architecture.