Skip to main content

Documentation Index

Fetch the complete documentation index at: https://mintlify.com/apursley2012/sys-core/llms.txt

Use this file to discover all available pages before exploring further.

sys-core is a React single-page application built with Vite, deployed as a fully static site to GitHub Pages. Its architecture has three main concerns: a component layer that handles all visual rendering (cosmic effects, structural layout, and content panels), a data layer that supplies all portfolio content through plain JavaScript modules, and a routing and static output strategy that makes client-side navigation work correctly on a static file host. Understanding how these three layers connect is the foundation for customizing or extending the site.

​
Directory Structure

sys-core/
├── index.html                  # Root HTML shell — entry point for the React app
├── assets/
│   ├── main.js                 # Compiled Vite bundle (all components + pages)
│   ├── main.css                # Compiled Tailwind CSS
│   ├── jsx-runtime.js          # React JSX runtime
│   └── index.js                # React + React Router runtime
├── components/
│   ├── cosmic/
│   │   ├── Starfield.js        # Animated three-layer star field (fixed, full-viewport)
│   │   ├── NebulaBackground.js # Nebula gradient background layer
│   │   ├── HudFrame.js         # Bordered HUD panel wrapper for content sections
│   │   ├── OrbitalDiagram.js   # Interactive project star map
│   │   ├── RadarSweep.js       # Rotating radar animation (used on Contact page)
│   │   ├── FrequencyGauge.js   # Circular frequency gauge for skill levels
│   │   └── SignalBars.js       # Signal-strength bar indicator (1–5 bars)
│   └── layout/
│       ├── HudNav.js           # Fixed top HUD navigation bar with stardate clock
│       └── PageTransition.js   # Framer Motion page transition wrapper
├── data/
│   ├── projects.js             # Portfolio project entries
│   ├── skills.js               # Skill groups with frequency and level data
│   ├── articles.js             # Writing entries with band and signal-strength metadata
│   ├── caseStudies.js          # Case study mission reports with phased timelines
│   └── timeline.js             # Career timeline entries as stardate log
└── pages/
    ├── About.html              # Static HTML shell for /about
    ├── Projects.html           # Static HTML shell for /projects
    ├── Skills.html             # Static HTML shell for /skills
    ├── Writing.html            # Static HTML shell for /writing
    ├── CaseStudies.html        # Static HTML shell for /case-studies
    └── Contact.html            # Static HTML shell for /contact

​
Routing

sys-core uses React Router with hash history. All routes are prefixed with #, so the browser never makes a new HTTP request when navigating between pages — the hash portion of the URL changes in-place, and React Router matches the hash fragment to the correct page component.
PageHash Route
Home/#/
About/#/about
Projects/#/projects
Skills/#/skills
Writing/#/writing
Case Studies/#/case-studies
Contact/#/contact
The HudNav component uses useNavigate from React Router to push new hash routes on button click, and useLocation to track the active route and highlight the current nav item with an animated pill indicator powered by Framer Motion’s layoutId.
The static page trick: GitHub Pages cannot perform server-side route rewrites — every URL must map to a real file on disk. sys-core solves this by providing a dedicated HTML file in /pages/ for each route. Each file injects two lines of JavaScript before the React bundle loads:
pages/About.html
<script>
  window.__STATIC_PAGE_ROUTE__ = "/about";
  if (!window.location.hash || window.location.hash === "#/" || window.location.hash === "#") {
    window.location.hash = "/about";
  }
</script>
When a user visits https://your-name.github.io/sys-core/pages/About.html directly, the script forces the hash to #/about before React mounts. React Router then reads the hash and renders the About page. The window.__STATIC_PAGE_ROUTE__ variable is available as a fallback for any additional initialization logic. This pattern means every route on the site is directly linkable and shareable — no 404 pages.

​
Component Hierarchy

