A framework for building online portfolios specifically for Developers/Programmers

[sagarsane]

This idea was initiated by @jonathanconway . It is been discussed on code52.org at:
http://code52.uservoice.com/forums/143105-code-52/suggestions/3061949-portfolios-for-programmers

I just wanted to have it over here too.

The aim is to have a framework for building portfolios specifically for developers. It has been discussed in detail in the blogosphere about the importance of having a GOOD portfolio for a developer. Instead of using something like Google Sites of similar, giving focus to the design of the website which can show off the developer's skills, a way to demonstrate his projects (web projects at first), directly from this website. This could be useful for a person for example, who has experience in a lot of APIs. If the framework could provide an easy way to add such widgets, it could be useful!

Any thoughts? I looked around for anything similar that is available, couldn't find any.

Sagar

[paulirish]

Seems legit. What would it look like?

I know there are some apps that try to summarize your github activity into a one-page view.

[sagarsane]

Trying NOT to re-invent the wheel, I was thinking of using some of existing awesome libraries/plugins present today in JS/HTML and back-end technology can be anything. I am currently thinking of Python Appengine.

I think it would be best if the web content would be as live/rich as possible. Even if it is not generic, a Live Tiles UI would make sense for me here. (There is a cool project by @olton called Metro-UI-CSS that I am playing with currently)

The feature set I am thinking is as follows:

1. A home/landing page that gives a gist of everything about yourself, the projects you worked on, the professional experience, education you have, the skillsets you possess, etc. Hence, having live tiles UI would be cool. Like the home page will have live tiles for all these sections with snapshots of information about them, giving the person looking at the portfolio a one-shot idea about the developer.
2. Having the UI live will hopefully entice the person to look more into this profile. Here is where we can try and make it interesting. For eg: Have a projects section, where ofcourse there will be information about each and every project (like a couple of lines). But after that, using GitHub API (for now), actually pull in the repo information right there in that project's section (thus avoiding the need to go to the github profile and try and correlate the projects back and forth). Similar things can be thought of for Experience/Skillsets/Achievements/Hobbies sections.
3. Further, suppose the projects are web-based or say they have screencasts available or you have some snaps of the design/drawings you went through while developing the projects. The framework would allow these all things to be easily integrated as different tiles/sections for that project. Thus, giving a whole picture of the project.
4. If you used some cool API (Tropo API/Pusher API/any of the Google's APIs), the framework could allow the user to throw in some code (using Codemirror) and get a custom widget setup, SHOWING off the work you can actually know!
5. For native projects in C/C++, you could for eg., throw in a section showing where the project idea came from or have the research paper's PDF integrated there itself.

Concluding, everything about you integrated into one place, make it dynamic and give the user viewing your portfolio a rich experience which will hopefully make him contact you and get to know you (the developer) more :)

And most importantly, try and use existing products. Like, any backend framework (Python appengine for example) + knockoutJS for easy databinding + some cool UI framework (like Metro-UI-CSS or twitter's bootstrap/zurb foundation) + GitHubs API for pulling project's info + Putting it all together using HTML5boilerplate + many more as needed..

-- I have started dabbling with a project (v0.01 :) ) of mine a couple of days ago, which is basically an inception for this whole idea, a portfolio for myself at http://abetterportfolio.appspot.com (repo present in my GitHub profile) and I have tried to use most of the technologies mentioned above.

[sagarsane]

Its a long reply! .. but I have tried to put out my thoughts as much as possible :)

Thanks,
Sagar

[chenzihui]

Sounds good.

My take on this is that this framework should allow developers to build an online portfolio that showcases a top-level overview of one's work / skills, with the option to go in detail and check out the code quality.

And it must be responsive.

Github is great as a in-depth portfolio, but I think the noise-to-signal ratio can get pretty high when your number of repos grow.

[sagarsane]

Thanks Chen!

That's exactly what I am thinking too! Having a landing page showing the whole profile and then project/experience/education, etc. details.

And the portfolio will help relate the project's description to its repo in GitHub (using the GitHub API).
Will see how it transpires. I am excited about it :)

