If you’re a creative or technical professional, odds are you need a great portfolio website. What makes a good portfolio? What if you’re a writer, or a developer, and don’t have a lot of visual work to show? We’ll go over how to navigate the intimidating world of personal portfolio websites, using WordPress as our guide.

1. Creating a Great
Portfolio Website

2. I am Mel Choyce
• Design Engineer at Automattic
• WordPress core contributor
• Live in Boston
• Connecticut native
• @melchoyce | choycedesign.com | melchoyce.com

3. What kind of work do you do?

4. Let’s start with
some fun.
(and by that I mean embarrassing screenshots)

10. General principles

11. Keep it simple.

16. Let your personality
shine through. :)

17. Clever microcopy or
intro statements

21. Type and iconography

24. Illustration and animation

28. Self portraits

31. Tailor your portfolio to a
specific audience.

32. http://www.shoeboxblog.com/?p=16820

34. Don't showcase work you
wouldn't want to do again.

36. Don't do something cool
just because you can.

39. Less is more, as long as
it's high quality.

44. Explain your process. Your
work doesn't speak for itself.

45. Focus on the problem you solved,
not the tools you used

47. I used to just have thumbnails that
opened into light boxed static mockups.

48. Not that hot.

49. Write a case study.

50. Haraldur Thorleifsson
http://haraldurthorleifsson.com/morethanamap/

51. Haraldur Thorleifsson
http://haraldurthorleifsson.com/morethanamap/

52. Writing a longer case study
• What was the overall goal of the project?
• What problem was the project trying to solve?
• What role did you play in the project?
• What was the process you used to solve the problem?
• What were the results?
• Link to the final product.

54. Sometimes shorter is okay.

55. Sebastien Gabriel
http://kounterb.dunked.com/chromeos-filesapp

56. Writing a shorter case study
• What was the project?
• What was your role?
• Relevant screenshots, mockups, code snippets
• Link to the final product

57. GitHub and Dribbble do not
a portfolio make

58. Make it easy for the
right audience to get in
touch with you

59. What do employers
look for in a portfolio?

60. – Steve Hickey, Fresh Tilled Soil
“Potential. It doesn't need to be perfect, but I
need to be able to sense underlying logic and
order behind the decision making. …You can't
teach people how to think.”

61. – Andrew Norcross, @norcross
“attention to detail”

62. – Roger Huang, @rogerh1991
“Drive. I want to see that somebody cares about
their projects, and takes the time for a few
related passion projects.”

63. – Andrea Lee Bishop, @andrealee_b
“attention to detail & versatility. Be wary of
oversights that would indicate they'd forget it
on projects for you too.”

64. – Rachel Baker, @rachelbaker
“It isn't what is in the portfolio but instead a
potential hires responses to questions about
"why?" a certain approach was taken.”

65. Building a Portfolio

66. • Open source project
• Need to pay for hosting
• Completely customizable
• Total control
• Great if you know some
code or feel comfortable
experimenting
• Hosted WordPress service
• Free hosting
• Partially customizable
• Paid upgrades
• Great if you’re new to site
building/blogging or want
to make something fast

67. To add your content, you can...
• Use or make a portfolio CPT
• Use category pages
• Make each piece a page

68. Finding (or making) a
good theme

69. What makes a good theme?
• Keep it simple so you can customize
• Aim for the general layout you want
• Avoid themes with too many options
• Avoid baked-in functionality

70. Widely
WordPress.com: http://theme.wordpress.com/themes/widely/
WordPress.org: http://public-api.wordpress.com/rest/v1/themes/download/widely.zip

71. SemPress
WordPress.com: http://wordpress.com/themes/sempress
WordPress.org: http://wordpress.org/themes/sempress

72. Mixfolio
WordPress.com: http://wordpress.com/themes/mixfolio
WordPress.org: http://wordpress.org/themes/mixfolio

73. Hatch
WordPress.com: http://wordpress.com/themes/hatch
WordPress.org: http://public-api.wordpress.com/rest/v1/themes/download/hatch.zip

74. Portfolio Press
WordPress.org: http://wordpress.org/themes/portfolio-press

75. Motif
WordPress.com: http://wordpress.com/themes/motif
WordPress.org: http://public-api.wordpress.com/rest/v1/themes/download/motif.zip

76. Illustratr
WordPress.com: http://wordpress.com/themes/illustratr

77. Espied
WordPress.com: http://wordpress.com/themes/illustratr

78. Capsule
Information: http://crowdfavorite.com/capsule/
Download for WordPress.org: http://sourceforge.net/projects/wp-capsule/files/1.1.1/capsule-server-1.1.1.zip/download

79. Roll your own with _s
_s (Underscores)
Download at http://underscores.me/

80. Enhance with plugins

81. Jetpack
Download at http://jetpack.me/

82. What to use in Jetpack
• Photon (load your images from WordPress.com’s CDN)
• Widget Visibility (chose what widgets appear on each page)
• Publicize (easily share your work with your social media accounts)
• Carousel (shows your images with a nice lightbox effect)
• Tiled Galleries (adds a bunch of different gallery layouts to chose from. I
love the tiled mosaic one)
• Contact Form (easily add a contact form to your site)
• Custom CSS (lets you customize your css without overwriting your theme)
• Portfolio custom post type (coming soon?)

83. NextGen Gallery
Download at http://wordpress.org/plugins/nextgen-gallery/

84. Contact Form 7
Download at http://wordpress.org/plugins/contact-form-7/

85. Portfolio Post Type
Download at http://wordpress.org/plugins/portfolio-post-type/

87. In general, worth looking at...
• Security plugin (BruteProtect, iThemes Security)
• Backup plugin (BackupToDropbox, BackUpWordPress)

88. Demo?

89. Thank you!
@melchoyce | choycedesign.com | melchoyce.com