Portfolio

Objectives

  • Use front end development skills to produce an aesthetically pleasing portfolio.

  • Showcase 3+ projects from WDI and beyond.

  • Market yourself to recruiters, hiring managers, and other individuals in the tech community.

Due Date

Portfolio and minimum requirements are end of week 11. You will present on this day.

WARNING

If you do not meet all minimum requirements by the due date, you will no longer qualify for Outcomes support.

Creating a portfolio

In order to market yourself and showcase your skills, you'll want to create a portfolio to illustrate your background, skills, and work. You'll also want to add methods of contact.

In order to design the portfolio, we'll focus on the content you'll want to include, then focus on some possible design choices and technologies. Lastly, we'll use some case studies to illustrate some good portfolios.

Content

Before beginning the design and coding phase of your portfolio, you'll want to identify, gather, and create the content needed to fill the page(s).

Required

  • A link from your GitHub user page to your portfolio

  • A picture/headshot of yourself

    • This should be a professional picture

  • An elevator pitch for yourself

    • This should be an "About Me" section that describes your background and experience

  • Resume

    • A clear link to your resume, above the fold

    • Two downloadable versions: 1 PDF, 1 plain-text version

    • A separate section where users can click and view your resume

  • Projects

    • 3+ projects (you'll add your final project after the cohort)

    • Each project should have a...

      • working link to live demo

      • title

      • list of technologies used

      • description

      • link to the Github repo

      • link to the deployed site itself

  • Contact information

    • Email address

    • Github link

    • LinkedIn link

    • Additional social media links

    • Phone number (optional)

Optional

  • List of tech skills

    • Angular, Express, Rails, etc.

    • Choose the skills that you are strongest in

  • Blog content

    • Do you like sharing what you've created and learned? A blog may be beneficial.

    • Jekyll is one of the better solutions for developer blogs

  • Testimonials and recommendations

    • Can people back up your skills? Ask classmates, colleagues, and other individuals for quotes.

Once you've obtained your content, you can focus on designing your portfolio, as well as picking the appropriate technologies.

Design

Your portfolio is a project in itself, so you'll want to follow some type of design process before actually creating it.

Suggestions

  • Create wireframes to give yourself a rough idea of what the portfolio should look like. Ask yourself or others some questions to refine your page.

    • Should the site be a single page layout? Multiple pages?

    • Do the layouts have space for all your content?

    • Is the content organized in a readable manner?

    • Can a recruiter or hiring manager find the important information?

      • Summary of who you are

      • Projects

      • Contact info

  • Think about how you want to brand and market yourself, and what type of components fit into your brand. This may involve additional research not covered in WDI. Topics like...

    • Color schemes

    • Fonts

    • Style (flat design, material design, etc.)

Technologies

There's several ways to create a portfolio, as well as host the portfolio. Once your portfolio is designed, you can worry about coding and deploying the portfolio. Some suggestions:

  • Don't complicate your site. Only use what you need.

    • Most portfolios can be static sites (HTML/CSS/JS).

    • Most portfolios can get away with a front-end design and JS frameworks (jQuery, Angular, React).

    • If you are going for a front-end position, don't skimp on design.

    • If incorporating a blog, think about using Jekyll (see additional resources).

  • Use Github Pages if you don't want to pay for hosting.

  • Don't create a full-stack app for your portfolio. That's overkill and expensive.

Case Studies

Portfolio 1

http://juliesakalys.com

  • Hosted on Github Pages

  • Has a domain name related to the person's name

  • Three pages

  • Attention-grabbing front page, with the person's name, location, and role

  • Links to contact info, resume, and projects

    • Contact info includes a form

  • Includes testimonials and quotes from peers

  • Utilizes icons and symbols

  • Incorporates clean design and color schemes

  • Provides an about page with skills and visuals

  • Provides a comprehensive portfolio

    • Note that since the portfolio is larger, the portfolio is sortable

Portfolio 2

http://cherylafitzgerald.com/

  • Has a domain name related to the person's name

  • Single page

  • Attention-grabbing front page, with the person's name, role, and links

    • Note that location is implied through the background image. This can be very powerful in order to keep things simple.

  • About section is concise (1 paragraph)

  • Skills are listed and organized by topic

  • Projects are listed with links, as well as the person's roles and skills used

  • Contact info is displayed as links to social media

  • Resume linked as a PDF

Conclusion

These guidelines and suggestions should provide a baseline for creating a portfolio. Keep in mind that appearances matter in a portfolio, so try to keep the technology stack simple in order to focus on branding and marketing yourself.

Example Portfolios

[Insert Excuse Here]

Whatever you’ve got, run with it. If you’re not proud of your portfolio, work on it. Don’t blame anyone for any work that you aren’t proud of. Talk about your past work and past work relationships in a positive light. Don’t speak poorly of yourself. Talk about yourself in a positive light, as well. Get it done. Get hired.

Additional Resources

PreviousPart 2: AngularNextWeb Development Trends

Last updated