What have you built? Create a developer portfolio with DevPort. Sign Up

Back To Docs

Create your own DevPort Template


First follow our quick setup guide to get devport running in your terminal. It's super easy, don't you love NodeJS?


Serve your portfolio locally

Portfolios are tiny little servers that get their data from the DevPort API. Portfolios served from the devport cli tool will reflect the actual data stored on DevPort.

devport serve

This fetch data from the API and serve your portfolio locally on port 2600.

Try it out.


Create a Template

Portfolio templates are served from the current directory.

  • index.tpl
  • project.tpl
  • about.tpl
  • contact.tpl
  • _header.tpl
  • _footer.tpl
  • /static

See where we're going with this?


Mustache Templates

Templates use Mustache templating engine which is really simple. Read more about Mustache here.


Example

You can use devport -i to clone the template that all users start with into the current directory.

mkdir devport
cd devport
devport -i

Now you've cloned the default template into your current directory.

OK: Cloned example project into /Users/Jennings/Development/devport-test

Check it out.

ls -l

It should look like this.

-rw-r--r--  1 Jennings  staff   25 Mar 11 01:36 _footer.tpl
-rw-r--r--  1 Jennings  staff    0 Mar 11 01:36 _header.tpl
-rw-r--r--  1 Jennings  staff  119 Mar 11 01:36 about.tpl
-rw-r--r--  1 Jennings  staff  432 Mar 11 01:36 contact.tpl
-rw-r--r--  1 Jennings  staff  177 Mar 11 01:36 index.tpl
-rw-r--r--  1 Jennings  staff  183 Mar 11 01:36 project.tpl
drwxr-xr-x  4 Jennings  staff  136 Mar 11 01:36 static

This template is a kitchen sink and has plenty of examples.


index.tpl

URL File
/ index.tpl

Example code:

