Skip to main content

Documentation Index

Fetch the complete documentation index at: https://mintlify.com/apursley2012/welcome-mortals/llms.txt

Use this file to discover all available pages before exploring further.

Welcome, Mortals separates its interactive behavior into four JavaScript components stored in the components/ folder. Every HTML page in the theme loads all four components via the same <link rel="modulepreload"> and <script type="module"> pattern in the <head>, so the themed cursor, shared navigation, surprise spider, and horror-host presenter are active on every page without any per-page configuration. Understanding what each component does — and what to leave alone — makes customization significantly safer.
The files in components/ are pre-compiled bundles. They are not source modules that you import or configure in your own code. You do not call their functions directly, pass props to them, or install any packages. They run automatically when any page loads.

​
How Components Are Loaded

Every HTML page in the theme uses the same head structure. The <script type="module"> tag loads assets/main.js, which bootstraps the entire application. The <link rel="modulepreload"> tags tell the browser to fetch the component files early so they are ready when main.js requests them. The application mounts into the single <div id="root"></div> in the page body. 
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Welcome, Mortals</title>
  <script type="module" crossorigin src="./assets/main.js"></script>
  <link rel="modulepreload" crossorigin href="./assets/jsx-runtime.js">
  <link rel="modulepreload" crossorigin href="./components/SpookHost.js">
  <link rel="modulepreload" crossorigin href="./assets/proxy.js">
  <link rel="modulepreload" crossorigin href="./assets/index.js">
  <link rel="modulepreload" crossorigin href="./components/Layout.js">
  <link rel="modulepreload" crossorigin href="./components/CustomCursor.js">
  <link rel="modulepreload" crossorigin href="./components/SpiderScare.js">
  <link rel="stylesheet" crossorigin href="./assets/main.css">
</head>
<body>
  <div id="root"></div>
</body>
assets/main.js is the only entry script. All four components and the shared assets are resolved through it automatically. The <div id="root"></div> is the single mount point where the entire application renders — do not add other elements to <body> or remove this div.

​
The Four Components

​
What It Does

