$ show marwin1991/profile-technology-icons
This repository is a Gatsby-based static web application that generates HTML snippets of technology icons for GitHub profile READMEs. It provides a user interface where users can search from a large collection of technology icons (extracted from a README table), select and reorder them via drag-and-drop (using @dnd-kit), configure output options (e.g., wrapping in <code>, <div>, table format, icon size), and produce a ready-to-copy HTML string. The application is single-page with no backend; it fetches icon metadata dynamically from the repo's own README.md on GitHub. The architecture is a typical React component tree with state management in the Generator class component, using Material-UI for design and CodeMirror for code display. The codebase is well-structured, dependencies are modern, and the deployment is automated via GitHub Actions to GitHub Pages. It solves a specific, common need for developers seeking an aesthetic way to showcase their tech stack.
The LLM identified 2 files worth highlighting for reuse:
A reusable drag-and-drop list component built with @dnd-kit. It renders a list of items (images) that can be reordered by dragging. The component is isolated and can be extracted for any React project needing sortable lists. It demonstrates clean integration of the @dnd-kit library with React state management.
A customizable gradient button with hover animation effects. It accepts props for font size, font family, border radius, and gradient colors. The button uses styled-components to create a visually appealing button with a moving gradient on hover. This is a self-contained, reusable UI component that can be dropped into any React project.