Thanks.
Sagar

[paulirish]

Sagar has been making great progress:
https://github.com/sagarsane/abetterportfolio

[sagarsane]

Thanks @paulirish !

I am trying to put together a kind-of mockup of this idea, before getting into too much details of the framework itself. Hence, the back-end is minimal right now. Wanted to give it a better look & feel first!

Note: There is a silly bug sagarsane/abetterportfolio#2 right now in the deployed version. Hence, clicking on the Projects tile will not do anything.
I will fix it when I go home.

Thanks!
Sagar

[jonathanconway]

Hey guys,

Thanks for the posts guys, this is all very exciting.

I've been working on a basic mockup in Google Docs - see here: http://bit.ly/RFCPD2 and here: http://bit.ly/P8UKEv.

I'd like it to be just a really simple list of projects, and you can zoom in to view the details of a project, with a back/next style of navigation.

Would be great to get feedback on it, if you guys have time.

[chenzihui]

@jonathanconway Hmm, I'm not really understanding the mockups posted. I see a "The Australian iPad Build", but I suppose you are suggesting a list style type of display, with tabbed navigation and the ability to drill into the details of a particular project from the list?

[jonathanconway]

@chenzihui Sorry, it's not the best quality mockup.

The idea is that you first see a home page with a grid of thumbnails, one for each project. (See the first link I posted.)

Then you click one of them to zoom into the details of that project, which is kind of like a slide-show where you can click Next or Previous, and it shows some different aspect of the project in each slide. (See the second link I posted.)

Is this what you had in mind, or do you want something totally different?

[sagarsane]

I was also thinking of a grid view, but was not sure how it would scale if you have many projects. Hence, I added the filtering functionality like I have in my app. Do you think filtering would be useful?

[jonathanconway]

Yeah I agree. Some employers will just want to quickly skim through, but others would only be interested in recent work or want to drill down into specific skill-sets. I've added a filter dropdown here: http://bit.ly/RFCPD2 and an expanded-state here: http://bit.ly/RAt6U9. Let me know what you think.

[sagarsane]

Yeah this looks good!

One more thing; for you, is the scope limited to Projects for now? Or do you think Experience/Skills/etc. should be included too?

Thanks!
Sagar

[jonathanconway]

I think the homepage should be oriented around projects, but when they drill into a project, we should show the skills for that project somewhere. Perhaps we need a sidebar and a main view. I'll have a bit of a play with it.

[chenzihui]

+1 for grid view with a filtering functionality.

The focus should be on the projects done by the developer, but yes, there should be a portion on Experience / Skills / Education, etc. much like what one usually see in a resume.

I'm imagining that this can pretty much be used as an online resume for developers.

I'll play around with some layouts / flows as well once I get home.

[jonathanconway]

Hey @sagarsane, just got your python project running. Looks fabulous!

The steps to build this on Windows are:

1. Install Python 2.7.3 (http://www.python.org/download/releases/2.7.3/#id5)
2. Install Google App Engine (https://developers.google.com/appengine/downloads)
3. Run Google App Engine Launcher
4. Edit -> Preferences -> Set Python path to 'C:\Python27\pythonw.exe'
5. File -> Add Existing Project..., browse to the checked-out project folder, and choose a free port number.
6. Click Run in the toolbar and copy/paste the address into your browser.

[jonathanconway]

Another idea - it would be amazing if we had an aggregated "Activity Feed", so the employer can see that you've been actively working on development and improving your skills.

For example, just this morning I added a helpful comment to a StackOverflow question. It would be great if that got automatically added to my Activity Feed.

The employer could then see all the stuff I've been doing over the past week - e.g. helping people on StackOverflow, contributing to open-source projects, reading development-oriented books on my Kindle, etc.

The only challenge here is curation - removing unwanted/irrelevant tweets. :) We might be able to figure something out based on relevant keywords.

Anyway, I realize this is technically difficult feature to implement, so maybe something for the distant future. :)

[sagarsane]

Thanks @jonathanconway ! And thanks for laying out the steps to setup in Windows! I also have it in windows currently, but I have setup Eclipse + PyDev with GAE for it. Better editor and easier to deploy to GAE :).

