How to visualize your skills with a Svelte component

My Codepals Startup adventure

Imagine a LinkedIn without all the noise. A place where you would type in your skills and get matched with other people who have the same skills. You could then connect with them, learn from them, and maybe even start a project together. That was the idea behind Codepals, a startup I founded in 2019 with a timeline of 12 months from idea to launch. I pretty much got lost in the technical details and never really launched it. But I did create some Svelte components that visualize your skills in a tree-like structure.

The SkillWurst

The first approach to visualize the skills was to put them just next to each other. It was the easiest way to visualize your skills on that platform. What makes it so special is that it displays your skills in a tree-like structure, where each skill is a node and each sub-skill is a child node. You can see that the different colors and color shades represent the different skill levels and the depth of the tree.

The SkillTree

Much more usual in such a scenario would be a graph where each skill is a node and each connection between skills is an edge. Also this is something I have implemented. I called it the SkillTree.

What did I learn?

I learned Svelte and how to combine it with D3.js to visualize Graphs! It is unfortunate that I never really launched Codepals, but I am happy that I learned so much in the process. Even though my components that I designed have not been touched by me for a long time I am happy that they work out of the box in other projects like this blog.