I Built a Claude Skill That Turns a Boring Resume Into an Animated Web Page

I wanted to try something really fun for generating online profiles and websites; mostly, I wanted it to be customised for each person and have some personality.

So I built a small Claude skill that takes a normal resume (or a LinkedIn PDF) and turns it into an animated, interactive one-page profile.

In this post, I'll show you what it does, how it works under the hood, and how you can try it yourself in about two minutes.

Here's what it looks like

The demo uses a fictional person, so no real data was harmed in the making of this GIF. 😄

What the skill builds

Here's what ends up on the page:

• An animated avatar that blinks, types, waves and shows little speech bubbles. You can pick the hairstyle, colors, glasses and so on.
• Your career as game levels. Each job is a level, with a "LEVEL UP!" pop and the skill you unlocked there.
• Achievement counters and "why hire me" cards, each one tied to something real from your CV.
• A character sheet with a small animated "happy place" scene and some personality perks.
• Your GitHub projects shown as an interactive graph of projects and technologies.

And the output is just one HTML file. No framework, no build step. You can drop it on GitHub Pages, and you're done.

How it works (the simple version)

When you ask Claude to make an animated resume, the skill walks through four steps:

1. It asks for your resume. PDF, DOCX, plain text, or a LinkedIn "Save to PDF" export all work. You can also share your GitHub username.
2. It asks a few quick questions, like which theme you want, what your avatar should look like, your favourite colours, your hobbies, and the role you're aiming for.

That's the whole trick. Claude does the reading and the interviewing, and a plain Python script does the building.

Here's roughly how the skill folder is laid out:

skills/animated-resume/
├── SKILL.md                    # the instructions Claude follows
├── assets/template.html        # the animated page
├── assets/example-profile.json # a full fictional example
├── references/schema.md        # every profile.json field
└── scripts/build.py            # profile.json → index.html

Try it yourself

If you use Claude Code, installing it takes two commands:

/plugin marketplace add dooa-ansari/animated-resume-claude-skill
/plugin install animated-resume@animated-resume

Then just ask:

Make me an animated resume from my CV.

If you use the Claude app (claude.ai or desktop), download animated-resume-skill.zip from the repo and upload it under Settings → Capabilities → Skills.

Putting it online

Since the result is a single HTML file, hosting it is easy:

1. Put index.html in a GitHub repo.
2. Go to Settings → Pages → Deploy from a branch and pick main / (root).
3. Your page goes live at https://<your-username>.github.io/<repo>/. Now you have a link you can put on your LinkedIn or in your email signature.

Wrapping up

The code is open source under the MIT license, so feel free to use it, fork it, or borrow ideas for your own skill:

👉 github.com/dooa-ansari/animated-resume-claude-skill