What to show in frontend portfolio?

Question

HTML

Something good, friends.
I had a question regarding the content of the portfolio of a freelance front-end developer - what exactly should be placed in it.
With the designer, everything is clear - the visual image of the product, beauty and nothing more.
In the backend - a list of skills and technologies that the developer owns. But the backend rarely communicates with unexplored customers.
The search basically shows 2 options for showing front-end skills:
1. the front-end acts similarly to the designer and places a picture + a link to a working site + sometimes info like a CMS, a framework.
2. maintains a blog / posts interesting layout solutions, etc.
I don't like the first option for several reasons:
- I believe that the consent of the designer is needed to place his work in my portfolio, especially without reference to the designer;
- if you post a link to the designer, then it would be extremely illogical to have no backlink, which is not common and I don’t want to specify such subtleties every time;
- the site may change its design after some time with the participation of another team, and the links will lead to the wrong place and the result of the work is not visible. designers do not have this problem, because the whole result is in the picture, and the link only refers to the customer.
- when mastering something new in the portfolio, it will appear only after an order using it, or a specially made "fake" - take a domain for it or what? pictures are few.
The second option seems to me of little use for freelancing (and I can’t say if there are freelancers with blogs without a portfolio), potential customers are not interested in layout problems, they need skills.
I prefer to place skills like a backend, but from the point of attracting customers, this is not enough. About the option of a portfolio similar to the designer - said above.
In the course of some thought, I decided to do the following:
- make a kind of portfolio, which will present different layouts of one design (my site itself, for example) with a few explanations in the blocks. as you master new techniques, add new layout options.
- separate block of skills/technologies.
Pros: the customer immediately sees everything that I am capable of; no "shameful" projects; update less frequently
Cons: no "shameless" projects; harder to update (not within orders).
Is this approach to portfolio content reasonable? Interested in the view from colleagues, customers, designers, project managers.
I also sometimes do the design itself (alas, the level still forces me to make a full circle of simple sites, I want to delve into the front-end), I plan to keep a separate portfolio and mention the possibility of ordering a full site in the front-end portfolio. How do exchanges look at 2 portfolios with different goals? How do people react to this?

Answer 1

I would recommend doing something like a gallery of work, something like the way designers do.
Those. we post pictures of the layout, this will allow you to visually immediately determine the complexity / unusualness of the work performed. By clicking on the picture - go to the made-up template. 1-2 pages of bare html and css, without the server side, or with partial emulation of the server side in js. This will allow a potential customer/employer to assess the level of your skills and the degree of knowledge of certain technologies.