SkillGraph

Your dynamic skill graph, proven by evidence.

SkillGraph is a 100% client-side React + TypeScript + Vite web app that analyzes your public GitHub repositories, builds a custom SVG skill tree, suggests learning paths to reach a target role, and lets you self-certify your skills with proof URLs.

Built by Kajarnak Tech — no backend, no tracking, no API keys.

🔗 Live: https://kajarnaklokossou2008.github.io/skillgraph/

✨ Features

• GitHub Analyzer — fetches your public repos via the free GitHub REST API (no key required, 60 req/hour per IP). Detects languages, frameworks, repo counts, stars, recent activity, and estimates a proficiency score (0–100) per language.
• Skill Tree (SVG) — custom React SVG visualization of detected skills and their frameworks (no D3). Animated proficiency bars.
• Gap Analysis — compare your skills against 5 target roles (ML Engineer, Full-Stack, Data Scientist, Web3, DevOps) and get a learning path.
• Self-Certifications — rate a skill 1–5, attach a proof URL, persist to IndexedDB, and export a standalone HTML certificate.
• Public Profile — save an analyzed GitHub profile, generate a shareable hash-based URL (#/profile/:id), display top skills + recent repos + certs.
• Bilingual EN/FR persisted to localStorage.
• Dark / light theme toggle persisted to localStorage.
• Mobile-first, responsive, Inter + JetBrains Mono.

🛠 Tech stack

• React 18 + TypeScript + Vite 5
• Dexie.js 4 (IndexedDB)
• Free GitHub REST API v3 (no auth)
• Custom SVG skill tree (no D3)
• Pure CSS, no UI framework

📦 Local development

npm install
npm run dev      # http://localhost:5173/skillgraph/
npm run build    # outputs dist/
npm run preview  # preview the production build

🚀 Deployment (GitHub Pages)

The repo includes .github/workflows/deploy.yml. On every push to main:

1. Node 20 is installed.
2. npm ci installs dependencies.
3. npm run build produces dist/.
4. The artifact is uploaded and deployed to GitHub Pages.

vite.config.ts uses base: '/skillgraph/' so all assets resolve correctly on GitHub Pages.

In your GitHub repository settings → Pages → Build and deployment → Source: GitHub Actions.

📁 Project structure

skillgraph/
├── .github/workflows/deploy.yml
├── public/
│   ├── robots.txt
│   └── favicon.svg
├── src/
│   ├── components/
│   │   ├── Header.tsx
│   │   ├── Footer.tsx
│   │   ├── GitHubAnalyzer.tsx
│   │   ├── SkillTree.tsx
│   │   ├── GapAnalysis.tsx
│   │   ├── Certifications.tsx
│   │   └── PublicProfile.tsx
│   ├── hooks/
│   │   ├── useI18n.ts
│   │   ├── useTheme.ts
│   │   └── useHashRoute.ts
│   ├── lib/
│   │   ├── db.ts
│   │   ├── i18n.ts
│   │   └── github.ts
│   ├── styles/
│   │   └── global.css
│   ├── App.tsx
│   └── main.tsx
├── index.html
├── package.json
├── tsconfig.json
├── tsconfig.node.json
├── vite.config.ts
├── sitemap.xml
└── README.md

🔒 Privacy

All data stays in your browser (IndexedDB + localStorage). The only network requests are to the public GitHub REST API for the username you type. No tracking, no analytics, no cookies.

📄 License

MIT © 2025 Kajarnak Tech