snapport

v1.2.1

Published

14 days ago

0High
0Medium
0Low

employer

portfolio github-api typescript zero-dependencies automation frontend showcase headless-ui

💡 O problema

Manter a seção de projetos do portfólio atualizada manualmente é repetitivo:

você cria um novo projeto
atualiza o GitHub
esquece de atualizar o portfólio
seu portfólio fica desatualizado

✨ O que o Snapport faz

O Snapport automatiza a geração da seção de projetos do seu portfólio com base nos seus repositórios do GitHub.

Você define onde os projetos serão renderizados e a lib cuida da sincronização.

🔥 Antes vs Depois

❌ Antes (manual)

<div>
  <h2>Projetos</h2>
  <ul>
    <li>Projeto A</li>
    <li>Projeto B</li>
  </ul>
</div>

✅ Depois (automático)

import { initPortfolio } from 'snapport';

initPortfolio('seu-usuario-github', {
  tag: 'port',
  searchContainer: 'meu-search',
  filtersContainer: 'meu-filters',
  projectsContainer: 'meu-projects'
});

🚀 Início rápido

Via npm

Instale o pacote:

npm install snapport

No seu arquivo JavaScript/TypeScript, importe o JS e o CSS:

import { initPortfolio } from 'snapport';
import 'snapport/dist/style.css';

initPortfolio('seu-usuario-github', {
  tag: 'port',
  searchContainer: 'meu-search',
  filtersContainer: 'meu-filters',
  projectsContainer: 'meu-projects'
});

Via CDN (vanilla JS)

No seu HTML, inclua o CSS no <head> e o script no <body>:

<!-- No seu <head> -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/snapport/dist/style.css"/>

<!-- No final do <body> -->
<script type="module">
  import { initPortfolio } from 'https://cdn.jsdelivr.net/npm/snapport/dist/snapport.js';

  initPortfolio('seu-usuario-github', {
    tag: 'port',
    searchContainer: 'meu-search',
    filtersContainer: 'meu-filters',
    projectsContainer: 'meu-projects'
  });
</script>

🎨 Personalização

:root {
  --ghp-accent: #3178C6;
  --ghp-bg: #ffffff;
  --ghp-text: #333;
}

⚙️ Características

Zero dependências em runtime
Cache local (2h)
Funciona com qualquer framework
Baseado em GitHub Topics
Leve e direto ao ponto

🛠 Tecnologias suportadas

React • TypeScript • Node.js • Docker • Tailwind • Python • etc

🤝 Contribuição

Veja a documentação: CONTRIBUIR