Building a Node.js + Express.js + Jade CoderWall + Geekl.st Portfolio (cont…)

In the previous blog entry I went thru the steps needed to get a Node.js site up and running with Express.js. Next I’m going to leap right into getting some mash ups going with Coder Wall. I’m currently waiting on Geekli.st to get me some beta API access, when that happens I’ll be adding some of the geeky list to the portfolio. For now… on with the mash up.

Folder Structure

Folder Structure

First things first, get the pertinent pieces you need from proudify.js (check it out here: https://github.com/icebreaker/proudify and on Mihail’s site here: http://proudify.me). My folder structure looked like this once I had pulled in the js & css files I needed. You may notice I have three image files too, I picked them up via http://iconfinder.com, but you can snag my github and they’re included in that.

If you just want to clone the code, I do have it available on githubhttps://github.com/Adron/codingwall.

.
.
.
.
Next I setup the index.jade like this:

h1= title

div.splitter
    div.left
        div.navAlpha
          p Welcome to #{title}'s Portfolio Site

          a(href='http://www.linkedin/in/adron')
            | <img alt="Linkedin" src="images/linkedin.png" style="border: 0px" />
          br
          a(href='http://twitter.com/adron')
            | <img alt="Twitter @adron" src="images/twitter.png" style="border: 0px" />
          br
          a(href='http://www.facebook.com/adron')
            | <img alt="Facebook" src="images/facebook.png" style="border: 0px" />

        div.navBeta
          p #{title}'s Other Web Presence

          ul
            li
              a(href='http://compositecode.com')
                | Composite Code
            li
              a(href='https://github.com/Adron')
                | Github
            li
              a(href='http://www.linkedin.com/in/adron')
                | LinkedIn
            li
              a(href='http://www.facebook.com/adron')
                | Facebook
            li
              a(href='http://twitter.com/adron')
                | Twitter

    div.right
        div.crazy
          p the content

After I setup the index.jade I changed the layout.jade to have the following code.

doctype 5
html(lang="en")
  head
    title= title
    link(rel='stylesheet', href='/stylesheets/style.css')
    link(rel='stylesheet', href='/stylesheets/site.css')
    link(rel='stylesheet', href='/stylesheets/splitter.css')
    link(rel='stylesheet', href='/stylesheets/proudify.min.css')
    script(src='/javascripts/jquery-1.4.4.min.js')
    script(src='/javascripts/jquery-ui-1.8.7.custom.min.js')
    script(src='/javascripts/jquery-proudify.min.js')
  body!= body

Those are basically all the changes I made for the first push to github. Run the standard app:

node app.js

Once it runs you should see the basic display of information. The proudify.js pulls the CoderWall badges from the their site.

Coding Wall

Coding Wall

At this time I still haven’t had time to weave in the Geekli.st yet, but will work toward doing that in the future and making a post.

I’ll be adding other features to this, as an example, around database support, connecting to services and a host of other functionalities. So stay tuned to this blog and be sure to follow the github repository for the latest bits.

Until then, enjoy.

5 thoughts on “Building a Node.js + Express.js + Jade CoderWall + Geekl.st Portfolio (cont…)

  1. Building a Node.js + Express.js + Jade CoderWall + Geekl.st Portfolio « Composite Code

  2. Node.js Love, PaaS Providers, Deploy – Part 3 with Cloud Foundry Using Tier 3 | New Relic blog

  3. Hey ! Thanks for the tutorial, it’s really nice. And today, what about Geekli.st API ? Have you got any news of it ? Do you know how to implent it in your code ?

  4. Node.js Love, PaaS Providers, Deploy – Part 2 with AppFog | New Relic blog

  5. Node.js Love, PaaS Providers, Deploy - Part 1 | New Relic blog

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s