CustomCursor.js replaces the browser’s default mouse pointer with a custom cursor styled to match the theme’s spooky aesthetic. The cursor is a small ghost-like SVG shape rendered in the Parchment (#F4F1E8) palette color, and it has a subtle floaty follow behavior as it tracks mouse movement.The cursor has two visual states that switch automatically based on what the pointer is hovering over:
  • Default state — a resting expression, small eyes and a slight smile
  • Hover state — wider eyes and an open mouth, activated when hovering over any link or button
The cursor activates on desktop and pointer devices. It does not apply on touchscreens where no cursor exists.

​
How It Is Loaded

CustomCursor.js is preloaded via <link rel="modulepreload"> in every HTML file’s <head> and is activated automatically through assets/main.js. No per-page configuration is needed.

​
Adjusting the Cursor Appearance

Cursor-related visual styling can be adjusted in assets/main.css. This is the recommended place to make appearance changes — for example, sizing, opacity, or z-index rules that affect how the cursor overlays page content.

​
Accessibility Note

CustomCursor.js checks the visitor’s reduced-motion preference before rendering. If the visitor has enabled reduced-motion in their operating system or browser settings, the custom cursor is not rendered and the browser’s default pointer remains active. Do not remove or edit this behavior.

​
What It Does

Layout.js provides the shared page structure that wraps every page’s content: the themed header, site-wide navigation, and any persistent framing elements that should appear consistently across the entire portfolio. Because Layout.js is loaded once through the module system, navigation and structural markup do not need to be duplicated inside each of the eleven HTML files. Every page file contains only the minimal <div id="root"></div> mount point, and Layout.js handles the rest.

​
Why It Matters

In a traditional static HTML site, updating shared navigation means editing every file individually. In Welcome, Mortals, navigation is controlled by Layout.js, so a single edit is reflected across all eleven pages. This is the primary reason the HTML files are so minimal — almost all visible page structure comes from the component layer, not from the HTML files themselves.

​
How It Is Loaded

Layout.js is preloaded in every HTML file’s <head>:
<link rel="modulepreload" crossorigin href="./components/Layout.js">
It is composed into the application through assets/main.js and assets/index.js. Pages do not reference it directly.

​
Editing Notes

Layout.js controls the navigation and shared structure for all eleven pages simultaneously. Removing or restructuring large sections without understanding what they do can break every page at once. Limit edits to visible content: navigation link text, href values, and header copy. Keep relative paths consistent — GitHub Pages paths are case-sensitive and the theme uses relative links so it works at any repository URL.
To update navigation links, search the file for the visible link text or href values you want to change. For example, internal links use paths like ./about.html and ./projects.html.

​
What It Does

SpiderScare.js controls the spider that drops suddenly into view from the top of the screen. The spider is a decorative SVG element drawn using the theme’s Haunted Purple (#2A1B3D), Parchment (#F4F1E8), and Lawn Green (#7CFC00) colors — Lawn Green specifically colors the spider’s glowing eyes. It hangs on a thin thread and drops from a random horizontal position across the top of the viewport.After a visitor has clicked on the page a set number of times, the spider drops in, stays briefly, and then retreats back upward. The horizontal drop position is randomized each time so it lands somewhere in the middle portion of the screen.

​
How It Is Loaded

SpiderScare.js is preloaded in every HTML file’s <head>:
<link rel="modulepreload" crossorigin href="./components/SpiderScare.js">
It is activated automatically when the click threshold is reached. No per-page setup is required.

​
Accessibility Notes

The spider is intentionally a surprise interaction. Before publishing, verify that it meets the following accessibility requirements:
  • Does not block navigation — the spider is purely visual and cannot be clicked or interacted with
  • Does not trap focus — the spider SVG never receives keyboard focus
  • Does not flash rapidly — the animation is a single smooth drop and exit, not a strobing or flashing effect
  • Respects reduced-motion preferences — SpiderScare.js checks the visitor’s reduced-motion setting and skips the animation if it is enabled
Do not add click handlers to the spider element or make it interactive. Its role is decorative — it should startle visitors briefly, not obstruct their path through the site.

​
Editing Notes

The spider’s click trigger threshold and display duration are controlled in SpookHost.js, not in SpiderScare.js itself. Adjust those values in SpookHost.js if you want the spider to appear more or less frequently, or to stay visible for a longer or shorter time. See the SpookHost section below for details.

​
What It Does

SpookHost.js is the coordinator that powers the theatrical horror-host experience and manages shared behavior across the other components. It tracks how many times a visitor has clicked on the page and fires the spider drop when that count reaches the trigger threshold. It also manages an optional audio toggle that persists across page navigations.The component wraps the entire page content and listens for click events anywhere on the page — this is why clicking anywhere (not just on specific buttons) counts toward the spider trigger.

​
The Theatrical Tone

SpookHost is named after the classic horror-host tradition: a theatrical presenter who introduces horror content with dramatic flair. In the theme, the SpookHost is the unseen presence that notices when visitors have been active on the page, then sends the spider to greet them.

​
How It Is Loaded

SpookHost.js is preloaded in every HTML file’s <head>:
<link rel="modulepreload" crossorigin href="./components/SpookHost.js">
It is composed at the application root level through assets/main.js so that all other components have access to the shared state it manages.

​
Editing Notes

SpookHost.js is the foundation that the other three components depend on. It should be edited last and with the most care. The spider click threshold and display duration are the values most likely to be worth adjusting — these control how often visitors see the spider and how long it remains on screen. Search the file for the click-count value and the timeout duration to find and adjust these settings.
If you want to disable the spider entirely, you can remove the spider trigger logic from SpookHost.js and the SpiderScare.js preload tag from every HTML file. Remove both together — leaving one without the other can cause the remaining component to behave unexpectedly.

​
Component Dependency Map

The four components work as a connected system rather than independent parts.

SpookHost.js

Root coordinator. Tracks click count, spider trigger state, and audio preferences. All other components depend on it.

Layout.js

Shared page framing and navigation. Controls what every page looks and feels like structurally.

SpiderScare.js

Renders the animated drop spider when the click threshold set in SpookHost is reached.

CustomCursor.js

Replaces the browser cursor with a themed SVG ghost pointer on desktop and pointer devices.

​
Quick Customization Reference

The cursor’s visual appearance is styled through assets/main.css. This is the recommended file to adjust sizing, opacity, or z-index rules that affect how the cursor overlays page content.The cursor activates on desktop pointer devices automatically. It does not require any per-page configuration. If you want to disable the custom cursor entirely, remove the CustomCursor.js preload tag from every HTML file’s <head>.

​
Assets Supporting the Components

The assets/ folder contains the scripts and stylesheet that the component layer depends on.
FileRole
assets/main.jsEntry script — bootstraps the application and mounts it into <div id="root">
assets/main.cssMain stylesheet — layout, colors, typography, cursor rules, and all visual effects
assets/index.jsShared supporting script
assets/jsx-runtime.jsShared supporting script
assets/proxy.jsShared supporting script
Do not rename or relocate any file in assets/ or components/. The component files reference each other using relative paths. Changing a filename or folder name without updating every reference to it will silently break the components that depend on it.

Build docs developers (and LLMs) love

Get started for freeTalk to us