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 is a deliberately flat, static project. There are no nested build outputs, no compiled dist folders, and no generated files to manage. Every file in the repository is either a page you edit directly, a shared asset loaded by every page, or a supporting file GitHub needs to publish the site correctly. Understanding where each piece lives — and why — makes customization straightforward and prevents the most common deployment errors.
Complete File Tree
welcome-mortals-github-pages-theme/
├── .github/
│ └── ISSUE_TEMPLATE/
│ ├── bug_report.md
│ ├── custom.md
│ └── feature_request.md
├── assets/
│ ├── index.js
│ ├── jsx-runtime.js
│ ├── main.css
│ ├── main.js
│ └── proxy.js
├── components/
│ ├── CustomCursor.js
│ ├── Layout.js
│ ├── SpiderScare.js
│ └── SpookHost.js
├── images/
│ └── screenshots/
│ ├── welcome-mortals-screenshot-01.PNG
│ ├── welcome-mortals-screenshot-02.PNG
│ ├── welcome-mortals-screenshot-03.PNG
│ ├── welcome-mortals-screenshot-04.PNG
│ ├── welcome-mortals-screenshot-05.PNG
│ ├── welcome-mortals-screenshot-06.PNG
│ ├── welcome-mortals-screenshot-07.PNG
│ ├── welcome-mortals-screenshot-08.PNG
│ ├── welcome-mortals-screenshot-09.PNG
│ ├── welcome-mortals-screenshot-10.PNG
│ ├── welcome-mortals-screenshot-11.PNG
│ ├── welcome-mortals-screenshot-12.PNG
│ ├── welcome-mortals-screenshot-13.PNG
│ ├── welcome-mortals-screenshot-14.PNG
│ ├── welcome-mortals-screenshot-15.PNG
│ ├── welcome-mortals-screenshot-16.PNG
│ ├── welcome-mortals-screenshot-17.PNG
│ ├── welcome-mortals-screenshot-18.PNG
│ └── welcome-mortals-screenshot-19.PNG
├── .nojekyll
├── about.html
├── articles.html
├── casestudies.html
├── contact.html
├── index.html
├── placeholders.html
├── projects.html
├── skills.html
├── testimonials.html
├── work.html
├── writing.html
└── README.md
Root-Level HTML Files
The eleven HTML files at the repository root are the portfolio pages. Each one is a minimal shell that loads the shared assets and mounts the React application. The written content visitors see — headings, paragraphs, project descriptions, contact links — lives inside these files. Editing them is how you personalize the theme.
| File | Purpose |
|---|
index.html | Homepage and GitHub Pages entry point — the file GitHub serves at / |
about.html | Biography, background, personal story, and creative influences |
projects.html | Featured project portfolio with descriptions, screenshots, and links |
work.html | Professional experience, job history, employers, and dates |
skills.html | Languages, tools, frameworks, technologies, and capabilities |
articles.html | Index of published articles, posts, or external writing |
writing.html | Writing archive for long-form content, essays, and samples |
casestudies.html | Detailed technical or creative breakdowns of selected projects |
testimonials.html | Testimonials, quotes, and feedback from collaborators or clients |
contact.html | Email address, social links, GitHub, LinkedIn, and résumé download |
placeholders.html | Placeholder content for sections still being written or planned |
index.html looks like:
<!doctype html>
<html lang="en">
<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>
</html>
./assets/ and ./components/) so every page can find its dependencies regardless of which subdirectory level GitHub Pages resolves to.
Do not rename index.html to home.html or any other name. GitHub Pages specifically looks for index.html at the repository root as the entry point. If it is missing or renamed, visitors will see a 404 page.
The assets/ Folder
The assets/ folder contains the shared stylesheet and the JavaScript modules that power the site. These files are referenced by every HTML page. Do not rename them or move them — all internal paths expect them at ./assets/.
| File | Purpose |
|---|
main.css | Primary stylesheet — all layout, colors, typography, spacing, and visual effects |
main.js | Application entry point — mounts the React app and imports all components |
index.js | Shared supporting script, used internally by the component system |
jsx-runtime.js | JSX transform runtime required by the React component files |
proxy.js | Shared supporting script providing animation utilities used by the components |
assets/main.css in detail
main.css is the single source of truth for the theme’s visual identity. It contains:
- The five-color palette (
#2A1B3D, #FF7518, #F4F1E8, #7CFC00, #FFFFFF)
- All layout rules for the page wrapper, navigation, and content sections
- Typography settings for headings, body text, and accent copy
- Responsive breakpoints for mobile and tablet widths
- Decorative effects including the parchment surface treatment
When customizing colors or fonts, search for the documented hex values in this file and make targeted replacements. Avoid rewriting large sections of the stylesheet — the spacing and layout rules depend on the existing property relationships.
The components/ Folder
The components/ folder holds the four JavaScript files that provide the haunted-house interactive behavior. They are separate from assets/ because they represent distinct, named theme features rather than shared utility scripts.
| File | Purpose |
|---|
CustomCursor.js | Spring-animated SVG ghost cursor that replaces the system pointer |
Layout.js | Shared navigation frame, page wrapper, and mounting point for interactive components |
SpiderScare.js | Animated spider that drops from the top of the viewport after four clicks |
SpookHost.js | React context provider coordinating click counts, spider trigger, and audio preference |
How the components connect
SpookHost.js wraps the entire application as a context provider. It keeps track of how many times the visitor has clicked on the page, triggers the spider scare after four clicks, and exposes a registerClick function used by the rest of the site. It also reads and writes an spook-audio flag to localStorage for an optional audio feature.
SpiderScare.js listens to the context provided by SpookHost.js. When the trigger fires, it animates an SVG spider down a thread from the top of the viewport using spring physics, holds position briefly, then retreats and exits. The horizontal drop position is randomized on each trigger.
CustomCursor.js runs independently of the spider system. It tracks the mouse position and applies spring physics for smooth movement, switching the ghost SVG between a neutral resting face and an excited face depending on whether the pointer is over an interactive element.
Layout.js is the structural component every page renders. It mounts CustomCursor and SpiderScare as persistent overlays, renders the navigation links, and provides the content wrapper. Because layout logic is centralized here, navigation changes propagate to all pages automatically.
The decorative components in components/ are separated from the written content in the HTML files by design. You can update any page’s text, headings, or links without touching the interactive components — and you can adjust the interactive behavior without editing the HTML files.
The images/ Folder
The images/ folder is the home for all visual media used in or displayed alongside the theme.
| Path | Contents |
|---|
images/screenshots/ | 19 .PNG preview screenshots used in the README documentation |
welcome-mortals-screenshot-01.PNG
welcome-mortals-screenshot-02.PNG
...
welcome-mortals-screenshot-19.PNG
The screenshot files use uppercase .PNG extensions. GitHub Pages paths are case-sensitive. If you reference these files in your own Markdown or HTML using lowercase .png, the links will break on the live site even if they work locally on a case-insensitive file system (such as macOS by default). Keep the capitalization exactly as shown.
images/ or a clearly named subfolder such as images/projects/. Keep filenames readable and consistent, and update every path reference when you add or rename a file.
If you customize the theme significantly and want the README to reflect your version, replace the screenshots in images/screenshots/ with new captures of your customized design.
The .github/ Folder
The .github/ISSUE_TEMPLATE/ folder contains three Markdown forms for the GitHub issue tracker. They do not affect the live portfolio site — they only appear when someone opens a new issue in the repository.
| File | Purpose |
|---|
bug_report.md | Structured form for reporting broken links, layout issues, or errors |
feature_request.md | Form for requesting new pages, interactions, or design options |
custom.md | Open-ended form for any other type of request |
Special Root-Level Files
.nojekyll
.nojekyll is an empty file that must stay at the repository root beside index.html. Its filename is its entire instruction to GitHub Pages: do not run these files through the Jekyll static site generator; publish them exactly as they are.
Without .nojekyll, GitHub Pages applies Jekyll processing to the repository. Jekyll ignores folders whose names begin with an underscore by default, but more importantly it can interfere with the JavaScript module loading that Welcome, Mortals depends on.
The file must be named exactly:
The following variations will not work:
nojekyll ← missing the leading dot
.nojekyll.txt ← incorrect extension
nojekyll.md ← wrong name and extension
This theme does not require a _config.yml or config.yaml file. Jekyll configuration is unnecessary because .nojekyll tells GitHub Pages to skip Jekyll entirely. Adding a _config.yml is not harmful, but it is also not needed — do not create one unless you are intentionally switching to a Jekyll-based build.
README.md
README.md is the documentation file displayed on the repository’s GitHub page. It includes the theme overview, color palette reference, page inventory, component descriptions, customization guide, and full deployment instructions. It does not affect the live portfolio site — it is only visible on GitHub.
How the Folders Work Together
Here is a summary of how the pieces connect at runtime when a visitor opens a page:
- The browser requests
index.html (or any other .html file) from GitHub Pages.
- The HTML file loads
assets/main.css as the stylesheet — all visual styling is applied immediately.
- The HTML file loads
assets/main.js as a JavaScript module — this is the application entry point.
main.js imports components/SpookHost.js, components/Layout.js, components/CustomCursor.js, and components/SpiderScare.js.- The React application mounts into the
<div id="root"> element in the HTML body.
Layout.js renders the navigation frame and page content.CustomCursor.js attaches mouse event listeners and renders the ghost SVG overlay.SpookHost.js begins counting interactions and waiting for the spider trigger threshold.- When the visitor clicks four times,
SpiderScare.js animates the spider drop.
The HTML files contain the content. assets/main.css contains the appearance. components/ contains the behavior. assets/main.js and its supporting scripts (index.js, jsx-runtime.js, proxy.js) are the wiring that connects all three layers at runtime.