DEV Community: Chethan

Make Your GitHub Profile Look Great in 15 Minutes with ChatGPT (No Coding Needed)

Chethan — Tue, 13 Oct 2026 08:17:50 +0000

Your GitHub profile is often the first thing a recruiter sees. But writing an "About me" and setting up nice-looking stats can feel hard when you're just starting out.

Good news: you don't need to code, and you don't need a terminal. In this guide, ChatGPT writes the personal parts for you, and you only copy, paste and click on the GitHub website.

We'll use Profilescape, a free, open-source tool that creates modern cards for your profile and updates them automatically every day. (I made it.)

Here's how mine looks:

Step 1: Create your profile repository

GitHub shows a special README on your profile. It comes from a repository with the same name as your username.

Go to github.com/new.
Name the repository exactly like your username (for example octocat).
Make it Public and tick Add a README file.
Click Create repository.

Already have one? Skip this step.

Step 2: Let ChatGPT write your files

Open ChatGPT (the free version works fine). Copy the message below, fill in the lines at the top with your own details, and send it:

My name: YOUR NAME
My role: YOUR ROLE (for example "Frontend Developer")
Where I am: YOUR CITY
My top 4 skills: SKILL 1, SKILL 2, SKILL 3, SKILL 4
Tools I use: for example typescript, react, docker, git
My LinkedIn: YOUR LINKEDIN URL
My email: YOUR EMAIL

Please create two files for my GitHub profile.

FILE 1: a GitHub Actions workflow. Use this exactly, and only fill in the
"config" part with my details above. In "hero": "name", "role",
"status" (like "open to new opportunities · MY CITY") and "chips" (my top 4
skills). In "stack": "icons" (my tools, lowercase). In "socials": "links"
with "linkedin" and "email".

name: Profilescape
on:
  schedule:
    - cron: "0 3 * * *"
  workflow_dispatch:
permissions:
  contents: write
jobs:
  cards:
    runs-on: ubuntu-latest
    steps:
      - uses: chethandvg/profilescape@v1
        with:
          cards: hero,socials,stats,3d,languages,repos,stack
          theme: aurora
          readme: README.md
          config: |
            { "options": { "hero": {}, "stack": {}, "socials": {} } }

FILE 2: a short README.md. Start with a friendly "About me" section of 3 to
4 simple sentences based on my details. Below it, add these two lines
exactly:
<!-- profilescape:start -->
<!-- profilescape:end -->

Give me each file in its own code block.

ChatGPT gives you two blocks of text: the workflow and your README. Read your "About me" and change anything that doesn't sound like you.

Step 3: Add the files on GitHub

You'll do this on the GitHub website. No downloads needed.

Add the workflow:

Open your profile repository on GitHub.
Click Add file → Create new file.
In the name box, type exactly: .github/workflows/profilescape.yml (the slashes create the folders for you).
Paste file 1 from ChatGPT.
Click Commit changes, then Commit changes again.

Update your README:

Click README.md in your repository.
Click the pencil icon (Edit).
Replace everything with file 2 from ChatGPT.
Click Commit changes, then Commit changes again.

Step 4: Run it once

Click the Actions tab in your repository.
Choose Profilescape, then Run workflow.

Wait about a minute, then open your profile. Your new cards are there! 🎉

From now on, they update automatically every day.

Want a different look? Try all 14 themes in the playground, then change theme: aurora in your workflow file.

Even faster: use the template

Don't want to use ChatGPT? You can start from a ready-made profile:

Sign in to GitHub and open this link: Create from template
Name the new repository exactly like your username, make it Public, and click Create repository.
Go to the Actions tab. If GitHub asks, click I understand my workflows, go ahead and enable them.
Choose Profilescape → Run workflow.

3 quick tips

Always check your real profile page after changes.
Make the "About me" yours. AI gives you a starting point, but your story should sound like you.
Something not working? Open the Actions tab and click the failed run. The red step tells you what went wrong. You can also paste that message into ChatGPT and ask it to explain.

