nextjs resume
1.0.0
Um currículo construído especialmente com profissionais de software em mente. Impressione seu empregador em potencial com um site de currículo bonito e incrivelmente rápido ou gerar um PDF para e -mail e impressão.
Veja um exemplo
Seu currículo também pode gerar um URL seguro que exibirá informações não acessíveis no URL público. A versão segura pode incluir informações privadas, como email, número de telefone e endereço de correspondência. Você pode enviar o link privado para um empregador em potencial ou usá -lo para gerar um PDF mais completo para si mesmo.
O projeto requer apenas algumas etapas para configurar sua configuração personalizada, adicionar conteúdo ao CMS interno e implantar para o Vercel ou Netlify!
A maneira mais simples de começar é clonar e implantar em uma etapa. Depois, você pode editar o CMS e o modelo para atender às suas necessidades.
O projeto foi projetado para ser implantado no netlify ou vercel. Você pode clicar em um dos seguintes botões para clonar o repo, definir variáveis de ambiente e implantar.
Para personalizar seu currículo, clone o projeto que você acabou de criar para sua máquina e cd local.
cd my-resume
npm i Eu testei o projeto com bun , npm , pnpm e yarn e não encontrei problemas notáveis. Para o desenvolvimento, o corredor de teste é padronizado para a bun .
Abra o projeto no editor favorito e abra a pasta edit-me/config/ na raiz, onde você pode editar o arquivo resumeConfig.ts para atender às suas necessidades. O arquivo de configuração contém as seguintes constantes que serão usadas ao longo do projeto (elas são digitadas para fornecer preenchimento automático e verificação de erros apropriados):
accentColor : AccentColor . O nome de uma paleta de destaque da Radix UI Colors. Se estiver usando uma cor padrão, a cor do texto contrastante será branca e, se estiver usando uma cor brilhante, a cor do texto contrastante será preta.neutralColor : NeutralColor . O nome de uma paleta neutra da Radix ui Grays.appTheme : 'system' | 'light' | 'dark' . Se appTheme estiver definido como system , o site de currículo padrão é a preferência do sistema do usuário. Se configurado para light ou dark a preferência do usuário será superestimada.imageTheme : 'light' | 'dark' . Seu OG compartilhe a imagem e os ícones do aplicativo serão gerados em uma variante leve ou escura.pdfTheme : 'light' | 'dark' . Seu PDF será gerado em uma variante leve ou escura. Você também encontrará links.ts que gera links externos na parte inferior do documento. Você pode usar qualquer ícone de ícones simples ao lado desses links.
O gerador de currículo fornece 19 paletas de cores de destaque e 6 paletas de cores neutras prontas para uso. Abaixo estão as capturas de tela de algumas variações no modo claro e escuro.
| Modo de luz | Modo escuro |
|---|---|
Azul/Mauve  | Azul/Mauve  |
Rubi/cinza  | Rubi/cinza  |
Hortelã/ardósia  | Hortelã/ardósia  |
As preferências do seu sotaque, neutro e esquema de cores também se aplicam à imagem OG gerada.
| Modo de luz | Modo escuro |
|---|---|
Azul/ardósia  | Azul/ardósia  |
Em seguida, modifique os dados simulados do CMS que estão incluídos no edit-me/content/ . Cada arquivo de marcação usa campos de matéria frontal usados para adicionar atributos ao item. Esses atributos são seguros, para que o projeto não seja executado se os campos necessários estiverem ausentes ou inválidos. O restante do arquivo de marcação será renderizado como HTML para fornecer uma descrição do item.
Embora os arquivos simulados devam ser bastante auto-explicativos, você pode visualizar a configuração do ContentLayer para obter descrições detalhadas dos campos necessários e opcionais.
Independentemente de onde o aplicativo é implantado, ele pode precisar de acesso às seguintes variáveis de ambiente:
PRIVATE_KEY (opcional): Este é um código, determinado pelo autor, que fornecerá acesso à URL a uma versão do currículo que inclui informações privadas. Recomendamos gerar este código (por exemplo, um UUID ou usar um gerador de senha). Seu projeto pode ser configurado para fornecer um URL secreto que exibirá mais informações do que o URL público. Isso é útil se você deseja enviar um currículo completo para um empregador em potencial ou se deseja gerar um PDF para seu próprio uso. Nesta versão, você pode incluir informações pessoais, como email, número de telefone e endereço, que não deseja visíveis ao público em geral.
O URL privado só funcionará se você adicionou uma variável de ambiente PRIVATE_KEY . Se estiver trabalhando localmente, você pode adicionar isso em um arquivo .env.local :
PRIVATE_KEY=your-private-key
Você pode visitar https://your-url.com/private/your-private-key para ver a versão privada do currículo.
Para a integração interna de remarcar, observe que você deve ter certeza de não confirmar as informações privadas em um repo do Git público . Use esse recurso apenas em um repositório privado e, mesmo assim, esteja ciente das preocupações de segurança sobre como cometer informações privadas com qualquer repo Git.
Para adicionar dados privados ao CMS, basta adicioná -los à pasta privateFields .
cms/privateFields/ . Adicione quantos campos de informações de contato privados quiser exibir. Eles aparecerão na ordem em que estão organizados na pasta, para que você possa usar um prefixo numérico para encomendá -los.label : String necessária . O rótulo do campo, como "email" ou "endereço". Este URL privado é tão seguro quanto as pessoas para as quais você o envia . Para invalidar um URL privado antigo, basta alterar a variável de ambiente PRIVATE_KEY .
O modelo é construído para ser responsivo, bonito e acessível imediatamente. Ele suporta tema de modo escuro/claro automático na versão da Web e um ótimo layout de impressão de uma página única na versão PDF. O projeto suporta um conjunto mínimo de configurações, como cores de destaque, mas se você é um desenvolvedor ou designer de front -end, poderá abrir facilmente o código -fonte e personalizá -lo como achar melhor.
Se você realmente deseja se aprofundar na personalização, tem controle total da configuração do Tailwind no arquivo da pasta root tailwind.config.ts .
Utilizamos a geração de imagens Next.js para gerar gráfico aberto dinâmico (Facebook/Twitter) Compartilhar imagens e ícones de aplicativos. Você pode editar o layout, os estilos e o texto da imagem OG usando as classes Tailwind em src/app/api/og/route.tsx e o ícone no src/app/icon.tsx .
Essa imagem de compartilhamento dinâmico usará sua configuração accentColor personalizada, bem como dados do CMS.
Para sincronizar seu currículo pessoal com a versão mais recente deste projeto, você pode fazer o seguinte:
// add the original repo as a git remote
git remote add upstream [email protected]:colinhemphill/nextjs-resume.git
// pull changes from upstream
git pull upstream mainEm seguida, resolva qualquer conflito de mesclagem e faça as alterações desejadas. Você precisará examinar o Changelog para ver o que aconteceu desde a última vez que você puxou e observe que as mudanças upstream pode quebrar suas personalizações!
