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 ships with placeholder content so you can see the theme at its full theatrical best before you start editing. Personalizing the portfolio is a matter of working through a small set of files in a deliberate order — starting with index.html and finishing with contact.html — so that each page reflects the same voice, identity, and professional story from the moment a visitor arrives.

Where to update your name and headline

Open index.html first. This file is both the GitHub Pages entry point and the primary first impression. It contains the portfolio owner’s displayed name, professional headline, and homepage introduction text. Replace every instance of the default placeholder name and title with your own. Look for the section that renders the hero area — the large opening block visitors see immediately on load. Update:
  • The displayed name rendered in the large heading
  • The professional headline or tagline directly beneath it
  • The short homepage introduction paragraph that sets the tone for the rest of the portfolio
Keep the headline punchy and on-theme. The theme’s visual language leans into theatrical horror hosting — “Full-Stack Developer by day, CSS conjurer by night” works better here than a plain, corporate-style title.

The SpookHost presentation element

The components/SpookHost.js component powers the audio toggle and horror-host presentation element that appears on every page. You do not need to edit this file to personalize the theme. All the content you need to update — your name, biography, project entries, contact details — lives in the HTML pages. SpookHost handles the ambient atmosphere; your job is to make sure the copy you write fits the theatrical tone it sets.

Updating your biography in about.html

Open about.html to update your biography and personal background. The About page is the best place to share the full story behind the portfolio: how you got here, what you work on, what you care about, where you studied, what draws you to this kind of work. The README recommends treating this page as the natural home for:
  • Personal and professional background
  • Career history or transition narrative
  • Education and certifications
  • Creative influences and interests
  • Your approach to the work you do
Write in a voice that fits the theme. The design is theatrical but not frivolous — the About page works best when the copy has a little personality rather than reading like a résumé summary.

Updating contact details

Open contact.html and replace every piece of default contact information with your own before publishing. This page is the most likely destination for anyone who wants to reach you after reviewing your portfolio. Replace the following in contact.html:
1

Update your email address

Find the default email link and replace both the href value and the visible link text with your own address.
<!-- Replace the placeholder with your address -->
<a href="mailto:your@email.com">your@email.com</a>
2

Update your GitHub profile link

Find the GitHub link and replace the URL with your own GitHub profile.
<a href="https://github.com/your-username">GitHub</a>
3

Update your LinkedIn profile link

Replace the LinkedIn URL with your own profile link.
<a href="https://linkedin.com/in/your-profile">LinkedIn</a>
4

Update the résumé download link

Replace the default résumé link with a path to your own downloadable file. Store the file inside the images/ folder or a clearly named subfolder, and update the href to match.
<a href="images/your-resume.pdf" download>Download Résumé</a>
5

Update any additional social profiles

Replace or remove any other external profile links that appear on the contact page. Only keep links that point to active, public profiles you want visitors to find.

Full editing checklist

Work through the following items in order before publishing a personalized copy of the theme. Each step builds on the last.
1

Replace the homepage introduction and portfolio-owner information

Update the name, headline, and intro paragraph in index.html.
2

Update the biography and background information

Replace the placeholder biography in about.html with your own story, background, and goals.
3

Replace the default portfolio content

Work through projects.html, work.html, skills.html, casestudies.html, articles.html, writing.html, and testimonials.html to replace all default entries with your real content.
4

Replace external profile links and downloadable file links

Update every link in contact.html: email, GitHub, LinkedIn, résumé, and any additional social profiles.
5

Add or replace images

Store added images inside images/ or a clearly named subfolder. Keep filenames consistent and update all matching src and href paths.
6

Update repository screenshots

If the repository documentation should reflect your customized design, replace the preview screenshots inside images/screenshots/.
7

Test interactive elements

Confirm that the custom cursor, spider interaction, navigation links, and mobile layout all work correctly after your edits.
8

Confirm index.html is at the repository root

Do not move, rename, or nest index.html inside a subfolder. It must remain at the root of the repository for GitHub Pages to serve it correctly.
9

Keep .nojekyll beside index.html

The empty .nojekyll file must remain at the repository root. Do not rename it or add a file extension.

Preserving the visual language

The spooky tone is a design decision, not decoration. When you write new content for any page — bios, project descriptions, skill labels, testimonials — keep the voice consistent with the rest of the theme. Eerie phrasing, atmospheric headings, and a slightly theatrical register belong here. New copy that sounds too corporate or plain can feel out of place against the dark purple backdrop and Halloween-orange headings.You do not need to force every sentence to be spooky, but you should avoid stripping the personality out of sections that already have it. The unusual interface choices are part of the design.

Color palette reference

The theme’s colors are defined in assets/main.css. Search for these hex values before making any color changes:
Color nameHex valuePrimary use
Haunted Purple#2A1B3DPrimary background
Pumpkin Orange#FF7518Headings and accents
Parchment#F4F1E8Readable text surfaces
Lawn Green#7CFC00Bright accent details
White#FFFFFFHigh-contrast readable text
Use targeted edits when changing colors rather than rewriting the entire stylesheet. The layout and spacing behavior depends on rules that surround the color declarations.

Build docs developers (and LLMs) love