An interactive React application that organizes skills across professional and personal domains into a visual, navigable portfolio with evidence linking to real work.
I needed a better way to show what I know.
Years of marketing operations work gave me expertise across email platforms, automation tools, CRM systems, AI implementation, and data infrastructure. I'd built campaigns, designed workflows, integrated platforms, and solved problems. But when someone asked what I could do, I'd either rattle off a generic list or point them to a resume that flattened everything into bullet points.
I needed something that could organize skills by domain and specialization, connect capabilities to actual proof of work, and help me map out what's possible in marketing operations so I can plan what to learn next and which projects to pursue.
So I built My Skill Universe: an interactive web app that maps individual skills within specializations within domains. Think of it as a three-level hierarchy. At the top, you have galaxies (domains like Marketing Operations). Inside each galaxy, you have constellations (specializations like AI & Innovation or Technical Skills). Inside each constellation, you have individual skills (specific capabilities like "prompt iteration and refinement" or "Git basics").
For example: the "Prompt iteration and refinement" skill lives inside the "AI & Innovation" constellation, which lives inside the "Marketing Operations" galaxy. The structure makes it easy to navigate from broad domains down to specific capabilities, and each skill can link to portfolio evidence showing where I've actually used it.
The result is a living portfolio that grows as I do. It's not a static resume or a list buried in a PDF. It's an interactive map of professional knowledge that I can point clients and employers to when they want to understand my capabilities.
I launched with Marketing Operations fully built out (the domain where I have the most depth), knowing I can add other galaxies for personal interests and additional professional domains over time. The skills are mapped, but I haven't backfilled it with all the projects I've worked on yet. That'll be a work in progress. I have the experience, just not all the tangible evidence documented.
I started by brainstorming with Claude about what I wanted to build. My original idea was something linear, like learning pathways where each skill had prerequisites. The Elders Scrolls V: Skyrim skill tree was used as inspiration.
Claude and I iterated on the concept. Linear paths with prerequisites felt too rigid. We landed on something more flexible: large domains (galaxies) containing specializations (constellations) with skills grouped by complexity tier rather than strict prerequisites.
For the tech stack, I needed privacy-first tools (no tracking cookies), low-cost or free, and easy to update. React for interactivity, Vite for builds, Tailwind CSS for styling, JSON files instead of a database, Vercel for hosting, Plausible for analytics.
I asked Claude to create a plan and build a v1. The structure looked great after that first attempt, but there were things that needed tweaking. Rather than writing one massive message addressing everything across the app, I worked section by section, taking groups of common issues and implementing those changes incrementally.
After launching v1 and seeing how the structure worked, I added my first domain: Marketing Operations.
I did some research and had a conversation with Claude about how to break down marketing ops into logical specializations. We mapped out 16 constellations (Email Operations, Automation & Integration, AI & Innovation, Technical Skills, Process & Strategy, and more) and created skills for each, organized into Foundation, Intermediate, and Advanced tiers based on complexity.
This didn't take as long as you'd think. I leveraged my own knowledge and experience, Claude researched industry standards, and we got it done.
Once the skills were mapped, I created a Claude project specifically to help connect my actual work to these skills. When I'd document a project, Claude would identify which skills I used and write descriptions for the portfolio evidence that connected both the project and the skill.
That process surfaced a lot of UI/UX improvements. Some were small tweaks (spacing, alignment), others were larger features that weren't in V1. I documented everything but stayed focused on getting the core experience working first.
I'm not a designer, so I kept the original design Claude provided and focused on refining the UX based on what I'd learned from actually using the app over the previous few days.
One of the major changes was adding portfolio evidence functionality. The original design had a placeholder for it, but it wasn't operational. Through some iteration with Claude, I built a system that could display evidence and link out properly.
The hardest part wasn't mobile responsiveness (that took one prompt). The hardest part was figuring out spacing and what content should be included at what level. Skills needed descriptors when clicked on to explain what they are, but I didn't want to clutter the card view with them. Repetitive subheadings that basically repeated the constellation title got removed.
Claude had already handled hover states, smooth transitions, and emoji icons in the original design. The focus was on information architecture: what shows where, and how much detail at each level.
Skills without proof are just claims, so I built a system to link completed skills to actual work: blog posts, case studies, GitHub repos, projects.
Each piece of evidence includes a type (project, blog, case study), title, description, and link. The same project can map to multiple skills with tailored descriptions explaining how it demonstrates that specific capability.
The first piece of evidence I added was Skill Universe itself. I linked it to skills like "prompt iteration and refinement," "AI workflow design," "Git basics," "GitHub/GitLab usage," and "technical documentation." The app is proof of those capabilities.
I'll be adding more evidence over time as I document projects and try to backfill some content from past work. I have experience with most of these skills, but I don't have tangible evidence documented for all of them yet. That's fine. The system is there when I'm ready to add it.
I set up Vercel for hosting because it connects directly to GitHub and auto-deploys on every push. Changes go live in 2-3 minutes with zero manual intervention.
Custom subdomain (skills.andrewkelly.studio) points to the app via DNS, SSL is automatic through Vercel, and I integrated Plausible Analytics for privacy-focused tracking without cookies.
The deployment pipeline is simple: make changes locally, commit to GitHub, Vercel builds and deploys automatically. No servers to manage, no complicated configuration.
Hours Invested
AI Iterations
Skills Mapped
I now have a way to show people what I'm capable of without oversimplifying or overwhelming them. The interactive format lets them explore at their own pace, drilling into areas that matter to them.
The portfolio evidence system gives me a place to connect skills to real work. As I document more projects and case studies, I can link them back to the specific skills they demonstrate. Over time, that builds credibility.
I launched with Marketing Operations because that's where I have the most depth right now. The structure supports adding personal interests (Coffee, Billiards) and other professional domains later. Ship first, expand thoughtfully.
The entire thing is maintainable. Adding new skills takes minutes (just update a JSON file), deployment is automatic, and the structure scales to any domain I want to add.
Start with structure, not code. Mapping the three-tier hierarchy before writing any React saved countless refactoring later. The data architecture came first, the UI followed.
JSON beats a database for static portfolios. No backend means no server costs, no database maintenance, and instant load times. For a portfolio that doesn't need user accounts or real-time updates, JSON files are plenty.
AI can generate production code if you prompt well. Claude wrote the entire React component, Tailwind styles, and modal system through iterative conversation. Clear prompts and visual feedback got me production-ready code without writing it myself.
Ship with gaps and fill them in. I launched with Marketing Operations fully built and left Coffee/Billiards galaxies for later. That's fine. Waiting for perfect means never launching. I can add domains as I'm ready to document them properly.
Whether you need a complete CRM overhaul or strategic guidance, I bring proven expertise.
Lets Talk About Your Project
My home base for the work I do, the tools I'm learning, and the hobbies that keep me sane.
Read More ->