Skip to project content

CLCA Architects

The official portfolio website for Chamara Liyanage Associates, a Sri Lankan architecture and landscape design practice led by Chartered Architect and Chartered Landscape Architect Chamara Liyanage.

Role
Frontend development in a collaborative team
Category
Architecture portfolio
Timeline
December 2024 – February 2025
CLCA Architects residential project gallery
CLCA Architects philosophy and architectural feature page
CLCA Architects contact page

Project overview

01

The challenge

The central challenge was to translate the firm’s design-led identity into an image-rich digital portfolio while keeping a large collection of architectural work clear, responsive, and efficient to load across devices.

02

The outcome

The completed website provides a clean, fast, and mobile-friendly presentation of the firm’s residential villas, holiday homes, resorts, and landscape work, supported by a dedicated milestones page documenting more than 15 years of practice.

Deliverables

  1. 01Reusable React component system
  2. 02Responsive Tailwind CSS layouts
  3. 03Performance-conscious project gallery
  4. 04Firm milestones page

Project access

chamaraliyanageassociates.comCLCA ArchitectsThe official portfolio website for Chamara Liyanage Associates, a Sri Lankan architecture and landscape design practice led by Chartered Architect and Chartered Landscape Architect Chamara Liyanage.View live demo

Contributors

  • Chanuka Lankanjana
  • Dulanjith Wathsala
  • Soorya Suraweera

Technical details

Platform

The website serves as the official digital portfolio for Chamara Liyanage Associates, presenting the practice, its design philosophy, and its architecture and landscape projects through a focused visual experience.

Architecture

The frontend was developed with React.js using reusable, componentized interface patterns that keep project pages consistent and make the portfolio easier to maintain as the firm’s body of work grows.

Responsive design

Tailwind CSS provided a utility-first responsive system for adapting navigation, typography, galleries, and supporting content across mobile, tablet, and desktop breakpoints.

Content and performance

The image-heavy gallery was structured to showcase residential villas, holiday homes, resorts, and landscape projects without compromising loading performance, while the milestones page highlights more than 15 years of design work.

Tech stack

  • React
  • JavaScript
  • Tailwind CSS
  • Hostinger

Final thoughts

This project demonstrates how reusable frontend architecture and restrained visual design can support an image-led professional portfolio. Working within a team also required consistent component patterns and close coordination so the finished experience remained coherent across content types, screen sizes, and project categories.

What I learned

  1. 01

    I strengthened my ability to structure reusable React components for a content-rich professional website.

  2. 02

    I developed a more systematic approach to responsive implementation with Tailwind CSS across multiple breakpoints.

  3. 03

    I learned to balance image quality, gallery density, and loading performance in an architecture-focused portfolio.