The URLs below point to the same site.

• https://project2501.netlify.app/
• https://project2501.duelist.org/

What is this?

@dollplayer2501's portal and portfolio site? build with 11ty/Eleventy and Gulp.

• One page website
• Back end system is 11ty/Eleventy and Gulp.
  • Eleventy
    • eleventy-plugin-directory-output plugin
    • html-minifier
    • Nunjucks included in 11ty/Eleventy
    • Use markdown-it and markdown-it-deflist instead of build in Markdown
  • Gulp
    • gulp-dart-sass with gulp-sourcemaps
      • Class-less version of Pico.css v1.5.x
      • Pico + Bootstrap grid system
      • Fontawesome-free
    • gulp-terser with gulp-sourcemaps
    • gulp-webp with lastrun
    • gulp-mode
    • gulp-if
  • npm scripts
    • cross-env
    • npm-run-all
    • rimraf
    • npm-check-updates
    • npm serve
  • Node.js versioning assumes the use of rtx

Getting started

1. git clone

git clone git@github.com:dollplayer2501/project2501-v3.git any-path-name
cd any-path-name

2. Check the Node.js version if necessary

rtx activate fish | source

Refer to ./.tool-versions for the current version used.

3. Npm and package install

npm install

4. Start up

Check my ./package.json's scripts section.

4.1 Build and/or watch locally

Output files are stored in ./any-path-name/_develop.
URL is http://localhost:8080 (default).

npm run develop:watch

4.2. Build a product version and visual confirmation

Output files are stored in ./any-path-name/_product.
HTML, JavaScript and CSS are compressed, image files are converted to webp.

npm run product:build

If you want to visually check using a web browser, please see below.
URL is http://localhost:3000 (default).

npm run product:serve

Memo

Portfolio images

Portfolio images are created using ImagemMagick commands in Python.
These Python scripts are invoked by shell scripts from an Npm script.

• ./source/images/create_thumb.py
• ./source/images/create_tiles.py

I plan to introduce light boxes in the near future.

//