Skip to content
View karaatfullstack's full-sized avatar
  • Fullstack Academy
  • Seattle, WA

Block or report karaatfullstack

Block user

Prevent this user from interacting with your repositories and sending you notifications. Learn more about blocking users.

You must be logged in to block users.

Please don't include any personal information such as legal names or email addresses. Maximum 100 characters, markdown supported. This note will be visible to only you.
Report abuse

Contact GitHub support about this user’s behavior. Learn more about reporting abuse.

Report abuse
karaatfullstack/README.md

Hi there πŸ‘‹

  • 🌱 I’m currently learning... how to make a github portfolio for my students
  • πŸ’¬ Ask me about... how that's going
  • ⚑ Fun fact:... I have a 14 year old chinchilla. He might be immortal.

How to make a Github portfolio

  1. Go to your Github page and click to create a new repo
  2. Name that repo the same thing as your username (If your username is coolcode2000, name your repo that as well)
  3. Once you've typed in the repo name, a message will appear:
Github Readme
  1. Make sure to select PUBLIC as the type of repo, and to check the box that adds a README file
  2. Create your repo and head back to your main profile page - you'll see the file appear at the top!

How to make your page B-E-A-utiful

You can technically use CSS in most markdown files, but it's recommended you use actual markdown when you can. Here is a basic style guide to get you started.

#1 - Add images

  • You can simply drag and drop images from your computer to Github, and it will be saved in your assets folder. Dropping the image will create an img tag in your README, which will have 'width' and 'alt' attributes that you can update to resize and change.

#2 - Add gifs:

  • The easiest way to do this is save the gif to your computer, then drag and drop it into the README file
  • The other way is by going to a site like giphy.com and choosing a gif. Once selected, choose the "Embed" option
  • Don't paste the entire div into your README - instead right click on the image and select "copy image address". Create an img tag and place that address in your 'src' attribute - the img element will display your gif, and will look amazing.

delightfully surprised

  • Remember that when you're taking images you check that they are free to use! If a site requires you to link back to it, you can do so with an HTML anchor tag
  • You can center and style items using HTML. To get the gif centered, I placed my img element into a paragraph:
<p align="center">
   <img src="myImage.jpg"/>
 </p>

#3 - Add badges:

A badge is a logo image you can add to link other social media and portfolio sites.

The standard code: ![Badge Name](https://img.shields.io/badge/BadgeName-hexColorforBackground)

So, to make a LinkedIn badge, this is the code and result:

![LinkedIn](https://img.shields.io/badge/LinkedIn-0A66C2)

LinkedIn

To make the badge link to a site, simply wrap it in an anchor tag, like so:

<a href="https://www.linkedin.com/yourLinkedIn"> ![LinkedIn](https://img.shields.io/badge/LinkedIn-0A66C2) </a>

And now it's clickable: LinkedIn

#4 - List technologies

Example of how this section can be styled:

πŸŽ‰ Tools and Technologies πŸŽ‰

  javascript   java  

The code I used to create that section is here:

<h2> &#127881; Tools and Technologies &#127881;</h2>
<p align="left">
<img src="https://cdn.jsdelivr.net/gh/devicons/devicon/icons/amazonwebservices/amazonwebservices-original.svg" width="60" height="60"/> &ensp;
<img src="https://cdn.jsdelivr.net/gh/devicons/devicon/icons/javascript/javascript-original.svg" alt="javascript" width="60" height="60"/> &ensp;
<img src="https://cdn.jsdelivr.net/gh/devicons/devicon/icons/java/java-original.svg" alt="java" width="60" height="60" /> &ensp;
</p>
  • Some CSS can be added to change the size of the emojis, but Github doesn't allow all properties (like margin). To make spaces, I used an actual space character: &ensp;

Popular repositories Loading

  1. Github-How-Tos Github-How-Tos Public

    instructions for senior phase

    1

  2. 2023-Senior-Phase 2023-Senior-Phase Public

    1 1

  3. Session-Local-Storage-Demo Session-Local-Storage-Demo Public

    Demo on using local and session storage

    JavaScript 1

  4. OOP-Design_ATM-Problem OOP-Design_ATM-Problem Public

    1

  5. silly-git-demo silly-git-demo Public

    Forked from danceoval/silly-git-demo

    a silly git demo

    JavaScript 12

  6. day-1-project day-1-project Public

    HTML 12