{"id":24972299,"url":"https://github.com/mikael-ros/tool-card","last_synced_at":"2025-10-18T16:30:23.834Z","repository":{"id":230611141,"uuid":"779722704","full_name":"mikael-ros/tool-card","owner":"mikael-ros","description":"🔨 A card for putting the list of tools you use, in your GitHub readme, or elsewhere","archived":false,"fork":false,"pushed_at":"2024-09-14T21:20:06.000Z","size":43,"stargazers_count":0,"open_issues_count":1,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2024-09-15T05:48:45.632Z","etag":null,"topics":["github-profile","github-profile-card","github-readme","profile","profile-readme"],"latest_commit_sha":null,"homepage":"https://github.com/mikael-ros/mikael-ros/blob/main/tools.md","language":null,"has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/mikael-ros.png","metadata":{"files":{"readme":"readme.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2024-03-30T15:45:57.000Z","updated_at":"2024-09-14T21:20:10.000Z","dependencies_parsed_at":"2024-04-10T16:33:22.185Z","dependency_job_id":"cd4a5086-f78e-4602-91f9-4179f09d84fe","html_url":"https://github.com/mikael-ros/tool-card","commit_stats":null,"previous_names":["mikael-ros/tool-card"],"tags_count":1,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mikael-ros%2Ftool-card","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mikael-ros%2Ftool-card/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mikael-ros%2Ftool-card/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mikael-ros%2Ftool-card/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/mikael-ros","download_url":"https://codeload.github.com/mikael-ros/tool-card/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":236981509,"owners_count":19235941,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["github-profile","github-profile-card","github-readme","profile","profile-readme"],"created_at":"2025-02-03T17:08:46.405Z","updated_at":"2025-10-18T16:30:23.478Z","avatar_url":"https://github.com/mikael-ros.png","language":null,"funding_links":[],"categories":[],"sub_categories":[],"readme":"\u003e [!WARNING]\n\u003e This project is deprecated. I refer you to [profile-card](https://www.github.com/mikael-ros/profile-card) instead.\n\n---\n\n# 🔨 GitHub Tool Card\n![](./tool-card.svg)\n\nThis is a profile card made in a SVG, that can be imported into a GitHub profile readme (or elsewhere). It works by using a ``foreignObject`` inside of an SVG, which allows you to use HTML and CSS beyond what the GitHub sanitization process allows.\n\nThis is based on my other profile project, [GitHub Language Card](https://github.com/mikael-ros/profile-card). The main difference is the layout, which here is designed to be wider and more accomodating, since tools are likely to be a longer list.\n\n---\n\n## 🔨 Usage\nTo use the card, either copy the contents of [``tool-card.svg``](./tool-card.svg) or download it. Then paste it into your profile git repository, and add an image tag in your profile readme, displaying the SVG, like this: ``![](path/to/tool-card.svg)``. The path can also be to the raw file, if hosted in a seperate repository.\n\n### 🪚 How to modify\nSimply go into the SVG and add entries accordingly. There are 6 proficiencies, all identified by ids; see the SVG as an example.\n\n\u003e [!TIP]\n\u003e When editing the SVG, open the file locally in the browser. It is a more accurate preview of how it will look in the real world.\n\n#### 📁 Card\nThe entire thing is contained within an ``\u003carticle\u003e`` tag, which is necessary to make it display properly on all GitHub themes. See the minimal example further down.\n\n#### ⌨️ Typing animation\nThe typing animation is **implemented with keyframes**, changing the content each keyframe. You can with some effort change this text. _If your text is the same length or shorter you can get away with less editing._\n\n\u003e [!TIP]\n\u003e Divide 100% by the amount of letters you want to type and increment the keyframe by that. You can experiment a lot with this though.\n\u003e Also see [this code example](https://codepen.io/alvaromontoro/pen/rNwVpdd) if you want to change the type of typing marker. Default is ``_``.\n\n#### 🗂 Categories\nEvery category is contained in it's own ``\u003csection class=\"category-container\"``, containing a ``\u003ch4\u003e`` element and an ``\u003cul\u003e`` element.\n\n```html\n\u003csection class=\"category-container\"\u003e\n    \u003ch4\u003e\u003cspan class=\"emoji\"\u003e🔵\u003c/span\u003e Category\u003c/h4\u003e\n    \u003cul\u003e\n        \u003cli class=\"proficient\"\u003e🦝 Racoon Tool\u003c/li\u003e\n        \u003cli class=\"learning\"\u003e💅 Girlboss\u003c/li\u003e\n    \u003c/ul\u003e\n\u003c/section\u003e\n```\n\n##### 🗃️ Nested categories\nYou can also nest categories, by putting an ``\u003cul\u003e`` inside of one of the ``\u003cli\u003e``. This works infinitely, though I wouldn't reccomend it. You can both color the whole ``\u003cul\u003e`` the same color and have specific elements be a certain color.\n```html\n\u003csection class=\"category-container\"\u003e\n    \u003ch4\u003e\u003cspan class=\"emoji\"\u003e🔵\u003c/span\u003e Category\u003c/h4\u003e\n    \u003cul\u003e\n        \u003cli class=\"proficient\"\u003e 🦝 Racoon Tools\n            \u003cul\u003e\n                \u003cli\u003e 😋 Silly \u003c/li\u003e\n                \u003cli\u003e 🍇 Grapes \u003c/li\u003e\n            \u003c/ul\u003e\n        \u003c/li\u003e\n    \u003c/ul\u003e\n\u003c/section\u003e\n```\nTo make it display in a vertical column, add the class ``vertical`` to the inner ``\u003cul\u003e`` element. This simply sets the ``flex-direction`` property to ``column``.\n\n##### 😜 Emojis/icons\nEither put the emoji inline, in the ``\u003ch4\u003e`` tag or put it inside ``\u003cspan class=\"emoji\"\u003e😎\u003c/span\u003e``. The ``emoji`` class will make it into it's own little \"bubble\".\n\n_Unfortunately it's not trivial to include any old icon (you have to convert it into BASE64) which is why I've opted for emojis._\n\n#### 💼 Proficiencies\nThere are 6 levels built-in. They are as follows:\n- 💪 ``proficient``: Tools you can use with your **eyes (almost) closed**\n- 👍 ``good``: Tools you know well\n- 👌 ``average``: Tools you are average in, **about as competent as most people**\n- 🤏 ``below average``: You aren't fully comfortable in this tool, but **you can hack something together with it given some effort**\n- 💡 ``accquainted``: You have come across and had to use this tool as part of a course or job, but didn't get the hang of it. Despite, **you can still use it for basic things**\n- 🧠 ``learning``: What it **says on the tin**\n\nThese are marked by wrapping the corresponding skill in an ``\u003cli\u003e`` element with the class set to one of the above, like:\n```html\n\u003cli class=\"proficient\"\u003e🦝 Racoon Tool\u003c/li\u003e\n```\nThough you can put this class on any element, as it just changes the ``background-color`` property.\n##### 🖌 Colors\nThere are 6 colors corresponding to the 6 proficiencies, which you can change easily by editing CSS variables at the top of the SVG. \n\n### 🗒 Minimal example\n\u003e [!NOTE]\n\u003e This does not include the rest of the SVG, you also need the headings and style. See the SVG file.\n```html\n\u003carticle id=\"language-card\"\u003e\n    \u003csection class=\"category-container\"\u003e\n        \u003ch4\u003e\u003cspan class=\"emoji\"\u003e🔵\u003c/span\u003e Category\u003c/h4\u003e\n        \u003cul\u003e\n            \u003cli class=\"proficient\"\u003e🦝 Racoon.js\u003c/li\u003e\n            \u003cli class=\"learning\"\u003e💅 Girlboss\u003c/li\u003e\n        \u003c/ul\u003e\n    \u003c/section\u003e\n\n    \u003csection class=\"category-container\" id=\"legend\"\u003e\n        \u003ch4\u003e\u003cspan class=\"emoji\"\u003e🗺️\u003c/span\u003e Legend\u003c/h4\u003e\n        \u003cul\u003e\n            \u003cli class=\"proficient\"\u003e💪 Proficient\u003c/li\u003e\n            \u003cli class=\"good\"\u003e👍 Good\u003c/li\u003e\n            \u003cli class=\"average\"\u003e👌 Average\u003c/li\u003e\n            \u003cli class=\"belowaverage\"\u003e🤏 Below average\u003c/li\u003e\n            \u003cli class=\"accquainted\"\u003e💡 Accquainted\u003c/li\u003e\n            \u003cli class=\"learning\"\u003e🧠 Learning\u003c/li\u003e\n        \u003c/ul\u003e\n    \u003c/section\u003e\n\u003c/article\u003e\n```\n\n\u003e [!TIP]\n\u003e Don't forget to change the SVG height and width at the top of the file, or it might either be too large or get cut off. Also set the ``language-card`` height.\n\n---\n\n## 👥️ Contributing\n\nFeel free to contribute, though I would prefer you not change the contents of the list in this repository as the SVG hosted here is used on my profile.\n\n---\n\n## 👋 Attributing\n\nWhile it is not necessary, **I would be happy if you referred** to this repo when using the card. I would also love to see what you create with it!\n\n\u003e [!IMPORTANT]\n\u003e This repository is licensed under the [MIT license](LICENSE), please accquaint yourself with it before using this code.\n\n---\n\n## 🫡 Acknowledgements\n\u003e [!IMPORTANT]\n\u003e While making the typing animation, I used [this CSS animation](https://codepen.io/alvaromontoro/pen/rNwVpdd) and [this guide](https://css-tricks.com/snippets/css/typewriter-effect/), for reference - though it has since strayed from those roots. Otherwise **everything else is my own work.** \n\n---\n\u003e This repository is updated in conjunction with my profile, mainly so it is easier to maintain. Not every commit is therefore relevant functionality - some are simply me updating my profile.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmikael-ros%2Ftool-card","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmikael-ros%2Ftool-card","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmikael-ros%2Ftool-card/lists"}