Welcome, Mortals is a static portfolio theme built for GitHub Pages by Alysha Pursley. It turns a standard professional portfolio into a theatrical haunted attraction — complete with a deep-purple backdrop, Halloween-orange headings, parchment content surfaces, lime accents, a custom ghost cursor, and a spider that drops from the top of the screen when you least expect it. The content structure stays entirely practical: visitors can still navigate to an introduction, biography, project portfolio, skills list, articles, writing archive, case studies, testimonials, work history, and contact page. The spookiness is the wrapper, not a replacement for the substance inside.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.
What Is Welcome, Mortals?
Welcome, Mortals is a reusable, no-build-step static theme. You download the files, fill in your own content, push everything to a GitHub repository, enable GitHub Pages, and your portfolio is live. There is no dependency installation, no build pipeline to configure, and no framework to learn. Every page is a plain HTML file. Styles live in a single CSS file. Shared interactive behavior is separated into four JavaScript component files in thecomponents/ folder.
The theme is hosted on GitHub Pages at the following live demo:
Who It Is For
This theme is best suited to portfolio owners who want a site with a defined personality rather than a generic landing-page layout. It works well for software developers, designers, technical writers, digital artists, freelancers, and anyone combining professional and personal storytelling. The unusual interface choices are intentional — the theme should not be cleaned up into a different visual language unless you are deliberately creating a new variation. New content should be fitted into the existing structure while preserving the spacing, layout, contrast, and palette.The spooky design choices are features, not bugs. Preserve the visual identity when customizing. If you strip out the palette and tone, you are building a new theme — which is fine, but start from the original files intentionally.
Design Inspiration
The design borrows from four distinct reference points that together define its tone:- Haunted-house signage — bold, dramatic lettering on dark backgrounds, oranges and purples that read from a distance
- Halloween party invitations — playful but formal, with a sense that something theatrical is about to happen
- Campy horror hosts — the spirit of classic late-night horror hosts: spooky persona up front, useful information delivered anyway
- Eerie storybook pages — parchment surfaces, high-contrast type, a sense of aged paper and flickering candlelight
Color Palette
Five colors make up the entire visual identity of Welcome, Mortals. Every element on every page traces back to one of these values.| Color Name | Hex | Primary Use |
|---|---|---|
| Haunted Purple | #2A1B3D | Primary background across all pages |
| Pumpkin Orange | #FF7518 | Headings, highlights, and Halloween accents |
| Parchment | #F4F1E8 | Readable content surfaces and body text areas |
| Lawn Green | #7CFC00 | Bright accent details and interactive states |
| White | #FFFFFF | High-contrast readable text on dark surfaces |
Pages Included
The theme ships with eleven HTML pages, each a separate entry file. Every page shares the same layout framing, cursor, and interactive components via thecomponents/ folder.
| Page File | Purpose |
|---|---|
index.html | Main homepage and GitHub Pages entry point |
about.html | Biography and background |
projects.html | Featured project portfolio |
work.html | Professional experience and work history |
skills.html | Skills, technologies, and capabilities |
articles.html | Article index |
writing.html | Writing archive and long-form content |
casestudies.html | Detailed project and technical breakdowns |
testimonials.html | Testimonials and collected feedback |
contact.html | Contact details and communication links |
placeholders.html | Placeholder sections for content added later |
Interactive Components
The four JavaScript files incomponents/ are what distinguish Welcome, Mortals from a plain HTML template. They layer the haunted-house personality on top of the content structure without touching the written content itself.
CustomCursor.js — Themed Ghost Cursor
CustomCursor.js — Themed Ghost Cursor
CustomCursor.js replaces the standard browser pointer with a spring-animated SVG ghost that follows the mouse cursor around the page. The ghost has two states: a neutral resting expression, and an excited expression with open eyes and an open mouth that activates when the pointer hovers over a link or button. The spring animation is pre-bundled inside assets/proxy.js — no separate installation is required.The component respects the operating system’s prefers-reduced-motion setting. If reduced motion is enabled, the custom cursor is suppressed entirely and the default system cursor is used.SpiderScare.js — Surprise Drop Interaction
SpiderScare.js — Surprise Drop Interaction
SpiderScare.js controls the spider that drops from the top of the viewport after the visitor has clicked around the page four times. The spider descends on a silk thread using a spring animation, lingers, then retreats back up and disappears. Its horizontal position is randomized each time it is triggered so it does not always appear in the same spot.The spider interaction is driven by the SpookHost context. Once triggered, it cannot be triggered again in the same session. Like the cursor, it respects prefers-reduced-motion and is suppressed if that preference is detected.SpookHost.js — Interaction State Provider
SpookHost.js — Interaction State Provider
SpookHost.js is a React context provider that coordinates the interactive state shared across the entire site. It tracks the visitor’s click count, determines when to trigger the spider scare, manages an optional audio-enabled flag stored in localStorage, and exposes a registerClick function that every page calls on interaction. It wraps the entire application so all pages share the same interaction state.Layout.js — Shared Navigation Frame
Layout.js — Shared Navigation Frame
How the Files Work Together
Each HTML page (such asindex.html or about.html) is almost identical: a minimal HTML shell that loads assets/main.js and assets/main.css. The JavaScript entry point mounts the React application into the #root div, which is where Layout.js takes over — rendering navigation, wrapping page content, and mounting the cursor and spider. The written portfolio content that visitors see lives inside each page’s route, controlled by the application logic in assets/.
This means you can update any page’s written content without touching the interactive components, and you can adjust the interactive components without touching the HTML files.
Where to Go Next
Quickstart
Fork or download the theme, fill in your content, and publish to GitHub Pages in under ten minutes.
File Structure
A complete reference for every file and folder in the theme — what each does and how they connect.