Introduction
I made this article as short and straightforward as possible. A portfolio in the contest of programming is a showcase of what you can do with your coding skills. Some of the things to showcase in your portfolio includes:
- Personal/group coding projects.
- Planning and team collaboration skills.
- Creative thinking and problem-solving skills among others.
Requirements
- AGitHubaccount.orGit client.
- A website theme — Bootstrap or an HTML/CSS template but NOT a WordPress theme. I have listed some free portfolio template providers in step 2 below.
The 8 steps
Disclaimer: Some steps are based on Linux systems. If you are using Windows, don’t worry. Just use the Graphical User Interface (GUI) for those steps.
1. Create a new repository named username.github.io. For instance, if your GitHub username is brianmwevi, then your repository name would be brianmwevi.github.io and GitHub pages will automatically take this to be your homepage. Add a description of the repo if any and click on ‘Create repository.
2. Download a theme/template that fits your need. Some references:
- If you love dark themes, check out the following: theme1(download link), theme2, theme3 (download link), theme4, and theme5.
- Other theme options: Bootstrapmade, CssAuthor, Themezy, BootstrapZero, and StartBootstrap.
- Google: Search on Google for free portfolio themes/templates.
Note: Please be aware of the license before downloading — some people release their work under an open/permissive license whereas others impose copyright restrictions, and you’re breaking the law if you violate copyright.
3. Once you download the theme on your local machine, uncompress the download if compressed.
4. Launch your terminal/command line prompt and navigate to where you want to manage your portfolio site locally. For example, I want to manage my site in a folder called “portfolios” inside the Documents folder. I would run the following commands on the terminal:
5. Clone your remote/online repository (the one created in step 1) to your local machine by running the following command in the same opened terminal:
6. Copy the contents of your downloaded theme (check step 3) into the cloned repository folder (check step 5). Make sure the index.html file in the downloaded theme is at the root of this directory.
7. In the opened terminal, run the following commands one after the other:
8. Navigate to http://githubusername.github.io to see your newly created online portfolio. In my case, it would be http://brianmwevi.github.io
Things to note and bonus points
- Your live site (step 8) might take some time (appx. 5 minutes) to be available for viewing if it’s your first deployment.
- If you want to make changes to your portfolio, make them locally and push the modifications to your remote repository following the commands in step 7. However, when running the git commit -m “enter a reference message of what you changed".
- You can also make your own Blog on GitHub using Jekyll themes.
Conclusion
Did you find it helpful? Leave some claps and/or a link to your live portfolio. You can check out my simple GitHub portfolio I created more than 3 years ago. You can borrow a thing or two.
Name already in use
How-to-Create-a-GitHub-Portfolio / README.md
- Go to file T
- Go to line L
- Copy path
- Copy permalink
1 contributor
Users who have contributed to this file
- Open with Desktop
- View raw
- Copy raw contents Copy raw contents
Copy raw contents
Copy raw contents
�� How to Create a GitHub Portfolio
Hi there, I’m Katie! ����♀️
This is a fuss-free, simple guide to create your GitHub portfolio.
It’s perfect for
- Beginners in data science who wants to showcase samples of work, or projects.
- Serves as a digital resume to show that you have the skills in your resume.
- A fun way to keep track of your projects.
Why I created this repo?
- I was once intimidated by GitHub myself. I signed up in March, but left it aside as I did not understand how it works.
- Since then, I have learnt how to use it (I’m quite obsessed with writing in Markdowns �� ), so I would love to share this knowledge with everyone. ��
Table of Contents
You can learn how to do this neat table of contents too! It’s very easy. ��
Let’s understand some of the alien terms that you will see on GitHub.
�� Repository/repo means folder . It is similar to creating folders on your computer. Each repository represents one folder. You can create multiple repositories for different projects.
�� README.md is a default note, or summary that is usually included in each repo. It acts as the «homepage» of your repo where you can introduce the project, provide a summary, or anything — so feel free to write it.
�� Fork in layman means copy + paste . Let’s say you want to make a copy of this guide, have access to it, and edit and play around with the codes. You can do it! Any changes made in your copy of the file would not be reflected in this guide. I’ll teach you how to do it below.
You do not need to download the GitHub Desktop to set up your portfolio. Your browser would do the job just fine. ��
How to Create Your Profile?
Are you interested in creating a Profile that appears on your GitHub homepage, like mine?
Step 1: Click on + and New Repository at top right of the page.
Step 2: Create a new repository with the exact name as your username.
My username is «katiehuangx«, so I created a new repository named «katiehuangx«. This repository will contain the write-up of your profile.
The format of the file is Markdown (.md) . Its default name is README.md , so you can leave it as that.
Step 3: To edit your Profile or Markdown file, hover over the pencil ✏️ icon on your right and click Edit this file .
Now you can start to write your profile! �� Once you’re happy with the contents, scroll down and click Commit changes .
�� What to write in your profile?
It’s entirely up to you and your creativity! Most people would include:
- An introduction of yourself
- Skills like Data Analysis, SQL, Python, Tableau, Web Development, etc
- Fancier things like visitor count, clickable icons, etc (can’t help you with this as I’ve not learn it yet �� )
- Projects that you’re proud of
For further reading, check out:
-
— Detailed guide on creating your profile
- Get some inspiration from this post for awesome GitHub profiles.
How to Customize Markdown files?
GitHub’s Markdown guides are excellent and comprehensive enough, yet easily understandable. This is where I learn to customize mine too. ��
- How to customize Markdown files — Github Basic writing and formatting syntax
- How to create tables — GitHub Organizing information with tables
- How to colour code your SQL, Python, etc code blocks (This is my favourite part!) — GitHub Creating and highlighting code blocks
- Bonus tip: How to add emojis? �� ��������♀️ �� �� ��
- For Windows: Windows logo key + . (period)
- For Mac: Control + Command + Spacebar
Normally what I would do is take a screenshot, or download the image.
Then, I copy the image file and paste in the Markdown file itself. Give it around 3-5 seconds to load the image.
Uploading screenshot.
Successfully uploaded screenshot!
Click Preview to check your newly uploaded image.
�� Add Table of Contents
Below is the code block for my table of contents.
To ensure that you retrieve the correct (#xx-xx-xx) :
Click on the chain logo beside your title. Right click and open in new tab.
Navigate to the website link and scroll all the way to the end and copy the highlighted ##xx-xx-xx .
Do not include emojis in your title, otherwise the links in the table of contents would not work.
Psst, the links in the table of contents do not work in Preview . You have to Commit changes in order to check if the links work.
�� Colour Code the Code Blocks
If you’ve seen my 8 Week SQL Challenge repo, I use colour codes for my SQL syntax. It’s very easy to do and makes your syntax look professional too.
This is how it will turn out:
How to Create New Repository?
Creating a new repo is as easy as creating your profile.
Step 1: Click on New Repository at the top right of the page.
The image below is the default setting. If you forgot to tick Add a README.md , you can create the file separately in the repo later.
And, it’s done. You have created your first repo! ��
How to Create Subfolders in your Repository?
Step 1: Navigate to the right side of the page. Click Add File and Create New File .
Step 2: Name your file followed by the extension .md , or your desired format.
How to Upload Projects in your Repository?
Step 1: Navigate to the right side of the page. Click Add File and Upload File .
Step 2: Choose your file , wait for file to load completely and click Commit changes
Once your file is uploaded completely, it will look like the one in my screenshot below. Bigger file size would take a longer time to load. ��
And, that’s it! It’s as simple as that!
How to Fork a Repository?
Let’say I’m checking out this awesome repo and I’m curious to see how he adds the icons, Twitter button, and all the cool stuffs.
Step 1: Click on the fork�� icon at the top right of the page
Step 2: It’s done!
GitHub has forked and copied the repo and added it as one of your repo. Now, you can edit the file and learn how to add those fancy, cool stuffs too!
Feel free to fork this guide and see how I’ve written it too! �� ����
Now go and have fun creating your Github profile and start adding projects!
If you like this guide, please give this repo a Star �� Happy GitHub-ing! ����♀️
Инструкция по оформлению профиля на GitHub
Правильно оформленный профиль на GitHub очень важен для поиска работы: для интервьюера это единственная возможность увидеть ваш код и оценить вас в деле. Мы попросили Георгия Бабаяна, основателя и CEO школы программирования Elbrus Bootcamp, рассказать, как оформить профиль, чтобы показать себя с лучшей стороны.
GitHub — это лицо программиста. Портфолио демонстрирует как ваши технические навыки, так и soft skills: умение заботиться о пользователе, писать документацию и другие полезные в командной работе навыки. В инструкции я собрал 10 правил и 7 ловушек GitHub, которые нужно знать каждому программисту, который хочет найти хорошую работу.
10 правил оформления профиля на GitHub
Хорошая фотография
Заметная и хорошо читаемая фотография помогает расположить к вам посетителя профиля. Выбирайте снимок с лицом крупным планом и нейтральным фоном.
Имя и фамилия
Обязательно напишите свои имя и фамилию, а не только никнейм, чтобы профиль легко было сопоставить с резюме.
Адрес электронной почты
Убедитесь, что email для связи с вами доступен всем. Для этого зайдите в настройки профиля: там есть специальная кнопка «сделать публичным». Избегайте адресов в духе sexybaby@mail.ru — используйте ящик в доменной зоне.com с понятным неймингом. Не делайте публичным email, который привязан к вашему аккаунту GitHub: это повышает вероятность взлома аккаунта и демонстрирует слабое владение правилами безопасности в интернете.
Биография
Многие игнорируют этот раздел, а зря. Напишите немного о том, какими технологиями вы занимаетесь и что вам интересно. Тогда тот, кто просматривает ваш код, будет понимать, на что смотреть.
Ссылка на соцсеть
Добавьте ссылку на профессиональную соцсеть, которую вы ведёте наиболее активно и подробно.
Репозитории
Прикрепляйте только те репозитории, которые вы хотите показать будущему работодателю. Удалите «детские» проекты! Никому не интересно смотреть на «Hello, world!».
Если репозитория ещё нет, сделайте проект сами: создайте чат-бот или простое приложение о погоде — что-то, что поможет увидеть вас в деле.Забота о читателе
Интервьюеру тяжело: каждый день он смотрит десятки профилей, поэтому опишите каждый проект как можно понятнее. Хороший способ — поставить перед названиями проектов эмодзи, которые помогут сразу понять суть проекта: например, джойстик для игры или вилку с ножом для сервиса бронирования столиков.
README
Обязательно сделайте файл Readme внутри проекта. Опишите проект одним предложением, а затем расскажите в одном абзаце о том, какую цель ставили, что делает ваша разработка и так далее. Так вы покажете рекрутеру умение формулировать мысли и писать документацию и продемонстрируете, что работать с вами будет легко.
Команда
Если вы делали проект вместе с командой, проявите уважение: добавьте ссылки на репозитории других авторов проекта.
Визуализация
Идеально, если у вас получится прикрепить к проекту гифку или видео, которое показывает, как всё работает.
7 ловушек GitHub — ошибки в оформлении, которые часто делают программисты
Неочевидная команда запуска
Напишите код, который запускает ваше приложение. Некоторые программисты считают, что npm init и npm start — это очевидные команды, но не стоит забывать о том, что очевидное вам вовсе не обязательно будет понятно тому, кто читает ваш проект.
Мусор в коде
Уберите отовсюду консоль-логи, принты, выводы ошибок и глупые комментарии. Как-то раз я собеседовал на должность преподавателя приятного кандидата и уже собирался предложить ему работу. А затем обнаружил в его коде функцию, которая не делала ничего. Рядом с ней красовался комментарий: «Нужно удалить».
Ошибки в коде
Обязательно прогоните код через линтер: он проверит код на ошибки, укажет на баги и найдёт подозрительные конструкции.
Ключи и пароли в коде
Не оставляйте в ваших репозиториях ключи и пароли — это дурной тон. Храните такие данные в переменных окружения или в .env-файле, добавив его в .gitignore.
Непонятные коммиты
Начинайте свой коммит с того, что вы что-то добавили, удалили или изменили. Затем напишите, что получилось в результате. Проверьте себя: читая хороший коммит, посторонний человек может понять, что было сделано и зачем. Например: изменили функцию, которая не позволяла отправить письмо.
Низкая активность
Очень важно постоянно держать зелёным ваш график активности («contributions»). Чтобы не создавалось впечатления, что вы не работаете, создайте специальную папку «Мои решённые алгоритмы». Добавляйте в неё всю релевантную активность: «алгоритм решения судоку», «алгоритм сортировки», чтобы было видно, что вы постоянно что-то делаете.
Плохой стиль
Соблюдайте стайлгайд своего языка — PEP8 для Python, Airbnb Style Guide для JavaScript, Airbnb Ruby Styleguide для Ruby и так далее. Так вы продемонстрируете заботу о комфорте коллег и уважение к принятым в сообществе нормам.
How to create a simple portfolio with GitHub pages
One of the ways of scaling up as a developer is building a portfolio. Basically, a portfolio is a way of showcasing work samples and skills stated in your resume.
One of the ways of creating a simple portfolio is using GitHub pages. This is a site hosting service that takes HTML, CSS and JavaScript files directly from a repo on GitHub. The good thing about GitHub pages is the fact that it is free as it supports custom domains, with deploys straight from Git.
Getting Started
- Make sure you have a GitHub account.
- Have basic knowledge of how Git and GitHub Works.
Lets do this ����
Login to your GitHub account
Creating a project site.
create a new repository named username.github.io. Say if you name is carolyne, your repository name will be carolyne.github.io. This will be your homepage. PS: You can add a description if you like.
- Check out the following websites to download free portfolio website templates from colorlib, Start Bootstrap, Themezy, BootStrap zero or Bootstrap made. You can as well use this link (https://github.com/evanca/quick-portfolio) to create one by forking the repo.
Go to repository Settings and scroll down to the “GitHub Pages” section. Select “master branch” under the “Source”.
Add a theme to the portfolio to changeits look and feel
Choose the theme you want and then , Select Theme
You may be asked to edit your site`s README.md file
Your chosen theme will automatically apply to files in your repo.Steps to create personal or organization site
You can work with the repo already created or create a new one.
Clone the repository.
create a folder where you want to store the project on your desktop and clone the new repository
$ git clone https://github.com/carolmusyoka18/carolmusyoka18.github.io
add index.html file
You can now create an index.html file in the project folder
$ echo «Hello World» > index.html
Push the Repo
Add commit and push all your changes
$ git commit -m «Initial commit»
$ git push -u origin master
`And you are good to go ������
If you are deploying Github pages for the first time, you might need to wait for a while before you see the actual site. If you need to make any change to your portfolio, you can make them locally and push the changes as shown above. It is not advisable to make changes directly on the portfolio.
You can edit files directly on GitHub in any of your repositories using the file editor, which uses CodeMirror. You can check out this short tutorial to get it right
The secret is trying and practicing. With time you will, get pretty good at creating portfolios. Share your thoughts or ideas down below.