https://github.com/joshdsouza8/pimp-my-readme

Pimp my README is an open source profile builder that you can use to add some cool components to your README profile - Made with <3 by webapp.io :)
https://github.com/joshdsouza8/pimp-my-readme

Last synced: about 1 month ago
JSON representation

Pimp my README is an open source profile builder that you can use to add some cool components to your README profile - Made with <3 by webapp.io :)

• Host: GitHub
• URL: https://github.com/joshdsouza8/pimp-my-readme
• Owner: joshdsouza8
• License: apache-2.0
• Created: 2021-10-21T05:42:44.000Z (over 3 years ago)
• Default Branch: master
• Last Pushed: 2023-04-26T15:52:13.000Z (almost 2 years ago)
• Last Synced: 2023-10-18T16:46:30.068Z (over 1 year ago)
• Language: JavaScript
• Homepage:
• Size: 1.24 MB
• Stars: 106
• Watchers: 3
• Forks: 13
• Open Issues: 6
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

• awesome-github-profile - Pimp My Readme

README

        
[![WELCOME TO PIMP MY README, Want something cool like this? then pimp it out.](https://pimp-my-readme.webapp.io/pimp-my-readme/wavy-banner?subtitle=Want%20something%20cool%20like%20this%3F%20&title=WELCOME%20TO:%20PIMP%20MY%20README)](https://pimp-my-readme.webapp.io)

# Pimp my README

This repository is the open-source project for Pimp my README.

## How this came to be

So basically, GitHub added a feature where you can add a "Profile Page" by uploading a README to a repo that has the same name as your account.

If you want to jazz up your profile a bit, you shouldn't spend hours doing so, so I made this quick project (during my company hackathon) that helps add some flavour to your README profiles.

So I present to you, Pimp my README. 

This was inspired by a Myspace editor called [pimp-my-profile.com](https://www.pimp-my-profile.com/)

## Overview

Pimp my README is an open source profile builder that you can use to add some cool components to your README profile - Made with <3 by webapp.io :)

## Contributing

The stack is React + Express (we do server-side rendering). When a cool component is loaded a GET request is sent to our Express server where an SVG is populated with the query parameters and returned.

If you want to add a cool component:

- Make your SVG 

- Create a function to return your SVG with the parameters you need in `src/util/svg.js`

- Create a GET request to parse query params that calls the function you created in the step above

- Add a component that allows people to edit the parameters for the svg in `src/components/pimp-my-readme/svgs` 

- Add your component that was created in the step above to the `EditCoolComponent.js` file

### Bug Report

Please open an issue if you find a bug with a screenshot of the behaviour.

### Feature Suggestions

Add your suggested feature to the feature-suggestions.txt file.

### Environment Setup

- Clone the repo

- Run `npm install` in the root directory

- Run `npm run dev` to start the project locally

## License

See LICENSE

Some Cool Component Examples:

[![Pimp my README, An open source project :)](https://pimp-my-readme.webapp.io/pimp-my-readme/wavy-banner?subtitle=An%20open%20source%20project%20%3A%29&title=Pimp%20my%20README)](https://pimp-my-readme.webapp.io)

[![Pimp my README](https://pimp-my-readme.webapp.io/pimp-my-readme/sliding-text?emojis=1f91f-1f3fe_1f60e_1f608_1f995&text=Pimp%2520your%2520README)](https://pimp-my-readme.webapp.io)

[![Visitor Counter for pimp-my-readme](https://pimp-my-readme.webapp.io/pimp-my-readme/visitor-counter?page=pimp-my-readme)](https://pimp-my-readme.webapp.io)

[![JavaScript_HTML_CSS_NodeJS_Express_](https://pimp-my-readme.webapp.io/pimp-my-readme/technology?technology=JavaScript_HTML_CSS_NodeJS_Express_)](https://pimp-my-readme.webapp.io)