An interactive, visual guide to Git and version control for developers who use AI-assisted coding tools like GitHub Copilot, Cursor, and Claude Code.
GitVibes is a beginner-friendly tutorial that teaches Git through the lens of AI-assisted development. Instead of dry reference docs, it walks you through real scenarios — "the AI just changed 10 files, what do I do?" — with interactive sandboxes, Mermaid diagrams, and step-by-step VS Code screenshots.
- Enterprise Onboarding — Cloning repos, authentication, SSH vs HTTPS
- The Core Safety Loop — Status → Stage → Commit, reviewing AI changes
- Branching & PRs — Creating branches, syncing, pull requests
- The Undo Toolkit — Checkout, revert, reset, amending commits
- Advanced Workflows — Stash, rebase vs merge, conflict resolution
- VS Code Cockpit — Source Control view, Timeline, GitLens, 3-way merge editor
- Cheat Sheet — Quick reference for common commands
- Interactive Git sandboxes that simulate real workflows
- Real VS Code screenshots with step-by-step instructions
- Mermaid diagrams for visualizing branching and commit history
- Light/dark theme support
- Searchable command reference
- Fully static — no backend required
| Layer | Tool |
|---|---|
| Framework | SvelteKit (Svelte 5) |
| Styling | Tailwind CSS v4 |
| Diagrams | Mermaid.js |
| Icons | Lucide |
| Markdown | mdsvex |
| Hosting | GitHub Pages (static adapter) |
# Clone the repo
git clone https://github.com/NeoVand/gitvibes.git
cd gitvibes
# Install dependencies
npm install
# Start dev server
npm run devOpen http://localhost:5173 to view it locally.
npm run build
npm run preview # preview the production buildThe static site is output to the build/ directory.
This project deploys automatically to GitHub Pages on every push to main via GitHub Actions. The workflow is defined in .github/workflows/deploy.yml.
MIT