I created this component for my portfolio to display the technology stack of my projects. It displays the technology name, logo, and description. The component is flexible and can be used in any project to display a technology stack.

Installation

npx shadcn@latest add "https://c-g.dev/stack-card.json"

Usage

Unlike a traditional component, i decide to use an array of strings passed as props to render the pre-defined technologies. So that you can render many cards with one line of code.

There is also a fallback if the technology is not recognized.

You can add more technologies by adding to the Skills array in stack-card.tsx Heres how you can add your own technology to the card:

// stack-card.tsx
// Example of adding a technology
export const Skills = [
  {
    label: "Angular", // The name of the technology
    color: "100, 149, 237", // The color of the technology in hsl
    icon: <FaAngular size={iconSize} color="CornflowerBlue" />, // Icon
    description: "Structured Database", // Description of the technology
  },
  ...]