This project is part of a graduate-level web development course at MCAD, where the final assignment challenges students to pick an exceptional website, dissect its design system, and rebuild it from scratch in HTML and CSS.

I chose dotsandlines.io – a Vienna-based design agency with a refined, minimal aesthetic and strong typographic identity. The goal was not just to replicate how it looks, but to understand why it works – the spacing, the motion, the component logic underneath.

Over four weeks I analyzed their design system, built a library of reusable components, and assembled them into a near-faithful replica of the original site. Along the way I tackled CSS animations, drag-to-scroll interactions, scroll-triggered video scaling, and hover-driven image transitions – all written in vanilla HTML, CSS, and JavaScript.

What I learned: Studying someone else’s work closely is one of the fastest ways to grow. You start to see patterns, understand decisions, and build intuition for what makes a design system hold together.