ProfileMe.dev helps developers create an amazing GitHub profile in minutes.
A live version of this project can be found at https://www.profileme.dev.
Users can easily build and customise their GitHub profile, working with the following:
This project was built with:
ProfileMe.dev has a very simple, two-step installation process.
1. Install dependencies
npm install
2. Run development server
npm run dev
Contributions are always welcome! Here's a few tips on how to get started.
To get started, please take a look at the 'Issues' tab, where you will find open issues that exist within the project. If you see one that interests you, create a branch and submit a PR for review and approval.
If you would like to add a new icon to the skills section, please follow the following steps:
You should first create three variations of the icon you are intending to add. All icons should be square (we recommend 128px x 128px).
Please create SVG icon (we recommend using Adobe Illustrator, Figma or another vector-based graphics program)
In _app.js, all icon data is stored in an object called iconData.
Inside of this object, there are four keys, with strings as values:
{
name: "JavaScript",
path: "https://raw.githubusercontent.com/danielcranney/readme-generator/main/public/icons/skills/javascript-colored.svg",
iTag: "javascript",
link: "https://www.javascript.com/",
},
Key | Value |
---|---|
name | eg: "JavaScript". This value will be the one shown to the user via the tooltip. |
path | The path for where the full-color version will be stored. Once the pull request has been merged, the icons you add will be found at "https://raw.githubusercontent.com/danielcranney/readme-generator/main/public/icons/skills/[iconName]-colored.svg". |
iTag | The name that will be used for the CSS class, all lower case. |
link | The URL for the official website of the language/technology being added. |
Adding your new icons to the site CSS is very simple. In styles/global.css, add the following block (replacing 'javascript' with the iTag you added in the last step).
.javascript {
@apply bg-[url('https://raw.githubusercontent.com/danielcranney/readme-generator/main/public/icons/skills/javascript.svg')] dark:bg-[url('https://raw.githubusercontent.com/danielcranney/readme-generator/main/public/icons/skills/javascript-dark.svg')];
}
.javascript.colored {
@apply bg-[url('https://raw.githubusercontent.com/danielcranney/readme-generator/main/public/icons/skills/javascript-colored.svg')];
}
ProfileMe is available under the GNU AGPLv3 license. Please read the terms of this license before making modifications to this project.