Your Personal Portfolio Site

Instructions

Create a personal portfolio page and deploy it to Github pages. Please refer to the documentation on GitHub for detailed instructions.

You may continue with the "About Me" page you created when interviewing for this course. However, the intent is that this will be the foundation of the portfolio page you display to employers, so you'll probably want to make significant improvements!

Requirements

This lab counts as an assignment and is due today at 5pm.

• Separate concerns of semantics and style: your CSS should be in a linked stylesheet separate from your HTML.
• Your HTML should pass the W3 HTML validator.
• Your CSS should pass the W3 CSS validator.
• Javascript isn't required, but you get bonus points for giving it a shot!
• Your page must be deployed to Github pages. This is a free hosting service provided by Github. You should name your repository your-username.github.io. The result is that your page will be publicly available at http://your-username.github.io.

You have not been taught how to deploy to Github Pages. That's okay! This is an opportunity to learn something new on your own. Just follow the instructions here. If you run into any issues, just ask the instructor on lab support.

Submission

Please create an issue on this repo, ga-wdi-exercises/portfolio_pages, containing a link to the repo you created -- not the webpage. So your issue should contain http://github.com/wdidcstudent/wdidcstudent.github.io, for example, and not http://wdidcstudent.github.io.

Pairing with Others

Every student must create their own website, but you're welcome and encouraged to collaborate with others! The best way to create a great website is to get targeted feedback from others at several points in the process.

Tips

• Think about who you want to view your site (potential employers, freelance opportunities, friends). I know it is tempting to make it flashy with tons of jQuery plugins, but the most important thing when designing your site is to make it EASY for your visitors to access the information they want and navigate around the page.

• Think about the goal for your site and what you want your users to do (read about your story, look at your work/code/writing, contact you). Guide them to taking those actions by making them prominent / easy to find.

• Wireframe what you want your site to look like first!

• Use proper indentation and organize your code. Chances are people will view your source!

• You may use Bootstrap or other CSS frameworks. If you do, you're encouraged to start off using it so that you get an idea of how you want your page to look, and then to gradually remove the Bootstrap in favor of CSS you wrote yourself.

Inspiration

Personal websites from some previous WDI grads:

• http://britt.is/
• http://raleighdaniel.com/
• http://jlappano.github.io/
• http://bradpuder.com/
• http://nicholalexander.com/
• http://kevoncheung.com/
• http://rlee1121.github.io/
• http://www.larrybuch.com/
• http://www.timlatorre.com/
• http://adrianbautista.com/
• http://www.andrewmadden.com/
• http://www.belcortes.com/

You can also Google "developer portfolio website" for more ideas :)

Domains (Optional)

If you'd like, you can purchase a domain and then "point" the domain to your Github Pages repo. Here are instructions on how to do so:

https://help.github.com/articles/setting-up-a-custom-domain-with-github-pages/

We recommend Namecheap.

Sass (Optional)

If you'd like, try adding some Sass to your portfolio site.

We'd like you to try using:

• At least three variables
• At least one mixin
• The & selector

Bonus!

• Use a color function: darken, lighten, etc.
• Use a function to create 3d effects, like https://jesse.sh/makes-3d-buttons-with-sass/