@ your idea, I think that is useful. In-fact, I was thinking of using GitHub's API to pull all commits/posts or mentions related to the user, which would instantly show off his/her involvement in open source contributions. We could definitely have something like that. But the main thing (as you said about the tweets) would be to scope out what and how much to show in the Activity feed!

Also, I am thinking of adding a little bit of customization capabilities to how the data is sourced in from backend. Currently, I have static JSON files that are served up to the client. But if a user can setup a JSON in a particular format (for now) as a GH-gist, that gist can be directly pulled in Python/processed if needed and served up. Thus, enabling anyone to fork and try out this feature and instantly see his/her data in the UI :). I think I will implement this next.

We can then take it to the next level from here.

[sagarsane]

I have done a small update in the projects page transition, making it inline with the general 'scrolling' feel. It was ugly before.

@jonathanconway : I am planning to implement the Activity Feed feature next. Do you think we should limit the scope to GitHub's Comments/Posts/Commits, etc. using their API?

@ all: Do you guys think this feature (Activity feed) will be useful to have on the landing page? I am also planning to make the backend a bit generic using GH-gists so that anyone can try out the project putting in their own data in a particular JSON format for now, which the client side KnockoutJS model will understand.

[chenzihui]

I'm all for an activity feed consisting of actions performed on Github.

An interesting tweet John Resig made awhile ago.

https://twitter.com/jeresig/status/33968704983138304

@sagarsane I'm new to contributing to open source projects, so I might need a little bit of guidance on how do I start contributing to the work you've done so far. Cheers

[sagarsane]

Thanks @chenzihui I am new to contributing too :) , so I am in the same boat! There are some super awesome people around here though :D . I think once it becomes a bit more generic (like GH-gist/Activity Feed GitHub API as I mentioned above), it will be much more easier to try out with different portfolio data. It will be a good test for the current implementation too!

And thanks for the tweet reference ---> a good push for this feature :)

I will get on the next steps soon! You can also add issues (features/etc.) in the issues section of the repo.

[sagarsane]

In a dilemma .. what would be the best way to show a user's Github Public Activity? I have a couple of options which give aggregated information..

1. http://github.com/{user}.json
2. https://api.github.com/users/{user}/events

But these seem to give only for past couple of days. I am trying to find a way to say like
I want a user's public activity (which would include my comments/push events/mentions, etc.) from current time to say 5 days back or something. I already have pulled in an user's Watched Repos, Followers and Following information. Looking for a better way to pull in the remaining information. I think it would be cumbersome to pull in each of the remaining information separately and then aggregate it as a feed.

[tomlane]

@sagarsane probably not the best solution but YQL the data in?

[sagarsane]

Hmm.. I don't know much about it. Will have to check it out!

[tomlane]

It's a bit tricky to get started with but once you get going it's easy to get it pulling the data you need from github with the github tables. Will return JSON too.

[sagarsane]

Ok ok .. looks interesting will check it out :) Thanks @tomlane !

The first link is broken, but no worries, its this right?

[tomlane]

@sagarsane ah yes, silly me, thats the right link :)

[paulirish]

also bigquery with the githubarchive might work nicely:
http://www.githubarchive.org/

[sagarsane]

Thanks @paulirish ! Will check that out too! ..

[sagarsane]

Have been trying out bigquery suggested by @paulirish . It is looking very promising for my use case, but I think its restricting me for how much queries I can run per day. As I am testing the queries, I am running a lot of them!

Getting Error: Exceeded quota: too many free query bytes scanned for this project error. I am guessing this simply means I should try again tomorrow. Kindly correct me if I am wrong!

I have come up with this query for now:

SELECT actor_attributes_login, repository_name, url, created_at as date
FROM [githubarchive:github.timeline]
WHERE type="IssuesEvent"
    AND actor_attributes_login="sagarsane"
    AND repository_watchers > 1
    AND PARSE_UTC_USEC(created_at) >= PARSE_UTC_USEC('2012-04-01 00:00:00')
