{"id":42060,"date":"2024-01-18T19:06:34","date_gmt":"2024-01-18T22:06:34","guid":{"rendered":"\/tutoriais\/?p=42060"},"modified":"2024-01-18T19:06:37","modified_gmt":"2024-01-18T22:06:37","slug":"sites-portfolio-exemplos","status":"publish","type":"post","link":"\/br\/tutoriais\/sites-portfolio-exemplos\/","title":{"rendered":"Os 19 melhores exemplos de sites de portf\u00f3lio para fot\u00f3grafos, artistas, escritores e mais"},"content":{"rendered":"<p class=\"wp-block-paragraph\">Um portf&oacute;lio digital &eacute; um cart&atilde;o de visita que ajuda a destacar seus melhores trabalhos e aumentar a sua visibilidade online, abrindo oportunidades para poss&iacute;veis empregos e colabora&ccedil;&otilde;es. No entanto, criar um portf&oacute;lio online que se destaque pode ser desafiador, e &eacute; por isso que recomendamos analisar os melhores exemplos dispon&iacute;veis na internet antes de mergulhar no processo de&nbsp;<strong>criar o seu pr&oacute;prio site<\/strong>.&nbsp;<\/p><p class=\"wp-block-paragraph\">Este artigo lista 19 exemplos de portf&oacute;lios com diferentes fun&ccedil;&otilde;es, incluindo sites de escritores, estudantes e figuras p&uacute;blicas, e destaca o que torna cada um deles especial. Tamb&eacute;m falaremos sobre os cinco principais elementos que voc&ecirc; deve levar em conta para criar um portf&oacute;lio cativante.<\/p><p class=\"has-text-align-center wp-block-paragraph\"><a href=\"https:\/\/docs.google.com\/document\/d\/14TYg5ZY4-IszYoepRipjT8PNp_WVuplO\/copy\" target=\"_blank\" rel=\"noreferrer noopener\">Baixar modelo de curr&iacute;culo atrativo de desenvolvedor web<\/a><\/p><p>\n\n\n\n\n\n\n<\/p><h2 class=\"wp-block-heading\" id=\"h-sites-de-portfolio-para-individuos\"><strong>Sites de Portf&oacute;lio para Indiv&iacute;duos<\/strong><\/h2><p class=\"wp-block-paragraph\">Um &oacute;timo ponto de partida para criar o seu site &eacute; entender&nbsp;<a href=\"\/br\/tutoriais\/como-criar-um-site-passo-a-passo\/\" target=\"_blank\" rel=\"noreferrer noopener\"><strong>como criar um site &uacute;nico<\/strong><\/a>&nbsp;e buscar inspira&ccedil;&atilde;o para ver o que funciona para voc&ecirc; e para o seu setor.<\/p><p class=\"wp-block-paragraph\">Aqui est&atilde;o os quatro melhores exemplos de portf&oacute;lio feitos para indiv&iacute;duos e marcas pessoais. Na lista abaixo, pense em como voc&ecirc; pode implementar as&nbsp;<a href=\"\/br\/tutoriais\/ideias-para-criar-um-site\/\" target=\"_blank\" rel=\"noreferrer noopener\"><strong>ideias de sites<\/strong><\/a>&nbsp;deles no seu pr&oacute;prio.<\/p><h3 class=\"wp-block-heading\" id=\"h-1-enrico-deiana\"><strong>1.&nbsp;<\/strong><a href=\"https:\/\/www.enricodeiana.design\/\" target=\"_blank\" rel=\"noreferrer noopener\"><strong>Enrico Deiana<\/strong><\/a><\/h3><div class=\"wp-block-image\">\n<figure class=\"aligncenter size-large\"><img decoding=\"async\" width=\"1024\" height=\"583\" src=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/53\/2024\/01\/1-enrico-deiana-1.png\/w=1024,h=1024,fit=scale-down\" alt=\"enrico deiana, exemplo de portf&oacute;lio online\" class=\"wp-image-42067\" srcset=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/53\/2024\/01\/1-enrico-deiana-1.png\/w=1024,fit=scale-down 1024w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/53\/2024\/01\/1-enrico-deiana-1.png\/w=300,fit=scale-down 300w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/53\/2024\/01\/1-enrico-deiana-1.png\/w=150,fit=scale-down 150w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/53\/2024\/01\/1-enrico-deiana-1.png\/w=768,fit=scale-down 768w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n<\/div><ul class=\"wp-block-list\">\n<li><strong>Diferenciais:&nbsp;<\/strong>v&aacute;rias micro-intera&ccedil;&otilde;es e extens&atilde;o de dom&iacute;nio espec&iacute;fica do setor<\/li>\n<\/ul><p class=\"wp-block-paragraph\">Enrico Deiana &eacute; um designer de internet e produtos baseado na It&aacute;lia. &Uacute;nico e envolvente, seu portf&oacute;lio recebeu uma Men&ccedil;&atilde;o Honrosa no <a href=\"https:\/\/www.awwwards.com\/\" target=\"_blank\" rel=\"noreferrer noopener\"><strong>Awwwards<\/strong><\/a>&nbsp;de 2022.<\/p><p class=\"wp-block-paragraph\">Assim que os visitantes acessam o site, eles veem um efeito de deslizar e uma imagem principal com t&iacute;tulo chamativo, informando imediatamente aos visitantes o que ele faz e criando uma &oacute;tima primeira impress&atilde;o.<\/p><p class=\"wp-block-paragraph\">Conforme voc&ecirc; rola para baixo, existem v&aacute;rias micro-intera&ccedil;&otilde;es, incluindo:<\/p><ul class=\"wp-block-list\">\n<li>O estilo do cursor muda ao passar o mouse sobre links clic&aacute;veis.<\/li>\n\n\n\n<li>O fundo muda quando o cursor pousa em uma &aacute;rea de portf&oacute;lio.<\/li>\n\n\n\n<li>Texto animado, fotos e bot&otilde;es de chamada para a&ccedil;&atilde;o.<\/li>\n<\/ul><p class=\"wp-block-paragraph\">A p&aacute;gina Sobre tamb&eacute;m &eacute; envolvente e informativa. Ela mostra v&aacute;rios certificados e pr&ecirc;mios usando um efeito de rolagem suave e t&iacute;tulo animado.<\/p><div class=\"wp-block-image\">\n<figure class=\"aligncenter size-large\"><img decoding=\"async\" width=\"1024\" height=\"584\" src=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/53\/2024\/01\/2-enrico-deiana-2.png\/w=1024,h=1024,fit=scale-down\" alt=\"exemplo de portf&oacute;lio de enrico deiana\" class=\"wp-image-42068\" srcset=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/53\/2024\/01\/2-enrico-deiana-2.png\/w=1024,fit=scale-down 1024w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/53\/2024\/01\/2-enrico-deiana-2.png\/w=300,fit=scale-down 300w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/53\/2024\/01\/2-enrico-deiana-2.png\/w=150,fit=scale-down 150w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/53\/2024\/01\/2-enrico-deiana-2.png\/w=768,fit=scale-down 768w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n<\/div><p class=\"wp-block-paragraph\">Enrico aprimora seu portf&oacute;lio adicionando informa&ccedil;&otilde;es sobre sua ag&ecirc;ncia de web design, incluindo uma p&aacute;gina de pre&ccedil;os com descri&ccedil;&otilde;es de servi&ccedil;os.<\/p><p class=\"wp-block-paragraph\">Esta pode ser uma &oacute;tima maneira de obter leads mais rapidamente. Outro aspecto interessante deste portf&oacute;lio online &eacute; o uso do&nbsp;<a style=\"font-weight: bold\" href=\"\/br\/tutoriais\/o-que-e-tld\/\" target=\"_blank\" rel=\"noreferrer noopener\">TLD<\/a> <strong>.design<\/strong>, fortalecendo a marca pessoal de Enrico como designer.<\/p><p>\n\n\n    <div class=\"domain-checker\">\n        <h3 class=\"domain-checker__heading\">Ferramenta de Pesquisa de Dom\u00ednio<\/h3>\n        <p class=\"domain-checker__description\">Descubra se um nome de dom\u00ednio est\u00e1 dispon\u00edvel<\/p>\n        <form id=\"domain-checker-form\" class=\"domain-checker__form\" action=\"\/registro-de-dominio\">\n           <div class=\"domain-checker__icon\">\n               <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\">\n                   <path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M15.3224 16.7375C13.9306 17.8263 12.1782 18.4752 10.2742 18.4752C5.74548 18.4752 2.07422 14.8039 2.07422 10.2752C2.07422 5.74646 5.74548 2.0752 10.2742 2.0752C14.803 2.0752 18.4742 5.74646 18.4742 10.2752C18.4742 12.1792 17.8253 13.9316 16.7366 15.3233L21.631 20.2179C22.0216 20.6084 22.0216 21.2416 21.631 21.6321C21.2405 22.0226 20.6073 22.0226 20.2168 21.6321L15.3224 16.7375ZM16.4742 10.2752C16.4742 13.6994 13.6984 16.4752 10.2742 16.4752C6.85005 16.4752 4.07422 13.6994 4.07422 10.2752C4.07422 6.85103 6.85005 4.0752 10.2742 4.0752C13.6984 4.0752 16.4742 6.85103 16.4742 10.2752Z\" fill=\"#1D1E20\"\/>\n               <\/svg>\n           <\/div>\n            <input\n                    class=\"domain-checker__input\"\n                    name=\"domain\" type=\"text\"\n                    placeholder=\"Digite o dom\u00ednio desejado\"\n                    value=\"\"\n            \/>\n            <input id=\"domain-submit\"\n                   type=\"submit\"\n                   value=\"Pesquisar\"\n                   class=\"domain-checker__button\"\/>\n        <\/form>\n    <\/div>\n\n\n\n\n\n<\/p><h3 class=\"wp-block-heading\" id=\"h-2-sean-o-brien\"><strong>2.&nbsp;<\/strong><a href=\"https:\/\/seanobrien.com.au\/\" target=\"_blank\" rel=\"noreferrer noopener\"><strong>Sean O&rsquo;Brien<\/strong><\/a><\/h3><div class=\"wp-block-image\">\n<figure class=\"aligncenter size-large\"><img decoding=\"async\" width=\"1024\" height=\"582\" src=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/53\/2024\/01\/3-sean-obrien-1.png\/w=1024,h=1024,fit=scale-down\" alt=\"captura de tela do portf&oacute;lio de sean o'brien\" class=\"wp-image-42077\" srcset=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/53\/2024\/01\/3-sean-obrien-1.png\/w=1024,fit=scale-down 1024w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/53\/2024\/01\/3-sean-obrien-1.png\/w=300,fit=scale-down 300w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/53\/2024\/01\/3-sean-obrien-1.png\/w=150,fit=scale-down 150w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/53\/2024\/01\/3-sean-obrien-1.png\/w=768,fit=scale-down 768w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n<\/div><ul class=\"wp-block-list\">\n<li><strong>Diferenciais:<\/strong>&nbsp;marca pessoal s&oacute;lida e dom&iacute;nio com c&oacute;digo do pa&iacute;s<\/li>\n<\/ul><p class=\"wp-block-paragraph\">Sean O&rsquo;Brien &eacute; um velejador que ganhou campeonatos em todo o mundo. Ele transmite as informa&ccedil;&otilde;es principais acima da dobra na p&aacute;gina inicial, permitindo que os visitantes saibam imediatamente quem ele &eacute;.<\/p><p class=\"wp-block-paragraph\">Sean exibe os logotipos dos parceiros na p&aacute;gina inicial e artigos que o apresentam na p&aacute;gina de Imprensa. Ele tamb&eacute;m&nbsp;<a href=\"\/br\/tutoriais\/como-escrever-um-blog\/\" target=\"_blank\" rel=\"noreferrer noopener\"><strong>escreve postagens de blog<\/strong><\/a>&nbsp;e dedica a p&aacute;gina de Tour &agrave;s suas atividades.<\/p><p class=\"wp-block-paragraph\">Sean escolheu designs ousados e coloridos para exibir sua paix&atilde;o de maneira mais atraente. O portf&oacute;lio conta com v&aacute;rias fotos dele surfando e fontes grandes usando efeitos simples, para manter o conte&uacute;do f&aacute;cil de interagir.<\/p><div class=\"wp-block-image\">\n<figure class=\"aligncenter size-large\"><img decoding=\"async\" width=\"1024\" height=\"586\" src=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/53\/2024\/01\/4-sean-obrien-2.png\/w=1024,h=1024,fit=scale-down\" alt=\"p&aacute;gina de sean o'brien na web\" class=\"wp-image-42076\" srcset=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/53\/2024\/01\/4-sean-obrien-2.png\/w=1024,fit=scale-down 1024w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/53\/2024\/01\/4-sean-obrien-2.png\/w=300,fit=scale-down 300w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/53\/2024\/01\/4-sean-obrien-2.png\/w=150,fit=scale-down 150w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/53\/2024\/01\/4-sean-obrien-2.png\/w=768,fit=scale-down 768w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n<\/div><p class=\"wp-block-paragraph\">Como Sean &eacute; da Austr&aacute;lia, o atleta usa o TLD de c&oacute;digo de pa&iacute;s&nbsp;<strong>.au<\/strong>&nbsp;para sinalizar aos motores de busca e visitantes do site que seu site pessoal se concentra no pa&iacute;s da Oceania. Voc&ecirc; pode usar um <a href=\"\/br\/registro-de-dominio\" target=\"_blank\" rel=\"noreferrer noopener\"><strong>localizador de dom&iacute;nio<\/strong><\/a>&nbsp;e a mesma abordagem para garantir sua marca pessoal hoje.<\/p><h3 class=\"wp-block-heading\" id=\"h-3-gary-le-masson\"><strong>3.&nbsp;<\/strong><a href=\"https:\/\/www.garylemasson.com\/\" target=\"_blank\" rel=\"noreferrer noopener\"><strong>Gary Le Masson<\/strong><\/a><\/h3><div class=\"wp-block-image\">\n<figure class=\"aligncenter size-large\"><img decoding=\"async\" width=\"1024\" height=\"505\" src=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/53\/2024\/01\/5-gary-le-masson.png\/w=1024,h=1024,fit=scale-down\" alt=\"portf&oacute;lio de gary le masson\" class=\"wp-image-42069\" srcset=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/53\/2024\/01\/5-gary-le-masson.png\/w=1024,fit=scale-down 1024w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/53\/2024\/01\/5-gary-le-masson.png\/w=300,fit=scale-down 300w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/53\/2024\/01\/5-gary-le-masson.png\/w=150,fit=scale-down 150w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/53\/2024\/01\/5-gary-le-masson.png\/w=768,fit=scale-down 768w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n<\/div><ul class=\"wp-block-list\">\n<li><strong>Diferencial:&nbsp;<\/strong>design de portf&oacute;lio criativo<\/li>\n<\/ul><p class=\"wp-block-paragraph\">Gary Le Masson &eacute; um consultor franc&ecirc;s de otimiza&ccedil;&atilde;o para mecanismos de busca (SEO) e an&aacute;lise de web. O site do portf&oacute;lio dele &eacute; um &oacute;timo exemplo de design criativo.<\/p><p class=\"wp-block-paragraph\">Este freelancer usou o design dos resultados de pesquisa do Google como inspira&ccedil;&atilde;o, incluindo a barra de pesquisa, paleta de cores, fontes e layouts. Ele at&eacute; animou seu nome para parecer com o Google no rodap&eacute;.<\/p><p class=\"wp-block-paragraph\">Esta &eacute; uma abordagem inteligente para mostrar que ele trabalha na ind&uacute;stria e atrair poss&iacute;veis empregadores.<\/p><div class=\"wp-block-image\">\n<figure class=\"aligncenter size-large\"><img decoding=\"async\" width=\"1024\" height=\"828\" src=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/53\/2024\/01\/6-gary-le-masson-2.png\/w=1024,h=1024,fit=scale-down\" alt='p&aacute;gina \"sobre\" do portf&oacute;lio de Gary le Masson' class=\"wp-image-42070\" srcset=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/53\/2024\/01\/6-gary-le-masson-2.png\/w=1024,fit=scale-down 1024w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/53\/2024\/01\/6-gary-le-masson-2.png\/w=300,fit=scale-down 300w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/53\/2024\/01\/6-gary-le-masson-2.png\/w=150,fit=scale-down 150w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/53\/2024\/01\/6-gary-le-masson-2.png\/w=768,fit=scale-down 768w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n<\/div><p class=\"wp-block-paragraph\">No topo da p&aacute;gina, vemos os menus do site:<\/p><ul class=\"wp-block-list\">\n<li><strong>An&aacute;lise da web<\/strong>. Ele descreve suas compet&ecirc;ncias em SEO e an&aacute;lise de web.<\/li>\n\n\n\n<li><strong>Refer&ecirc;ncias<\/strong>. Lista os clientes anteriores de Gary.<\/li>\n\n\n\n<li><strong>Curr&iacute;culo Google<\/strong>. Esta p&aacute;gina da web possui o hist&oacute;rico acad&ecirc;mico e os detalhes pessoais do consultor.<\/li>\n\n\n\n<li><strong>Contato<\/strong>. Apresenta um formul&aacute;rio de contato e detalhes, incluindo o endere&ccedil;o do seu escrit&oacute;rio e redes sociais.<\/li>\n<\/ul><p class=\"wp-block-paragraph\">Geralmente, essas s&atilde;o as p&aacute;ginas mais comumente encontradas em sites de portf&oacute;lio. Eles ajudam poss&iacute;veis clientes a entender quem voc&ecirc; &eacute; e se suas habilidades atendem &agrave;s necessidades deles.<\/p><h3 class=\"wp-block-heading\" id=\"h-4-melyssa-griffin\"><strong>4.&nbsp;<\/strong><a href=\"https:\/\/www.melyssagriffin.com\/\" target=\"_blank\" rel=\"noreferrer noopener\"><strong>Melyssa Griffin<\/strong><\/a><\/h3><div class=\"wp-block-image\">\n<figure class=\"aligncenter size-large\"><img decoding=\"async\" width=\"1024\" height=\"499\" src=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/53\/2024\/01\/7-melyssa-griffin.png\/w=1024,h=1024,fit=scale-down\" alt=\"site pessoal de melyssa griffin\" class=\"wp-image-42075\" srcset=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/53\/2024\/01\/7-melyssa-griffin.png\/w=1024,fit=scale-down 1024w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/53\/2024\/01\/7-melyssa-griffin.png\/w=300,fit=scale-down 300w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/53\/2024\/01\/7-melyssa-griffin.png\/w=150,fit=scale-down 150w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/53\/2024\/01\/7-melyssa-griffin.png\/w=768,fit=scale-down 768w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n<\/div><ul class=\"wp-block-list\">\n<li><strong>Diferenciais:<\/strong>&nbsp;bom uso de pop-ups e p&aacute;gina inicial informativa<\/li>\n<\/ul><p class=\"wp-block-paragraph\">Melyssa Griffin &eacute; uma ex-professora que capacita outros empreendedores criando conte&uacute;do sobre o crescimento de neg&oacute;cios, incluindo cursos online e um programa de coaching.<\/p><p class=\"wp-block-paragraph\">Quando voc&ecirc; abre o portf&oacute;lio digital dela, surge um question&aacute;rio pop-up querendo saber sobre o seu estilo de empreendedor. Esta &eacute; uma &oacute;tima ideia para aumentar o engajamento e entender melhor os visitantes do seu site.<\/p><p class=\"wp-block-paragraph\">Outro destaque no portf&oacute;lio de Melyssa &eacute; a informa&ccedil;&atilde;o detalhada apresentada na p&aacute;gina inicial. Ele mostra quem ela &eacute;, seus projetos e clientes anteriores, juntamente com links essenciais. A p&aacute;gina tamb&eacute;m inclui o feed do Instagram dela e o cadastro de newsletter no rodap&eacute;, para incentivar a intera&ccedil;&atilde;o.<\/p><p class=\"wp-block-paragraph\">Melyssa usa cores vibrantes, como amarelo e laranja, para destacar &aacute;reas ou elementos. Ela tamb&eacute;m adiciona ilustra&ccedil;&otilde;es e formas coloridas para&nbsp;<a href=\"\/br\/tutoriais\/como-fazer-um-portfolio-digital\/\" target=\"_blank\" rel=\"noreferrer noopener\"><strong>criar um portf&oacute;lio<\/strong><\/a>&nbsp;que seja &uacute;nico e atraente.<\/p><p>\n\n\n        <div class=\"protip\">\n            <div class=\"protip__heading\">\n                <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\">\n                    <path d=\"M1.49234 23.5024C1.23229 23.5024 0.972242 23.4024 0.782206 23.2123C0.562165 22.9923 0.452144 22.6822 0.502153 22.3722C0.562165 21.9221 1.14227 17.9113 3.00262 16.351C3.63274 15.8209 4.43289 15.5509 5.26305 15.5609C6.09321 15.5909 6.87335 15.9109 7.47347 16.4911C8.6937 17.6913 8.76371 19.6717 7.6435 20.9919C6.0832 22.8523 2.08245 23.4324 1.63237 23.4924C1.59236 23.4924 1.54235 23.4924 1.50234 23.4924L1.49234 23.5024ZM5.16303 17.5613C4.84297 17.5613 4.53291 17.6713 4.29287 17.8813C3.60274 18.4614 3.07264 19.9317 2.75258 21.242C4.06282 20.9219 5.5331 20.3918 6.11321 19.7017C6.55329 19.1716 6.54329 18.3814 6.0832 17.9213C5.85316 17.7013 5.5431 17.5713 5.20304 17.5613C5.19304 17.5613 5.17303 17.5613 5.16303 17.5613ZM11.7243 21.8821C11.4942 21.8821 11.2642 21.8021 11.0841 21.652C10.8541 21.462 10.7241 21.1819 10.7241 20.8819V15.9109L8.08358 13.2705H3.11264C2.81259 13.2705 2.53254 13.1404 2.3425 12.9104C2.15246 12.6803 2.07245 12.3803 2.12246 12.0902C2.19247 11.7102 2.84259 8.36953 4.70294 7.12929C6.33325 6.04909 8.96375 6.49918 10.244 6.80923C11.5442 4.96889 13.2546 3.4286 15.2349 2.33839C17.4553 1.11816 19.9858 0.518051 22.4963 0.498047C23.0464 0.498047 23.4865 0.948132 23.4865 1.49824C23.4865 5.0389 22.3763 9.97983 17.1753 13.7605C17.4853 15.0408 17.9354 17.6613 16.8552 19.2816C15.615 21.1419 12.2744 21.7921 11.8943 21.8621C11.8343 21.8721 11.7743 21.8821 11.7143 21.8821H11.7243ZM12.7245 16.181V19.6016C13.7146 19.2916 14.7948 18.7915 15.2049 18.1814C15.675 17.4812 15.605 16.091 15.385 14.9008C14.5248 15.3808 13.6346 15.8109 12.7245 16.181ZM9.66388 12.0302L11.9643 14.3307C13.1845 13.8306 14.3648 13.2204 15.485 12.5103C19.9358 9.51974 21.2361 5.60901 21.4561 2.53843C19.6157 2.67846 17.8254 3.20856 16.2051 4.09872C14.2847 5.14892 12.6544 6.68921 11.4942 8.54956C10.7841 9.65977 10.174 10.82 9.66388 12.0302ZM4.39289 11.2701H7.81353C8.1936 10.3599 8.63368 9.46974 9.11377 8.60957C7.92355 8.38953 6.51329 8.31952 5.81315 8.78961C5.19304 9.19968 4.70294 10.3099 4.39289 11.2701Z\" fill=\"#673DE6\"\/>\n                <\/svg>\n                <p class=\"protip__title\">\n                    Dica                <\/p>\n            <\/div>\n            <p class=\"protip__content\">Veja algumas inspira&ccedil;&otilde;es de web design a partir desses&nbsp;<a href=\"\/br\/tutoriais\/site-de-pagina-unica\/\" target=\"_blank\" rel=\"noreferrer noopener\"><strong>templates de sites de p&aacute;gina &uacute;nica<\/strong><\/a>&nbsp;e experimente o Criador de Sites da Hostinger para construir seu pr&oacute;prio site facilmente.<\/p>\n                    <\/div>\n        \n\n\n\n<\/p><h2 class=\"wp-block-heading\" id=\"h-sites-de-portfolio-de-personalidades\"><strong>Sites de Portf&oacute;lio de Personalidades<\/strong><\/h2><p class=\"wp-block-paragraph\">Vamos revisar os sites de portf&oacute;lio de quatro figuras p&uacute;blicas, incluindo um comediante e um jogador de futebol.<\/p><h3 class=\"wp-block-heading\" id=\"h-1-russell-brand\"><strong>1.&nbsp;<\/strong><a href=\"https:\/\/www.russellbrand.com\/\" target=\"_blank\" rel=\"noreferrer noopener\"><strong>Russell Brand<\/strong><\/a><\/h3><div class=\"wp-block-image\">\n<figure class=\"aligncenter size-large\"><img decoding=\"async\" width=\"1024\" height=\"580\" src=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/53\/2024\/01\/8-russell-brand.png\/w=1024,h=1024,fit=scale-down\" alt=\"site de Russell brand\" class=\"wp-image-42081\" srcset=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/53\/2024\/01\/8-russell-brand.png\/w=1024,fit=scale-down 1024w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/53\/2024\/01\/8-russell-brand.png\/w=300,fit=scale-down 300w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/53\/2024\/01\/8-russell-brand.png\/w=150,fit=scale-down 150w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/53\/2024\/01\/8-russell-brand.png\/w=768,fit=scale-down 768w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n<\/div><ul class=\"wp-block-list\">\n<li><strong>Diferenciais:&nbsp;<\/strong>banner de newsletter e recurso de reserva<\/li>\n<\/ul><p class=\"wp-block-paragraph\">Russell Brand &eacute; um ator, comediante e ativista de sa&uacute;de mental e reabilita&ccedil;&atilde;o de drogas. Por estar envolvido em atividades t&atilde;o diversas, um site pessoal para atualizar sua agenda &eacute; importante.<\/p><p class=\"wp-block-paragraph\">Seu site apresenta todo o seu trabalho, incluindo livros, podcasts e v&iacute;deos de com&eacute;dia stand-up. Ele tamb&eacute;m compartilha suas apresenta&ccedil;&otilde;es de stand-up e datas de eventos comunit&aacute;rios, permitindo que os f&atilde;s comprem ingressos diretamente no site.<\/p><p class=\"wp-block-paragraph\">O site tamb&eacute;m promove o envolvimento da comunidade incentivando as pessoas a se juntarem &agrave; lista de e-mail marketing e fixando o banner da newsletter no topo das p&aacute;ginas.<\/p><p class=\"wp-block-paragraph\">Em termos de design, ele usa uma paleta de tons terrosos com fontes serifadas e imagens de corvos, amplamente conhecidas por seus f&atilde;s para simbolizar mudan&ccedil;a ou transforma&ccedil;&atilde;o.<\/p><h3 class=\"wp-block-heading\" id=\"h-2-lior-raz\"><strong>2.&nbsp;<\/strong><a href=\"https:\/\/www.liorraz.co.il\/\" target=\"_blank\" rel=\"noreferrer noopener\"><strong>Lior Raz<\/strong><\/a><\/h3><div class=\"wp-block-image\">\n<figure class=\"aligncenter size-large\"><img decoding=\"async\" width=\"1024\" height=\"582\" src=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/53\/2024\/01\/9-lior-raz.png\/w=1024,h=1024,fit=scale-down\" alt=\"site de portf&oacute;lio de lior raz\" class=\"wp-image-42063\" srcset=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/53\/2024\/01\/9-lior-raz.png\/w=1024,fit=scale-down 1024w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/53\/2024\/01\/9-lior-raz.png\/w=300,fit=scale-down 300w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/53\/2024\/01\/9-lior-raz.png\/w=150,fit=scale-down 150w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/53\/2024\/01\/9-lior-raz.png\/w=768,fit=scale-down 768w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n<\/div><ul class=\"wp-block-list\">\n<li><strong>Diferenciais:<\/strong>&nbsp;site de portf&oacute;lio de p&aacute;gina &uacute;nica e v&iacute;deo em destaque<\/li>\n<\/ul><p class=\"wp-block-paragraph\">O portf&oacute;lio de Lior Raz est&aacute; entre os melhores sites de p&aacute;gina &uacute;nica em nossa lista. Ator e palestrante, Lior Raz tornou seu site visualmente atraente enquanto fornece informa&ccedil;&otilde;es de maneira simples e aberta.<\/p><p class=\"wp-block-paragraph\">Ao acessar este site de portf&oacute;lio, os visitantes ver&atilde;o um v&iacute;deo principal mostrando trechos curtos dos filmes de Lior para ajudar a chamar a aten&ccedil;&atilde;o do visitante.<\/p><p class=\"wp-block-paragraph\">Ele divide seu site de uma p&aacute;gina em cinco se&ccedil;&otilde;es &ndash; Sobre, Galeria, Imprensa, Palestras e Contato.<\/p><p class=\"wp-block-paragraph\">Os visitantes podem clicar no bot&atilde;o&nbsp;<strong>mais<\/strong>&nbsp;para ler o conte&uacute;do de cada se&ccedil;&atilde;o, evitando desordem. H&aacute; tamb&eacute;m um bot&atilde;o&nbsp;<strong>&ldquo;hamb&uacute;rguer&rdquo;<\/strong>&nbsp;que cont&eacute;m essas diferentes se&ccedil;&otilde;es para uma navega&ccedil;&atilde;o mais r&aacute;pida.<\/p><p class=\"wp-block-paragraph\">O site do ator usa imagens de banner em largura total para t&iacute;tulos e fundo preto para manter o foco em seu conte&uacute;do.<\/p><h3 class=\"wp-block-heading\" id=\"h-3-cristiano-ronaldo\"><strong>3.&nbsp;<\/strong><a href=\"https:\/\/www.cristianoronaldo.com\/\" target=\"_blank\" rel=\"noreferrer noopener\"><strong>Cristiano Ronaldo<\/strong><\/a><\/h3><div class=\"wp-block-image\">\n<figure class=\"aligncenter size-large\"><img decoding=\"async\" width=\"1024\" height=\"514\" src=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/53\/2024\/01\/10-cristiano-ronaldo.png\/w=1024,h=1024,fit=scale-down\" alt=\"site de cristiano Ronaldo\" class=\"wp-image-42080\" srcset=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/53\/2024\/01\/10-cristiano-ronaldo.png\/w=1024,fit=scale-down 1024w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/53\/2024\/01\/10-cristiano-ronaldo.png\/w=300,fit=scale-down 300w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/53\/2024\/01\/10-cristiano-ronaldo.png\/w=150,fit=scale-down 150w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/53\/2024\/01\/10-cristiano-ronaldo.png\/w=768,fit=scale-down 768w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n<\/div><ul class=\"wp-block-list\">\n<li><strong>Diferencial:&nbsp;<\/strong>destaques da carreira<\/li>\n<\/ul><p class=\"wp-block-paragraph\">Se voc&ecirc; est&aacute; procurando exemplos de layout de p&aacute;gina &uacute;nica, visite o site de Cristiano Ronaldo.<\/p><p class=\"wp-block-paragraph\">A se&ccedil;&atilde;o superior do portf&oacute;lio mostra todos os projetos de Cristiano, desde sua carreira no futebol at&eacute; a ind&uacute;stria da moda. No caso deste &uacute;ltimo, o layout baseado em cards tem imagens que direcionam os visitantes para a respectiva loja online do traje exibido.<\/p><p class=\"wp-block-paragraph\">Ao rolar para baixo, um controle deslizante horizontal resume a jornada de carreira do jogador, organizada pelos clubes que ele j&aacute; jogou. Cada slide tem um pequeno v&iacute;deo rodando ao fundo mostrando a contribui&ccedil;&atilde;o do Cristiano para o clube.<\/p><p class=\"wp-block-paragraph\">Al&eacute;m das marcas e destaques da carreira, este portf&oacute;lio de p&aacute;gina &uacute;nica cont&eacute;m um v&iacute;deo de seu produto mais recente, um formul&aacute;rio de inscri&ccedil;&atilde;o para newsletter e links para as parcerias anteriores de Cristiano.<\/p><h3 class=\"wp-block-heading\" id=\"h-4-bill-gates\"><strong>4.&nbsp;<\/strong><a href=\"https:\/\/www.gatesnotes.com\/\" target=\"_blank\" rel=\"noreferrer noopener\"><strong>Bill Gates<\/strong><\/a><\/h3><div class=\"wp-block-image\">\n<figure class=\"aligncenter size-large\"><img decoding=\"async\" width=\"1024\" height=\"578\" src=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/53\/2024\/01\/11-bill-gates.png\/w=1024,h=1024,fit=scale-down\" alt=\"blog de bill gates\" class=\"wp-image-42079\" srcset=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/53\/2024\/01\/11-bill-gates.png\/w=1024,fit=scale-down 1024w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/53\/2024\/01\/11-bill-gates.png\/w=300,fit=scale-down 300w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/53\/2024\/01\/11-bill-gates.png\/w=150,fit=scale-down 150w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/53\/2024\/01\/11-bill-gates.png\/w=768,fit=scale-down 768w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n<\/div><ul class=\"wp-block-list\">\n<li><strong>Diferenciais:&nbsp;<\/strong>linha do tempo pessoal e layout de revista<\/li>\n<\/ul><p class=\"wp-block-paragraph\">O site de Bill Gates &eacute; um dos melhores exemplos de portf&oacute;lio se voc&ecirc; deseja se concentrar em exibir seu trabalho e atualiza&ccedil;&otilde;es, al&eacute;m de compartilhar seus conhecimentos.<\/p><p class=\"wp-block-paragraph\">O site usa um layout de revista e divide as postagens em t&oacute;picos, como Clima, Engenharia de Software, Energia e Educa&ccedil;&atilde;o. No topo da p&aacute;gina inicial, os artigos em destaque selecionados s&atilde;o novos ou relevantes para os eventos atuais.<\/p><p class=\"wp-block-paragraph\">O site do co-fundador da Microsoft usa paletas de cores em preto e branco, permitindo que os leitores se concentrem nas imagens e v&iacute;deos de seu canal no YouTube. Para manter a simplicidade, o site usa um menu hamb&uacute;rguer no canto superior direito da tela.<\/p><p class=\"wp-block-paragraph\">A p&aacute;gina Sobre fornece &oacute;timas ideias para criar uma linha do tempo pessoal ou profissional envolvente. Ele apresenta um controle deslizante de linha do tempo para ilustrar a jornada de Bill Gates em diferentes &aacute;reas: Microsoft, Funda&ccedil;&atilde;o Bill &amp; Melinda Gates e seus outros projetos &ndash; juntamente com fotos de cada uma dessas empreitadas.<\/p><div class=\"wp-block-image\">\n<figure class=\"aligncenter size-large\"><img decoding=\"async\" width=\"1024\" height=\"650\" src=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/53\/2024\/01\/12-bill-gates-2.png\/w=1024,h=1024,fit=scale-down\" alt=\"blog de bill gates\" class=\"wp-image-42064\" srcset=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/53\/2024\/01\/12-bill-gates-2.png\/w=1024,fit=scale-down 1024w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/53\/2024\/01\/12-bill-gates-2.png\/w=300,fit=scale-down 300w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/53\/2024\/01\/12-bill-gates-2.png\/w=150,fit=scale-down 150w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/53\/2024\/01\/12-bill-gates-2.png\/w=768,fit=scale-down 768w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n<\/div><h2 class=\"wp-block-heading\" id=\"h-sites-de-portfolio-para-fotografos-e-artistas\"><strong>Sites de Portf&oacute;lio para Fot&oacute;grafos e Artistas<\/strong><\/h2><p class=\"wp-block-paragraph\">Se voc&ecirc; &eacute; um fot&oacute;grafo ou designer gr&aacute;fico, confira esses sites para gerar ideias para o seu pr&oacute;prio portf&oacute;lio.<\/p><h3 class=\"wp-block-heading\" id=\"h-1-tamara-sredojevic\"><strong>1.&nbsp;<\/strong><a href=\"https:\/\/www.iamtamara.design\/\" target=\"_blank\" rel=\"noreferrer noopener\"><strong>Tamara Sredojevic<\/strong><\/a><\/h3><div class=\"wp-block-image\">\n<figure class=\"aligncenter size-large\"><img decoding=\"async\" width=\"1024\" height=\"581\" src=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/53\/2024\/01\/13-tamara-sredojevic.png\/w=1024,h=1024,fit=scale-down\" alt=\"\" class=\"wp-image-42071\" srcset=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/53\/2024\/01\/13-tamara-sredojevic.png\/w=1024,fit=scale-down 1024w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/53\/2024\/01\/13-tamara-sredojevic.png\/w=300,fit=scale-down 300w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/53\/2024\/01\/13-tamara-sredojevic.png\/w=150,fit=scale-down 150w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/53\/2024\/01\/13-tamara-sredojevic.png\/w=768,fit=scale-down 768w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n<\/div><ul class=\"wp-block-list\">\n<li><strong>Diferenciais:&nbsp;<\/strong>proposta de valor &uacute;nica e dom&iacute;nio personalizado<\/li>\n<\/ul><p class=\"wp-block-paragraph\">Tamara Sredojevic &eacute; especialista em UX design acess&iacute;vel e sustent&aacute;vel. O site dela &eacute; um excelente exemplo de um portf&oacute;lio de design que reflete valores pessoais.<\/p><p class=\"wp-block-paragraph\">J&aacute; na p&aacute;gina inicial, ela indica seu mercado-alvo e a sua base de clientes, principalmente organiza&ccedil;&otilde;es sem fins lucrativos, institui&ccedil;&otilde;es de caridade e marcas &eacute;ticas.<\/p><p class=\"wp-block-paragraph\">Al&eacute;m de mencionar seus valores fundamentais na p&aacute;gina Sobre, o rodap&eacute; do portf&oacute;lio faz um link para a p&aacute;gina da Declara&ccedil;&atilde;o de Acessibilidade, explicando como ela aplica&nbsp;<a href=\"\/br\/tutoriais\/acessibilidade-web\/\" target=\"_blank\" rel=\"noreferrer noopener\"><strong>padr&otilde;es de acessibilidade<\/strong><\/a>&nbsp;ao site.<\/p><p class=\"wp-block-paragraph\">O site tamb&eacute;m apresenta uma pontua&ccedil;&atilde;o de pegada de carbono, para mostrar que &eacute; ecologicamente correto.<\/p><p class=\"wp-block-paragraph\">O design do portf&oacute;lio se baseia na simplicidade, usando formas grandes, linhas finas e cores suaves.<\/p><p class=\"wp-block-paragraph\">Para educar poss&iacute;veis clientes sobre seu trabalho, cada p&aacute;gina de projeto explica seu processo de design, incluindo o contexto do projeto e sua abordagem de UX.<\/p><h3 class=\"wp-block-heading\" id=\"h-2-demas-rusli\"><strong>2.&nbsp;<\/strong><a href=\"https:\/\/www.demasrusli.com\/\" target=\"_blank\" rel=\"noreferrer noopener\"><strong>Demas Rusli<\/strong><\/a><\/h3><div class=\"wp-block-image\">\n<figure class=\"aligncenter size-large\"><img decoding=\"async\" width=\"1024\" height=\"592\" src=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/53\/2024\/01\/14-demas-rusli.png\/w=1024,h=1024,fit=scale-down\" alt=\"site de demas rusli\" class=\"wp-image-42074\" srcset=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/53\/2024\/01\/14-demas-rusli.png\/w=1024,fit=scale-down 1024w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/53\/2024\/01\/14-demas-rusli.png\/w=300,fit=scale-down 300w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/53\/2024\/01\/14-demas-rusli.png\/w=150,fit=scale-down 150w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/53\/2024\/01\/14-demas-rusli.png\/w=768,fit=scale-down 768w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n<\/div><ul class=\"wp-block-list\">\n<li><strong>Diferencial:&nbsp;<\/strong>imagem de destaque<\/li>\n<\/ul><p class=\"wp-block-paragraph\">Demas Rusli &eacute; um fot&oacute;grafo com centenas de milhares de seguidores nas redes sociais. Ele se concentra em fotografia urbana, arquitet&ocirc;nica e a&eacute;rea.<\/p><p class=\"wp-block-paragraph\">Este exemplo de portf&oacute;lio exibe fotos visualmente atraentes diretamente na p&aacute;gina inicial. Eles est&atilde;o divididos em tr&ecirc;s se&ccedil;&otilde;es &ndash; imagem de destaque, categorias de fotos e seu feed do Instagram.<\/p><p class=\"wp-block-paragraph\">No topo, s&atilde;o exibidas imagens de largura total que mudam a cada cinco segundos,&nbsp;<a href=\"\/br\/tutoriais\/criar-site-de-fotografia\/\" target=\"_blank\" rel=\"noreferrer noopener\"><strong>criando um site de fotografia<\/strong><\/a>&nbsp;que se destaca.<\/p><p class=\"wp-block-paragraph\">Embaixo, Demas categoriza seu trabalho em seis t&oacute;picos &ndash; Comiss&otilde;es, Urbano, A&eacute;reo, Arquitetura, Natureza e Fantasia &ndash; para ajudar poss&iacute;veis clientes a decidir se seu trabalho atende &agrave;s suas necessidades. Se voc&ecirc; clicar em uma das categorias, ver&aacute; uma galeria cheia de suas fotos e filmagens est&aacute;ticas.<\/p><p class=\"wp-block-paragraph\">O layout da galeria depende da categoria. Por exemplo, na p&aacute;gina de Comiss&otilde;es, Demas usa um layout de grade apresentando a imagem ou GIF de cada projeto.<\/p><p class=\"wp-block-paragraph\">Al&eacute;m disso, ele adiciona bot&otilde;es que levam a outras categorias acima de cada t&iacute;tulo de categoria, facilitando para os visitantes naveguem por diferentes &aacute;reas sem ter que voltar para a p&aacute;gina inicial.<\/p><h3 class=\"wp-block-heading\" id=\"h-3-alice-lee\"><strong>3.&nbsp;<\/strong><a href=\"https:\/\/www.byalicelee.com\/\" target=\"_blank\" rel=\"noreferrer noopener\"><strong>Alice Lee<\/strong><\/a><\/h3><div class=\"wp-block-image\">\n<figure class=\"aligncenter size-large\"><img decoding=\"async\" width=\"1024\" height=\"522\" src=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/53\/2024\/01\/16-alice-lee.png\/w=1024,h=1024,fit=scale-down\" alt=\"site de alice lee\" class=\"wp-image-42083\" srcset=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/53\/2024\/01\/16-alice-lee.png\/w=1024,fit=scale-down 1024w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/53\/2024\/01\/16-alice-lee.png\/w=300,fit=scale-down 300w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/53\/2024\/01\/16-alice-lee.png\/w=150,fit=scale-down 150w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/53\/2024\/01\/16-alice-lee.png\/w=768,fit=scale-down 768w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n<\/div><ul class=\"wp-block-list\">\n<li><strong>Diferencial:<\/strong>&nbsp;design minimalista para portf&oacute;lios de ilustra&ccedil;&atilde;o<\/li>\n<\/ul><p class=\"wp-block-paragraph\">Alice Lee &eacute; uma ilustradora e muralista independente. Seu portf&oacute;lio visualmente atraente pode&nbsp;<a href=\"\/br\/tutoriais\/sites-para-designers\/\" target=\"_blank\" rel=\"noreferrer noopener\"><strong>inspirar um &oacute;timo web design<\/strong><\/a>, especialmente para ilustradores.<\/p><p class=\"wp-block-paragraph\">No topo da p&aacute;gina inicial, ela adiciona uma anima&ccedil;&atilde;o sutil onde a imagem principal se move de acordo com o cursor do visitante.<\/p><p class=\"wp-block-paragraph\">Embaixo, Alice mostra v&aacute;rios projetos usando um layout minimalista em um fundo branco, permitindo que os visitantes se concentrem em seu trabalho bonito e colorido. Basta clicar em uma das imagens para ver a descri&ccedil;&atilde;o do projeto e os rascunhos dela.<\/p><div class=\"wp-block-image\">\n<figure class=\"aligncenter size-large\"><img decoding=\"async\" width=\"1024\" height=\"588\" src=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/53\/2024\/01\/17-alice-lee-2.png\/w=1024,h=1024,fit=scale-down\" alt=\"site de Alice lee exibindo projeto\" class=\"wp-image-42084\" srcset=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/53\/2024\/01\/17-alice-lee-2.png\/w=1024,fit=scale-down 1024w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/53\/2024\/01\/17-alice-lee-2.png\/w=300,fit=scale-down 300w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/53\/2024\/01\/17-alice-lee-2.png\/w=150,fit=scale-down 150w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/53\/2024\/01\/17-alice-lee-2.png\/w=768,fit=scale-down 768w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n<\/div><h3 class=\"wp-block-heading\" id=\"h-4-lauren-hom\"><strong>4.&nbsp;<\/strong><a href=\"http:\/\/homsweethom.com\/\" target=\"_blank\" rel=\"noreferrer noopener\"><strong>Lauren Hom<\/strong><\/a><\/h3><div class=\"wp-block-image\">\n<figure class=\"aligncenter size-large\"><img decoding=\"async\" width=\"1024\" height=\"573\" src=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/53\/2024\/01\/18-lauren-hom.png\/w=1024,h=1024,fit=scale-down\" alt=\"site portf&oacute;lio de lauren h&ocirc;m\" class=\"wp-image-42078\" srcset=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/53\/2024\/01\/18-lauren-hom.png\/w=1024,fit=scale-down 1024w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/53\/2024\/01\/18-lauren-hom.png\/w=300,fit=scale-down 300w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/53\/2024\/01\/18-lauren-hom.png\/w=150,fit=scale-down 150w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/53\/2024\/01\/18-lauren-hom.png\/w=768,fit=scale-down 768w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n<\/div><ul class=\"wp-block-list\">\n<li><strong>Diferenciais:&nbsp;<\/strong>conte&uacute;do por tr&aacute;s das cenas e blog educativo<\/li>\n<\/ul><p class=\"wp-block-paragraph\">Lauren Hom &eacute; uma designer gr&aacute;fica, ilustradora e artista de lettering baseada em Nova York. Ela &eacute; conhecida por suas paletas de cores vivas e formas de letras l&uacute;dicas, e voc&ecirc; pode ver que ela tamb&eacute;m aplica esse estilo em seu portf&oacute;lio de design gr&aacute;fico.<\/p><p class=\"wp-block-paragraph\">Ela usa v&aacute;rias tonalidades de verde para o fundo e laranja para os elementos destacados, como hiperlinks e bot&otilde;es de chamada para a&ccedil;&atilde;o.<\/p><p class=\"wp-block-paragraph\">Al&eacute;m disso, ela compartilha fotos dos bastidores junto com os produtos finais na p&aacute;gina de Trabalho.<\/p><p class=\"wp-block-paragraph\">Por fim, Lauren tamb&eacute;m escreve postagens de blog sobre murais, lettering e dicas de trabalho aut&ocirc;nomo, compartilhando sua expertise e ajudando a melhorar o ranking do site nos resultados de pesquisa.<\/p><h2 class=\"wp-block-heading\" id=\"h-sites-de-portfolio-para-blogueiros-e-escritores\"><strong>Sites de Portf&oacute;lio para Blogueiros e Escritores<\/strong><\/h2><p class=\"wp-block-paragraph\">Esta se&ccedil;&atilde;o aborda quatro ideias de portf&oacute;lio para escritores, de redatores a compositores.<\/p><h3 class=\"wp-block-heading\" id=\"h-1-todd-clarke\"><strong>1.&nbsp;<\/strong><a href=\"https:\/\/toddsgotapen.com\/\" target=\"_blank\" rel=\"noreferrer noopener\"><strong>Todd Clarke<\/strong><\/a><\/h3><div class=\"wp-block-image\">\n<figure class=\"aligncenter size-large\"><img decoding=\"async\" width=\"1024\" height=\"580\" src=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/53\/2024\/01\/19-todd-clarke.png\/w=1024,h=1024,fit=scale-down\" alt=\"site de todd Clarke\" class=\"wp-image-42065\" srcset=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/53\/2024\/01\/19-todd-clarke.png\/w=1024,fit=scale-down 1024w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/53\/2024\/01\/19-todd-clarke.png\/w=300,fit=scale-down 300w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/53\/2024\/01\/19-todd-clarke.png\/w=150,fit=scale-down 150w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/53\/2024\/01\/19-todd-clarke.png\/w=768,fit=scale-down 768w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n<\/div><ul class=\"wp-block-list\">\n<li><strong>Diferencial:<\/strong>&nbsp;texto envolvente<\/li>\n<\/ul><p class=\"wp-block-paragraph\">Usando a marca Toddsgotapen, Todd Clarke mostra que criar um portf&oacute;lio de sites envolvente n&atilde;o requer anima&ccedil;&otilde;es complexas. Este redator mant&eacute;m o design do seu site simples e usa suas habilidades de reda&ccedil;&atilde;o publicit&aacute;ria para atrair a aten&ccedil;&atilde;o do visitante.<\/p><p class=\"wp-block-paragraph\">O texto dele &eacute; direto e cativante, ajudando os leitores a entender rapidamente o que ele oferece e por que eles deveriam contrat&aacute;-lo. Ele usa t&iacute;tulos grandes para estruturar as informa&ccedil;&otilde;es, al&eacute;m de frases em negrito e &iacute;cones no corpo do texto para destacar pontos importantes.<\/p><p class=\"wp-block-paragraph\">Na p&aacute;gina de Portf&oacute;lio, as categorias clic&aacute;veis no topo facilitam para os leitores conferirem seu trabalho. Cada imagem na p&aacute;gina ir&aacute; direcion&aacute;-los para o site em si ou uma imagem em tela cheia refletindo a vers&atilde;o ao vivo do projeto. Para estabelecer credibilidade, ele dedica uma p&aacute;gina inteira para depoimentos.<\/p><p class=\"wp-block-paragraph\">Como Todd s&oacute; tem um perfil no LinkedIn, ele deixa um risco nas outras contas de m&iacute;dia social no rodap&eacute; para informar aos visitantes onde ele est&aacute; dispon&iacute;vel.<\/p><h3 class=\"wp-block-heading\" id=\"h-2-muriel-vega\"><strong>2.&nbsp;<\/strong><a href=\"https:\/\/www.murielvega.net\/\" target=\"_blank\" rel=\"noreferrer noopener\"><strong>Muriel Vega<\/strong><\/a><\/h3><div class=\"wp-block-image\">\n<figure class=\"aligncenter size-large\"><img decoding=\"async\" width=\"1024\" height=\"508\" src=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/53\/2024\/01\/20-muriel-vega.png\/w=1024,h=1024,fit=scale-down\" alt=\"portf&oacute;lio de Muriel vega\" class=\"wp-image-42072\" srcset=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/53\/2024\/01\/20-muriel-vega.png\/w=1024,fit=scale-down 1024w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/53\/2024\/01\/20-muriel-vega.png\/w=300,fit=scale-down 300w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/53\/2024\/01\/20-muriel-vega.png\/w=150,fit=scale-down 150w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/53\/2024\/01\/20-muriel-vega.png\/w=768,fit=scale-down 768w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n<\/div><ul class=\"wp-block-list\">\n<li><strong>Diferencial:&nbsp;<\/strong>sistema de<strong>&nbsp;<\/strong>navega&ccedil;&atilde;o direto<\/li>\n<\/ul><p class=\"wp-block-paragraph\">Muriel Vega &eacute; uma escritora freelancer de tecnologia, gastronomia e cultura que trabalhou com v&aacute;rias marcas populares, incluindo The Guardian e Patreon. O portf&oacute;lio dela &eacute; simples, mas eficaz ao mostrar aos poss&iacute;veis empregadores suas habilidades de escrita.<\/p><p class=\"wp-block-paragraph\">A p&aacute;gina inicial apresenta o t&iacute;tulo do seu trabalho, menu, seis ilustra&ccedil;&otilde;es link&aacute;veis para diferenciar seus projetos e &iacute;cones de m&iacute;dias sociais. O trabalho dela est&aacute; organizado em um layout de grade contendo uma imagem, t&iacute;tulo do artigo e a empresa que o publicou.<\/p><p class=\"wp-block-paragraph\">Em sua p&aacute;gina Sobre, Muriel mant&eacute;m as informa&ccedil;&otilde;es diretas ao descrever suas experi&ecirc;ncias anteriores com escrita.<\/p><h3 class=\"wp-block-heading\" id=\"h-3-helena-bowen\"><strong>3.&nbsp;<\/strong><a href=\"https:\/\/helenabowen.com\/\" target=\"_blank\" rel=\"noreferrer noopener\"><strong>Helena Bowen<\/strong><\/a><\/h3><div class=\"wp-block-image\">\n<figure class=\"aligncenter size-large\"><img decoding=\"async\" width=\"1024\" height=\"580\" src=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/53\/2024\/01\/21-helena-bowen.png\/w=1024,h=1024,fit=scale-down\" alt=\"site de helena bowen\" class=\"wp-image-42087\" srcset=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/53\/2024\/01\/21-helena-bowen.png\/w=1024,fit=scale-down 1024w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/53\/2024\/01\/21-helena-bowen.png\/w=300,fit=scale-down 300w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/53\/2024\/01\/21-helena-bowen.png\/w=150,fit=scale-down 150w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/53\/2024\/01\/21-helena-bowen.png\/w=768,fit=scale-down 768w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n<\/div><ul class=\"wp-block-list\">\n<li><strong>Diferencial:&nbsp;<\/strong>se&ccedil;&atilde;o forte acima da dobra<\/li>\n<\/ul><p class=\"wp-block-paragraph\">Helena Bowen &eacute; uma destacada palestrante, treinadora e redatora de discursos. Ela trabalhou com mais de 150 clientes, acumulou milh&otilde;es de visualiza&ccedil;&otilde;es online e foi destaque em m&iacute;dias como TED, CNN e National Geographic.<\/p><p class=\"wp-block-paragraph\">Ela usa a se&ccedil;&atilde;o acima da dobra da p&aacute;gina inicial como um elemento impactante para atrair clientes em potencial. Ele exibe o n&uacute;mero de clientes com quem ela trabalhou, tradu&ccedil;&otilde;es de idiomas e visualiza&ccedil;&otilde;es.<\/p><p class=\"wp-block-paragraph\">Ao rolar a p&aacute;gina para baixo, ela n&atilde;o apenas inclui os depoimentos de seus clientes anteriores, mas tamb&eacute;m os coment&aacute;rios deles nas redes sociais.<\/p><p class=\"wp-block-paragraph\">Al&eacute;m de fornecer prova social, Helena explica seu hist&oacute;rico profissional e fluxo de trabalho geral.<\/p><p class=\"wp-block-paragraph\">Em rela&ccedil;&atilde;o ao design do site, ela mant&eacute;m o visual simples, com bastante espa&ccedil;o em branco e fotos profissionais para fazer os leitores se concentrarem no conte&uacute;do &mdash; e cores fortes para destacar detalhes essenciais.<\/p><h3 class=\"wp-block-heading\" id=\"h-4-duygu-muhurdar\"><strong>4.&nbsp;<\/strong><a href=\"https:\/\/dmuhurdar.journoportfolio.com\/\" target=\"_blank\" rel=\"noreferrer noopener\"><strong>Duygu M&uuml;h&uuml;rdar<\/strong><\/a><\/h3><div class=\"wp-block-image\">\n<figure class=\"aligncenter size-large\"><img decoding=\"async\" width=\"1024\" height=\"574\" src=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/53\/2024\/01\/22-duygy-muhurdar.png\/w=1024,h=1024,fit=scale-down\" alt=\"site de duygu m&uuml;h&uuml;rdar\" class=\"wp-image-42085\" srcset=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/53\/2024\/01\/22-duygy-muhurdar.png\/w=1024,fit=scale-down 1024w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/53\/2024\/01\/22-duygy-muhurdar.png\/w=300,fit=scale-down 300w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/53\/2024\/01\/22-duygy-muhurdar.png\/w=150,fit=scale-down 150w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/53\/2024\/01\/22-duygy-muhurdar.png\/w=768,fit=scale-down 768w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n<\/div><ul class=\"wp-block-list\">\n<li><strong>Diferenciais:&nbsp;<\/strong>interface de usu&aacute;rio simples, navega&ccedil;&atilde;o limpa<\/li>\n<\/ul><p class=\"wp-block-paragraph\">Duygu M&uuml;h&uuml;rdar &eacute; uma escritora do ramo da m&uacute;sica que assume v&aacute;rios pap&eacute;is na ind&uacute;stria fonogr&aacute;fica. Como ela tem mais do que apenas artigos para exibir, ela usa miniaturas para representar seu trabalho escrito e visual, o que mant&eacute;m a p&aacute;gina inicial limpa e informativa.<\/p><p class=\"wp-block-paragraph\">Cada thumbnail do menu reflete o mesmo estilo minimalista, com bastante espa&ccedil;o em branco. Ela tamb&eacute;m inclui seus links de m&iacute;dia social para apoiar o conte&uacute;do de texto.<\/p><p class=\"wp-block-paragraph\">A p&aacute;gina de Postagens &ndash; escrita em turco &ndash; oferece um recurso de pesquisa e ordena&ccedil;&atilde;o. Os visitantes tamb&eacute;m podem encontrar artigos espec&iacute;ficos com base em seu tipo de publica&ccedil;&atilde;o.<\/p><p class=\"wp-block-paragraph\">O fundo branco em todo o site faz com que as se&ccedil;&otilde;es destacadas se sobressaiam. Essa &eacute; uma boa escolha de design para a p&aacute;gina de Trabalhos para M&iacute;dias Sociais, pois as miniaturas coloridas podem entrar em conflito com cores n&atilde;o neutras.<\/p><h2 class=\"wp-block-heading\" id=\"h-sites-de-portfolio-para-estudantes\"><strong>Sites de Portf&oacute;lio para Estudantes<\/strong><\/h2><p class=\"wp-block-paragraph\">Reunimos quatro exemplos de portf&oacute;lio de estudantes e profissionais rec&eacute;m-formados para servir de inspira&ccedil;&atilde;o para o seu pr&oacute;prio site.<\/p><h3 class=\"wp-block-heading\" id=\"h-1-greg-chen\"><strong>1.&nbsp;<\/strong><a href=\"https:\/\/www.guanbaic.com\/\" target=\"_blank\" rel=\"noreferrer noopener\"><strong>Greg Chen<\/strong><\/a><\/h3><div class=\"wp-block-image\">\n<figure class=\"aligncenter size-large\"><img decoding=\"async\" width=\"1024\" height=\"588\" src=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/53\/2024\/01\/23-greg-chen.png\/w=1024,h=1024,fit=scale-down\" alt=\"portf&oacute;lio de greg Chen\" class=\"wp-image-42061\" srcset=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/53\/2024\/01\/23-greg-chen.png\/w=1024,fit=scale-down 1024w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/53\/2024\/01\/23-greg-chen.png\/w=300,fit=scale-down 300w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/53\/2024\/01\/23-greg-chen.png\/w=150,fit=scale-down 150w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/53\/2024\/01\/23-greg-chen.png\/w=768,fit=scale-down 768w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n<\/div><ul class=\"wp-block-list\">\n<li><strong>Diferencial:&nbsp;<\/strong>fluxo de trabalho detalhado<\/li>\n<\/ul><p class=\"wp-block-paragraph\">Greg Chen tem um dos melhores sites de portf&oacute;lio se voc&ecirc; est&aacute; procurando uma maneira atraente de organizar suas p&aacute;ginas de produto. Chen, profissional rec&eacute;m-formado pela Universidade Carnegie Mellon, se descreve e mostra projetos em destaque j&aacute; na p&aacute;gina inicial.<\/p><p class=\"wp-block-paragraph\">Assim que voc&ecirc; clicar em um dos links do projeto, ver&aacute; um v&iacute;deo e uma breve descri&ccedil;&atilde;o do projeto. Conforme voc&ecirc; rola para baixo, ele exibir&aacute; o contexto do projeto, seu processo de pesquisa e design, bem como o resultado. Greg tamb&eacute;m anexa fotos e capturas de tela para ilustrar seu fluxo de trabalho e destacar sua expertise.<\/p><div class=\"wp-block-image\">\n<figure class=\"aligncenter size-large\"><img decoding=\"async\" width=\"1024\" height=\"561\" src=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/53\/2024\/01\/24-greg-chen-2.png\/w=1024,h=1024,fit=scale-down\" alt=\"exemplo de portf&oacute;lio de greg Chen\" class=\"wp-image-42062\" srcset=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/53\/2024\/01\/24-greg-chen-2.png\/w=1024,fit=scale-down 1024w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/53\/2024\/01\/24-greg-chen-2.png\/w=300,fit=scale-down 300w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/53\/2024\/01\/24-greg-chen-2.png\/w=150,fit=scale-down 150w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/53\/2024\/01\/24-greg-chen-2.png\/w=768,fit=scale-down 768w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n<\/div><p class=\"wp-block-paragraph\">Al&eacute;m de descrever sua forma&ccedil;&atilde;o educacional e profissional na p&aacute;gina Sobre, Greg disponibiliza um curr&iacute;culo para download para refer&ecirc;ncia futura e explica seu papel em mais detalhes.<\/p><h3 class=\"wp-block-heading\" id=\"h-2-marino-franulovic\"><strong>2.&nbsp;<\/strong><a href=\"https:\/\/www.franulovic.com\/\" target=\"_blank\" rel=\"noreferrer noopener\"><strong>Marino Franulovic<\/strong><\/a><\/h3><div class=\"wp-block-image\">\n<figure class=\"aligncenter size-large\"><img decoding=\"async\" width=\"1024\" height=\"579\" src=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/53\/2024\/01\/25-marino-franulovic.png\/w=1024,h=1024,fit=scale-down\" alt=\"portf&oacute;lio de marino franulovic\" class=\"wp-image-42066\" srcset=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/53\/2024\/01\/25-marino-franulovic.png\/w=1024,fit=scale-down 1024w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/53\/2024\/01\/25-marino-franulovic.png\/w=300,fit=scale-down 300w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/53\/2024\/01\/25-marino-franulovic.png\/w=150,fit=scale-down 150w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/53\/2024\/01\/25-marino-franulovic.png\/w=768,fit=scale-down 768w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n<\/div><ul class=\"wp-block-list\">\n<li><strong>Diferencial:&nbsp;<\/strong>anima&ccedil;&otilde;es sutis em toda a p&aacute;gina inicial<\/li>\n<\/ul><p class=\"wp-block-paragraph\">Marino Franulovic possui um diploma Artes pela Universidade Coventry e concentra sua carreira em consultoria de marketing digital.<\/p><p class=\"wp-block-paragraph\">A se&ccedil;&atilde;o acima da dobra da p&aacute;gina inicial tem um grande t&iacute;tulo, sua biografia resumida e textos animados. Abaixo disso, Marino descreve seus servi&ccedil;os, que incluem planejamento e desenvolvimento de marketing, aplicando efeitos sutis de flutua&ccedil;&atilde;o &agrave; medida que os usu&aacute;rios rolam a p&aacute;gina.<\/p><p class=\"wp-block-paragraph\">Mais abaixo, apresenta uma postagem de blog, uma se&ccedil;&atilde;o Sobre com seus detalhes de contato e foto e, por fim, depoimentos. Embora o&nbsp;<a href=\"\/br\/tutoriais\/portfolio-desenvolvedor-web\/\" target=\"_blank\" rel=\"noreferrer noopener\"><strong>portf&oacute;lio de desenvolvedor web<\/strong><\/a>&nbsp;do Marino seja um &oacute;timo exemplo de bom design, ele poderia ser aprimorado ao exibir trabalhos anteriores para convencer poss&iacute;veis clientes a trabalharem com ele.<\/p><h3 class=\"wp-block-heading\" id=\"h-3-dayla-baron\"><strong>3.&nbsp;<\/strong><a href=\"https:\/\/www.dalyabaron.com\/\" target=\"_blank\" rel=\"noreferrer noopener\"><strong>Dayla Baron<\/strong><\/a><\/h3><div class=\"wp-block-image\">\n<figure class=\"aligncenter size-large\"><img decoding=\"async\" width=\"1024\" height=\"541\" src=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/53\/2024\/01\/26-dayla-baron.png\/w=1024,h=1024,fit=scale-down\" alt=\"dayla baron, exemplo de portf&oacute;lio online\" class=\"wp-image-42073\" srcset=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/53\/2024\/01\/26-dayla-baron.png\/w=1024,fit=scale-down 1024w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/53\/2024\/01\/26-dayla-baron.png\/w=300,fit=scale-down 300w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/53\/2024\/01\/26-dayla-baron.png\/w=150,fit=scale-down 150w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/53\/2024\/01\/26-dayla-baron.png\/w=768,fit=scale-down 768w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n<\/div><ul class=\"wp-block-list\">\n<li><strong>Diferencial:<\/strong>&nbsp;foco em seu curr&iacute;culo<\/li>\n<\/ul><p class=\"wp-block-paragraph\">Para aqueles que procuram inspira&ccedil;&atilde;o para seu portf&oacute;lio de escrita acad&ecirc;mica, o site de Dayla Baron &eacute; um excelente exemplo.<\/p><p class=\"wp-block-paragraph\">Este estudante de doutorado em astrof&iacute;sica mant&eacute;m a navega&ccedil;&atilde;o simples, exibindo quatro menus na p&aacute;gina inicial &ndash; Curr&iacute;culo, Pesquisa, Divulga&ccedil;&atilde;o e Pessoal. Os menus tamb&eacute;m s&atilde;o fixos, ent&atilde;o os visitantes n&atilde;o precisam retornar &agrave; p&aacute;gina inicial para encontrar outras categorias.<\/p><p class=\"wp-block-paragraph\">Dayla exibe sua trajet&oacute;ria acad&ecirc;mica, pr&ecirc;mios e publica&ccedil;&otilde;es cronologicamente na p&aacute;gina de Curr&iacute;culo, enquanto a p&aacute;gina de Pesquisa possui infogr&aacute;ficos e figuras para ajudar os leitores a terem uma vis&atilde;o geral de seus trabalhos acad&ecirc;micos.<\/p><h2 class=\"wp-block-heading\" id=\"h-dicas-para-um-site-de-portfolio-de-sucesso\"><strong>Dicas para um Site de Portf&oacute;lio de Sucesso<\/strong><\/h2><p class=\"wp-block-paragraph\">Os exemplos acima deixam claro que projetar um portf&oacute;lio n&atilde;o envole apenas est&eacute;tica, mas tamb&eacute;m sobre a UX geral e o conte&uacute;do. Portanto, esta se&ccedil;&atilde;o abordar&aacute; cinco caracter&iacute;sticas que voc&ecirc; deve considerar ao criar um novo portf&oacute;lio ou atualizar um existente.<\/p><h3 class=\"wp-block-heading\">Projetos Relevantes<\/h3><p class=\"wp-block-paragraph\">Certifique-se de incluir apenas os seus melhores trabalhos no portf&oacute;lio, para destacar habilidades relevantes para a posi&ccedil;&atilde;o que voc&ecirc; est&aacute; interessado.<\/p><p class=\"wp-block-paragraph\">Portanto, definir um p&uacute;blico-alvo &eacute; importante para ajudar a filtrar seu trabalho e exibir sua expertise sob a perspectiva do cliente. Por exemplo, fot&oacute;grafos de alimentos devem manter seu portf&oacute;lio limitado &agrave; fotografia comercial e de alimentos, mesmo que tenham capturado belas fotos de paisagens.<\/p><h3 class=\"wp-block-heading\"><strong>Navega&ccedil;&atilde;o Simples<\/strong><\/h3><p class=\"wp-block-paragraph\">A navega&ccedil;&atilde;o f&aacute;cil permite que os visitantes do site encontrem o que querem mais rapidamente, proporcionando uma &oacute;tima experi&ecirc;ncia ao usu&aacute;rio. Evite ter muitos links de menu e garanta que o design seja totalmente responsivo para dispositivos m&oacute;veis.<\/p><p class=\"wp-block-paragraph\">Se voc&ecirc; quer exercer a criatividade, n&atilde;o se esque&ccedil;a da experi&ecirc;ncia do usu&aacute;rio. Por exemplo, aqueles que&nbsp;<a href=\"\/br\/tutoriais\/como-criar-um-portfolio-de-fotografia\/\" target=\"_blank\" rel=\"noreferrer noopener\"><strong>criam um portf&oacute;lio de fotografia<\/strong><\/a>&nbsp;podem usar o portf&oacute;lio de Demas Rusli como exemplo de organiza&ccedil;&atilde;o de diferentes categorias.<\/p><div class=\"wp-block-image\">\n<figure class=\"aligncenter size-large\"><img decoding=\"async\" width=\"1024\" height=\"595\" src=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/53\/2024\/01\/15-demas-rusli-2.png\/w=1024,h=1024,fit=scale-down\" alt=\"portf&oacute;lio de demas rusli\" class=\"wp-image-42082\" srcset=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/53\/2024\/01\/15-demas-rusli-2.png\/w=1024,fit=scale-down 1024w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/53\/2024\/01\/15-demas-rusli-2.png\/w=300,fit=scale-down 300w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/53\/2024\/01\/15-demas-rusli-2.png\/w=150,fit=scale-down 150w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/53\/2024\/01\/15-demas-rusli-2.png\/w=768,fit=scale-down 768w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n<\/div><h3 class=\"wp-block-heading\"><strong>Design Atraente<\/strong><\/h3><p class=\"wp-block-paragraph\">Seguir as&nbsp;<a href=\"\/br\/tutoriais\/boas-praticas-web-design\/\" target=\"_blank\" rel=\"noreferrer noopener\"><strong>melhores pr&aacute;ticas de web design<\/strong><\/a>&nbsp;&eacute; essencial para proporcionar uma boa experi&ecirc;ncia ao usu&aacute;rio e maximizar suas chances de contrata&ccedil;&atilde;o. Independentemente do tipo do seu portf&oacute;lio, certifique-se de:<\/p><ul class=\"wp-block-list\">\n<li>Usar imagens de alta qualidade.<\/li>\n\n\n\n<li>Selecione uma paleta de cores que melhor represente sua personalidade e destaque seu trabalho.<\/li>\n\n\n\n<li>Escolher a tipografia certa.<\/li>\n<\/ul><p class=\"wp-block-paragraph\"><a href=\"\/br\/templates-de-sites\" target=\"_blank\" rel=\"noreferrer noopener\"><strong>Temas de sites<\/strong><\/a>&nbsp;feitos por designers profissionais s&atilde;o uma &oacute;tima maneira de come&ccedil;ar.&nbsp;A maioria dos&nbsp;<a href=\"\/br\/criador-de-sites\" target=\"_blank\" rel=\"noreferrer noopener\"><strong>Criadores de Sites<\/strong><\/a>, incluindo o da Hostinger, oferece &oacute;timos&nbsp;modelos de sites para curr&iacute;culos&nbsp;e portf&oacute;lios online, ent&atilde;o voc&ecirc; n&atilde;o precisa criar tudo do zero.<\/p><p class=\"wp-block-paragraph\">Basta adicionar seu conte&uacute;do e, se necess&aacute;rio, personalizar o design com nosso editor f&aacute;cil de usar.<\/p><div class=\"wp-block-image\">\n<figure class=\"aligncenter size-large\"><img decoding=\"async\" width=\"1024\" height=\"583\" src=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/53\/2023\/08\/edicao-criador-de-sites-hostinger.png\/w=1024,h=1024,fit=scale-down\" alt=\"\" class=\"wp-image-39274\" srcset=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/53\/2023\/08\/edicao-criador-de-sites-hostinger.png\/w=1024,fit=scale-down 1024w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/53\/2023\/08\/edicao-criador-de-sites-hostinger.png\/w=300,fit=scale-down 300w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/53\/2023\/08\/edicao-criador-de-sites-hostinger.png\/w=150,fit=scale-down 150w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/53\/2023\/08\/edicao-criador-de-sites-hostinger.png\/w=768,fit=scale-down 768w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n<\/div><p>\n\n        <div class=\"protip\">\n            <div class=\"protip__heading\">\n                <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\">\n                    <path d=\"M1.49234 23.5024C1.23229 23.5024 0.972242 23.4024 0.782206 23.2123C0.562165 22.9923 0.452144 22.6822 0.502153 22.3722C0.562165 21.9221 1.14227 17.9113 3.00262 16.351C3.63274 15.8209 4.43289 15.5509 5.26305 15.5609C6.09321 15.5909 6.87335 15.9109 7.47347 16.4911C8.6937 17.6913 8.76371 19.6717 7.6435 20.9919C6.0832 22.8523 2.08245 23.4324 1.63237 23.4924C1.59236 23.4924 1.54235 23.4924 1.50234 23.4924L1.49234 23.5024ZM5.16303 17.5613C4.84297 17.5613 4.53291 17.6713 4.29287 17.8813C3.60274 18.4614 3.07264 19.9317 2.75258 21.242C4.06282 20.9219 5.5331 20.3918 6.11321 19.7017C6.55329 19.1716 6.54329 18.3814 6.0832 17.9213C5.85316 17.7013 5.5431 17.5713 5.20304 17.5613C5.19304 17.5613 5.17303 17.5613 5.16303 17.5613ZM11.7243 21.8821C11.4942 21.8821 11.2642 21.8021 11.0841 21.652C10.8541 21.462 10.7241 21.1819 10.7241 20.8819V15.9109L8.08358 13.2705H3.11264C2.81259 13.2705 2.53254 13.1404 2.3425 12.9104C2.15246 12.6803 2.07245 12.3803 2.12246 12.0902C2.19247 11.7102 2.84259 8.36953 4.70294 7.12929C6.33325 6.04909 8.96375 6.49918 10.244 6.80923C11.5442 4.96889 13.2546 3.4286 15.2349 2.33839C17.4553 1.11816 19.9858 0.518051 22.4963 0.498047C23.0464 0.498047 23.4865 0.948132 23.4865 1.49824C23.4865 5.0389 22.3763 9.97983 17.1753 13.7605C17.4853 15.0408 17.9354 17.6613 16.8552 19.2816C15.615 21.1419 12.2744 21.7921 11.8943 21.8621C11.8343 21.8721 11.7743 21.8821 11.7143 21.8821H11.7243ZM12.7245 16.181V19.6016C13.7146 19.2916 14.7948 18.7915 15.2049 18.1814C15.675 17.4812 15.605 16.091 15.385 14.9008C14.5248 15.3808 13.6346 15.8109 12.7245 16.181ZM9.66388 12.0302L11.9643 14.3307C13.1845 13.8306 14.3648 13.2204 15.485 12.5103C19.9358 9.51974 21.2361 5.60901 21.4561 2.53843C19.6157 2.67846 17.8254 3.20856 16.2051 4.09872C14.2847 5.14892 12.6544 6.68921 11.4942 8.54956C10.7841 9.65977 10.174 10.82 9.66388 12.0302ZM4.39289 11.2701H7.81353C8.1936 10.3599 8.63368 9.46974 9.11377 8.60957C7.92355 8.38953 6.51329 8.31952 5.81315 8.78961C5.19304 9.19968 4.70294 10.3099 4.39289 11.2701Z\" fill=\"#673DE6\"\/>\n                <\/svg>\n                <p class=\"protip__title\">\n                    Dica                <\/p>\n            <\/div>\n            <p class=\"protip__content\">Aprenda&nbsp;<a href=\"\/br\/tutoriais\/como-criar-um-site-passo-a-passo\/\" target=\"_blank\" rel=\"noreferrer noopener\"><strong>como projetar um site<\/strong><\/a>&nbsp;e leve seu portf&oacute;lio online a novos patamares.<\/p>\n                    <\/div>\n        \n\n\n\n<\/p><h3 class=\"wp-block-heading\"><strong>Informa&ccedil;&otilde;es Sobre Voc&ecirc;<\/strong><\/h3><p class=\"wp-block-paragraph\">Sua hist&oacute;ria profissional ajuda a convencer potenciais clientes a trabalhar com voc&ecirc;, especialmente quando voc&ecirc; possui uma trajet&oacute;ria acad&ecirc;mica, treinamento e reconhecimento relevantes. No entanto, n&atilde;o tenha medo de se afastar de um tom profissional para <a href=\"\/br\/tutoriais\/como-criar-uma-marca\/\" target=\"_blank\" rel=\"noreferrer noopener\"><strong>construir uma marca<\/strong><\/a>&nbsp;adequada &agrave; sua personalidade.<\/p><p class=\"wp-block-paragraph\">Algumas das informa&ccedil;&otilde;es necess&aacute;rias para incluir em sites de portf&oacute;lio s&atilde;o:<\/p><ul class=\"wp-block-list\">\n<li>Detalhes pessoais, como hobbies e valores.<\/li>\n\n\n\n<li>Forma&ccedil;&atilde;o profissional, como educa&ccedil;&atilde;o e certificados.<\/li>\n\n\n\n<li>Sua foto.<\/li>\n<\/ul><h3 class=\"wp-block-heading\"><strong>Prova Social<\/strong><\/h3><p class=\"wp-block-paragraph\">A prova social torna sua marca pessoal mais confi&aacute;vel. Al&eacute;m de incluir depoimentos de clientes ou colegas anteriores, voc&ecirc; pode adicionar artigos e pr&ecirc;mios.<\/p><p class=\"wp-block-paragraph\">Por exemplo, Enrico Deiana menciona sua participa&ccedil;&atilde;o no j&uacute;ri do Awwwards em seu portf&oacute;lio, e Helena Bowen incluiu artigos em que seus clientes foram destaque.<\/p><figure class=\"wp-block-image size-large\"><a href=\"\/br\/criador-de-sites\" target=\"_blank\" rel=\"noreferrer noopener\"><img decoding=\"async\" width=\"1024\" height=\"300\" src=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/53\/2023\/02\/BR-Website-Builder_in-text-banner.png\/w=1024,h=1024,fit=scale-down\" alt=\"\" class=\"wp-image-32917\" srcset=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/53\/2023\/02\/BR-Website-Builder_in-text-banner.png\/w=1024,fit=scale-down 1024w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/53\/2023\/02\/BR-Website-Builder_in-text-banner.png\/w=300,fit=scale-down 300w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/53\/2023\/02\/BR-Website-Builder_in-text-banner.png\/w=150,fit=scale-down 150w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/53\/2023\/02\/BR-Website-Builder_in-text-banner.png\/w=768,fit=scale-down 768w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/53\/2023\/02\/BR-Website-Builder_in-text-banner.png\/w=1536,fit=scale-down 1536w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/a><\/figure><h2 class=\"wp-block-heading\" id=\"h-conclusao\"><strong>Conclus&atilde;o<\/strong><\/h2><p class=\"wp-block-paragraph\">Um bom site de portf&oacute;lio combina o design certo, exemplos de trabalhos relevantes e conte&uacute;do bem selecionado.<\/p><p class=\"wp-block-paragraph\">Antes de&nbsp;<a href=\"\/br\/tutoriais\/como-fazer-um-portfolio-digital\/\" target=\"_blank\" rel=\"noreferrer noopener\"><strong>construir um portf&oacute;lio<\/strong><\/a>, considere seu trabalho, sua personalidade e seus valores para que voc&ecirc; se destaque. Um web designer, por exemplo, pode demonstrar suas habilidades t&eacute;cnicas com micro-intera&ccedil;&otilde;es, como Enrico Deiana, ou escrever seus princ&iacute;pios como Tamara Sredojevic faz.<\/p><p class=\"wp-block-paragraph\">Al&eacute;m do design, usar sua experi&ecirc;ncia, como as habilidades de reda&ccedil;&atilde;o de Todd Clarke, &eacute; uma &oacute;tima maneira de mostrar aos empregadores e clientes em potencial o que voc&ecirc; tem a oferecer.<\/p><p class=\"wp-block-paragraph\">Esperamos que, nos exemplos que trouxemos acima, voc&ecirc; tenha encontrado inspira&ccedil;&atilde;o para o design e gerado ideias para aplicar ao seu portf&oacute;lio online.<\/p><p class=\"wp-block-paragraph\">Se voc&ecirc; n&atilde;o tem certeza sobre a qualidade do seu portf&oacute;lio, pe&ccedil;a aos seus amigos ou entre em contato com um especialista para uma avalia&ccedil;&atilde;o profissional. Boa sorte!<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Um portf&oacute;lio digital &eacute; um cart&atilde;o de visita que ajuda a destacar seus melhores trabalhos e aumentar a sua visibilidade online, abrindo oportunidades para poss&iacute;veis empregos e colabora&ccedil;&otilde;es. No entanto, criar um portf&oacute;lio online que se destaque pode ser desafiador, e &eacute; por isso que recomendamos analisar os melhores exemplos dispon&iacute;veis na internet antes de [&#8230;]<\/p>\n<p><a class=\"btn btn-secondary understrap-read-more-link\" href=\"\/br\/tutoriais\/sites-portfolio-exemplos\/\">Read More&#8230;<\/a><\/p>\n","protected":false},"author":356,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"rank_math_title":"Ranking: Os 19 Melhores Exemplos de Sites de Portf\u00f3lio","rank_math_description":"Descubra os 19 melhores portf\u00f3lios digitais para inspira\u00e7\u00e3o! Com sites de fot\u00f3grafos, artistas, escritores e mais. Saiba como se destacar!","rank_math_focus_keyword":"sites portfolio exemplos","footnotes":""},"categories":[8026,8071],"tags":[5648],"class_list":["post-42060","post","type-post","status-publish","format-standard","hentry","category-sites","category-tipos-de-sites","tag-portfolio"],"hreflangs":[{"locale":"en-US","link":"https:\/\/www.hostinger.com\/tutorials\/portfolio-website-examples","default":0},{"locale":"pt-BR","link":"https:\/\/www.hostinger.com\/br\/tutoriais\/sites-portfolio-exemplos\/","default":0},{"locale":"fr-FR","link":"https:\/\/www.hostinger.com\/fr\/tutoriels\/portfolio-exemple\/","default":0},{"locale":"es-ES","link":"https:\/\/www.hostinger.com\/es\/tutoriales\/portfolio-ejemplos\/","default":0},{"locale":"id-ID","link":"https:\/\/www.hostinger.com\/id\/tutorial\/contoh-website-portofolio\/","default":0},{"locale":"de-DE","link":"https:\/\/www.hostinger.com\/de\/tutorials\/portfolio-beispiele\/","default":0},{"locale":"it-IT","link":"https:\/\/www.hostinger.com\/it\/tutorial\/esempi-di-portfolio\/","default":0},{"locale":"nl-NL","link":"https:\/\/www.hostinger.com\/nl\/tutorials\/portfolio-voorbeeld\/","default":0},{"locale":"ko-KR","link":"http:\/\/www.hostinger.com\/kr\/tutorials\/portfolio-website-examples\/","default":0},{"locale":"en-PH","link":"https:\/\/www.hostinger.com\/ph\/tutorials\/portfolio-website-examples","default":0},{"locale":"en-MY","link":"https:\/\/www.hostinger.com\/my\/tutorials\/portfolio-website-examples","default":0},{"locale":"en-GB","link":"https:\/\/www.hostinger.com\/uk\/tutorials\/portfolio-website-examples","default":0},{"locale":"en-IN","link":"https:\/\/www.hostinger.com\/in\/tutorials\/portfolio-website-examples","default":0},{"locale":"en-CA","link":"https:\/\/www.hostinger.com\/ca\/tutorials\/portfolio-website-examples","default":0},{"locale":"en-AU","link":"https:\/\/www.hostinger.com\/au\/tutorials\/portfolio-website-examples","default":0},{"locale":"en-NG","link":"https:\/\/www.hostinger.com\/ng\/tutorials\/portfolio-website-examples","default":0},{"locale":"es-AR","link":"https:\/\/www.hostinger.com\/ar\/tutoriales\/portfolio-ejemplos\/","default":0},{"locale":"es-MX","link":"https:\/\/www.hostinger.com\/mx\/tutoriales\/portfolio-ejemplos\/","default":0},{"locale":"es-CO","link":"https:\/\/www.hostinger.com\/co\/tutoriales\/portfolio-ejemplos\/","default":0},{"locale":"pt-PT","link":"https:\/\/www.hostinger.com\/pt\/tutoriais\/sites-portfolio-exemplos\/","default":0}],"acf":[],"_links":{"self":[{"href":"https:\/\/www.hostinger.com\/br\/tutoriais\/wp-json\/wp\/v2\/posts\/42060","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.hostinger.com\/br\/tutoriais\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.hostinger.com\/br\/tutoriais\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.hostinger.com\/br\/tutoriais\/wp-json\/wp\/v2\/users\/356"}],"replies":[{"embeddable":true,"href":"https:\/\/www.hostinger.com\/br\/tutoriais\/wp-json\/wp\/v2\/comments?post=42060"}],"version-history":[{"count":2,"href":"https:\/\/www.hostinger.com\/br\/tutoriais\/wp-json\/wp\/v2\/posts\/42060\/revisions"}],"predecessor-version":[{"id":42088,"href":"https:\/\/www.hostinger.com\/br\/tutoriais\/wp-json\/wp\/v2\/posts\/42060\/revisions\/42088"}],"wp:attachment":[{"href":"https:\/\/www.hostinger.com\/br\/tutoriais\/wp-json\/wp\/v2\/media?parent=42060"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.hostinger.com\/br\/tutoriais\/wp-json\/wp\/v2\/categories?post=42060"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.hostinger.com\/br\/tutoriais\/wp-json\/wp\/v2\/tags?post=42060"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}