Spooky is designed so that the visual direction — layout, spacing, contrast, and palette — remains intact while the written content is swapped out. Customization is primarily about editing the HTML files and updating the compiled React output to reflect your own biography, projects, skills, and contact details. You are not expected to redesign the theme; the atmospheric structure is already in place.Documentation Index
Fetch the complete documentation index at: https://mintlify.com/apursley2012/spooky/llms.txt
Use this file to discover all available pages before exploring further.
Content customization
Each HTML file in the theme contains a<div id="root"> that is populated by the React single-page application at runtime. The compiled JavaScript in assets/main.js handles routing and renders the appropriate component for each URL path. To change the content displayed on a given page, developers need to identify which React component handles that route and modify the compiled output, or fork the source repository and rebuild.
The JavaScript files in
assets/ and components/ are Vite-minified output — they are not human-authored source files. Developers who want to make deep component-level changes should clone the source repository, edit the original component files, rebuild with Vite, and replace the compiled files in the theme directory with the new output.Quick content edits
The most common personalizations target specific route components inside the compiled output. Expand each item below for guidance on where to make each change.Updating your name and tagline
Updating your name and tagline
The homepage hero text — your name, title, and tagline — is rendered by the component that handles the
/ route. Locate the hero section in assets/main.js or the corresponding compiled route file and replace the placeholder name and tagline strings with your own. The layout and font classes applied to those strings should remain unchanged.Adding a project
Adding a project
Projects are rendered by the route component that handles
/projects. Each project entry is an object or JSX block containing a title, description, technology tags, and an optional link. To add a new project, duplicate an existing entry in that component and update the fields. Maintain the same data shape so the layout renders correctly.Changing contact details
Changing contact details
Contact information is managed by the route component for
/contact. Update the email address, social profile links, and any other communication details in that component. If the contact form posts to a third-party service, update the endpoint URL as well.Swapping navigation labels
Swapping navigation labels
Visual customization
Spooky’s visual identity is controlled through CSS custom properties and Tailwind utility classes. See the dedicated sub-pages for details on the color palette and typography system.Color Palette
Explore the five named CSS variables that define Spooky’s Halloween color palette and learn how to adjust them.
Typography
Learn about the two Google Fonts used by the theme and the Tailwind utility classes that apply them.
Replacing screenshots
After personalizing the theme with your own content, replace the placeholder images inimages/screenshots/ with your own captures of your personalized pages. The README links to the images/screenshots/ folder for the screenshot gallery, so keeping your new files in that directory ensures all references continue to resolve correctly.