Gradesome portfólio iniciante
Confira a versão Astro aqui: https://github.com/drehimself/astro-portfolio-starter
Um simples tema iniciante do portfólio para grades
URL de demonstração
https://gridwome-portfolio-starter.netlify.com
Características
- Design limpo e mínimo
- Tailwind CSS v1 (com purgecss). Usando este plug -in de grade.
- Role para seções usando o Vue-Scrollto
- Blog com conteúdo de rekdown para postagens
- Tipo de documentação que mostra como usar os componentes do VUE no Markdown (clique em documentos)
- Switcher de tema com modo escuro
- Posite postagens com fuse.js e vue-fuse
- Tags para postagens
- Paginação básica
- Sintaxe destacando com shiki (usando este plug -in grade)
- 404 Página
- RSS Feed
- Sitemap em XML
Instalação
- Instale a ferramenta cli gridsome se você não a tiver:
npm install --global @gridsome/cli - Clone the repo:
git clone https://github.com/drehimself/gridsome-portfolio-starter.git -
cd gridsome-portfolio-starter -
npm install (isso pode ser um download longo por causa do Cypress. Se você não se importa em testar com o Cypress, remova -o do package.json ) -
gridsome develop para iniciar um servidor de desenvolvimento local em http://localhost:8080
Teste
Eu tenho alguns testes básicos de ponta a ponta usando o CYPRESS. Você pode encontrá -los em /cypress/integration/tests.js .
Para executar os testes, primeiro verifique se o seu servidor de dev está sendo executado com gridsome develop . Suponho que você esteja usando a porta padrão do 8080. Caso contrário, altere a tecla baseUrl no arquivo cypress.json .
Depois que o servidor de desenvolvimento estiver em execução, você pode executar npm run test ou ./node_modules/.bin/cypress open para iniciar o Cypress. O aplicativo Cypress Electron será executado. Clique no arquivo tests.js e os testes serão executados em um navegador automatizado.
Notas
- Quando o Gridsome se mudar para o Vue 3, também atualizarei este repositório. Também vou atualizar para o Tailwind V2, junto com outros presentes do Tailwind V2, como o Dark Mode e o JIT.
- Com base no meu site de portfólio pessoal. Eu queria criar uma versão de código aberto com mais recursos.
- Confira um screencast que fiz onde passo o processo de construção do meu site.
- Ilustrações de Uncraw
- A pesquisa é baseada em fuse.js e vue-fuse. Ele pesquisa apenas o título e o resumo das postagens por enquanto. Alguns ajustes podem ser necessários para pesquisar no seu gosto. Confira a documentação do fusível para as configurações de pesquisa. Este PR adicionou a capacidade de pesquisar tipos de "postagem" e "documentação".
- Confira essas outras iniciantes de onde obtive algumas idéias de:
- Blog de partida grades
- Gradesome starter bleda
- Blog inicial do Jigsaw - tive muita inspiração de design desse tema inicial.
Outras versões
- Versão Nuxt: https://github.com/drehimself/nuxt-portfolio-starter
- Versão do sabre: https://github.com/drehimself/saber-portfolio-starter
