ga-wdi-boston / portfolio-template

Portfolio Template

Use this template to structure your Portfolios.

Objectives

By the end of this, developers should be able to:

• Have something to show to potential future employers/recruiters/friends
• Work on a portfolio and implement more and more features throughout WDI

Why?

It's important that you begin thinking about what you want your online presence to look like. What do you want people to find when they google you? What do you want people's first impression of you to be when they visit the url on your business card?

User Stories to Get Started With

• As a non-technical HR manager, I want to quickly evaluate whether this candidate has the skills and experience to fill an open position at my company.
• As a mid-level engineer, I want to evaluate a junior developer’s coding skills by reviewing their projects and reading their code.
• As a friend of the person who built this portfolio, I want to understand what they do as a developer and what they have created.

NOTE: There are lots more, but let's start with these!

Requirements:

• About Me: Short blurb explaining who you are, and some background info
• Skills: All the skills you have that may be helpful on the job
• Contact info (email, LinkedIn, GitHub, city)
• Resume view & download
• Showcase your GA projects (more details below)
• Blog posts (2-4) — Link to a medium account, or these could be built in native to the app if you really want bonus points!

Optional Sections:

• Personal hobbies/interests
• Professional Timeline (a visual representation of your work history)
• Additional work samples (visual design, writing samples, a link to your photography blog)
• Social profiles if relevant (Twitter, instagram, if they highlight you professionally, not just what your meals look like)
• Could include phone number and mailing address, but not necessary

Notes on highlighting your GA projects:

• Include links to live site as well as front-end and back-end repos
• Describe both the functionality of the site as well as what technologies you used to build it.
• Talk about your process for building this app. If you have a blog post that goes into detail for each project, link to that post.
• As you add your GA projects to your portfolio, make sure they are user-friendly to an unacquainted visitor.
• The home page should explain the site’s functionality
• Random users might not want to sign up/sign in. You should either put dummy credentials on the homepage that they can use (and explain that), or make sure they can interact with the site without signing up.
• Clean up the data you’ve entered on the site as you were testing it.

A Quick Note About Design:

If you’ve got design chops, use them. You have an opportunity to impress a wide audience with both your coding skills and your design abilities with this site. If you are not a strong designer, that’s okay too! Don’t try to be something that you’re not on this site. Keep your design simple, or mock up your site based off of another site you have seen that looks great. Get feedback from colleagues (especially non-developers and non-designers) to make sure it doesn’t look terrible. Keep it neutral and focus on producing good projects.

Save Us From Design!

We highly recommend you use Bootstrap, Materialize, or [Foundation(http://foundation.zurb.com/sites/docs/v/5.5.3/css.html)] to aid with the design of your portfolio. Choose one, and start adding features to your site! This doesn't mean you can't change in the future, but do some research and pick which ever one you like best!

Installation

1. Download this template.
2. Unzip and rename the template directory.
3. Empty README.md and fill with your own content.
4. Move into the new project and git init.
5. Follow the instructions here: documentation
6. Use gh repository as the remote for your portfolio

A Quick Note on Technology

As you may know by now, in WDI we'll use browser-template to create web apps. However, since these portfolios typically won't have the same robust functionality, we've included simple index.html, index.js, and main.css files to get started without the added complexity of a webpack build.

But What if I Have Questions!?

Technical or non-technical? If your question is "Is it helpful to show that I'm also a donut fanatic on my portfolio page?" you should direct that towards Outcomes. If your question is "Is it appropriate to put a photo of me passed out at a bar?" the answer is "No." If your question is "Cannot read property of undefined you probably want to see what is to the left of the . and then open an issue here.

Additional Resources

• Other WDI Grads's Portfolios:
• http://rhjones.me/
• http://gabescarbrough.com/
• http://nicolasogarcia.com/
• http://robertruttenberg.com/
• http://cathyobrien.co

License

1. All content is licensed under a CC­BY­NC­SA 4.0 license.
2. All software code is licensed under GNU GPLv3. For commercial use or alternative licensing, please contact [email protected].

portfolio-template's Issues

Update example portfolio links

In ReadMe->Additional Resources, remove 2 links (http://nicolasogarcia.com/ and http://robertruttenberg.com/) and add these examples:
https://nriser.github.io/portfolio/
https://jbculbertson.github.io/
https://coreyfedde.github.io/portfolio/

Bootstrap navbar does not appear to pick up styling

Hi, all:

I'm getting unexpected behavior when I try to implement a Bootstrap navbar using portfolio-template. Here is the relevant code from index.html:

  <div class = "container">
     <div class ="navbar">
     <ul class="nav">
       <li class="active">
         <a href="#">Home</a>
       </li>
       <li><a href="#">Link</a></li>
       <li><a href="#">Link</a></li>
     </ul>
   </div>
 </div>

I got this approach from the Bootstrap documentation for .navbar

But I don't get something that looks like the navbar in the documentation out of this -- instead I get this:

Can you give me some hints about what might be going wrong? Thanks. Oh: here's my repo if you'd like to browse.

difficulty deploying to gh-pages

I went into the settings section of my github repo for my portfolio and activated gh-pages.
I have two branches: master & working.
When I go to https://ryanwk.github.io/portfolio/. I don't see any updated changes that I made to my portfolio.

Here's a view from my terminal:
~/wdi/projects
$ cd portfolio/
~/wdi/projects/portfolio (working)
$ git push origin working
Everything up-to-date
~/wdi/projects/portfolio (working)
$ git push origin master
Everything up-to-date
~/wdi/projects/portfolio (working)
$ git remote -v
origin [email protected]:ryanwk/portfolio.git (fetch)
origin [email protected]:ryanwk/portfolio.git (push)
~/wdi/projects/portfolio (working)
$ git status
On branch working
nothing to commit, working tree clean
~/wdi/projects/portfolio (working)
$ git checkout master
Switched to branch 'master'
~/wdi/projects/portfolio (master)
$ git push origin master
Everything up-to-date
~/wdi/projects/portfolio (master)
$ git status
On branch master
nothing to commit, working tree clean
~/wdi/projects/portfolio (master)

Things I've done:
spent hours researching my problem.
I found this resource and this is what I will be trying next:
https://gist.github.com/chrisjacob/825950, which is a "Setup GitHub Pages "gh-pages" branch as a subfolder within the "master" project on your local checkout - a step-by-step guide".

Update required section list

Move this bullet from "Requirements" list into "Optional sections"

Blog posts (2-4) — Link to a medium account, or these could be built in native to the app if you really want bonus points!

Unable to run Grunt Serve or Deploy

I believe I've successfully setup my local and remote repo for my portfolio, but I'm unable to run grunt commands, grunt serve or grunt deploy. I ran NPM Install inside the repo.

Do I need grunt?

Grunt serve returns:
$ grunt serve
grunt-cli: The grunt command line interface (v1.2.0)

Fatal error: Unable to find local grunt.

If you're seeing this message, grunt hasn't been installed locally to
your project. For more information about installing and configuring grunt,
please see the Getting Started guide:

http://gruntjs.com/getting-started

Grunt Deploy returns:

$ grunt deploy
grunt-cli: The grunt command line interface (v1.2.0)

Fatal error: Unable to find local grunt.

If you're seeing this message, grunt hasn't been installed locally to
your project. For more information about installing and configuring grunt,
please see the Getting Started guide:

Fix broken links

The Foundation link and the link to Nicolas Garcias' portfolio both 404. The foundation link is also formatted incorrectly.