Share yours!

If you set it up, post your profile link in the comments. I'd love to see it!

If you like Profilescape, a ⭐ on GitHub helps others find it. Questions? Leave a comment and I'll help.

Make Your GitHub Profile Look Great in 15 Minutes with Claude Code

Chethan — Wed, 07 Oct 2026 11:09:46 +0000

Your GitHub profile is often the first thing a recruiter sees. A clean profile makes a great first impression.

Many profiles use free "stats card" images from other websites. These often break and show errors, because those sites get too much traffic.

In this post, I'll show you how to get a modern profile that updates itself every day and doesn't break, using two tools:

Profilescape: a free, open-source tool that creates the cards for your profile. (I made it.)
Claude Code: an AI assistant that does the setup for you.

Here's how mine looks:

Step 1: Create your profile repository

GitHub shows a special README on your profile. It comes from a repository with the same name as your username.

Go to github.com/new.
Name the repository exactly like your username (for example octocat).
Make it Public and tick Add a README file.
Click Create repository.

Already have one? Skip this step.

Step 2: Install Claude Code

You need Node.js installed. Then open a terminal and run:

npm install -g @anthropic-ai/claude-code

Now download your profile repository and start Claude Code inside it:

git clone https://github.com/YOUR-USERNAME/YOUR-USERNAME.git
cd YOUR-USERNAME
claude

The first time, it asks you to sign in with your Claude account.

Don't worry: Claude Code asks for your permission before it changes files or runs commands.

Step 3: Ask Claude Code to set it up

Copy this message into Claude Code. Replace the parts in CAPITALS with your own details:

