sys-core is a statically deployed personal developer portfolio built around a single, cohesive metaphor: your career is a deep-space mission, and this site is the control room. Every section, component, and data field extends that metaphor — skills are radio frequencies, projects are orbital coordinates on a star map, articles carry signal-strength ratings, and the navigation bar doubles as a mission-status HUD. The result is a portfolio that communicates technical depth without sacrificing personality.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.
What Makes sys-core Different
Most portfolio templates give you a hero section, a project grid, and a contact form. sys-core gives you an immersive mission-control environment rendered entirely in React. The visual layer is handled by a suite of purpose-built cosmic components —Starfield, NebulaBackground, HudFrame, OrbitalDiagram, RadarSweep, FrequencyGauge, and SignalBars — that compose together to create the deep-space aesthetic. These are not CSS tricks bolted onto a generic layout; they are first-class React components designed to animate, respond to state, and integrate with the data layer.
The layout layer uses two structural components: HudNav, a fixed heads-up-display navigation bar that shows the current stardate, active route indicator, and mission-status readouts, and PageTransition, which wraps every page with a Framer Motion animation on route changes.
Tech Stack
| Technology | Role |
|---|---|
| React 18 | Component model and rendering |
| Vite | Development server and production bundler |
| Framer Motion | Page transitions and component animations |
| Tailwind CSS | Utility-first styling with a custom space-themed color palette |
| React Router | Hash-based client-side routing |
Site Sections
sys-core ships with seven fully built pages, each translating a portfolio section into a mission-control concept:- Home (
/) — Mission briefing and orbital project overview viaOrbitalDiagram - About (
/about) — Personal background rendered as a stardatetimeline - Projects (
/projects) — Project cards with stack, links, and data-source status - Skills (
/skills) — Skill groups displayed as radio frequency gauges (FrequencyGauge+SignalBars), grouped byNAVIGATION,PROPULSION,LIFE SUPPORT, andCOMMS - Writing (
/writing) — Article list with signal-strength ratings and band classification - Case Studies (
/case-studies) — Deep-dive mission reports with phased timelines - Contact (
/contact) —COMMS_ARRAYcontact form next to a liveRadarSweep
The Mission-Control Metaphor
The space theme is structural, not decorative. Skills are grouped into four comms bands —NAVIGATION for front-end work, PROPULSION for back-end systems, LIFE SUPPORT for tooling and infrastructure, and COMMS for soft skills — each transmitting on its own simulated radio frequency. Projects are plotted as orbital coordinates on an OrbitalDiagram. Articles are assigned a band (HF, VHF, UHF) and a signalStrength value from 1 to 5. The HudNav bar displays a live stardate calculated from the current day of year, a > Currently Debugging Reality_ terminal prompt in the footer, and per-route location codes like ORBITAL_STATION and LOC: ABOUT.
Deployment
sys-core is deployed as a static site to GitHub Pages. Because GitHub Pages serves files directly without server-side routing, sys-core uses two strategies to support deep linking:- Hash-based routing — React Router is configured with hash history, so all routes resolve as
/#/about,/#/projects, etc., against the sameindex.html. - Static HTML per route — Each page in
/pages/(e.g.,About.html,Projects.html) injectswindow.__STATIC_PAGE_ROUTE__and forces the hash to the correct route, allowing direct URL access from GitHub Pages path-based URLs.
sys-core is a personal portfolio template — it is built to be yours, not a generic demo. Customizing it means editing the data modules in
/data/. You do not need to touch any component or routing code to update your projects, skills, articles, case studies, or career timeline.Quickstart
Clone the repo and serve the pre-built static site locally in under five minutes.
Architecture
Understand how components, data modules, routing, and static HTML output fit together.