ORDER BY date DESC;

Thank you.
Sagar

[sagarsane]

Update: abetterportfolio#4

[sagarsane]

Update! : Referring this commit with description in the subsequent comment there: d88544c730feead29c33a00cd7f3822bc1940d38

Working link for getting Github Feed via GithubArchive project: http://abetterportfolio.appspot.com/github_archive (returning RAW JSON for now!)

Edit: There was a Bug..

---

EDIT: Bug Fixed for OAuth2 settings: Working now. Same link as in the issue above sagarsane/abetterportfolio#4

[sagarsane]

An update on this...
Yesterday, I got the Github Activity part working using the GithubArchive project mentioned above. Currently, I am storing the results for this month in a Table in Google BigQuery. So that the app doesn't have to process the results all the time! I will have to find out a way to schedule a Job on BigQuery so that it runs and stores the data in the table regularly.

Again, this is completely customizable to any person having a GitHub ID. There will be just a small change in the query I am using on BigQuery. I will now have some more enhancements done on the page here: Github Archive Page . You can also go to this page by going to the home page and then clicking on GitHub Activity Feed

Thanks for suggesting GithubArchive project @paulirish !!

Referring issue 4

[paulirish]

looks fantastic! nice work :D

On Sun, Oct 28, 2012 at 1:45 PM, Sagar notifications@github.com wrote:

An update on this...
Yesterday, I got the Github Activity part working using the GithubArchive
project mentioned above. Currently, I am storing the results for this month
in a Table in Google BigQuery. So that the app doesn't have to process
the results all the time! I will have to find out a way to schedule a Job
on BigQuery so that it runs and stores the data in the table regularly.

Again, this is completely customizable to any person having a GitHub ID.
There will be just a small change in the query I am using on BigQuery. I
will now have some more enhancements done on the page here: Github
Archive Page http://abetterportfolio.appspot.com/github_archive . You
can also go to this page by going to the home pagehttp://abetterportfolio.appspot.com/homeand then clicking on
GitHub Activity Feed

Thanks for suggesting GithubArchive project @paulirishhttps://github.com/paulirish!!

—
Reply to this email directly or view it on GitHubhttps://github.com//issues/86#issuecomment-9850284.

[sagarsane]

Thank you Paul! :)

[igrigorik]

Awesome use of Github Archive! 👍

[sagarsane]

Thanks @igrigorik ! The Github Archive project is really awesome! I will post updates here as I do some more work on it.

[KodeSeeker]

Is this project still active? If yes, how can I contribute? ( if there's help needed)

[sagarsane]

Hey @KodeSeeker , This project was dormant for a while.. I have to restart working on it.

One of my major requests is to revamp the UI using the latest build of Metro-UI-CSS framework. A lot has changed in it since I used it the last time.

Amongst other things, I also need to have documentation for this project. I am going to open issues related to this!

Thanks for your interest!

[KodeSeeker]

@sagarsane : Is there a link to existing documentation, that you could provide?

[sagarsane]

Here is the link to the issue I have created : sagarsane/abetterportfolio#15 .. it has the link too!

[jsonRUHLS]

@sagarsane : Sagar this is some Awesome work you have put in. ;) I'm still a newbie in some areas, but would love to contribute when I can. Do you have any objections with me using what you have developed for my personal portfolio? I will take it and personalize it, but still link all creditability to yourself. In turn, I will add any upgrades I make to the code base, to your repository and link my repository to the original. Again great job!!!

[sagarsane]

Hey @softEngJason Thanks! Apologies for the delayed reply.
I do have some open issues in the issues list: https://github.com/sagarsane/abetterportfolio/issues

I haven't gotten much time lately to start working on those! Especially, sagarsane/abetterportfolio#15 and sagarsane/abetterportfolio#9 are pretty important. The no: 9 issue actually has a wide scope as it involves re-engineering the UI with the latest framework changes in the UI Framework I have used.

Please take a look at the issues and create/comment on the ones over there that interest you!

Thanks again!

[stale]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

[stale]

This issue has been automatically closed because it has not had recent activity. Thank you for your contributions.