Download codefolio - download do código-fonte codefolio

codefolio

Outras categorias

1.0.0

Baixar

Codefólio

Demonstração ao vivo | Implantação | Sobre | Recursos | Contribuição

Um aplicativo da web pronto para implantação para mostrar seu portfólio de codificação.

Sobre

Codefolio é um aplicativo web do portfólio Jamstack para programadores. Ele é construído usando Nuxt.js e aproveita o módulo @nuxt/content para usar dados do usuário colocados no diretório /content e gerar ativos estáticos prontos para produção.

Características

Todo o código é escrito tendo em mente os módulos e a capacidade de reutilização.

O principal recurso deste aplicativo é o suporte à implantação estática. A codificação de portfólios não requer muitas mudanças, então um site estático é uma escolha melhor do que um SPA normal ou um aplicativo Full-Stack.

Interface do usuário

A interface de usuário do Codefolio foi projetada tendo em mente a facilidade de uso. É totalmente responsivo e usa uma abordagem mobile-first.

O design é baseado no padrão 7-1 Sass e aproveita o Bootstrap 5 parcialmente carregado para layout e utilitários.

O diretório assets/aprite/svg contém arquivos de ícones SVG individuais. Você pode usar esses ícones (ou colocar seus próprios ícones SVG neste diretório) para fazer referência ao nome do ícone no componente vue <icon> .

Contente

Codefolio oferece suporte a dados de usuário personalizados. Além dos dados pessoais, os usuários também podem personalizar outras coisas interessantes, como links externos e o URL do botão de currículo na barra de navegação superior.

Guia de conteúdo

Os geradores de sites estáticos pegam dados brutos do usuário (geralmente em formato markdown ou JSON) para gerar HTML pronto para produção, portanto, você precisará deste guia como referência ao adicionar seu conteúdo ao Codefolio.

Esta é a aparência da estrutura da pasta de conteúdo.

 content
|	navbar.json
|	about.md
|	social-icons.json
|	user.json
|
└───projects
		project1.json
		project2.json
		project3.json
		/* so on... */

Vamos ver para que serve cada arquivo ou pasta.

barra de navegação.json

Este arquivo é usado para dados opcionais relacionados à barra de navegação superior.

Propriedade	Tipo	Descrição
retomarUrl	`string`	URL do arquivo de currículo para o botão de currículo da barra de navegação.
links externos	`array`	Uma matriz contendo objetos para gerar links externos na barra de navegação superior. Cada objeto de link externo precisa ter propriedades de string `text` e `url` para funcionar corretamente.

sobre.md

Este arquivo markdown é usado para a página sobre.

social-icons.json

Este arquivo é usado para gerar ícones sociais na página sobre.

Propriedade	Tipo	Descrição
ícones	`array`	Uma matriz contendo objetos para gerar ícones sociais na página de contato. Cada objeto precisa ter propriedades `name` e `url` (strings). A propriedade `name` deve ter um arquivo svg correspondente no diretório /assets/sprite/svg/ . A maioria dos ícones sociais já está disponível, mas fique à vontade para adicionar seus ícones SVG personalizados. No modo dev, você pode visitar a rota `/_icons` para listar todos os ícones disponíveis.

usuário.json

Este arquivo é usado para detalhes do usuário necessários para a página inicial.

Propriedade	Tipo	Descrição
nome completo	`string`	Nome de usuário.
sobre	`string`	Um pouco sobre o usuário.
imagem	`string`	Um URL de imagem válido começando em http ou um nome (incluindo extensão) de uma imagem que é colocada no diretório `assets/images` . Corte a imagem para `500x500` para obter melhores resultados.
título	`string`	Posição ou função do usuário.

contato.json

Este arquivo é usado para gerar a página de contato.

Propriedade	Tipo	Descrição
formulárioAção	`string`	Ação de formulário personalizada para o formulário de contato. Verifique formuláriospree.io.
localização	`string`	String de localização do usuário.
e-mail	`string`	Endereço de e-mail do usuário.
telefone	`string`	Número de telefone do usuário.

projetos

Esta pasta contém todos os projetos como arquivos individuais no formato json . Cada arquivo nesta pasta representará um projeto diferente.

A tabela a seguir contém o formato de cada arquivo na pasta de projetos.

Propriedade	Tipo	Descrição
eu ia	`integer`	Um identificador exclusivo para o pedido.
título	`string`	Nome do projeto.
descrição	`string`	Detalhes sobre o projeto.
imagem	`string`	Um URL de imagem válido começando em http ou um nome (incluindo extensão) de uma imagem que é colocada no diretório `assets/images` .
links	`object`	Um objeto que contém links externos do projeto. Ele pode ter propriedades opcionais `liveDemo` , `videoDemo` e `sourceCode` para URLs.
tecnologias	`array`	Um array contendo todas as tecnologias (strings) utilizadas no projeto.

Nota: Crie novos arquivos para adicionar mais projetos e nomeie-os como nome do projeto.

Veja os arquivos fictícios existentes na pasta de conteúdo para referência.

SEO

Metatags

Nuxt.js fornece maneiras eficientes de otimizar seu site para mecanismos de pesquisa. Consulte o guia de SEO Nuxt.js para obter mais detalhes.

Mapas de site

Este projeto usa @nuxtjs/sitemap para gerar automaticamente o arquivo sitemap.xml. Consulte o guia de configuração se precisar de mais informações.

Implantação

Depois de personalizar o conteúdo de acordo com suas necessidades, você precisa implantar o aplicativo em produção.

Implantação manual

Vamos ver como gerar arquivos de construção.

Comece clonando o repositório em sua máquina local usando git (ou baixe-o manualmente)

 git clone https://github.com/0xaliraza/codefolio

Em seguida, navegue até o diretório raiz do repositório e instale as dependências

 npm install

Gerar arquivos de construção

 npm run generate

Neste ponto você terá uma pasta ./build contendo todos os arquivos prontos para produção para implantação. Você pode implantar esses arquivos em algum servidor de hospedagem ou CDN.

Se você quiser ver o aplicativo executado localmente

 npm run dev

CI/CD

Você precisa de experiência anterior em github/codificação para implantar isso usando ações do github ou alguma outra plataforma de CI/CD.

Este é um repositório de modelos, então você pode simplesmente clicar no botão "Usar este modelo" no canto superior direito para clonar este repositório. Personalize os arquivos de conteúdo de acordo com suas necessidades e vá para a guia de ações para adicionar os fluxos de trabalho necessários. Você pode reutilizar arquivos ci.yml e cd.yml existentes.

Veja as ações do github para saber mais.

Contribuição

Sinta-se à vontade para criar uma solicitação pull ou um problema se precisar de algo alterado ou corrigido. Ou você pode simplesmente entrar em contato comigo diretamente usando os links abaixo.