portfolio-pattern-library

portfolio-pattern-library

Move the interactive wireframes for you portfolio website to Jekyll and start building out the pages.


summary: 'Move the interactive wireframes for you portfolio website to Jekyll and start building out the pages.' time: '4 hours' deliverables: 'Jekyll website files'


Jekyll portfolio

Overview

  • Set up your portfolio website to use Jekyll—making the _config.yml file.
  • The .gitignore file was already created for you when you forked your portfolio repo.
  • Create a default layout that contains the header and footer of your website—and anything else common like the navigation.
  • Start breaking apart your interactive wireframes to reduce code duplication as much as possible.
  • Populate the website with all your portfolio pieces—it’s okay to have fake images still.
  • Create HTML files for each portfolio piece—use the layout to add the header and footer.
  • Figure out a way to reduce the duplication of code for each portfolio piece: includes, nested layouts, etc.

Ideally there should be no code duplication. But if you’re doing lots of custom case-studies (like you should be) there will definitely be some duplication.

If you find yourself copying-and-pasting HTML code there’s a much better way to solve the problem.


Hand in

Show teacher for marks during next class.

Continue to add commits to your portfolio repo—and make sure the website works on GitHub at portfolio URL:

https://username.github.io/portfolio/
jekyll logo

Want a Jekyll website built?

Hire a Jekyll developer