ProfileMe.dev

ProfileMe.dev helps developers create an amazing GitHub profile in minutes.

Demo

A live version of this project can be found at https://www.profileme.dev.

Features

Users can easily build and customise their GitHub profile, working with the following:

• Introduction section (to include basic information, links to portfolio and any current projects that are of note.)
• Skills icons (with over 60 technologies and softwares available to choose from)
• Socials links (with 18 social media platforms to choose from)
• Badges and statistics (graphic elements to add to your profile, such as GitHub stats badges, Twitter follower counts and Twitch streaming status)
• Links to support sites (such as BuyMeACoffee).

Tech Stack

This project was built with:

• NextJS
• TailwindCSS

Installation

ProfileMe.dev has a very simple, two-step installation process.

1. Install dependencies

npm install

2. Run development server

npm run dev

Contributing

Contributions are always welcome! Here's a few tips on how to get started.

• Issues

  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.

• How to add an icon

  If you would like to add a new icon to the skills section, please follow the following steps:

  • 1. Create SVGs

    You should first create three variations of the icon you are intending to add. All icons should be square (we recommend 128px x 128px).

    • [iconName]-colored.svg: This should be the full-color version of the icon. Please ensure it stays loyal to the brand colors and guidelines set out by the brand itself.
    • [iconName].svg: This icon will be the one that renders in light mode.
    • [iconName]-dark.svg: This icon will be the one that renders in dark mode.

    Please create SVG icon (we recommend using Adobe Illustrator, Figma or another vector-based graphics program)

  • 2. Add data to {iconData}

    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.

  • 3. Add icons to CSS

    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')];
    }
    

License

ProfileMe is available under the GNU AGPLv3 license. Please read the terms of this license before making modifications to this project.