Skip to main content

Documentation Index

Fetch the complete documentation index at: https://mintlify.com/apursley2012/telemetry/llms.txt

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

Telemetry ships with placeholder content throughout — a fictional name, example projects, sample blog posts, and stub contact links. This guide walks through every piece of content you need to replace to make the portfolio your own. Because all content lives inside React components compiled into assets/main.js, you’ll need access to the original source JSX/TSX files to make permanent changes.
The assets/main.js and assets/main.css files in this repo are Vite build outputs — compiled, minified, and bundled from the original source. Editing them directly is strongly discouraged. Any edits will be silently overwritten the next time you run npm run build. Always work from the source JSX/TSX files in your project, then rebuild.

​
Content Update Walkthrough

1

Update your name and tagline

Find the Home page component in your source. The hero section renders two name spans:
{/* Glitch-animated first name — change "ALEX" to your first name */}
<motion.span
  animate={{ x: [-2, 2, -1, 1, 0] }}
  transition={{ duration: 0.2, delay: 1.5, repeat: 3, repeatType: 'reverse' }}
>
  ALEX
</motion.span>

{/* Serif-italic display name — change "Cosmos" to your last name or handle */}
<span className="font-serif-italic text-aurora-cyan text-glow">
  Cosmos
</span>
Below the name, update the subtitle paragraph:
{/* Update this to your own tagline */}
<motion.p ...>
  Currently Debugging Reality. Full-stack engineer exploring
  the outer rims of web development.
</motion.p>
The typewriter animation above the name ("Signal Established // Identity:") is handled by the TypeWriter component — update that string too if you want to change the terminal-style intro text.
2

Update status bar metrics

Still in the Home page component, the status bar below the hero renders four hardcoded entries. Replace each string with your own real-time stats or personal details:
{/* Replace each of these four entries */}
<span>UPTIME: 99.9%</span>
<span>COMMITS_THIS_WEEK: 42</span>
<span>READING: "Three-Body Problem"</span>
<span>SYSTEMS NOMINAL</span>
The SYSTEMS NOMINAL entry uses text-sunset-orange and a pulsing dot indicator — keep the styling but change the text to an active status message of your choice (e.g., OPEN TO WORK, BUILDING IN PUBLIC, or a current project name).
3

Add your projects

In the Projects page component, projects are defined in the projects array near the top of the file. Each entry controls both the orbit view and the list view:
const projects = [
  {
    id: 1,
    name: 'Nova E-Commerce',    // Project title
    type: 'Full Stack',          // Category label
    color: 'bg-aurora-teal',     // Orb color — use any aurora/sunset color token
    size: 'w-12 h-12',           // Orb size in the orbit diagram
    orbit: 'w-64 h-64',          // Orbit ring size
    duration: 20,                // Orbit revolution speed in seconds
    desc: 'A high-performance storefront built with Next.js and Stripe.',
    stack: ['React', 'Node.js', 'PostgreSQL'],
  },
  // Add more entries...
]
Replace the placeholder entries with your own projects. Use distinct color tokens (bg-aurora-teal, bg-aurora-violet, bg-aurora-cyan, bg-sunset-orange) to visually differentiate them in the orbit view. Assign larger orbit sizes and slower duration values to your larger/more complex projects for a natural solar-system feel.The detail panel that slides in from the right renders desc, stack, and two action buttons. Update the href values on the “RUN DEMO” and “SOURCE CODE” buttons to link to your live demo and GitHub repo URLs.
4

Fill in your skills

The Skills page component groups technologies into constellation clusters defined in the skills clusters array:
const clusters = [
  {
    id: 'frontend',
    name: 'Constellatio Frontend',    // Cluster display name
    icon: CpuIcon,                    // Lucide icon (Cpu, Database, Terminal, etc.)
    color: 'text-aurora-cyan',
    skills: [
      { name: 'React',      level: 90, x: 20, y: 30 },
      { name: 'TypeScript', level: 85, x: 40, y: 20 },
      // ...
    ],
  },
  // More clusters...
]
For each skill entry:
  • name — The technology label shown on hover.
  • level — A 0–100 proficiency percentage. This drives both the star dot size (level / 5 px) and the progress bar in the detail panel.
  • x / y — Percentage positions within the constellation canvas. Spread skills across the canvas area to avoid overlap.
