Making and using my new DevelopmentLine astro component

11/6/2025 / 6 minutes to read /

Tracking Progress with DevelopmentLine

A project is not it’s goal, or state, or purpose, or the steps needed to finish it - it is ALL those things at the same time.
I wanted to show this semi visually, and then realized that I now have a little bit of data to show some stats, so I worked to show’em.

I wanted it to be messy and not look too corporate or even polished.

The DevelopmentLine show the progress and all the steps made and to be done, and in the doing so gives me data.

The basis

I wanted to make a new DevelopmentLine astro component, and make it part of all projects.

In each project I would describe it like this:

export const ohmyposhinatorStages = [
  {
    icon: "💡",
    name: "Spark",
    desc: "The idea emerges: a visual way to design Oh My Posh prompts without touching JSON. Currently sketching UI layout, researching color pickers, and testing rendering libraries.",
    status: "in-progress",
  },
  {
    icon: "🧰",
    name: "Prototype",
    desc: "Build an interactive prototype in React with mock segment data. Focus on instant feedback and export preview.",
    status: "not-started",
  }
]

I saw that this is all the info I need to show progress. In-progress is where I am, and the amount of stages, can be used to show a percentage of completion.

No extra editing, no extra frontmatter.

The Early Mockups to finished product

My fist mock-up of my DevelopmentLine

More graphical tweaking later, and I got this and then I started turning it into CSS, which sounded easy, before I started.

Then MANY (don’t ask please) CSS and JavaScript edits later I have this 👇

Adding the Stats afterwards

Then - projectStats.ts - finds every ...Stage and exposes the array by project files, I then use that to show it is broken down stats in various places. Astro (very kindly) pulls it all in at build time, so it’s completely static and lightweight.

Each project now exposes:

• progressPercent
• activeStage
• totalStages
• isComplete
• startedLabel (like “In progress” or “Completed”)

Those values feed into:

1. The Projects page - showing overall completion rate and per-project completion.
2. Each Project’s info sidebar - showing its current stage and timeline.

It feels like I am thinking about where I am going next with my little project (Let’s not think further on that, shall we?)

Visual Polish

Once the logic is in place, we can start styling it. I added three distinct things that the marker does:

• Drops in from the top and lands on the line, so you see it
• If you do not interact with the marker, it will wiggle playfully to show you it is interactive, and keep doing this every ten seconds until you interact with it
• When you click another stage in the project, the marker will lean towards where it is going and flop back to standing once there

Why this matters to me?

I don’t just want to show that something exists - I want to show how it’s progressing (if it ever does). I don’t want my site to be a list of unfinished projects(It’d be better if it wasn’t). It’s a living set of experiments, half-built ideas, and (hopefully one day, once I ever finish anything) finished tools. DevelopmentLine turns that from something I see privately, into something a little more interactive and visible to everyone.

That transparency feels good - especially when the projects are still messy and in motion.
Progress doesn’t have to be perfect; it just has to be visible.

How long did it take to make?

A lazy evening or two

Things I learned

• It was fun to learn about the interactive islands theory, that is used in Astro. I learned a lot of things about Astro and Astro’s ecosystem.
• There was a lot of JS troubleshooting - so much.
• I really like npm run dev where I get to see the sites locally on my system live before it goes live.

For now, though, it’s nice to see CodeClay with some added functionality to it.

Lets see if I leave it alone and not go off an a tangent 😊