GSL Construction & Design

Project Overview

GSL Construction & Design Consultancy is a trusted name in the Philippine construction sector, known for turning complex architectural visions into reality. The platform I built reflects their commitment to precision and excellence, providing potential clients with a seamless journey from browsing services to viewing completed structural masterpieces.

Problem / Goal

Showcasing heavy engineering and delicate architectural design requires a balanced UI. The existing market solutions were either too generic or lacked the content management capabilities needed for a rapidly growing portfolio. GSL needed a solution that was robust enough to handle high-resolution project imagery while maintaining lightning-fast load times for mobile users.

System Architecture

The application is built on a headless architecture to separate the presentation layer from content management.

• Next.js (App Router): Utilized for Server-Side Rendering (SSR) to ensure immediate content availability and superior SEO rankings.
• Payload CMS: Chosen for its flexibility and TypeScript native nature, serving as the backend to manage Projects, Services, and Company Highlights.
• Image Optimization: Implemented Next.js Image component with automatic format detection (WebP/AVIF) to handle heavy construction portfolio images without compromising speed.

Core Features

• Dynamic Project Showcase: Developed a custom Collection in Payload allowing admins to upload multiple images, set project categories, and add detailed case study descriptions.
• Service Management: A dynamic services section where distinct offerings like 'Structural Steel Works' and 'Architectural Design' can be managed independently.
• SEO Management: Integrated a global SEO config within Payload, allowing per-page metadata control (Title, Description, OG Images) directly from the admin panel.

Technical Implementation

• Semantic HTML: Built with full accessibility in mind, using proper heading hierarchies and ARIA labels.
• Local Business Schema: Implemented JSON-LD structured data to boost local search visibility in the Rizal, Philippines area.
• Core Web Vitals: Achieved 95+ scores by optimizing font loading and deferring non-critical scripts.

My Contribution

I handled the full lifecycle of this product, from requirement gathering with the principal engineer to the final deployment.

• Design System: Crafted a professional, trustworthy design language using Tailwind CSS, focusing on clean lines and industrial aesthetics.
• Backend Logic: Configured Payload CMS collections and hooks to automate image resizing and data validation.
• Responsive Development: Ensured the site is fully responsive, catering to clients viewing plans on tablets and mobile devices in the field.

Impact

The new platform has established GSL as a digital-forward consultancy, significantly increasing their inquiry rate for specialized steel and architectural projects. It has streamlined their marketing operations, allowing them to instantly publish new wins to a global audience.