The available Lucide icons imported in the source include Cpu, Database, and others from the Lucide React library. To use a different icon, import it from lucide-react in the source file and reference it in the icon field.
5

Update contact links

In the Contact page component, the three social/contact links are defined as an inline array:
[
  { icon: GithubIcon,   label: 'GITHUB_REPO',   val: 'github.com/alexcosmos' },
  { icon: LinkedinIcon, label: 'LINKEDIN_NET',   val: 'linkedin.com/in/alexcosmos' },
  { icon: MailIcon,     label: 'DIRECT_LINE',    val: 'hello@alexcosmos.dev' },
]
Replace the val strings with your own GitHub username, LinkedIn URL, and email address. The href on the wrapping <a> tag is currently "#" — update it to the full URL for each link:
href={`https://github.com/YOUR_USERNAME`}
href={`https://linkedin.com/in/YOUR_PROFILE`}
href={`mailto:YOUR_EMAIL`}
The label strings (GITHUB_REPO, LINKEDIN_NET, DIRECT_LINE) are displayed in aurora-violet mono font above each link — you can rename them to anything that fits your style.The contact form’s onSubmit handler currently simulates a submission with a 2-second delay. Connect it to a real form service (Formspree, EmailJS, a serverless function, etc.) by replacing the mock handler with an actual fetch or SDK call.
6

Add writing entries

The Writing page component reads from the posts array:
const posts = [
  {
    id: 1,
    title:    'The React Re-render Paradox',
    date:     '2023.10.15',
    category: 'Anomaly Logs',           // Must match a value in the categories filter array
    excerpt:  'Investigating a strange phenomenon...',
    priority: true,                      // Shows orange "PRIORITY" badge
  },
  // More entries...
]
The category value must match one of the filter buttons defined in the categories array at the top of the component:
const categories = ['All Frequencies', 'Field Reports', 'Reflections', 'Anomaly Logs']
Add new categories to the categories array before using them in entries. Set priority: true sparingly — it applies a border-sunset-orange/50 highlight border that draws the eye immediately.The “DECODE FULL MESSAGE” button currently has no navigation wired up. Add a to or href prop pointing to an external article URL or an internal route.
7

Update the logo text

In Navigation.js, the logo in the top-left corner renders two text strings:
{/* Small mono label above the wordmark */}
<span className="font-mono text-[10px] text-aurora-teal tracking-widest uppercase">
  Telemetry Online
</span>

{/* Bold wordmark */}
<span className="font-sans text-sm font-semibold text-white tracking-wider">
  OBSERVATORY
</span>
Replace "Telemetry Online" with a tagline or subtitle (e.g., your domain name or "Signal Online"), and replace "OBSERVATORY" with your own brand name or handle in all-caps.The animated Radio icon next to the logo is a pulsing aurora-cyan signal icon from Lucide React. You can swap it for any other Lucide icon that fits your brand.

​
Working with the Build System

All Telemetry source is processed by Vite and compiled into two output files in the assets/ directory:
  • assets/main.js — The full React application bundle (all components, pages, libraries)
  • assets/main.css — Compiled Tailwind CSS (all utility classes actually used in the build)
These are the files served by the static HTML shells in pages/. To update content or styling, your workflow is:
  1. Edit the original source JSX/TSX files.
  2. Run npm run build to regenerate dist/ (which contains fresh assets/main.js and assets/main.css).
  3. Deploy the updated dist/ folder.
If the original JSX/TSX source files are not present in the repository (for example, if only the compiled output was committed), you can use browser DevTools to inspect the running application. The Vite build includes source maps in development mode (npm run dev) — open the Sources panel in DevTools to browse the original component files and identify the code to modify.
The pages/*.html files (index.html, about.html, projects.html, etc.) are thin static shells. Each one only sets window.__STATIC_PAGE_ROUTE__ to its path and immediately redirects to the equivalent hash URL (e.g., /#/about). These HTML files contain no page content — all content lives exclusively in the React components compiled into assets/main.js. Do not add content directly to the HTML shells.

Build docs developers (and LLMs) love

Get started for freeTalk to us