Northline Atelier — Website Design & Frontend Development

Overview

This project involved the design and development of a clean, minimal website for an architectural studio. The focus was on presenting projects in a calm, editorial layout while keeping the technical setup intentionally lightweight. The site consists of a homepage with featured projects, a services overview, a filterable project section, and a contact page with a custom form.

Challenge

The main challenge was creating a refined, contemporary look using only basic web technologies. Without relying on frameworks or complex tooling, the design needed to feel modern, responsive, and interactive, while maintaining excellent performance and accessibility across devices.

Goals

• Create a visually strong yet restrained architectural aesthetic
• Present projects in a clear, filterable structure
• Keep the technical stack minimal and maintainable
• Implement light and dark modes for different viewing preferences
• Ensure fast loading times and a smooth user experience

Solution

The website was built using plain HTML, CSS, and JavaScript, with a strong emphasis on layout, typography, and spacing. A modular project grid allows users to filter projects by category without reloading the page.

A light/dark mode toggle was implemented using CSS variables and JavaScript, enabling seamless theme switching while preserving visual consistency. The contact form was custom-built to integrate naturally into the overall design language.

Outcome

The result is a lightweight, elegant website that showcases architectural work in a calm and structured way. The minimal tech stack ensures excellent performance and long-term maintainability, while subtle interactions and theme switching add a modern, polished feel to the user experience.

Learnings

This project highlighted how far careful design and thoughtful interaction can go without heavy frameworks. Working with plain HTML, CSS, and JavaScript reinforced the importance of strong fundamentals, clean structure, and intentional restraint in both design and development.