Giter Club home page Giter Club logo

profileme-dev's Introduction

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.

profileme-dev's People

Contributors

342b45 avatar adamjaking avatar alexistb2904 avatar arun9650 avatar bosesj avatar code-a-man avatar danielcranney avatar dhairyathedev avatar dharmik48 avatar dhina17 avatar e-roy avatar gitdagray avatar i01001 avatar jaymanale avatar m4rk3h avatar mcheung7272 avatar michael-pfister avatar ncdai avatar netervati avatar paytonjewell avatar rizaardiyanto1412 avatar saidatalli avatar tanmaybhosale avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

profileme-dev's Issues

Form Reset function required

At present, users information is stored in local storage so will persist when reloaded. However, there is not currently a way for them to clear the form and 'reset' the state of the project.

div should be a header

This div <div class="flex items-center fixed top-0 w-full h-16 z-40 bg-white dark:bg-dark-800 border-b-0 border-slate-200 dark:border-dark-700"> which comes right before the main element should be a header element instead of a div so that it has the correct semantic landmark

Components not showing

Hi is there a problem or something crushing?.....I cant see see the skill social they are not showing

Skills icon loading slowly

The skills icons are functioning correctly, but can be slow to load if internet connection is poor.

It may be worth reviewing the code to see if a slicker solution can be found to reduce loading times.

The icons are SVGs, and classes are changed when they are selected (which replaces the icons with '-colored.svg' suffixed). These can be found in the globals.css file.

[Feature]: Adding an animated waving hand.

It would be good if there was an animated waving hand emoji, as well as the ability to toggle the animation on and off.
Like this

I would love to implement it. Just wanted to know if it's needed.

Menu btn needs aria label

This is only announced as button and no context is given to its function. It needs and aria label to explain the function and also an aria-expanded=true/false attribute adding so that screen reader users know if it's open or closed

image

GitHub Integration

It would be neat if this application could integrate directly with GitHub as a webhook or a GitHub app or something along those lines. The user would be able to return to your site and make further edits directly to the README and push the changes to their repository when they're ready, directly from your web interface, rather than having to manually copy the code over.

If you're interested in pursuing this route, the ability for users to edit the generated markdown directly before exporting would be necessary. That way your front-end can tie in to the appropriate parts without messing up any custom markdown that they want to include. WakaTime README stats is a perfect example of all of this, they have the continual updating and allow custom markdown by including their generated code between specific tags, <!--START_SECTION:waka-->.

Skill icons with dark theme won't show well in dark mode

I have noticed that icons with a dark theme won't show well in dark mode. Look at the screenshot below. You can see that such as Nextjs and Github icons won't show well in dark mode compared to light mode. Notice how Aftereffects and Premerie icons behave in dark mode too.

Dark mode
Example dark mode

Light mode
Example light mode

Tab order on create profile page needs some attention

Some of the things from the sidebar are still tabbable even when the sidebar is not visible making the tab order seem strange. You can see in the screen shot that after tab stop 3 the line disappears to the left then comes back to 9 which means there are 5 tabstops which are not visible and may cause confusion for keyboard users

image

Sidebar inaccessible for keyboard users

I can open the sidebar with the keyboard but none of the links 'introduction' 'skills' 'socials' 'badges' 'support' are accessible with the tab key so I can't get to them without a mouse.

Rendering HTML Tags in Preview

I was trying to make use of some basic HTML tags (<sup>, <sub>, etc...) which I noticed does not render in the preview screen:

image

But this is correctly rendered by GitHub.

image

Markdown render issues.

I used your profileme.dev and really helpful in setting up a readme file for my github profile.

However there were some minor issues that needs to be addressed. In particular the copy paste mode.

There are two behavior being rendered when click the clipboard button:

  1. When trying to copy the markdown while the on the preview tab, it generates this formatting on Github's markdown preview:
    Screenshot from 2022-04-19 01-14-06

  2. When copying the markdown code from the markdown tab it generates this formatting:
    Screenshot from 2022-04-19 01-11-00

I know this is a minor issue but hope you can take a look on it.

twitter and github icon but no link

The twitter and github icons in the footer have a cursor pointer state which suggests they are clickable. However, nothing happens when clicking on them.

image

Cloud skills are missing

Ton of skill sets are missing

For e.g. skills like gcloud, AWS and automation tools like ansible, terraform etc and hypervisor tech like VMware, hyper-v are missing

Footer messes up on mobile

Device: Apple iPhone 12 Pro

This also appears to be the case on bigger devices such as iPhone 12 Pro Max

image

TypeScript?

What does profileme community think about using TypeScript in the codebase?

Unable to make the text field bigger

hey Daniel! finally giving profileme.dev a try!
ran into a snag - can't seem to make the text field bigger. i'll share a video below. I'm using Brave browser on macOS

Screen.Recording.2022-09-08.at.9.08.40.PM.mov

Getting an error. Some stats are not showing up.

I don't know if this is my issue or from github. I tried opening it on different browsers but got the same result.

image
image
I am getting these error in two places. Before today, it was fine. All of the stats and thing we showing up properly. I noticed these today only.

image
First error is for these one.

image
This is for the second error.

I should be seeing those above stats but I am getting these errors. Check my profile. If you want to see it yourself.
Thanks for helping in advance.

Save States

You can save the progress of a person in a database (it can be IndexedDB or StorageAPI), in case the page is reloaded, that the progress is not lost. And with you can add a clear button to clean the database and the entries if the user wants it.

Add Vite tech/skill icon

Hey,

It'd be nice to add the Vite icon as a used tech/skill.

https://vitejs.dev/logo.svg

Thanks!

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.