How to visualize your skills with a Svelte component

A Journey from Startup Concept to a Functional Skill Visualization Tool

In 2019, I set out to create a platform that would allow users to visualize their skills and connect with others based on shared expertise. The idea was simple: a cleaner, more focused clone of LinkedIn, where you could easily map out your skills and instantly find people with similar abilities. I called the concept Codepals, with the ambitious goal of taking it from idea to launch in just 12 months.

While I didn’t end up launching the platform, the journey led me to develop a unique Svelte component to visually represent skills in a structured way. This post covers the components I built and the lessons learned along the way.

The SkillWurst Component

My initial approach to visualizing skills was to arrange them side by side — a straightforward but effective layout. However, I soon evolved the design into something more meaningful: a tree-like structure where each skill acts as a node, and its sub-skills are represented as child nodes. The result is the SkillWurst component, where color gradients signify different skill levels and tree depth, offering a quick, intuitive way to assess skills hierarchically.

This structure provides a clear, organized view of a person’s skill set, making it easier to identify key areas of expertise and their related sub-skills.

The SkillTree Component

Building on the concept of the SkillWurst, I developed the SkillTree. In this implementation, each skill is visualized as a node, and the connections between related skills form the edges of a graph. This is a more familiar model for graph-based visualizations, making it suitable for scenarios where relationships between skills are as important as the skills themselves.

The SkillTree component leverages D3.js to handle the force-directed layout, ensuring that the graph dynamically arranges itself in a way that makes the connections between skills both clear and visually appealing.

Lessons Learned

Through this project, I deepened my understanding of both Svelte and D3.js, specifically in their integration to build interactive visualizations. Although Codepals never saw the light of day, the components I developed continue to work seamlessly and have even found new life in projects like this blog.

The process of turning a concept into a functional product—even if it doesn’t get launched—can offer valuable insights and skills. For me, this experience was a reminder that sometimes, the journey is just as rewarding as the destination.