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 file types into two top-level folders: images/ holds photographs, illustrations, and documentation screenshots, while assets/ holds the compiled stylesheet and JavaScript bundles that power the theme. Both folders are referenced directly by path in every HTML file, so keeping names and locations consistent is essential — a single renamed file will silently break every link that pointed to it.

​
Where to Store New Images

Add any image you want to use in the theme to the images/ folder or to a clearly named subfolder inside it. The existing structure uses one subfolder: 
images/
└── screenshots/
    ├── welcome-mortals-screenshot-01.PNG
    ├── welcome-mortals-screenshot-02.PNG
    └── ... (19 screenshots total)
For personal portfolio images — headshots, project thumbnails, work samples — create a subfolder with a name that reflects the content: 
images/
├── screenshots/       ← theme documentation screenshots
├── projects/          ← project thumbnails and work samples
└── profile/           ← headshots and personal photos
Use descriptive, lowercase filenames with hyphens instead of spaces. A name like homepage-hero-portrait.jpg is easier to reference and debug than IMG_2047.JPG. Consistent naming also makes it easier to update paths later if you reorganize folders.

​
Filename Conventions and Case Sensitivity

GitHub Pages is case-sensitive. A file saved as portrait.PNG and referenced in HTML as portrait.png will load correctly on your local machine but return a broken image on the live site. Always match the capitalization of the filename exactly when writing the path in your HTML.
The existing screenshots use uppercase .PNG — do not rename them to lowercase .png. Any path in the HTML files or README that already references .PNG must continue to match that capitalization. For new images you add yourself, choose a capitalization convention and apply it consistently across all new files. Lowercase extensions (.jpg, .png, .gif, .svg) are a common choice because they are the easiest to type accurately in HTML attributes.

​
Updating Image Paths in HTML Files

After adding or renaming an image, update every HTML file that references it. The theme has eleven HTML files at the repository root: 
index.html      about.html      projects.html
work.html       skills.html     articles.html
writing.html    casestudies.html
testimonials.html  contact.html  placeholders.html
Image paths in this theme are relative to the repository root. An image stored at images/projects/my-project.jpg is referenced like this: 
<img
  src="images/projects/my-project.jpg"
  alt="Screenshot of My Project showing the dashboard view"
/>
1

Add the image to the correct folder

Copy your file into images/ or the appropriate subfolder. Confirm the filename is exactly what you intend, including capitalization and extension.
2

Write the relative path

The path starts from the repository root, not from the HTML file’s location. Because all HTML files sit at the root, the path is always images/subfolder/filename.ext.
3

Add descriptive alt text

Every <img> tag should include a meaningful alt attribute. See the accessibility guidance below.
4

Test locally before pushing

Open the HTML file in a browser from your local copy and confirm the image loads. Then push to GitHub and verify the image loads on the live Pages URL as well.

​
The Screenshots Folder

The images/screenshots/ folder contains 19 preview screenshots that document the theme’s appearance. They are referenced in README.md and serve as visual documentation for anyone evaluating the theme. After personalizing Welcome, Mortals with your own content, colors, or layout changes, replace the screenshots so your repository documentation reflects your actual design rather than the default theme. To replace a screenshot:
  1. Take a new screenshot of the page you want to document.
  2. Name the replacement file using the same filename as the screenshot you are replacing (for example, welcome-mortals-screenshot-01.PNG), preserving the uppercase .PNG extension.
  3. Upload the new file to images/screenshots/, overwriting the original.
  4. Reload the README to confirm the updated image appears.
If you prefer to keep the original screenshots as a reference, save your new screenshots under different filenames and update the paths in README.md accordingly. Both sets can coexist in images/screenshots/ without conflict.

​
The Assets Folder

The assets/ folder contains the compiled stylesheet and JavaScript bundles. Every HTML file in the theme loads these files by path:
FilePurpose
assets/main.cssMain stylesheet — layout, colors, typography, and visual effects
assets/main.jsMain site script — mounts the React component tree
assets/index.jsShared supporting script
assets/jsx-runtime.jsShared supporting script
assets/proxy.jsShared supporting script
Do not rename, move, or delete any file inside assets/. All eleven HTML files reference these paths directly. Renaming even one file will cause the site to load without styling, without interactive components, or as a blank page. If you need to modify the stylesheet, edit assets/main.css in place — do not copy it to a new location.

​
Alt Text for Accessibility

Every image you add to the theme should include a descriptive alt attribute. Alt text is read aloud by screen readers, displayed when images fail to load, and indexed by search engines. A useful alt attribute describes what the image shows in plain language — not what it is called as a file. For decorative images that convey no information, an empty alt="" attribute tells assistive technology to skip the element: 
<!-- Informative image: describe what it shows -->
<img
  src="images/projects/dashboard-overview.jpg"
  alt="The project dashboard displaying active tasks in a kanban layout"
/>

<!-- Decorative image: use empty alt to suppress screen reader announcement -->
<img
  src="images/decorative-spider-divider.png"
  alt=""
/>
Avoid starting alt text with “Image of” or “Photo of” — screen readers already announce that the element is an image. Write the description as if you were explaining the picture to someone who cannot see it.

​
File and Folder Reference

The complete image and asset structure for the theme looks like this: 
welcome-mortals-github-pages-theme/
├── assets/
│   ├── index.js
│   ├── jsx-runtime.js
│   ├── main.css
│   ├── main.js
│   └── proxy.js
└── images/
    └── screenshots/
        ├── welcome-mortals-screenshot-01.PNG
        ├── welcome-mortals-screenshot-02.PNG
        ├── ... (through -19.PNG)
        └── welcome-mortals-screenshot-19.PNG
When you add new images, extend the images/ tree with your own subfolders while leaving the assets/ tree untouched.

Colors & Fonts

Adjust the palette, typefaces, and visual effects in assets/main.css without breaking layout.

GitHub Pages Deployment

Confirm file structure, enable Pages, and troubleshoot common publish problems.

Build docs developers (and LLMs) love

Get started for freeTalk to us