GitHub Profile Readme

if you're a developer it's time to create your own github portfolio readme which is something new to github allowing you to have an account with a portfolio that looks a little bit more interesting than just the generic one available through github this will be really good especially for those people that want to present themselves online it'll be like the new linkedin where you can show off your work your skills your examples and your experience too we're going to build out my own one here but in this example you'll get to see how i'm adding images and gifs and all sorts of cool stuff into the portfolio to really make it neat and tidy and interesting my name is adrian and i do videos around design and development so if you haven't already hit like and subscribe and we're just gonna jump straight into it i'm going to assume that you already have a github account i wonder what kind of developers don't have github accounts but if you don't you can create a brand new one directly on their website they were acquired by microsoft and now you can create both public and private repositories for free on there what we're going to do is log into our account over here and create a brand new repository and this repository should be just the same name as your account name in this case it's my full name so i'm just going to type it in here i've got to make sure i spell this correctly and that's done and what we're going to do is we're going to set this up as a public repository we're gonna initiate it with a readme but we're not gonna add anything else in there when we click create repository we're taken straight to the directory for this what's cool about this is that it's already taken effect we can actually jump into my portfolio now and we'll be able to see that our readme.md has applied and we've got the hey there we can also edit this and we don't even need a code editor we don't have to get pull or anything like that we simply select the edit button here on the right and we'll be taken to the readme.md file where we can commit changes immediately so let's see what we can put into this portfolio on github so that it's a little bit more interesting for my own version here we can see that there is some mock-up that's been commented out but i'm not going to use any of this i reckon we can just start fresh and let's see what we can create in here since we're starting from scratch sometimes it's good to be able to go to online references to see what other people do and there's a cool dev.2 article which i'll link in the description of what some of the other people have done for their github portfolio where they've added in images they've put in content and statistics and we're going to have a look at how we can put some of these into our own github portfolio when doing a portfolio i think it's quite important to be able to present yourself who you are what you do your skills and maybe some of your experience and that's what i'm going to recommend for the github portfolio readme i essentially want to be able to jump in and see who a person is so that'll mean that we'll have an introduction we'll also want to have a look at some of the work you've done so in this case maybe some examples of projects you're really proud of and maybe some statistics about your experience and skills so let's have a look at how we can put this into our own version over here man those dev2 examples were really good how can i stack up let's write up a example of who i am in this case what i'm going to do is put in an introduction of who i am and i'm adrian so let's try this out hi i'm adrian from australia and i do content on design and development hmm maybe i can just fast forward this part now that we have a little bit of content i want to add some statistics here to my portfolio and we can do this using this repository over here which is github readme stats what i'm going to do is copy over this example here where we simply swap out the username here with our own username in this case it'll just be my name so let's actually apply this in over here and i'm going to give this a shot just to see how it works now that we're done let's commit this change directly and have a look at what we get we can see that we have the hi there we've got the introduction here and we've got our stats in here and if i were to go to my portfolio page here on github we'll be able to see these automatically apply so that's pretty cool what i want to be able to do is i'll add a lot more content in here though because right now this is pretty basic and there are easier ways to do this and one of the ways is to use a generator i actually have one bookmark and i'll also link this in the description but this actually gets all the content ready for you in a nice readme.md file let's take a look at it now this one here is from arter and what it does is get your portfolio ready to go so what i'm going to do is i'm going to edit this one with my own content so i'm just going to put an adrian here then i'm going to put in a nice introduction something like design and development and maybe a bit about me which i can copy over from here then after that we can put in some skills in here and for me that'll be react.js html etc and finally we can put in a banner here now i don't have a banner but i do have one on twitter so i might reuse that one as the example in this case so let's copy this url and paste it in there and it looks like that's worked now what's really cool is that we've got all the code over here ready to go so i can actually copy this and paste it directly into my own readme.md file here of course if we want to add in more stuff we can do that too so i'm going to go here to additional and i'm going to write here maybe something like my own company then maybe in here for social i'll add some links as well so for this i might put in my username in here i might do that as well let's do this as well for twitter and as we put these in we can see that the icons pop up and these will be available for people to click on so that's really cool i think i've got my own website here somewhere as well on github which i can use as well here for the website url so this way we've got a nice portfolio example here and if we take a look this is actually using images from this cdn provider here to create these social links i'm going to copy these over and paste these into my portfolio here and i think that should be more or less it so let's commit those changes and have a look at what we get looks like that old worked but some of the things that i can see here is that it's not exactly how i like it to be we might want to use our own banner in here and sometimes using an online cdn or an external source is in the best way so let's have a look at how we can change this so that we can have our own portfolio image in here what i'm going to do is i'm going to add a file and i'm going to upload one directly i've got a screenshot here of my banner that i want to use i'm just going to drag and drop that right in here and that's one that i've used for the free code cap so i'm just going to commit that in here and this image now will have its own url so i want to be able to use that as a reference here for our readme so let's edit this one over here and instead let's grab this url that we're using for this file which is just over here i'm going to apply that here as the new url for our image and give that a shot so let's actually do a save here and a commit and see if that applies okay now you can see now we've got a full banner which is looking much better we'll then later be able to edit this picture and we can have it to be whatever we want i also want the picture to be the very first thing and i'm going to put in the title in next so maybe something like hi there i'm adrian and then let's go straight to the introduction over here and then let's do a nice big text here for skills and experience and in here we could actually replace some of these skills here with icons and something a little bit more interesting so here for react i might put in a little atom icon then for react native we can do a little mobile icon over here and you'll see that these are all just emojis really and that's really cool you can just use emojis for most of these let's do a computer icon over here and maybe just write in html css and js and at least that gets us started we can also update some of these things so that there are larger headings instead of a h3 this should now be h1 h2 and let's hit save on that just to see what we get to start off with we can see now it's got a better layout to it if we actually go to the portfolio version of it we can see that it's starting to take shape let's see if we can make this example a little bit more interesting there's a few different ways we can do this we could add in more images or we could even add in some gifs and that would make it pretty cool so i think i might go down the gif example and i might put in a few examples of work that i've done in here now to do this we would simply go add file and you would upload the gif and then once it's in here we'll be able to utilize it in the portfolio readme so i've already done this and in this case what i'm going to do is i'm going to edit this example here and i'm going to create a new section here and we'll call this examples of work i'm going to create an image tag in here with an src and maybe a manual width of say 200 256 and i'm going to paste in the url over here of the gif that i want and i'm going to give that a commit and then we can take a look at it so let's place that in there and go back to our portfolio and in our examples of work i've got our animated gif to actually present the work straight away we can make this linkable and we can set it straight to the github repository that this project's located on but it's a more interesting way to show of your work rather than simply linking it with some url paths since i do a lot of youtube videos i also want to put some of these here into my portfolio there's a few ways to do that but it's not always as easy in markdown there is a markdown cheat sheet you can utilize by adam here and he basically shows you how you can do headers and lists and images but he's got an example here for youtube videos which i'm going to copy across and utilize for my own version so let's actually jump in here and place this here below my examples of work and i think we'll just copy over the width here so that everything is consistent and we should be able to hit save on that and take a look at it to see how it applies now if we go to the portfolio here we can see that my examples of work and my youtube videos are up here and if i select one of those that takes me straight to the page so that's pretty cool in the future we might take a look at how else we can customize the portfolio here on github so that it's more interesting maybe with some dynamic or automatic updates using things like the actions from github because i've seen that by other people and those look pretty cool but at least this should get you started with your own github portfolio so that if you want to make some work on here and you want to show it off you'll be able to do that

Channel: Adrian Twarog

Views: 39,031

Keywords: github profile readme, github profile, github profile readme.md, github profile readme generator, github profile resume, github profile tutorial, github profile creation, github portfolio, github portfolio readme, github, github readme, github readme portfolio, github readme profile, profile readme github, github readme profile page, how to add a readme to your github profile, how to setup a github profile, how to create a github profile readme, how to create a github profile

Id: KhGWbt1dAKQ

Length: 12min 5sec (725 seconds)

Published: Tue Aug 25 2020