Sass variables and mixins help keep recurring colours, spacing and responsive rules consistent. This portfolio uses them to share its forest palette across pages.

The original stylesheet used Sass imports. The updated build uses modules with @use while retaining the original layout. The example below comes from the learning project.

Responsive layouts need to work with different screen widths and text lengths. This project combines flexible containers, media queries and scalable images.

The navigation, project slider and contact section provide examples of adapting the same content for desktop and mobile screens.

The original Gulp setup compiled templates and styles, bundled scripts and copied assets. It was part of the coursework workflow.

The updated project uses a small Node.js build script with Pug, Sass and esbuild. Source files remain separate from the generated site.

Jade, now called Pug, provides a compact syntax for HTML templates. Shared layouts and mixins keep repeated markup in one place.

This portfolio uses mixins for navigation, social links, skill charts and the footer. Updating a shared component keeps the pages consistent.