portfolio-github-pages

Portfolio → GitHub Pages (static, single-page)

When to use

• "criar um portfólio", "página de portfólio", "site profissional", "site estático pro GitHub Pages".
• Any request for a one-page site with anchor navigation and "invisible content shown when clicked".
• This user (pedro) owns several webpage/page/portfolio repos — reuse an existing one when possible.

Workflow (ordered)

1. Scan for truthful content first. Do NOT invent projects. Read their real repos: gh repo list <user> --limit 60, then gh api repos/<u>/<r>/readme to enumerate ALL repos (public + private) without cloning; read each README for the real stack/description. Also mine local vaults for personal facts: hardcore-life/99 - Meta/INDICE_VAULT.md (PARA structure, course grade), page/content/pt-br/index.md (Sobre mim, Instagram handle, hobby), cv/*.tex (bolsas de pesquisa, ORCID, áreas de interesse). Pull full name, Lattes ID, ORCID, Instagram, hobby straight from there. If a brief is uncertain, say so — never fabricate. For a "short resumé" of ALL GitHub work, list every repo (private ones get a short brief too — no secrets, just what it does). For the animated canvas/constellation/SVG-icon build, see the animated-portfolio-sites skill (it covers that class of technique).
2. Pick or reuse a repo. If a portfolio/webpage repo exists and is archived, it must be unarchived before push (see references). Clone it, strip any old scaffold (Jekyll, etc.) if replacing.
3. Build a single index.html + assets/css/style.css + assets/js/*.js. Pure HTML/CSS/JS — NO build step, so GitHub Pages serves it directly from root. Put project/research data in a JS file (window.PORTFOLIO_DATA) so content is easy to edit.
4. Single-page, anchor nav. One <section id="..."> per topic (sobre, projetos, pesquisa, curriculo, lattes, contato). A fixed top nav with href="#id" + scroll-behavior: smooth.
5. "Invisible content revealed on click" = accordion / toggle cards.
   • Cards: .card with a .card__detail that has max-height:0; overflow:hidden; and transitions to a fixed max-height when .card.open is toggled (JS adds/removes the class on click).
   • Accordions: same max-height technique inside .acc.open.
   • Reveal-on-scroll: IntersectionObserver adds .visible to .reveal elements.
6. Space/astronomy theme (known-good design):
   • Starfield: <canvas> + requestAnimationFrame; handle devicePixelRatio; twinkle via Math.sin; respect prefers-reduced-motion (draw a static frame instead).
   • Glassmorphism: background: rgba(...); backdrop-filter: blur(...); border: 1px solid rgba(...).
   • Gradient text on the name: background: linear-gradient(...); -webkit-background-clip: text; color: transparent.
   • Soft nebulas: large blurred radial-gradient divs, slow drift keyframe.
   • Orbital hero: concentric border-radius:50% rings rotating (@keyframes spin) with small "moons".
   • Fonts: Space Grotesk (display) + Inter (body) from Google Fonts. 7b. Multi-language (PT/EN/ES/FR) with flag selector. Put ALL UI strings in a JS dict I18N = { pt:{nav:[...], hero:{...}, sections:{...}, about:[...], contactLabels:{...}, footer:...}, en:{...}, es:{...}, fr:{...} }.
   • Barra: .lang-switch with 4 <button data-lang="pt|en|es|fr"> each an inline SVG flag + label (PT-BR/EN/ES/FR). On click set localStorage.lang, document.documentElement.lang, apply data-i18n="chave" texts, and re-render data-driven cards/contacts/bolsas (they read a pick(obj,key) helper that falls back to obj[key] if no obj.i18n[lang]). Keep PT as default.
   • Data objects may carry i18n:{en:{title,desc,...},es:{...},fr:{...}} (PLANO: obj.i18n[lang].title). Make pick(x,k) = x.i18n && x.i18n[lang] && x.i18n[lang][k] ? x.i18n[lang][k] : (x[k]||""). 7c. Canvas background — galaxies + bouncing orbs (known-good for this user).
   • Galaxies: real-ish spirals — a bright core radial-gradient (white→hue→transparent), stars placed along arms logarithmic-spiral arms (some flagged dust = warmer/rgba), slow g.rot += g.spin rotation.
   • Orbs: N particles (vx,vy ~0.5px/frame, capped speed) that travel straight and BOUNCE off all 4 edges (if (x-r<0){x=r; vx=Math.abs(vx)} etc.) — calm but visibly bouncing. Each has a pulsing glow.
   • NOTE: this user wants MOUSE REPULSION on the field, NOT attraction. If you add mouse interaction, push galaxies AWAY from the cursor (per-galaxy eased offset), don't parallax-pull them.
   • Respect prefers-reduced-motion (static frame).
7. Verify locally (see "Verification" below) BEFORE deploying.
8. Deploy to GitHub Pages (see references/github-pages-cli.md for exact commands + gotchas).