No ano passado, Josh Como, autor de tutoriais e tutoriais para desenvolvedores, em sua conta no Twitter se ofereceu para ver e criticar os sites de portfólio de todos os visitantes. Durante o evento, ele percebeu uma coisa interessante: o feedback não era muito diverso, as deficiências no design do portfólio para a maioria dos programadores iniciantes acabaram sendo quase as mesmas. Então, Como teve a ideia de que seria bom reunir os comentários repetidos com frequência em uma lista. Com isso, obteve um material bastante extenso, que foi formatado em livro eletrônico - está disponível no site do autor gratuitamente. Abaixo do corte você encontrará as principais teses, recomendações e fontes que são fornecidas nele.
Problemas gerais
O que se entende por portfólio de desenvolvedor?
Na maioria dos casos, estamos falando de um site onde são apresentados projetos pessoais, pelos quais se pode julgar sua experiência e habilidades.
É necessário?
Não. Nem todos os desenvolvedores incluem um portfólio em seu currículo, e nem todos os empregadores esperam essas informações. Além disso, tem quem nem vai abrir o link. O portfólio é opcional, mas pode dar uma boa vantagem sobre a concorrência e mostrar o que você pode fazer da forma mais clara possível.
Não existem outras maneiras de mostrar seu trabalho?
Há. O currículo agora costuma incluir, por exemplo, links para LinkedIn ou Github - recursos que também podem ser usados para destacar suas atividades. A vantagem de um site de portfólio é que ele permite que você fale sobre você de uma maneira conveniente e benéfica para você. Não há necessidade de seguir um formato predeterminado, você pode fornecer o contexto que desejar para cada projeto.
Para quem são essas dicas?
Para os desenvolvedores juniores, que, por um lado, já têm algo a mostrar, e por outro, querem compensar a falta de experiência profissional aos olhos do empregador e se destacar na multidão. O autor se concentra principalmente no front-end e full-stack, mas a maioria das recomendações também será útil para aqueles que estão envolvidos no back-end ou desenvolvimento móvel.
Quantos projetos o site deve ter?
A quantidade ideal é de dois a cinco. A abordagem “quanto mais, melhor” não funciona aqui - o portfólio é projetado para mostrar os melhores exemplos de trabalho, e não para cobrir toda a cronologia. Se você realmente deseja mostrar mais, pelo menos classifique-os - deixe os melhores pendurados na página principal, e o resto é aberto clicando no gato "Mostrar mais" ou na guia Arquivo.
Se houver apenas um projeto, mas sua escala e qualidade forem decentes, é permitido adicionar a quantidade em detrimento de algo menos impressionante: fazer um produto simples apenas para portfólio ou uma pequena variação do tema principal (por exemplo , uma extensão baseada em um aplicativo móvel), indique o projeto atual com a marca "Em andamento", informe sobre alguma atividade que não esteja diretamente relacionada ao código (documentação, organização de eventos para desenvolvedores).
Quais projetos não podem ser incluídos?
Existem várias categorias de projetos que devem ser usados com muito cuidado:
- , – , . , , , . . , ( 50% ) .
- . – . , .
- -. – . , - . , , , .
- , . « ». , . , , . , , .
Quais projetos você deve incluir primeiro?
Além do óbvio (bom e interessante), existem várias características que os empregadores tendem a valorizar especialmente:
- Almeje projetos que foram criados para resolver um problema particular específico. Eles mostram que você sabe como traduzir habilidades técnicas em prática e permitem que você avalie sua abordagem a todos os aspectos do gerenciamento de projetos, do início ao fim.
- Projetos ao vivo que têm usuários reais, mesmo que sejam pequenos, tendem a gerar mais interesse do que versões de demonstração de produtos que foram feitos para o próprio processo.
- Projetos complexos de grande escala que exigiam muito tempo e esforço. Nem todo novato, em princípio, é capaz de levar algo assim até o fim, então o próprio fato da existência falará a seu favor.
- . , , , . , , , .
Em geral, você pode adicionar uma variedade de produtos de sua atividade ao seu portfólio: projetos educacionais, troféus de hackathons, pequenos programas que você escreveu para suas próprias necessidades. Os juniores geralmente estão preocupados que seus projetos não sejam especiais, eles não são oprimidos pela complexidade e serão patéticos de se olhar no portfólio. Não eleve a barra muito alto. Se você tem algo a dizer sobre o projeto (como você lutou pela implementação da função, como escolheu uma solução e depois a abandonou em favor de outra), provavelmente, ele tem complexidade oculta suficiente e reflete adequadamente o seu atual nível.
Estrutura e conteúdo do site
Os sites de portfólio geralmente não têm uma estrutura muito extensa. Na verdade, tudo se resume a um conjunto dos seguintes blocos semânticos: seção "Sobre mim", uma lista / grade de projetos, com descrições detalhadas para cada um dos contatos. A seguir, veremos cada um deles separadamente.
Sobre mim O
público dos sites de portfólio consiste em dois grupos: contratação de especialistas e desenvolvedores. Em diferentes estágios de emprego, seu site provavelmente será visto por ambos. Conseqüentemente, você precisa manobrar para impressionar os dois grupos ao mesmo tempo.
A seção "Sobre mim" é destinada principalmente a oficiais de pessoal. Sua principal tarefa é tornar seus "negócios pessoais" pelo menos um pouco memoráveis no contexto de outras pessoas. Na opinião do autor, o principal flagelo dos sites de portfólio agora é a total impessoalidade, o desejo de se enquadrar em um estilo corporativo que usa o mesmo backbone estrutural (formado em tal ou tal universidade, trabalhei ou trabalho lá, possuo tal e tal tecnologia ) e clichês de discurso de recrutamento.
Se você se comprometer a escrever um texto detalhado para este bloco, tente adicionar algo original a ele - mesmo quando você entrou em desenvolvimento, pelo menos que tipo de filosofia de vida e programação você tem. A barra mais baixa para avaliar a originalidade é a seguinte: se você vir seu texto no site de outra pessoa, reconhecerá imediatamente o plágio ou pensará no primeiro momento que alguém acabou de falar sobre si mesmo nos mesmos termos?
Os desenvolvedores raramente mostram interesse nesta seção, então é melhor para eles trazerem a lista de linguagens e tecnologias com as quais você trabalha em algum lugar de destaque.
Mais uma coisa a ter em mente ao escolher o tom de sua história é que o RH e os desenvolvedores olham para suas habilidades juniores por meio de lentes diferentes. Os oficiais de pessoal são mais propensos a apreciar o entusiasmo e a dedicação ao seu trabalho. Para os desenvolvedores, em primeiro lugar, uma auto-estima adequada é importante - eles ainda precisam ensiná-lo. Portanto, ao descrever seu amor pelo código, tente não cair em excesso de confiança. Se você se vê como um especialista estabelecido e ás do desenvolvimento, o RH pode estar imbuído de sua confiança, mas os futuros mentores provavelmente acharão que trabalhar com você será difícil.
Projetos e suas descrições
A história dos projetos é o bloco semântico central da estrutura do site. Normalmente, a página principal contém uma grade ou uma lista de projetos com uma breve apresentação de cada um: título, captura de tela, algumas linhas de descrição, pilha de tecnologia, link para a versão demo.
Cada um desses cartões deve necessariamente ser traduzido para uma página com uma descrição detalhada. Se as informações se limitarem aos itens listados, o significado do site do portfólio, de fato, se perde.
Esperar que um produto fale por si mesmo é um erro sério que muitos desenvolvedores cometem. “Vender” o seu trabalho é considerado impróprio, por isso a questão se limita a vincular à versão demo e, em um cenário ideal, à base de código - o empregador tem a oportunidade de dar uma opinião por conta própria.
Existem duas desvantagens críticas nesta abordagem. Em primeiro lugar, sem a sua supervisão, a interação do visitante do site com o produto torna-se imprevisível. Será muito difícil para você adivinhar com antecedência como será a jornada do usuário e em que ponto ela será interrompida, especialmente se você nunca fez um design de UX. A pessoa pode simplesmente não alcançar exatamente as coisas de que você mais se orgulha e nas quais aposta.
O mesmo acontece com o código. Não é nenhum segredo que, em termos de qualidade, as bases de código geralmente são heterogêneas: algumas partes são feitas de maneira inteligente e elegante, outras são presas a fita isolante. Por acaso, o observador pode muito bem ser atingido pelo segundo, e não pelo primeiro.
A segunda desvantagem é que essa abordagem, em princípio, não funciona bem para o objetivo final. O portfólio serve para falar sobre você como um especialista. Um produto independente não fornece muitas informações sobre quem o fez, especialmente quando você considera que o conhecimento da versão demo ou do código em nove entre dez casos será muito superficial. No início do artigo, falamos sobre o fato de que um site pessoal, ao contrário de outras plataformas, permite trazer mais contexto. Trata-se de olhar para o projeto por dentro, de como decorreu o design e o desenvolvimento. Essas informações são úteis para o empregador e ilustram melhor suas qualidades profissionais.
Como fornece um plano para construir ao escrever sobre um projeto. Você não precisa cobrir todos os pontos, concentre-se naqueles que realmente têm algo a dizer.
Introdução
- Visão geral, essência do projeto
- Lista das principais funções e características distintivas
- Seu papel no projeto: você trabalhou sozinho ou em grupo, que tipo de coisas você implementou?
- Tecnologias utilizadas
- Link para demonstração e base de código (se possível)
Propósitos e razões
- Por que você empreendeu este projeto, qual é o significado dele para você pessoalmente?
- O que era esperado no início, como era o produto na fase de design?
- Quaisquer outros comentários a respeito da fase de planejamento.
Pontos chave
- ? – , , .
- , .
- , , . , , , .
- ? - , , - .
- , , ? ? ?
- A experiência adquirida influenciou seu trabalho futuro? Se você puder vincular os dois projetos, mostrando como o conhecimento adquirido em um foi útil no outro, tudo bem.
O status atual é uma seção opcional. Faz sentido incluí-lo se o produto for realmente usado por alguém; então você pode mencionar que tipo de público ele tem e o que as pessoas estão dizendo. Se o projeto foi feito especificamente para o portfólio, você não deve insistir nele.
O texto, provavelmente, acabará sendo bastante - a descrição de um projeto pode levar duas ou três páginas. Para aumentar as chances de o leitor chegar ao fim, adapte-o para ler na diagonal: parágrafos curtos, cabeçalhos, listas.
Contatos
Como regra, este bloco contém um formulário de feedback. Se for mais conveniente para você se comunicar por e-mail, você pode limitar-se ao link mala direta para. Links para páginas em redes sociais e um blog profissional, se você tiver um, também são retirados aqui. Agora, há uma tendência de incorporar um blog diretamente em um site de portfólio, mas o autor é cético em relação a essa ideia. O portfólio é projetado principalmente para comunicação com o empregador - a probabilidade de ele encontrar tempo para ler as postagens é extremamente pequena. Além disso, você terá que monitorar de perto a regularidade das atualizações e a qualidade do conteúdo.
Implementação técnica
Design As
coisas ruins primeiro: o design tem muito peso. Conteúdo é conteúdo, mas os recursos de percepção visual funcionam sem interrupção, então quanto mais bonito ( nem mais conveniente, é mais bonito ) o site, mais profissional você parecerá aos olhos dos visitantes.
Nem todos os desenvolvedores são fortes em design ou podem pagar um design personalizado, portanto, o uso de modelos prontos parece ser a opção de uso intensivo de recursos ideal para o resultado. A melhor coisa é selecionar alguns e misturá-los para fazer a interface parecer mais ou menos nova.
Como observa que, durante a navegação em seu portfólio massivo, ele se deparou repetidamente com o mesmo design popular, simplesmente copiado pixel por pixel:
Isso definitivamente não é necessário. Mesmo que o projeto seja de domínio público, ele deixa uma sensação desagradável de algo secundário e levanta questões sobre a legalidade do empréstimo.
Aqui estão alguns modelos nos quais você pode confiar ao criar um design:
Portfólio Starter
Craig Portfólio
Alex Portfólio
Dexter Portfólio
Novo
Kester
Diretor de Arte
Desenvolvimento de site
Se você está se candidatando a uma posição de desenvolvedor front-end ou full-stack, você precisa criar um site por conta própria, sem soluções nocode - a posição obriga ... Você pode usar qualquer ferramenta, de preferência aquelas que você já conhece, para não perder tempo. Opções a serem consideradas: vanilla HTML / CSS / JS, 11ty, Gatsby , Next , Jekyll . Em meu próprio nome, o autor recomenda Gatsby, principalmente pelo fato de que muitos temas e plug-ins foram feitos para ele, o que economiza muito esforço.
Elementos interativos, pequenas animações e outros bônus visuais que dão vida à navegação parecem muito vantajosos nos sites. Não tenha medo de adicionar algo engraçado ou inesperado de você mesmo.
Nome de domínio
Idealmente, deve ser algo como firstnamelastnamelatinice.com. Se necessário (por exemplo, se o nome já estiver em uso), você pode inserir um código ou elemento dev. Nicky não é aconselhável usar a menos que você seja uma pessoa proeminente na comunidade online.
Os domínios de nível superior podem ser escolhidos de acordo com seu gosto (co, io, domínios específicos de diferentes países). O único ponto: você deve evitar .info, que muitos associam a spam e golpistas. Os sites de portfólio de
hospedagem
são geralmente estáticos, portanto, não criam problemas com os servidores. Existem vários serviços de hospedagem de sites estáticos, entre os quais Como destaca Vercel , Netlify , Github Pages , Surge .
*
Além da teoria para maior clareza, Como dá dois exemplos de carteiras com análise detalhada. O primeiro é o site Charlie Smith, uma pessoa fictícia que o próprio autor fez, focando em uma amostra média típica da Web. O segundo é o site de Julia Johnson , estudante e estagiária da IBM, que lhe causou a mais agradável impressão no contexto de outros enviados por assinantes. Ao comparar um com o outro, é fácil ver como eles se comparam às recomendações.
Site de Charlie - um design inexpressivo sem reviravoltas, uma história estereotipada sobre você, uma descrição curta e superficial dos projetos
Site de Julia - um design mais eficaz, uma estrutura de sucesso, uma história contida, mas não sem rosto sobre você, muitos elementos que animam a página, descrições detalhadas para cada projeto