A portfolio is a selection of completed works. The portfolio is selected best works who demonstrate the strongest skills, style, methods of work. The portfolio is used to show employers how well different jobs have been done, to prove the versatility of the performer.

The portfolio of artists includes reproductions of paintings or electronic copies, a musician - audio recordings, a composer - sheet music, a video operator - fragments of video recordings (the list is conditional, everything can be more complicated). The big difference between a portfolio for web-related majors is interactivity, as it is typically done as a set of hypertext-navigated web pages. A web portfolio can be viewed more broadly - a blog, a web archive of files for all works, an Internet site. In a web portfolio, you can include information about the personal and professional qualities of a specialist, the history of his development and professional interests.

What is the difference between a portfolio (Portfolio) and a resume (CV, Curriculum Vitae)

A resume is a document containing information about skills, work experience, education, and other relevant information usually required when considering a person for a job.

A resume can be based on a portfolio. From the resume, you can make links to the works published in the portfolio.

Where to place your portfolio

The options I have used or would have used:

• Attractive portfolio sites can be made using the Wix website builder - no coding or layout knowledge required - suitable even for those who are just planning to learn web technologies
• GitHub Pages - free service for publishing static information, closely related to GitHub repos
• as a repository of simple works (HTML + CSS + JS), you can use Сodepen (example http://codepen.io/copist) - many people like this, because interesting works can be copied and experimented with
• a portfolio in the form of a blog based on WordPress on free or paid hosting
• make your portfolio site yourself in some programming language and place it in cloud service Cloud9, which is also a user-friendly development environment instead of a desktop IDE.

List of specialized portfolio services: Where and how to create a business card site, portfolio or gallery [lifehacker]

Based on personal experience, I would like to recommend storing backups of all completed projects (entire websites or individual web pages) on your hosting. I came across the fact that for 15+ years, some of the sites that I worked on, no longer exist, and some have changed significantly. And if you have backup copy individual pages or an entire project, you can link to your copies if the original projects no longer work or have changed a lot.

This WordPress-based blog is hosted on a paid shared hosting TheJetHost with a convenient control panel, and several projects written in Javascript and PHP are running on it. For more complex projects based on NodeJS, Python, Ruby and PHP, I use the Virtual Dedicated Server on FirstVDS and DigitalOcean.

What should be included in the portfolio?

1. Contact Details

After reading the story in the portfolio, they will want to contact you. It is necessary to give several ways, but not too many. Addresses Email will be enough, you can still add the service quick exchange messages (Skype, WhatsApp or Telegram), it is undesirable to post a phone number on the site. You can use services that will replace your email and phone number with pictures.

2. Biography (Bio, About)

It is not necessary to indicate every little thing, especially if the experience is more than 10 years. List only what is relevant professional activity... Do not use standard phrases, add some personality. Don't use a joke or any other way to demonstrate a sense of humor - this is a good character trait, but since the biography is at the very beginning of the portfolio, you can involuntarily come across as a frivolous person.

Write a story about yourself in good Russian. This is a universal advice for all occasions: everything can be told and explained, and if you cannot express your thoughts in an interesting and understandable way, then this is a red flag - it will be worse further: perhaps the author of such a biography can neither agree with the employer, nor understand the task nor describe the solution.
And two or three interesting paragraphs will catch your attention, make you stand out from the rest. Competent speech without mistakes will inspire confidence.

Usually they indicate here what brought you into the field of information technology - some kind of hobby, idea, passion, passion - tell us about it, because this is what made you who you are. You can describe what the result was, but not a listing of known technologies - there are other sections of the portfolio for this.

A well-written biography will help you move to the level that I call "I read it - and it is as if I have known the person for a long time." I haven’t seen each other yet, but I already want to talk, moreover, to talk about some specific interesting topic.

3. Relevant experience

You only need work that is related to the work that you WANT to do. You may have been a designer or SEO in the past, and now decided to become a web programmer. Exclude from portfolio work, which you would not like to do anymore as well as those which may not come in handy while working in this position.

• Did you do your SEO work accurately and punctually, did everything accurately and on time? OK, good as a demonstration of neatness, especially if the site is in the TOP.
• Did you draw website designs yourself? Suitable for.
• Did you take the team home? It is clear that this is a good deal, but this point is not needed.

When looking for a new job for the same profile, the portfolio is jam-packed with completed work. But what should beginners do? Where to get the job if you haven't done anything of value yet?

List of jobs for beginners:

• For students - yours coursework or qualification work, if she was in this specialty.
• List all independently performed work. Academic work on the rigid educational process are not quoted, “sterile” works from codecademy and htmlacademy are not needed. Only those where there was significant independent work... Even if this is an independent work when studying a book, even if it was an attempt to do (blog, forum, online store, photo gallery), a project for friends, a class website - if you did everything yourself, then this is your job and your experience, they are appreciated.
• If participated in a competition of works, but your work did not become prize-winners - this is your experience, add your work here.
• If performed a test task when applying for a job, this is your work, the results of which can be demonstrated (example).

Each work must be accompanied by a description:

1. Date or period of completion of the work
2. For whom and what was planned to be done. This can be a technical assignment, a description of a task in the usual style, a layout in the prototyping system, a graphic layout (PSD), a screenshot, an algorithm flowchart, an API specification.
3. What I did in the end. Screenshots will do (they will look very beneficial screenshots before and after improvement), links to backup pages with results or to pages of an active site, links to the repository source code.
4. Which turned out well. What caused pride, joy, inspiration. It could be yours personal description, review customer on the freelance exchange, review colleagues, comments in social networks... Maybe there was the prize from a customer or a company?
   Indicate which technical and non-technical skills were useful or emerging.
5. (for beginners) What didn't work out well. How could this be fixed.

The works should be placed in chronological order, the most recent first. The maximum "depth" of history is 3-4 years. Older ones should be deleted or only mentioned about them. I also recommend removing the fifth paragraph of the job description from the portfolio after employment (“What didn't work out well…”), so that only good things about yourself and your work are left there. But you can leave it if you regularly update the list and in this fifth paragraph update the options for correcting shortcomings, taking into account modern knowledge, methods, skills ("now I would ...").

4. Relevant Skills

You don't have to go crazy and list everything that you know how to do. Highlight what you you do best.

Do not bring here what you are would like to know or be able to- this will turn out sideways for you: either you fail the interview, or you will badly do what you don’t know how to do.

4.1. Professional, technical skills (Hard Skills)

An example of a list of skills for one of my female support students:

JavaScript programming language

• functional programming
• modular architecture

jQuery

• jQueryUI
• templating ($ .tmpl)
• HTML5 routing ($ .routing)

AngularJS

• basic application architecture
• templating
• routing

MySQL

• data model design
• indices
• foreign keys
• import / export of structure and data in console mode

• configuring project dependencies
  • composer
  • bower
• preprocessors
  • SCSS
• assembly of projects
  • webpack
  • grunt
• working with the git versioning system
  • github
  • bitbucket
  • + installing the product from the git repository on the Ubuntu server
• PHP programming language
  • functional programming, basic control structures, the basics of object-oriented programming
• Laravel 5 framework (PHP)
  • routing, simplified
  • work with the base, simplified
  • REST implementation
  • work with JSON
  • form data processing
• CMS WordPress (PHP)
  • creating and changing themes
  • customizing widgets
• CMS Joomla (PHP)
  • creating and changing themes

Big list, isn't it? And for each of the items, it is necessary to indicate which work can confirm the skill, that is, indicate hyperlinks to the works from the first item of the portfolio. Make sure that there are no "broken" links.

Proof of technical skills is essential. Sometimes this can be extremely difficult, for example, due to a signed nondisclosure agreement (NDA). In this case, you will not be able to insert the results of your work into the portfolio and, surprisingly, you are no different from a novice programmer with the same empty portfolio. For example, for this reason, I have an empty profile on Upwork and some ancient works on fl.ru - I have been working with closed projects for more than five years. I have experience, but there are no examples of work.

To "close the gap", you will need to come up with and implement, which will demonstrate your skills. Your difference from a beginner is that you can design correctly and implement quickly. Literally a couple of weekends and a new service is ready, like. Do not forget to upload the result to the repository and add a high-quality instruction, such as I have in one of my early test tasks - a link shortener.

4.2. Non-technical skills, personal qualities (Soft Skills)

A list of skills that are not related to the specialty, but are highly valued by employers and customers

• Technical writing skills - writing technical specifications, messages, notes; collect all the details about the task; illustrate; write briefly and correctly, in essence, understandable
• Joint work in a team - not to be alone with problems, but to solve together; divide tasks into parts to do in parallel; protect team members; to help; share your knowledge and skills; learn from the team; be able to identify internal problems of the team and find options for their solutions
• To be able to find solutions - the ability to identify the problem, independently look for solutions to the problem, try different options, not ask for help without trying to solve, not sit helplessly waiting for solutions from the outside; knowledge is also appreciated - to whom with what problems to contact, so that programmers do not move furniture, and loaders do not write programs
• To be able to make flexible decisions - the ability to quickly change your decisions to meet the current business requirements, with a minimum investment of time, without loss of quality, stability, clarity
• Be responsible for your decisions - the ability to make technical decisions and bring them to the end, despite the difficulties and tight deadlines; concentrate on the task; root for her with all my heart
• Ability to remain calm - not to bring a problem to an insoluble one, to find constructive solutions to problems, not to turn the conversation into an argument, not to get personal, find a way out of conflicts, be able to calm down
• Ability to work remotely - to have skills effectively working together with colleagues who are not around; independent implementation of technical capabilities remote work, discussion of work issues remotely, coordination of the time of a geographically distributed team for joint events, exchange of solutions with remote colleagues
• Ability to concentrate - the ability to quickly switch to work mode, adhere to the work schedule, problem solution plan, task priorities, the ability to concentrate in the absence of outside control when working remotely
• Being dedicated - the ability to maintain internal motivation, understand and support the goals of the team and the company, maintain trust in the team, loyalty to the company
• Ability to look - dress for the situation, always present yourself, the team and the company in the best possible light

Demonstrate such personal qualities in the portfolio - even more difficult task than to prove technical skills. But it is believed that professional growth is provided by 15% technical skills and 85% personal, so although it is difficult, well it is necessary.

Do you have any ideas what from this list you can to demonstrate in portfolio and how to do it? Let's exchange ideas and make our portfolio as efficient as possible. For a customer or employer to look and say - “Oh, this special is worth its weight in gold! He is the one I need! "

Here's an idea of ​​how a tester could showcase the skills of describing bugs found during testing in a portfolio: Practical advice on building a portfolio for testers.

5. Attestation, certificates, diplomas (Certification, Certificates, Diplomas)

In order of increasing importance

1. just a list of courses that took
2. links to pages that list lessons learned, completed tasks (htmlacademy.ru, codewars.com) or at least badges for achievements (codecademy.com)
3. links to courses where virtual certificates are issued
4. online certificate (electronic or paper version)
5. certificate for offline testing (electronic or paper version)
6. diploma of higher or special education

For the fourth and fifth points - a list of resources where you can get a certificate:

On the third point - a list of services that have questionnaires with a not very strict assessment, while employers and customers pay attention to the results:

I often see graphical indicators of the level of knowledge in profiles, the so-called Skill Bars. I propose to use my service Technology Stack Questionnaire for a web developer to build such graphs.

Knowledge of foreign languages ​​is appreciated, so certificates from foreign language courses will be appropriate.

6. Suitable Social Profiles

• Github
• Linkedin

Bitbucket is rated less than Github, but linking to your profile on this service is also good. The Russian analogue of Linkedin is MoyKrug, I met excellent profiles of web developers there, just candy.

A good addition would be a link to stackoverflow, hachcode, toster and other professional developer communities, especially if you have a high reputation there.
If you have your own professional blog or professional Youtube channel, this is a valuable link in your portfolio.
Uploading slides from your conferences to SlideShare - great.

You can, of course, indicate your Twitter, Facebook, Vkontakte, if any. I am personally ashamed of them, because there is a big risk of filling my feed with all sorts of frivolous likes and re-posts, but these profiles will allow the customer or employer to get a better idea of ​​you as a person. Usually, professional qualities manifest themselves over time in hobbies, interests, interests and relationships with other people (this is called professional deformation).

7. Gaining new knowledge (Self-Studying, Mastering, Skill Growing)

“Live and learn” is about information technology. You need to learn new things constantly. And it would be nice to reflect that in a portfolio.

I have met qualified specialists who, for various reasons, forcedly or deliberately, stopped following the technologies. They reached high level mastery in one narrow specialization. But life made them change their place of residence or go to remote work and it turned out that there are no good proposals in their specialization, and their 10+ years of experience in narrow specialization is not enough in the new market. Some people don't even know what the web and HTTP are at all. Some people write a C database from scratch instead of using popular SQL / NoSQL solutions.

In 2003, I left the company that was developing a billing system for housing and communal services, because I felt that I was locked in a narrow specialization, in one technology, it would be difficult for me to change jobs and I would forever remain attached to this company. Now I know enough about different billing and payment systems and I know more than two dozen programming languages. Not all of them are even 50%, but I can figure out someone else's code. This allows me to be a versatile web developer.

One 45-year-old programmer asked him to draw up a plan for studying technologies for 5 years in advance with the goal ... not to be bored in retirement and not to depend on the state. Yes, if he finishes the plan, then he will not be bored or hungry. Information Technology- the fastest growing area - his knowledge will be 100% useful.

And how are you doing with self-education? Where do you plan to go to study? What are you planning to study? What are you studying now? What are you experimenting with?

Demonstrate to the employer that you have not stopped your training. Do not write a long list so as not to create the feeling that you are grabbing 10 things and jumping to the top. Use other tools for planning, such as the Todoist taskbook or the SmartProgress goal setting service.

8. Professional interests

These are just professional interests, nothing personal.

This section of the portfolio is needed in order to convince the client or employer that your interests intersect now and will intersect in the future. The presence of common interests is a good motivating factor and a certain guarantor of the stability of effective cooperation for both parties.

8.1. Current interests (Professional interests)

It is necessary to list the current professional interests, according to which the employer or customer will determine what you want now.

Examples of professional interests:

1. Get practice in PHP development
2. Explore Yii, Zend, and Symfony2 frameworks.
3. Become a Zend Certified PHP Engineer
4. Deepen your knowledge of Javascript, Angular.js, Node.js

8.2. Professional aims

Your interests for the next 3 to 5 years, so that the employer understands where will you develop.

Examples of professional goals:

• Carry out a full cycle of web development from design to maintenance
• Develop a professional web tool (framework, CMS, CRM or other) for some special application
• Work with end users, with clients
• Create a high load web application
• Create a multilingual web project
• Develop a multi-platform web application
• Become a development team leader
• Explore Internet Marketing and SEO
• To work remotely
• Communicate fluently in English

How much to publish interests and goals is up to you. You can only outline the landmarks (a kind of todo list), or you can paint the plan in detail, indicating the timeline marks, as is done in SmartProgress. Planning is a great skill, even if the plan is not being implemented on time.

9. Photo (Photo)

Your portfolio must include your high-quality photograph. People prefer to see people. Meeting with the eyes decides a lot. People trust more those they see. In fact, they already feel that you are there and are trying to figure out how you are part of the team.

Choose the highest quality photo. Style - business, but not too strict (Business Casual). For inspiration, google for the phrase "male photo portfolio." Be in the photo as you would have been after some official meeting ended, but how the banquet began.

Human Resources staff complain about beach photos in swimsuits, bars with beer mugs, glamorous party photos, and group photos. Unsuccessful photos are obtained in the cold season, when the face is covered with clothes (scarf, hat, hood). Selfies (a photo of oneself with an outstretched hand or a special device), a photo in a dark corner of the park, in the wild thickets, against the background of a carpet and old wallpaper also give rise to a negative impression - as if a person is hiding, shy, cannot ask friends or passers-by to take a picture of him.

Try to take at least one single high-quality photo in the studio or on the street. Before you put it in a portfolio - let others rate it, preferably a specialist in the selection of personnel.

10. Download version (Printable Copy, Hard Copy)

Many people prefer to have a printed copy of their resume or portfolio. Design your resume in the form of a document that can be printed or make a printer-friendly portfolio site. According to HR specialists, there is no "best" document format, so I recommend having identical versions in PDF formats and DOC, ODT just in case and just HTML. If you give me a link to a service that supports all these formats at once, thank you very much!

I advise you to add a short link and a QR code to the copy for printing to go to the online version of the web portfolio from a smartphone or tablet. It is better if the web portfolio is implemented with responsive layout support.

Do you want to have this sheet at hand? Download the entire article in in electronic format entirely (format: html or PDF, volume ~ 10 A4 pages, reading time 5 minutes)

Finding a good website or application developer is not easy today. Especially if you do not know what specific skills and experience he should possess.

You can have a lot good ideas for their business, while not having the technical skills to implement them. Whether you're hiring a freelancer, web studio, or full-time professional, go through a candidate's portfolio thoroughly, paying particular attention to the six points below.

Websites you like

Track your first impressions of the work featured in the candidate's portfolio. Try to put yourself in the shoes of the customers of these sites. Do you like these works? Pay attention not only to the design, but also to the quality of the layout, meta tags and others important details... It's good if your portfolio already has a site that matches your tasks in many ways. This will make it easier for you to predict whether you will be happy with the result of the developer's work.

Site performance

Websites should load quickly because modern user won't wait long for your page to open. If the page does not appear in front of him this very second, he will simply go to another site. According to Kissmetrics, sites that take 4 seconds or more to load can lose 25% of their visitors. That is, in the case of a prolonged load, one in four visitors will leave without waiting for the page to open.

Therefore, we advise you to check for speed a couple of sites from the portfolio of your potential developer. The easiest way to do this is with Google PageSpeed ​​Insights.

Enter the site URL on the page PageSpeed ​​Insights and check its speed.

PageSpeed ​​Insights will show website speed on desktop and mobile device... This indicator is like an assessment in a certificate. 85 out of 100 is a solid four. Anything below 60 is a deuce. The PageSpeed ​​Insights report will also provide some recommendations for improving load times.

PageSpeed ​​Insights will measure your site's loading speed.

If you'd like to get some extra site score, try Pingdom's Website Speed ​​Test, which will show you load times and page size.

Pingdom's speed test will show you load time and page size.

If your developer portfolio pages are slow to load, you might want to look for another candidate. But first talk to him about loading speed, because not every aspect of page speed is under the control of the developer. For example, a client might be specific about a platform or provider, which affected performance.

Site functionality

Test sites from the portfolio of a potential developer for functionality. All click, fill out the forms or make a purchase. It is important to understand that on a commercial site, even the smallest gaps in functionality can hinder sales. You need a good developer who can make an intuitive, easy-to-use site with rich features and functionality.

It is worth focusing on these indicators:

• navigation;
• search on the site;
• sorting and filtering goods;
• adding items to the cart;
• checkout process.

Web accessibility

The creation of a really high-quality site assumes its availability for all categories of users, regardless of the physical capabilities of their gadgets and computers.

Therefore, test the sites in your candidate's portfolio against the general web accessibility guidelines. The WAVE Web Accessibility Evaluation Tool will help you with this. Just enter the URL of the page - WAVE generates a report with possible problems with availability.

Not everything that WAVE reports is actually accessibility issues, but it's still a good tool for spotting potential errors.

Clean code

Clean code is a rather subjective thing, but in any case it can be defined as code that is easy to read and modify. Code cleanliness is important because it allows you to quickly make changes to your site. Let's say, for example, that your freelance developer suddenly moves or takes a full-time job and you need to hire someone new to work with your site. If the code is clean, it will be much easier for a new person to figure it out quickly.

Unfortunately, most of the page code can be hidden from you. Often this is basic code written in PHP, Ruby, etc. It is important that everything is clean here. But you can look at some things on the surface that can be indicators of how well your candidate is coding. For example, you can use the HTML validator from the World Wide Web Consortium (W3C). This tool will give you a list of warnings and errors in the HTML of the site.

The W3C HTML validator will show possible HTML errors.

Almost every site that you test this way will have errors and warnings, but in this case their relatively moderate amount is important.

Personal projects

The best web developers are always genuinely passionate about their work and tend to have many personal projects in their portfolios. It can be websites or apps for friends, HTML5 games, interesting personal blog etc. Rate these works like everything else in the portfolio. But also pay attention to balance in these works. A portfolio shouldn't be just personal projects.

Obviously, a web developer is a very important person for your project. After all, he is responsible for the face of your brand, its online image, as well as for your interactions with customers. Therefore, in order not to harm your own business, it is very important not to be mistaken in choosing the right person for this position, which is what we wish you!

What should be a programmer's portfolio? It is different for each position, but there is General characteristics that employers pay attention to.

Usually newbies try to impress with a large portfolio. But often in the area that interests the employer, they have nothing to show. This directly affects wages and, in general, the chance that a person will be hired.

Let's consider various options.

Programmer's portfolio

The first thing that comes to mind is GitHub, and for good reason: today, absolutely all projects and progress on working on them are stored in convenient repositories. But it is not so difficult to understand Git as it is with what exactly to fill your "portfolio". It is with the second that we will deal.

First, disregard the idea that the tasks from the courses and short video tutorials will be enough to satisfy the employer's interest. You will have to create something really interesting on your own, without the help of books, YouTube, teacher, project partner, etc.

What could it be?

1. A standard project in a custom wrapper. Let's say you can submit the same calculator, but with beautiful animation, or visualize sorting, making it an entertaining game.
2. Speaking of sorting, one cannot fail to mention algorithmic problems. Having such solutions in your portfolio is a huge plus. Be sure to check out our articles and.
3. Complex jobs should prevail. At the same time, it is good if they are with unit tests, a log file and a badge in the README from any service for building and testing software.

Do not overwhelm your resume with all sorts of programs that were designed to explain the principle of operation of a particular tool to you. The employer knows all these "tricks" 100%, and if you really want to implement something, do it as succinctly and interestingly as possible.

For the same reason, you should not show projects "in the process of development", even if they are well, oh, very cool. Here's how to finish - show it boldly. Plus, it will be an incentive for you personally to bring what you started to the end.

The programmer's portfolio should include what is advertised in the job requirements. For example, if this is a Java developer's position, and the conditions indicate knowledge of Hibernate, do not be lazy to add the corresponding development to the portfolio. Also, do not miss the opportunity to implement databases: this is an unwritten law that is relevant, if not for everyone, then exactly for 99.99% of vacancies.

With regard to the sequence of work, make sure that the most interesting to the employer are on the list above, since the first impression plays an important role, and sometimes even decisive.

It is also not necessary to format your resume in Word or any other text document... Get creative: Start a blog with links to your work. If this blog also contains questions from newbies and your meaningful comments to them, this is a huge plus: believe me, this will not be ignored.

Web Developer Portfolio

Now let's move on to the most juicy - to what you can not only read, but also "feel". In terms of portfolios, web developers have complete freedom: any knowledge and skills can be demonstrated on a personal one-page website or contact finished projects, if you have already had work experience before.

Rule of thumb: Don't let your employer only suspect you of being a web designer. Beautiful design- this is great, but first of all you show the programmer's portfolio. Demonstrate what kind of functionality you can provide a site: not mail forms or something else trivial, but a full-fledged toolkit.

For example, this is a site for an auto parts supplier who contacts their customers not directly, but through operators. Link the program responsible for calls to the site, with the ability to record the time of the call from the operator's side in the database.

For example:

• have experience with analyzing and logging into MongoDB;
• optimization of such parts of the server;
• development of a server script in such a language.

This is especially important. And only in Additional information you can add something like:

• website development from scratch;
• completion of ready-made sites;
• installing plugins for WordPress;
• load optimization, etc.

But everything again returns to the requirements of the employer, which must be paid attention to. For example, a company is looking for a program logic specialist, while layout and design remain with others. Or the situation may be reversed, and the requirements will include a full-fledged website.

What can a business card site contain as a programmer's portfolio?

Freelance programmer portfolio

You don't need to open America here, since freelance services already require a portfolio, and you won't have to come up with various business card sites.

Fill your portfolio with quality work as quickly as possible. Your strength is that you can choose, and if the project seems downright weak - just filter it out, preferring really interesting options.

Do not think that the policy of freelancing is too different from the policy of standard employment, especially when it comes to long-term cooperation. Try to interest, impress, find out the details of the work, while asking the most correct questions.

Here's an example of a good answer to one of the freelance jobs:

The developer immediately shows that he knows what he can, and what is his approximate level. This is a really impressive answer, backed up by a strong portfolio (even just in the form of links to GitHub), you can be guaranteed to get a job.

This collection includes templates for various professions, but, in general, programmers, web designers or layout designers will appreciate the topic, since in terms of design and structure they are more suitable for them.

We have previously published collections with templates for creating a portfolio. For example:

Clean

Professional, clean for creating a personal portfolio and personal page for an independent web developer. Perfect for designers, layout designers or programmers.
The template is fully responsive, has a cool animation of the appearance of elements when scrolling with fully valid code.

Gorgo Portfolio

Free, very clean and stylish designer portfolio template... Completed in the style of minimalism... Also has a cool full screen menu.
The grid with examples of works is made following the example of a chessboard, which is very pleasing, since this is a trend. The work page itself impressed me a lot, probably because of the high-quality demo content. If you intend to use this particular design as a personal page, take care of the quality design of the work itself.

Lithium

Free responsive template in style Flat, which is suitable for almost any freelancer, be it a web developer or a photographer, since the page provides both a familiar portfolio with a filter by work category, and photo gallery.

Brandy

Another extremely quality template for creating a personal portfolio... It has many goodies that everyone loves so much: Parallax effects, the effect of the appearance of blocks when scrolling, smooth scrolling, various counters and, of course, the block of the portfolio itself.
The template is absolutely free and is suitable for freelancers of any IT profession.

Kong

Interesting html template designer portfolio... On the first screen, you can place your photo, introduce yourself and write your specialty.
Almost all blocks in the template are implemented those that we are used to seeing in the standard Landing page.
As for the color scheme, I would change it. Too poisonous.

MyFolio

Great responsive one-page portfolio in shades of green. Suitable for both a solo freelancer and a development team. The template is made with high quality and deserves attention.

Basic

Strict pattern in blue to create a portfolio. Built on Bootstrsp 3.2. If you replace the icons in the first screen, you can use it for freelancers in any field of activity.

Small

Small one page html template in flat style... It is split into three screens with 100% height. The first screen is a photo and brief information about the freelancer.
The second screen is the portfolio. The last 8 works from your portfolio on dribbble... That is, all you need to do is set up the integration with and that's it. The images will update themselves, in sync with your Dribbble activity.
The third screen is Contact Information.

Kelvin

A quality, versatile HTML5 CSS3 template. It is very similar to Ceevee, which was in this collection above, but there are some differences in the concept of the block with examples of work and in the graphs that display the skills of a freelancer. The possibility of a detailed story about yourself using various blocks is provided.

Portio

An interesting, universal template, although there are many things that I would not use it for: these are stupid fonts, poor buttons. Perhaps someone will be interested in this option. After all - a bright color scheme. If you correct it a little CSS styles, you can come to a good result.

Port

Free and I would even say elegant one page template based on Bootstrap. Personally, I like the red hotspots. The block with examples of work is made in the form of an intricate grid, and this is a plus. This template will be an excellent solution for creating p ortholio of a web designer or programmer.

Hexa

Multi-page Flat-template with a slider in the header in a distinctive color scheme - green. Using this solution, you can create a great business card site with examples of work and a blog.

Freelancer

Great one page flat style and green colors. The first screen provides a place for a photo, or better, so as not to spoil the style, a drawn self-portrait of the site owner.
The template is small, and this is a huge plus, since there is no need to use footcloths for our purposes. Made, surprisingly, very high quality. It is fully responsive and based on the Bootstrap framework.

Dribbble Portfolio

Another template with a portfolio integrated with Dribbble... You just need to set up the upload of the latest works and forget about the constant, tedious updating of the portfolio on your personal page.
The template is made in a strict, modern color scheme. Everything looks very clean.
Just like the previous Dribbble template, it is small. I would even say laconic. In general, my rating is 9 out of 10.

Geek

Not bad, although it feels a little heavy freelancer portfolio template as landing page... He has various charts to visually display the skill level in his activity profiles - it's interesting. There is also a testimonial slider and a nice grid of photos that you can use to showcase your work.

Dribbble Folio V2

Free auto-filled portfolio template... Works are imported from the site Dribbble... Before use this decision, don't forget to set up integration with your Dribbble profile.
Unfortunately, there is no demo.

Harbor

Original html css pattern in purple tones to create a personal website. This is a multi-page theme, where the main is made in the style of a one-page, but, in turn, there are also inner pages... Suitable for creating freelancer personal website any specialty.