The Portfolio Tool I Wish I Had Years Ago

Ian Kuria

February 23, 2025

Feb 23, 2025

Ever tried explaining to your non-tech family what you actually do all day?

My aunt at every family gathering, while picturing me frantically typing green text like in The Matrix.

Beyond GitHub: The Portfolio Tool I Wish I Had Years Ago

Ever tried explaining to your non-tech family what you actually do all day?

"I write code."

"Yes, but what does that mean?"

This frustrating conversation plays out in job interviews too. After years of watching brilliant developers struggle to showcase their impact (myself included), I built a solution over one caffeine-fueled weekend.

View here: my.kuria.pro

From "I Know React" to "I Solved Real Problems"

Traditional portfolios say "I built this with React." Mine shows "I reduced payment failures by 29% for rural businesses."

The difference? Metrics that tell stories people actually care about.

// Old way: Just listing technologies
const OldPortfolio = () => (
  <div className="project-card">
    <h3>Payment System</h3>
    <p>Built with: React, Node.js, MongoDB</p>
    <a href="https://github.com/...">View Code</a>
  </div>
);

// New way: Showing actual impact
const BetterPortfolio = () => (
  <CaseStudy
    title="M-Pesa Integration for Farmers"
    metrics={[
      { label: "Error Reduction", value: "29%" },
      { label: "Processing Speed", value: "↑25%" },
      { label: "Rural Business Reach", value: "30+" }
    ]}
    problem="Farmers losing sales due to payment failures"
    solution="Offline-first architecture with error recovery"
  />
);

See the difference? The second actually answers the "so what?" question.

Visualizations That Make Numbers Pop

Humans are visual creatures. Say "improved performance by 42%" and eyes glaze over. Show this instead:

Suddenly that performance improvement isn't just a number—it's a story.

For Developers Who Code Better Than They Brag

The template includes components for showcasing the things that actually matter:

  • Performance improvements

  • User growth curves

  • Business impact metrics

  • Accessibility scores

  • Technical debt reduction

Plus, it's built with a stack that won't make you tear your hair out:

# What you'll actually say when setting this up
git clone https://github.com/Kuria-byte/ux-portfolio.git
cd ux-portfolio
pnpm install
pnpm dev

# Instead of the usual...
git clone https://...
npm install  # Wait 20 minutes
npm run dev  # Errors about missing dependencies
npm install --force  # Pray to the npm gods
# Repeat until either working or laptop defenestration

Real Talk: Why I Made This

In Kenya's tech scene, I've watched incredibly talented developers get overlooked because they couldn't tell their story effectively. Their GitHub showed brilliance, but their resumes screamed "generic."

Your code already solves real problems—your portfolio should show it.

Get started at github.com/Kuria-byte/ux-portfolio and transform your projects from "stuff I built" to "problems I solved."

Because the next time someone asks what you do all day, "I reduced payment failures for rural businesses by 29%" beats "I write code" every time.

Questions or need help setting it up? Find me at [email protected] or on GitHub.

Check mine out: my.kuria.pro

I share interesting thoughts and ideas

Discover design & developmentinsights, project updates, and tips to elevate your work straight to your inbox.

Unsubscribe at any time.

I share interesting thoughts and ideas

Discover design & developmentinsights, project updates, and tips to elevate your work straight to your inbox.

Unsubscribe at any time.