Skip to content
🧱White Horse Masonry gallery website. Webpack, responsive-loader, GitHub Pages.
JavaScript HTML CSS
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
dist
src
.eslintrc.js
.gitignore
package-lock.json
package.json
readme.md
screen-shot-gallery.png
screen-shot.png
seo-checklist.md
todo.md
webpack.common.js
webpack.config.js
webpack.prod.js

readme.md

White Horse Masonry Services Static Site Generator

This is a freelance project by Dylan Landry to create a website for White Horse Masonry Services. The website is a client facing site with service benefits, contact information, and a gallery showcasing the company's past work.

This project is part of Dylan Landry's portfolio, and the code can be found on the project's GitHub repository.

A screen shot of the white horse masonry website home page. A screen shot of the white horse masonry website galleryq page.

Install

Whenever intructed to execute shell commands, this readme assumes you've navigated to this project's directory using your system's shell.

This Project requires Node version 11.10.0 due to a dependency's incompatability with new Node versions.

  1. Install Node.js version 11.10.0 for your system.
  2. Navigate to this directory using a shell
  3. Execute npm install to install dependencies

Configuration

Usage

Build

  1. WARNING: Builds can be set to build the entire image gallery, or only a subset of it to reduce build times drastically. To do so, it is required that you navigate to src/pages/full-gallery.js and comment/uncomment lines 7 to 11 or 13 to 17, depending on your choice.
  2. Execute npm run build to build a distributable version of the static site within the dist/ directory.

Develop

  1. Execute npm run start:dev to startup the webpack-dev-server and begin rebuilding changed files.

Noteworthy Project Characteristics

  1. Many images are built from each source image at multiple resolutions to better fit devices and network speeds. This is made possible by Webpack's require.context() method and the responsive-loader.
  2. Images dont slow down site loading. First fuzzy placeholders are loaded, then later replaced by higher resolution version when network speeds allow.
  3. Image gallery features both lazy loading, and a fullscreen photoviewer for taking a closer look at each photo.
  4. Design is pretty clean and UX pretty smooth.
You can’t perform that action at this time.