Extremely light, configurable, responsive intro page featuring a short info section and spinning circular menu.

My website serves as the demo.

Features

• Responsive layout with pure CSS animations (virtually no dependence on JavaScript)
• Configurable rotating circular menu
• Menu cover swings open when hovered and reveals a hidden element

The build system performs these optimizations:

• Images and fonts are embedded directly in the HTML file (fast loading and portability)
• Custom fonts are pruned to remove all unused glyphs (super light weight)

The product is just one file.

Start making this your own

This project uses Pug and Stylus. The build system uses Gulp.

First, install the dependencies with pnpm or equivalent:

pnpm i

Build the index.html file:

pnpm build

Even better, you can start a watch process over the source files:

pnpm watch

Now index.html will automatially be rebuilt every time a change is detected in a source file.

Really getting into it?

Start by looking at the build system in gulpfile.js.

Caveats

• Font glyph pruning only works on TTF source fonts, but it outputs a WOFF version of the pruned font alongside the pruned TTF

Reducing the size of the produced index.html

Fonts

TrueType fonts contain required and optional tables. Use a tool like ftCLI to remove optional tables from the source font files.

Images

• Optimize SVGs with a tool like svgo or by hand. Read the docs.
• Optimize PNG files with optipng or pngcrush.
• Optimize JPG files with jpegoptim.

License

ISC