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.
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.
Once you deploy, buy a domain name.
Don't create a full-stack app for your portfolio. That's overkill and expensive.
Case Studies
Portfolio 1
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
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
When clicking on links to page anchors, the page will scroll smoothly to that section.
Last updated
Was this helpful?