Developing a Custom Program

Developing a custom "program" for your portfolio is relatively easy; it's as simple as making a an Angular component or (in certain cases), a JSON object. The program-definitions.var.ts controls the behavior of these programs.

Developing a Link Program

A link program links to an external website like Linkedin or Github. It's not really an Angular component. The shortcut in the taskbar/desktop will take the user to the external website when clicked on.

1. Go to the program-definitions.var.ts file in src\app\programs\program-definitions.var.ts. You will see an Array of objects. Each object is a program definition.
2. At the bottom of the Array, append a new Object with the structure below (replace the {{ }}} with settings):

  {
    id: '{{STRING: id unique relative to the other program definitions}}',  
    icon: '{{STRING: path relative to src to icon image}}',  
    name: '{{STRING: the name of the program/link, doe snot need to be unique}}',  
    openOnStart: {{BOOLEAN: that states whether the program should open on start}},  
    pin: {  
      desktop: {{BOOLEAN: that states whether a shortcut for it should exist on the desktop}},  
      taskbar: {{BOOLEAN: that states whether a shortcut for it should be pinned onto the taskbar}}  
    },  
    webLink: '{{STRING: the link (including http(s) to the external site}}'  
  } 

3. Recompile the project and the Link Programshould be created. NOTE: Currently, you can't easily change the order of shortcuts in the Desktop. The best way to do this is changing the order of the program definintions.

Example of Link Program:

  {
    id: 'linkedin',
    icon: './assets/programs/link-programs/linkedin.png',
    name: 'Linkedin',
    openOnStart: false,
    pin: {
      desktop: true,
      taskbar: false
    },
    webLink: 'https://www.linkedin.com/in/bryce-plunkett-930b77164'
  }