Set up Profilescape (https://github.com/chethandvg/profilescape) on this
GitHub profile README.

- Add a workflow that runs every day, using chethandvg/profilescape@v1
  with these cards: hero, socials, stats, 3d, languages, repos, stack
  (it needs "contents: write" permission)
- Add the Profilescape markers to my README, and let the workflow
  update it (readme: README.md)
- My role: YOUR ROLE (for example "Frontend Developer")
- My skills: YOUR TOP 4 SKILLS
- My LinkedIn: YOUR LINKEDIN URL
- Use the theme "aurora"

Show me the changes before you commit, then push them.

Claude Code creates the files, shows you what changed, and pushes them to GitHub after you say yes.

Want a different look? Try all 14 themes in the playground. You don't need to sign in.

Step 4: Run it once

Open your repository on GitHub.
Click the Actions tab.
Choose Profilescape, then Run workflow.

Wait about a minute, then open your profile. Your new cards are there! 🎉

After that, they update automatically every day.

No AI? Use the template instead

You can also do it without Claude Code:

Sign in to GitHub and open this link: Create from template
Name the new repository exactly like your username, make it Public, and click Create repository.
Go to the Actions tab. If GitHub asks, click I understand my workflows, go ahead and enable them.
Choose Profilescape → Run workflow.

Done!

3 quick tips

Always check your real profile page after changes. Some problems only show up there.
Write the "about you" parts yourself. AI is great for setup, but your story should be yours.
Read the changes before you say yes. It's your profile.

Share yours!

If you set it up, post your profile link in the comments. I'd love to see it!

If you like Profilescape, a ⭐ on GitHub helps others find it. Questions or ideas? Leave a comment and I'll help.

Building a 3D contribution graph in pure SVG

Chethan — Tue, 06 Oct 2026 11:51:47 +0000

GitHub profile READMEs are a strange place to draw anything. Your image is served through GitHub's image proxy and embedded with an <img> tag. That means no JavaScript, no web fonts, no external stylesheets, and no idea whether the viewer uses the light or the dark theme. On top of that, I wanted the image regenerated every day by a GitHub Action without changing a single byte when the data hadn't changed.

Within those limits, I wanted a 3D contribution graph: every day of the last year as a little isometric bar, its height and colour growing with the work done, rising into place when the page loads.

This post walks through how the 3D card in Profilescape works. Profilescape is an open-source GitHub Action that renders profile cards from your own token. The whole card is plain SVG paths and one <style> block.

The grid: 53 Sunday-aligned weeks

GitHub's contribution calendar is a grid of weeks (columns) by weekdays (rows), with weeks starting on Sunday. The first step turns a list of { date, count } days into cells with a week and a day index, ending today:

/** The last `weeks` calendar weeks ending today (UTC), Sunday-aligned. */
export function yearWindow(calendar: ContributionDay[], now: Date, weeks = 53): CalendarCell[] {
  const today = parseDate(isoDate(now));
  const start = today.getTime() - (today.getUTCDay() + (weeks - 1) * 7) * DAY;
  const counts = countsByDate(calendar);
  const cells: CalendarCell[] = [];
  for (let t = start, i = 0; t <= today.getTime(); t += DAY, i++) {
    const date = isoDate(new Date(t));
    cells.push({ week: Math.floor(i / 7), day: i % 7, date, count: counts.get(date) ?? 0 });
  }
  return cells;
}

Notice now is a parameter. Nothing in the renderer calls Date.now() or Math.random(). That's what makes the output deterministic, which matters a lot later.

Isometric projection with two vectors

Real isometric projection uses 30° angles. I didn't need real isometry, just a pleasant oblique view where weeks run off to the right and weekdays run down and to the left. So the projection is two basis vectors in screen space: one step along a week moves (wx, wy), and one step along a weekday moves (dx, dy).

// Weeks run right and slightly down, weekdays left and down. Drawing week by
// week (and day by day inside a week) is a correct painter's order for this
// projection: any two bars whose silhouettes overlap are ordered by both axes.
const s = Math.min(1.4, 964 / (weeks * 17 + 63));
const wx = 17 * s;
const wy = 5.5 * s;
const dx = -9 * s;
const dy = 8 * s;
const px = (w: number, d: number) => w * wx + d * dx;
const py = (w: number, d: number) => w * wy + d * dy;

s scales everything so the slab fits a 1200px-wide card whether you show 26 weeks or 53. Height is just a vertical offset: a point at grid position (w, d) and height h lands at (px(w, d), py(w, d) - h).

Each day is three paths

From this viewpoint you can see three faces of a bar: the front (the long side that runs along the week axis, facing the front edge of the slab), the right side (facing the next week), and the top. Each one is a parallelogram, so each one is a short path with relative commands:

const k = 1 - 2 * GAP; // bars are inset by GAP so a hairline of floor shows between them
const topLoop = `l${rel(wx * k, wy * k, dx * k, dy * k, -wx * k, -wy * k)}z`;

const front = `M${pt(w + GAP, d + 1 - GAP)}l${rel(wx * k, wy * k)}v-${hs}l${rel(-wx * k, -wy * k)}z`;
const right = `M${pt(w + 1 - GAP, d + 1 - GAP)}l${rel(-dx * k, -dy * k)}v-${hs}l${rel(dx * k, dy * k)}z`;
const top = `M${pt(w + GAP, d + GAP, h)}${topLoop}`;

The top face is the same shape for every bar, only moved, so topLoop is built once and reused, and only the M (move to) changes. The vertical edges are a single v-<height>. Relative commands keep the numbers short, which matters because a busy year can have over a thousand of these paths (three per active day). Days with no contributions don't get bars at all: they become flat floor tiles merged into a single <path>.

Painter's order without sorting

SVG has no depth buffer. Whatever you draw last ends up on top, so 3D in SVG usually means sorting shapes back to front. Here no sort is needed, because the projection was chosen so the loop order is already correct.

Look at the horizontal footprint of one day: its left edge is at px(w, d + 1) and its right edge at px(w + 1, d). That's wx + |dx| wide, 17 + 9 = 26 units. Now take the diagonal neighbour one week later and one weekday earlier, (w + 1, d - 1). Its left edge is at px(w + 1, d), exactly where the first bar's right edge is. Diagonal neighbours touch but never overlap, however tall they are, because height only moves points vertically.

So two bars can only overlap on screen when one of them is ahead on both axes (a later week and a later weekday, or the same in one of them). That bar is nearer the viewer. Drawing week by week, and day by day within a week, always draws the nearer one second. A plain nested loop does the job.

The loop also gives a natural unit for animation: every week becomes one <g>.

Height: square roots, not straight lines

Contribution data has a long tail. One release day with 104 contributions next to a typical day of 3 would turn a linear scale into one skyscraper and a flat field. The default is a square-root scale with a small minimum, so a single contribution is still visible:

function heightFn(scale: Scale, peak: number, maxH: number): (count: number) => number {
  if (peak <= 0) return () => 0;
  const shape =
    scale === 'linear'
      ? (c: number) => c / peak
      : scale === 'log'
        ? (c: number) => Math.log1p(c) / Math.log1p(peak)
        : (c: number) => Math.sqrt(c / peak);
  return (c) => (c > 0 ? MIN_H + (maxH - MIN_H) * Math.min(1, shape(c)) : 0);
}

linear and log are options for people who prefer them. The legend always says which scale is in use ("height ∝ √contributions"), because a chart that hides its scale isn't being honest with the reader.

Colour: quartiles, like GitHub

Height shows magnitude, and colour shows rank. Like GitHub's own calendar, each active day gets one of four levels based on the quartiles of your non-zero days:

/** GitHub-style quartile levels computed from the non-zero counts. */
export function levelScale(counts: number[]): (count: number) => Level {
  const nz = counts.filter((c) => c > 0).sort((a, b) => a - b);
  if (!nz.length) return () => 0;
  const q = [0.25, 0.5, 0.75].map((p) => nz[Math.min(nz.length - 1, Math.floor(nz.length * p))] ?? 0);
  return (c) => {
    if (c <= 0) return 0;
    if (c <= (q[0] ?? 0)) return 1;
    if (c <= (q[1] ?? 0)) return 2;
    if (c <= (q[2] ?? 0)) return 3;
    return 4;
  };
}

Quartiles adapt to the person. Someone with 3 contributions a day and someone with 30 both get the full colour range.

The five colours come from the theme, not from a hard-coded green. Every Profilescape theme defines semantic tokens (empty, accentA, accentB, ...), and one function builds the ramp. The animated grid, the stats chart and the hero banner use the same ramp, so colour means the same thing everywhere:

export function contribRamp(p: Palette, mode: Mode): [string, string, string, string, string] {
  const dark = mode === 'dark';
  const peak = dark ? mix(p.accentB, '#FFFFFF', 0.35) : shade(p.accentB, 0.15);
  const ramp: [string, string, string, string, string] = [
    p.empty,
    mix(p.empty, p.accentA, 0.45),
    p.accentA,
    mix(p.accentA, p.accentB, 0.6),
    peak,
  ];
  // ...then each level is nudged toward white (dark mode) or black (light mode)
  // until it is clearly lighter or darker than the one before.
  return ramp;
}

The 3D effect itself comes from shading each level. The front face is darkened a little and the right face more, each as a vertical gradient so bars look lit from above. The top gets a thin, lighter rim. Dark mode uses stronger shading than light mode, because on a dark panel subtle differences disappear.

Without that last step, a theme with a light accent colour could make your busiest days look quieter than average ones, so the ramp enforces a minimum lightness step between levels.

Layout that doesn't move when the data changes

The card also has a headline, four insights (best day, busiest month, favourite weekday, active days) and a pin on the tallest bar. The slab rises from front-right to back-left, which leaves an empty triangle in the top-right corner where the insights fit.

But bars change height every day. If the layout depended on today's tallest bar, the slab would shift up and down from one day to the next. So the vertical origin is computed against the tallest possible bar instead:

// Lowest origin that keeps the tallest *possible* bar clear of every reserved
// region, so the layout never depends on the day-to-day data and never collides.
let oy = PAD + roomH + 6;
for (const r of reserved) {
  for (let w = 0; w < weeks; w++) {
    for (let d = 0; d < 7; d++) {
      const x0 = ox + px(w + GAP, d + 1 - GAP);
      const x1 = ox + px(w + 1 - GAP, d + GAP);
      if (x1 < r.x0 - 12 || x0 > r.x1 + 12) continue;
      oy = Math.max(oy, r.y1 + CLEARANCE - (py(w + GAP, d + GAP) - roomH));
    }
  }
}

The best-day pin works the other way: it tries a short list of candidate positions above and beside the summit and takes the first one that collides with nothing. If none fits, the pin is dropped. It never covers the headline.

Animation that degrades to the finished card

Scripts never run in README images, but CSS animations inside an SVG do. Each week's <g> rises with a staggered delay:

const stagger = 1.05 / weeks;
// ...
`.wk{animation:ps3d-rise .9s cubic-bezier(.2,.7,.2,1) backwards}` +
`@keyframes ps3d-rise{from{opacity:0;transform:translateY(28px)}}`
// ...
`<g class="wk" style="animation-delay:${n(0.15 + w * stagger, 3)}s">${parts.join('')}</g>`

There are two details here.

First, the keyframes only define from. The end state is whatever the element already is: fully opaque, in place.

Second, animation-fill-mode: backwards (not forwards, not both). backwards applies the from state during the delay, so bars don't flash before their turn. Once the animation ends, the element goes back to its own styles, which are the finished card. Anything that ignores the animation sees that finished card too: viewers with prefers-reduced-motion, PNG renderers, and link previews. If I'd written bars as opacity: 0 and animated them in with forwards, all of those would show an empty slab.

Every card shares one frame function that adds the reduced-motion rule:

export const REDUCED_MOTION =
  '@media (prefers-reduced-motion: reduce){*{animation:none!important;transition:none!important}}';

Dark and light without JavaScript

Every card is rendered twice, once per theme mode, and the README markup uses <picture>. GitHub follows the viewer's theme setting:

<picture>
  <source media="(prefers-color-scheme: dark)" srcset="https://raw.githubusercontent.com/<you>/<you>/profilescape-output/3d-dark.svg" />
  <img src="https://raw.githubusercontent.com/<you>/<you>/profilescape-output/3d-light.svg" alt="3D contribution landscape: 2,083 contributions in the last year" width="100%" />
</picture>

The alt text states the total. The SVG also carries a <title> and a <desc> with a fuller written summary (best day, busiest month, favourite weekday, active days) for anyone who opens the file directly.

Why determinism matters: zero-churn publishing

Because the same data produces byte-identical SVG, the Action can tell when nothing has changed without uploading anything. It computes git's own blob and tree hashes locally and compares them with the output branch:

/** SHA-1 of a git blob object, exactly as git computes it. */
export function gitBlobSha(content: string | Uint8Array): string {
  const bytes = toBytes(content);
  return createHash('sha1').update(`blob ${bytes.length}\0`).update(bytes).digest('hex');
}

If the tree hash matches the branch's current tree, the run ends with "nothing to publish". Otherwise it writes one orphan commit (no parents), so the output branch never accumulates a history of images.

The same property makes the tests exact, and it lets the website playground run the identical renderer in the browser: the card code imports nothing from Node, and the clock is passed in.

Try it

Playground (every card and theme, runs in your browser): https://chethandvg.github.io/profilescape
Without a token: npx github:chethandvg/profilescape --demo writes the SVGs to ./profilescape
On your profile: add  and  to your profile README and a workflow that uses chethandvg/profilescape@v1, or start from the template repository.

The whole renderer is about 500 lines in src/cards/landscape.ts, MIT licensed, with no runtime dependencies. If you know a better way to handle any of this, especially text measurement without fonts, I'd like to hear it in the comments or in Discussions.