Skip to content

Latest commit

 

History

History
102 lines (67 loc) · 4.99 KB

README.md

File metadata and controls

102 lines (67 loc) · 4.99 KB
Raw

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 General Public License v3.0 license. Please read the terms of this license before making modification or amendments to the source code or any of its assets.