sys-core’s components are organized into three tiers: cosmic (visual effects), layout (structural containers), and content (page-level UI). They compose in strict layer order so that visual effects always render behind structure, which renders behind content. Cosmic components manage the full-viewport visual environment. Starfield is a position: fixed, z-index: -2 layer that generates three depth-separated star fields using randomized box-shadow values, animated to slowly drift vertically. NebulaBackground renders behind the content at z-index: -1 as a set of blurred radial gradients. These two components are mounted once at the app root and are always present regardless of the current route. Layout components handle structural concerns. HudNav is fixed at z-index: 50 and overlays the full viewport with four corner bracket decorations, a centered pill navigation menu (desktop) or hamburger menu (mobile), a live stardate counter in the top-left, mission status readouts in the top-right, a terminal prompt in the bottom-left, and a current route code in the bottom-right. PageTransition wraps each page’s JSX in a Framer Motion motion.div that fades and slides in on mount and out on unmount, triggered by React Router’s AnimatePresence. Content components live inside each page and are wrapped in HudFrame panels — bordered, semi-transparent containers that match the HUD aesthetic. OrbitalDiagram reads from data/projects.js to position project markers on the home screen. FrequencyGauge and SignalBars read skill level values from data/skills.js on the Skills page. RadarSweep is a self-contained SVG animation used on the Contact page. 
App Root
├── Starfield           (fixed, z-index: -2 — always visible)
├── NebulaBackground    (fixed, z-index: -1 — always visible)
├── HudNav              (fixed, z-index: 50 — always visible)
└── main (z-index: 10)
    └── AnimatePresence (React Router)
        └── PageTransition (Framer Motion fade/slide)
            └── Page Component (e.g., Skills)
                └── HudFrame (content panel)
                    ├── FrequencyGauge
                    └── SignalBars

​
Data Layer

All portfolio content is defined in five JavaScript modules under /data/. These files are the only files you need to edit to fully personalize the portfolio. No component code, routing logic, or build configuration needs to change.
ModulePurpose
data/projects.jsArray of project objects with name, tagline, description, tech stack, demo/source/readme URLs, data-source status badge, and {x, y} orbital coordinates for the OrbitalDiagram
data/skills.jsArray of skill group objects (NAVIGATION, PROPULSION, LIFE SUPPORT, COMMS), each containing an array of skills with a proficiency level (0–100) and a simulated radio frequency string
data/articles.jsArray of article/writing entries with title, stardate, radio band classification, signalStrength (1–5), and a preview excerpt
data/caseStudies.jsArray of in-depth case study objects with structured sections: objective, pre-flight analysis, execution timeline (phased), anomalies encountered, mission outcome, and future trajectories
data/timeline.jsArray of career timeline entries with a STARDATE date string and a first-person narrative, rendered as a vertical mission log on the About page
Every component that displays content imports directly from these modules — there is no API, no CMS, and no build-time data fetching step. Because the published repository contains pre-compiled output, editing a data file requires redeploying the site to see the change reflected; there is no live HMR workflow unless you establish your own Vite source environment.

​
Serving and Deployment

Local preview requires only a static file server — there is no Vite dev server or npm run dev script in this repository. The simplest way to preview locally is: 
npx serve .
This serves the compiled static files directly from the repository root. Open the printed URL (typically http://localhost:3000) in your browser. The repository is pre-built. The cloned repo contains the compiled Vite output (assets/main.js, assets/main.css, etc.) and all static HTML shells in /pages/. There is no package.json or vite.config.js — you do not need to install dependencies or run a build step to serve or deploy the site as-is. GitHub Pages deployment pushes the repository contents to the gh-pages branch, which GitHub Pages serves as the public site. You can deploy using the gh-pages CLI: 
npx gh-pages -d .
The /pages/*.html files ensure that every route listed in the navigation is directly accessible by URL without hitting a 404. When a user lands on a pages/*.html URL, the embedded script corrects the hash before React hydrates, and the router renders the correct page seamlessly. Extending the site (adding or modifying components) requires setting up a full Vite source environment separately. The compiled output in this repository does not include the original React source files — fork the repo and add a package.json and vite.config.js to establish a complete development and build workflow.

Build docs developers (and LLMs) love

Get started for freeTalk to us