screenshot of Portfolio


A YAML+Gulp-based template for creating design portfolios.


This article provides information on building a design portfolio using HTML/Swig/YAML, JavaScript/jQuery, Sass, and Gulp. The author suggests that designers who are familiar with these technologies can use the provided content as a starting point for their own portfolio.


  • HTML/Swig/YAML: The use of HTML, Swig, and YAML allows for easy structuring and customization of the portfolio website.
  • JavaScript/jQuery: Integration of JavaScript and jQuery enables interactive elements and enhanced functionality on the portfolio site.
  • Sass: Utilizing Sass as a CSS preprocessor allows for easier development and maintenance of stylesheets.
  • Gulp: Gulp is used as a task runner to automate repetitive tasks, such as minifying files and refreshing the browser during development.


To install the theme and set up the portfolio, follow these steps:

  1. Install Node JS on your machine.
  2. Install Gulp and other required Node packages by running the following command:
npm install
  1. This installation may take a while as it retrieves the necessary dependencies.
  2. Once the installation is complete, run the app using the following command:
gulp serve
  1. Edit the data and media files as per your requirements. The changes should automatically reflect in the browser while the gulp serve command is running.
  2. To generate minified HTML/JavaScript/CSS/media files for production, use the following command:
gulp build


This article offers a comprehensive guide on building a design portfolio using HTML/Swig/YAML, JavaScript/jQuery, Sass, and Gulp. By following the provided instructions, designers can use the suggested technologies and features to create their own impressive and functional design portfolios.


Gulp.js is an old but popular site building tool that automates various repetitive development tasks in web development, such as compiling Sass, minifying JavaScript, and optimizing images.