NOCTURNE

A cinematic digital magazine for fashion, art & culture after dark.

NOCTURNE is a production-ready static website built with HTML5, CSS3, vanilla JavaScript ES modules, GLSL shaders and optional Three.js WebGL. It requires no backend, database, framework, build step or paid service.

What was fixed for publishing

This package has been prepared specifically for static hosting and GitHub Pages:

• All local ES-module import paths were audited.
• All bundled data/image references were validated.
• The Node test suite was updated for modern Node.js navigator behavior.
• All project test suites pass.
• Added .nojekyll for predictable GitHub Pages static publishing.
• Added a GitHub Actions deployment workflow at .github/workflows/deploy.yml.
• Added a standalone 404.html.
• Added robots.txt.
• Added .gitignore and .gitattributes.
• Added package.json with a single npm test command for the complete audit.
• Kept WebGL isolated and fail-safe: if Three.js/CDN/WebGL is unavailable, the site falls back to its CSS/image presentation.
• Kept every route as a real static HTML file, which works cleanly on GitHub Pages.

Folder structure

NOCTURNE/
├── index.html
├── issue.html
├── story.html
├── archive.html
├── 404.html
├── robots.txt
├── .nojekyll
├── .gitignore
├── .gitattributes
├── package.json
├── README.md
├── ARCHITECTURE.md
├── css/
├── js/
│   ├── main.js
│   ├── core/
│   ├── components/
│   ├── data/
│   ├── interactions/
│   ├── pages/
│   ├── shaders/
│   ├── transitions/
│   └── webgl/
├── assets/
│   ├── images/
│   ├── textures/
│   └── videos/
├── test/
└── .github/
    └── workflows/
        └── deploy.yml

Run locally

The site uses ES modules, so open it through a local HTTP server rather than double-clicking index.html.

VS Code Live Server

1. Open the NOCTURNE folder in VS Code.
2. Install Live Server if you do not already have it.
3. Right-click index.html.
4. Select Open with Live Server.
5. Open the local URL shown by VS Code.

Python

python -m http.server 8080

Then open:

http://localhost:8080

Node

npx serve .

Test the project

If Node.js is installed:

npm test

The test command runs the complete Phase 1–11 audit.

A successful run should end with:

=== Phase 11 final audit: ALL CHECKS PASSED ===

GitHub Pages — easiest method with no terminal

The repository is already prepared for GitHub Pages.

Step 1 — create the repository

1. Sign in to GitHub.
2. Click New repository.
3. Choose a repository name, for example: nocturne-magazine
4. Choose Public if you want the site available through GitHub Pages on a free GitHub account.
5. Do not create another README if you are uploading this complete folder.
6. Click Create repository.

Step 2 — upload the project

1. Open the new repository.
2. Click Add file → Upload files.
3. Open the prepared NOCTURNE folder on your computer.
4. Select everything inside the NOCTURNE folder, including:
   • index.html
   • issue.html
   • story.html
   • archive.html
   • 404.html
   • assets
   • css
   • js
   • test
   • .github
   • .nojekyll
   • .gitignore
   • .gitattributes
   • package.json
5. Drag the selected files into GitHub's upload area.
6. Wait until the upload finishes.
7. Enter a commit message such as: Deploy NOCTURNE
8. Click Commit changes.

Important: index.html must be at the top level of the repository. Do not upload the outer ZIP folder as the only top-level item.

Correct:

repository/
├── index.html
├── css/
├── js/
└── assets/

Incorrect:

repository/
└── NOCTURNE/
    ├── index.html
    ├── css/
    └── js/

Step 3 — enable GitHub Pages with the included workflow

This package includes .github/workflows/deploy.yml.

1. Open your repository.
2. Click Settings.
3. In the sidebar, open Pages.
4. Under Build and deployment → Source, choose GitHub Actions.
5. Return to the repository and open the Actions tab.
6. Open Deploy NOCTURNE to GitHub Pages.
7. Wait for the workflow to finish with a green check.
8. Open Settings → Pages again.
9. GitHub will show the live site URL.

For a normal project repository, the URL format is:

https://YOUR-GITHUB-USERNAME.github.io/YOUR-REPOSITORY-NAME/

For example, if the username is example and the repository is nocturne-magazine:

https://example.github.io/nocturne-magazine/

GitHub Pages — simpler branch method

You can also deploy without the workflow:

1. Open Settings → Pages.
2. Under Build and deployment → Source, choose Deploy from a branch.
3. Select:
   • Branch: main
   • Folder: / (root)
4. Click Save.
5. Wait for the deployment.
6. Open the URL shown by GitHub.

The included .nojekyll file prevents unnecessary Jekyll processing for this plain static project.

Routes after publishing

The project intentionally uses real static HTML pages:

/index.html
/issue.html?id=014
/issue.html?id=015
/issue.html?id=016
/story.html?id=shape-of-now
/archive.html

You can copy and share these URLs directly.

If the page is blank

Check these in order:

1. Confirm index.html is at repository root.
2. Confirm the css/ and js/ folders are also at repository root.
3. Confirm folder names are lowercase exactly as supplied.
4. Open browser DevTools → Console.
5. Look for a missing .js, .css, image, or import-map error.
6. Refresh with a hard reload.
7. Open the GitHub Actions tab and verify deployment succeeded.
8. Open the Pages URL from Settings → Pages, rather than guessing the URL.

If images do not appear

Verify that the repository contains:

assets/images/issues/014/
assets/images/issues/015/
assets/images/issues/016/

with their supplied images and gallery folders.

GitHub Pages paths are case-sensitive. Images and images are different paths.

If WebGL does not appear

This is not a deployment failure.

NOCTURNE deliberately treats WebGL as an enhancement. The main magazine remains usable if:

• WebGL is unavailable;
• the browser does not support the required feature;
• the Three.js CDN cannot be reached;
• the device is low-powered;
• reduced-motion preferences are enabled.

The static CSS/image experience is the fallback.

Updating the website later

With GitHub's web interface

1. Open the repository.
2. Edit or upload the changed files.
3. Commit the changes.
4. If using the included Actions workflow, GitHub automatically deploys the new version after the commit reaches main.

With Git

git clone https://github.com/YOUR-GITHUB-USERNAME/YOUR-REPOSITORY-NAME.git
cd YOUR-REPOSITORY-NAME

Replace the project files with your updated NOCTURNE files, then:

git add .
git commit -m "Update NOCTURNE"
git push origin main

The GitHub Pages workflow will deploy the update automatically.

Adding a new issue

Add the new issue to:

js/data/issues.js

Add its stories to:

js/data/stories.js

Add its gallery data to:

js/data/gallery.js

Then add the corresponding assets:

assets/images/issues/017/
├── cover.jpg
├── hero.jpg
├── story-01.jpg
├── story-02.jpg
├── story-03.jpg
└── gallery/
    ├── 01.jpg
    ├── 02.jpg
    └── 03.jpg

Run:

npm test

before publishing.

Technology

• HTML5
• CSS3
• Vanilla JavaScript ES Modules
• Three.js 0.160.0 via jsDelivr
• WebGL / GLSL
• IntersectionObserver
• Web Audio-compatible browser APIs where used
• Responsive CSS
• Reduced-motion support
• GitHub Pages
• GitHub Actions

No backend or database is required.

License / content

This repository contains the supplied NOCTURNE project and its bundled assets. Before distributing the repository publicly, make sure you have the rights to publish every image, font, video, texture and other asset you include.