header works!

Project

Kanso

PROJECT STACK
vue
css
php

The Kanso project required building a frontend for a headless CMS system, with the main challenge being to create a functional prototype for the client without access to backend data. This project was aimed at providing a visual representation of the final product before the backend infrastructure was ready, allowing the client to interact with a working model while the backend was under development.

To overcome this, I used Vue.js, which allowed for rapid prototyping due to its simplicity, reactivity, and flexibility. The frontend was designed to be fully responsive, with pixel-perfect accuracy for all devices. I used plain CSS to ensure flexibility, enabling the design to be easily adapted or extended as needed. For the backend, I implemented a simple mock server using PHP to simulate the data interactions until the actual CMS could be connected.

This approach not only sped up the initial development process but also provided the client with a tangible product for feedback before backend integration was complete. The final system was designed to be easily scalable and adaptable, ensuring that it could seamlessly connect to the headless CMS once the backend was ready.

Screenshot 1
Screenshot 2
Screenshot 3
Screenshot 4
Client
Dorf
Launch Date
Jan 2019
Country
Australia
Stack
  • vue
  • css
  • php
Key features
  • Vue.js-based dynamic frontend
  • CSS3 animations and transitions
  • Fully responsive design
  • Pixel-perfect frontend design
  • Mock backend using PHP for rapid prototyping
Key learnings
  • Working with headless CMS approaches
  • Quick prototyping with Vue.js
  • Building mock servers for frontend testing
  • Designing for responsive layouts and pixel-perfect accuracy