SkillSet

SkillSet is a lightweight front-end demo for turning a JSONResume skills section into an interactive D3 force graph. Instead of presenting skills as a flat list, it creates a visual map of categories and keywords that is easier to demo, discuss, and explore.

Why SkillSet

• Turns resume data into a more engaging visual story
• Works with the familiar JSONResume format
• Lets you drag, inspect, and spotlight skill clusters in the browser
• Keeps the project simple enough to customize for personal sites and portfolio demos

Live Links

• Live site: jac21.github.io/SkillSet
• Live demo: jac21.github.io/viz.html
• React wrapper by romain325: ReactSkillSet

How It Works

• Upload a resume file with a populated skills array.
• SkillSet reads each skill category and its keywords.
• The app builds a node-link graph where categories connect to individual skills.
• D3 renders the result as an interactive force-directed visualization.

Expected Resume Shape

SkillSet looks for the skills section from a standard JSONResume payload. A minimal example looks like this:

{
  "skills": [
    {
      "name": "Frontend",
      "level": "Advanced",
      "keywords": ["JavaScript", "D3.js", "CSS"]
    },
    {
      "name": "Backend",
      "level": "Intermediate",
      "keywords": ["Node.js", "REST APIs"]
    }
  ]
}

Supported level mappings:

• Beginner -> 1.0
• Intermediate -> 2.0
• Advanced -> 2.5

Getting Started

Prerequisites

• Node.js
• npm

Install

npm install

Run Locally

Build the project:

npm run build

Serve the project locally:

npm run serve

For a development build:

npm run dev

Then open index.html through your local server and upload a JSON resume file to generate the visualization.

Project Structure

.
├── index.html
├── src
│   ├── app.js
│   ├── index.js
│   └── viz.js
├── styles
│   └── style.css
└── assets
    ├── img
    └── test-data

Demo Notes

• The UI is designed to work well for portfolio walkthroughs and screen sharing
• Smaller, cleaner keyword sets produce the most readable graphs
• Nodes can be clicked to emphasize labels and dragged to discuss clusters live

Tech Stack

• HTML
• CSS
• JavaScript
• D3.js
• Webpack

License

MIT