{{#each projects}}
<div>
  <h1><a href="/projects/{{friendly}}">{{name}}</a><h1>
  <img src="{{active_asset.file.location}}" />
</div>
{{/each}}

{{#each projects}} Loops through your projects.

Now we're inside of a loop and we access each variable by it's name within the scope.

Variables

<h1><a href="/projects/{{friendly}}">{{name}}</a><h1>

{{friendly}} is a web safe "slug" for your project name and links to that project (hint, it loads project.tpl).

{{name}} is the project name.

You can find a full list of available variables here.

Assets

All of your thumbnails are available through assets, but you can use the variable activeAssset as a shortcut for the project thumbnial.

<img src="{{active_asset.file.location}}" />

Everything Else

Here's what the project array looks like.

[  
  {  
    "name":"Mote.io",
    "friendly":"mote-io",
    "text":"Control the sites you love with Mote.io\n\nMote.io lets you enjoy the power of the web from the comfort of your couch. Control your favorite sites like Youtube, Google Drive, Pandora, Grooveshark, Soundcloud, Hype Machine, Vimeo, Rdio, and more to come!\n\n* Never leave the couch. Switch between apps with the new Homebase remote.\n* Keep your phone next to your keyboard to create instant hotkeys for your favorite music sites.\n* New and upgraded remotes are on the way!\n* Control your presentation from the stage with Google Drive Presentation Remote\n* Ditch your cable box for the Youtube and Vimeo remotes with fullscreen players\n* Forget Airplay! Plug your computer into your speakers and control the music from all around the house.\n\n-----------------\n\nFollow the instructions here to set up Mote.io. Requires Google Chrome.\nhttps://mote.io/start\n\n-----------------\n\nRemotes:\n\n- Youtube Remote\n- Spotify Web Remote\n- Hype Machine Remote \n- Vimeo Remote \n- Pandora Remote\n- Rdio Remote\n- SoundCloud Remote\n- Grooveshark Remote\n- Plex Remote\n- TuneIn Radio Remote\n- Google Play Remote\n- Twitch.tv Remote\n- Last.fm Remote\n- More to come! Let me know what site you want Mote.io to support at https://mote.io/community\n\n----\n\nTrouble connecting? Tweet at me!\nhttp://twitter.com/sw1tch",
    "client":"Ian Jennings",
    "text_html":"<p>Control the sites you love with Mote.io</p>\n<p>Mote.io lets you enjoy the power of the web from the comfort of your couch. Control your favorite sites like Youtube, Google Drive, Pandora, Grooveshark, Soundcloud, Hype Machine, Vimeo, Rdio, and more to come!</p>\n<ul>\n<li>Never leave the couch. Switch between apps with the new Homebase remote.</li>\n<li>Keep your phone next to your keyboard to create instant hotkeys for your favorite music sites.</li>\n<li>New and upgraded remotes are on the way!</li>\n<li>Control your presentation from the stage with Google Drive Presentation Remote</li>\n<li>Ditch your cable box for the Youtube and Vimeo remotes with fullscreen players</li>\n<li>Forget Airplay! Plug your computer into your speakers and control the music from all around the house.</li>\n</ul>\n<hr>\n<p>Follow the instructions here to set up Mote.io. Requires Google Chrome.\n<a href=\"https://mote.io/start\">https://mote.io/start</a></p>\n<hr>\n<p>Remotes:</p>\n<ul>\n<li>Youtube Remote</li>\n<li>Spotify Web Remote</li>\n<li>Hype Machine Remote </li>\n<li>Vimeo Remote </li>\n<li>Pandora Remote</li>\n<li>Rdio Remote</li>\n<li>SoundCloud Remote</li>\n<li>Grooveshark Remote</li>\n<li>Plex Remote</li>\n<li>TuneIn Radio Remote</li>\n<li>Google Play Remote</li>\n<li>Twitch.tv Remote</li>\n<li>Last.fm Remote</li>\n<li>More to come! Let me know what site you want Mote.io to support at <a href=\"https://mote.io/community\">https://mote.io/community</a></li>\n</ul>\n<hr>\n<p>Trouble connecting? Tweet at me!\n<a href=\"http://twitter.com/sw1tch\">http://twitter.com/sw1tch</a></p>\n",
    "id":"54f29bb122ff411651f7f2f4",
    "active_asset":{  
      "is_active":true,
      "file":{  
        "location":"http://devport-prod.s3.amazonaws.com/97cfa1e0-bfcf-11e4-a22c-53c7eace15611425185905514"
      }
    },
    "assets":[  
      { 
        "is_active":true,
        "file":{  
          "location":"http://devport-prod.s3.amazonaws.com/97cfa1e0-bfcf-11e4-a22c-53c7eace15611425185905514"
        }
      }
      { 
        "is_active": false,
        "file":{  
          "location":"http://devport-prod.s3.amazonaws.com/97cfa1e0-bfcf-11e4-a22c-53c7eace15611425185905514"
        }
      }
    ]
  },
  {...},
  {...}
]

Project.tpl

URL File
/project/{{project.friendly}} project.tpl

Example Code

The same varialbes from index.tpl are available in project.tpl, except they are exposed under the project namespace.

For example:

<h1><a href="/projects/{{project.friendly}}">{{project.name}}</a><h1>

DevPort maps your projects into pages so you get a unique url for every project.


about.tpl

URL File
/about about.tpl

Example Code

This is how you access your username within your templates.

{{me.username}}

The variable me is global and can be used anywhere, not just within about.tpl.

Here's everything else available within me.

{  
  "username":"ianjennings",
  "email":"ian@meetjennings.com",
  "theme_options":{  
    "name":"cyborg"
  },
  "about":"I'm a developer.",
  "name":"Nickname, whatever.",
  "bio":"# This is my bio\n\nThere are many like it, but this one is mine.\n\n-----\n\nAnd it supports markdown.",
  "bio_html":"<h1 id=\"this-is-my-bio\">This is my bio</h1>\n<p>There are many like it, but this one is mine.</p>\n<hr>\n<p>And it supports markdown.</p>\n",
  "avatar":{  
    "file":{  
      "location":"http://devport-prod.s3.amazonaws.com/03058600-c78c-11e4-9857-23765e8683151426036489161"
    },
  }
}

contact.tpl

URL File
/contact contact.tpl

Example Code

DevPort hides your email for you.

All you need to do is create a form that POSTs to our endpoint, like this:

<form action="http://developerportfolio.com/email/contact/{{me.username}}" method="post">
  <fieldset>
    <label>Name:</label>
    <input type="text" name="name">
  </fieldset>
  <fieldset>
    <label>Email:</label>
    <input type="email" name="from">
  </fieldset>
  <fieldset>
    <label>Message</label>
    <textarea name="message">
    </textarea>
  </fieldset>
  <input type="submit" value="Send Email">
</form>

Now your email is hidden from spammers. We'll deliver the mail to you.

name, email, and message are all required. The url will hit DevPort and redirect to your portfolio.


_header.tpl and _footer.tpl

_header.tpl and _footer.tpl are reusable partials you can use for a simple layout system.

{{>_header}}
<div id="content"></div>
{{>_footer}}

{{>_header}} loads the file _header.tpl_, and you can guess what {{{>_footer}}} loads.

Partials have access to the same variables as the page they are embedded on.


Static Assets

URL File
/static/* /static/*

Code Example

Dump your static assets into a folder called /static and reference them all from the same directory.

<img src="/static/images/cat.png" />

Outputting project.text and me.bio as HTML

Everything you enter within your Bio or as a Project Text is parsed by Markdown. That Markdown is stored in me.bio for example, but you can access the rendered markdown from me.bio_html. Same goes for project.text.

You need to use three curly brackets so mustache will allow the escaped html.

<div>{{{me.bio_html}}}</div>
<div>{{{project.text_html}}}</div>

Deploying to DevPort

Check out our deployment docs.