Skip to main content

Documentation Index

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

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

All portfolio content in DevOS lives directly inside the individual app component files. There is no external CMS, no environment-variable config, and no JSON data layer — each app owns its own data as plain JavaScript arrays, template literals, or inline JSX. To personalise the portfolio, open the relevant component file and edit the values in place. The table below maps every piece of visible content to the file and structure you need to edit.

Data locations

What to changeFileWhat to edit
Welcome messagecomponents/apps/HomeApp.jswelcomeContent template literal
Name, bio, hobbiescomponents/apps/AboutApp.jsSpec values string, bio JSX, hobbies array
Projectscomponents/apps/ProjectsApp.jsprojects array
Skillscomponents/apps/SkillsApp.jsskills array
Career historycomponents/apps/TerminalApp.jscareerLog array
Case studiescomponents/apps/CaseStudiesApp.jsJSX document content
Articlescomponents/apps/ArticlesApp.jsarticles array
Contact emailcomponents/apps/ContactApp.jsvalue of the To: input
Social linkscomponents/apps/ContactApp.jshref on GitHub/LinkedIn/Twitter anchors
Testimonialscomponents/apps/TestimonialsApp.jstestimonials array
Boot messagescomponents/system/BootScreen.jsbootMessages array
Desktop icon labelscomponents/system/Desktop.jslabel property in the I array

Practical example — updating the skills list

The SkillsApp component renders a Task-Manager-style view where each row represents a skill. The data lives in a skills array at the top of the file. Each entry has three fields: a display name, a base proficiency value (0–100), and a Tailwind background-colour class for the progress bar. Replace the existing entries with your own stack:
components/apps/SkillsApp.js
const skills = [
  { name: 'React.js',   baseUsage: 95, color: 'bg-blue-500'   },
  { name: 'Next.js',    baseUsage: 90, color: 'bg-gray-800'   },
  { name: 'TypeScript', baseUsage: 88, color: 'bg-blue-600'   },
  { name: 'Prisma',     baseUsage: 70, color: 'bg-teal-600'   },
  { name: 'PostgreSQL', baseUsage: 65, color: 'bg-indigo-500' },
];
The component polls on a 1 500 ms interval and offsets each bar’s displayed value by a random amount on every tick, giving the impression of live CPU activity.
Keep baseUsage values honest — the bar fluctuates ±5 around the base on every interval tick, so a value of 95 can momentarily read 100. Set values that reflect your genuine level of confidence with each technology; visitors will notice if everything is pinned at 99.

Other common edits

Projects — each entry in the projects array in ProjectsApp.js typically includes a title, description, technology tags, and a URL. Add, remove, or reorder entries freely; the grid layout adapts to any number of items. Career historyTerminalApp.js renders a terminal-style output from a careerLog array. Each entry represents one role or milestone. Edit the organisation name, date range, title, and bullet points to match your own history. Boot messages — the bootMessages array in BootScreen.js controls what appears on the ASCII-art loading screen at startup. These strings are pure flavour text — customise them freely to set the tone of your portfolio before the desktop loads. Desktop icon labels — the label property in each entry of the I array in Desktop.js is what appears beneath the icon on the desktop. The built-in labels use OS-style filenames like about_me.exe and career.log. You can rename them to anything without affecting functionality.
There is no runtime data-fetching in DevOS — it is a fully static site. Changes to any data array only take effect after a rebuild. If you want a CMS-backed portfolio in the future, replace the static arrays with fetch() calls inside useEffect hooks within each app component, and update the build pipeline to handle any required environment variables.

Build docs developers (and LLMs) love