Build your own Technical Portfolio

This repository allows you to create your own technical portfolio page! You are welcome to extend it for other uses, such as blogs or documentation.

If you have problems with this repository, please see our frequently asked questions page.

This repository was originally created for Grace Hopper Celebration 2020 and is constantly being updated based on the feedback of the workshop participants. You can find the slides from vGHC here.

• Prerequisites
• Getting Started
  • Copying the template repository
  • Edit your portfolio with your personal info
    • Update with your name and tagline
    • Update your site URL and organization
  • Commit your changes
  • Review the Actions workflow
• Update Your Profile Picture
• Update Your Social Media Links
• Update Your About Page
• Update Your Projects Page
• Add a Blog
• Delete Your Portfolio
• Apply Updates from This Template Repository to Your Portfolio

Prerequisites

• A GitHub Account
• Markdown Cheatsheet: This is used for typing your blog, about, and project pages.
• For more information about Markdown, visit this guide from GitHub.

Getting Started

Copying the template repository

You'll need to copy this repository to your Github username and enable a few settings.

1. Navigate to the tech-portfolio in your web browser.

2. Fork this repo to your GitHub user. This repo contains all of the necessary files to deploy your technical portfolio; however, you need to configure this repository with the necessary settings to make it a GitHub Pages site.

   ‼️ Ensure you are on your forked repository by checking the upper left title of the repo. It should contain your GitHub user name.

3. Navigate to Settings in your forked repo.

4. On the Settings page, navigate to "Options" and scroll to the bottom to the "GitHub Pages" section.

5. Change the Source branch to "gh-pages" and keep the "/(root)" path and save this change. This contains the GitHub Actions workflow.

6. Go to the Actions page of the repostiory.

7. This original repo has a workflow file already configured and GitHub disables these when you fork them by default. To enable this pre-configured workflow, select the "I understand my workflows, go ahead and enable them."

   ‼️ The Actions workflow will not do anything until you make additional changes.

Now you are ready to move into the repo and make this portfolio your own!

Edit your portfolio with your personal info

1. Navigate to the Code page of your repo and make sure you are on the main branch. Click on the "website" folder and open the siteConfig.js file.

2. Click on the pencil icon to edit this file.

There are four text fields and three social media links for you to update.

Update with your name and tagline

1. Find the title: field and add your name. Remember to keep this field in single quotes.

   ...
   title: 'YOUR NAME',

2. The next line is tagline:. This field appears on your portfolio front page. Replace the placeholder with a description of you in three adjectives and the type of work you do or are looking for. Keep this field in single quotes as well. While we didn't put a character limit, keep it to 140 characters or less!

 ...
 tagline: 'Technologist, awesome, and amazing.',

Update your site URL and organization

1. The next line is url and should be your GitHub username.

   ...
   url: 'https://YOUR-GITHUB-USER.github.io',

2. Keep the baseUrl and projectName fields the same.

   ‼️ We are using a project GitHub page, not a global one associated with your username. If you do want your portfolio to be located at your-user.github.io, you must change the name of the repository.

3. Your organizationName is your GitHub username.

   ...
   organizationName: 'YOUR-GITHUB-USER',

Commit your changes

1. Once you have updated all of the above fields, you are ready to commit these initial changes.
2. Click the "Commit changes" button to save your changes.

Review the Actions workflow

To observe GitHub Actions building your page, go the "Actions" section of the repo.

Click on the "Update siteConfig.js" job. GitHub displays the actions it is taking to build & publish your portfolio.

When the "build" job is complete, navigate to your portfolio in another tab of your web browser.

Your URL is "https://YOUR-GITHUB-USERNAME.github.io/tech-portfolio/" and this site displays your live portfolio.

Congratulations! You completed this walkthrough and have a live technical portfolio! Any changes in your forked repo will trigger a new build and will update your site.

Update Your Profile Picture

Follow these instructions to update your profile picture on the home page.

1. Save the photo you want to use for your profile and name the photo profile.png.

2. Navigate to the website/static/img folder of your technical portfolio.

3. Click the Add file drop-down and choose "Upload files".

4. Choose your file called profile.png and commit this as a change to your repository.

5. Check your live website. The home page should have your photo.

Update Your Social Media Links

1. Scroll to the bottom of the website/siteConfig.js file in the editor.

2. Check out the socialMedia section. This section controls the social media icons and links at the bottom of your portfolio!

    socialMedia: {
        linkedin: 'https://www.linkedin.com/in/',
        twitter: 'https://twitter.com/',
        github: 'https://github.com/',
        //facebook: 'https://www.facebook.com/',
        //instagram: 'https://www.instagram.com/',
        //youtube: 'https://www.youtube.com/',
        //twitch: 'https://www.twitch.tv/'
    },

   

3. Navigate to your social media profile page. Copy the URL and paste it into the field.

   1. For example, find your LinkedIn public profile name, login to your LinkedIn account and view your profile.
   2. On your profile page, click "Edit public profile & URL" from the upper right section of the page.
   3. Under "Edit your custom URL", copy the entire URL (https://www.linkedin.com/in/yourprofile). This is your LinkedIn profile URL.
   4. Paste it in your linkedin: setting.

      linkedin: 'https://www.linkedin.com/in/yourprofile',

4. If you want to add social media, check out the commented lines (lines starting with //). You can enable the social media icons by delete the // from the line.

   linkedin: 'https://www.linkedin.com/in/yourprofile', <- delete the // at the beginning of the line to use

5. If you don't have a social media profile for the specific website, you can add the // to the beginning of the line. These will be ignored.

   // linkedin: 'https://www.linkedin.com/in/yourprofile', <- added the // at the beginning of the line to ignore

6. The page will update with the social media icons automatically!

If our list doesn't include a social media icon you want, feel free to open a Github issue and tell us which one you're looking for!

Update Your About Page

You can customize the About page of your technical portfolio with some information about you.

1. In the docs directory of the repo, open the about.md page and edit it.

2. Update this page with a little bit about yourself!

3. To see this page, navigate to your site and click the About page.

Update Your Projects Page

You can customize the Projects page of your technical portfolio with a project you want to highlight.

1. Take a screenshot of a project you recently worked on and save it to your local machine.

2. Navigate to the docs/assets/ folder of your technical portfolio and click the Add file drop-down and choose "Upload files".

3. Choose your file and commit this as a change to your repository.

4. In the docs directory of the repo, open the projects.md page and edit it.

5. Update this page with a short description of the project with a link to see it live if available.

6. To add the screenshot, you will use the Markdown syntax with alt text in [] and a relative link to the image in ().

7. Commit your changes and navigate to Actions, where the new build job will run and update your page.

8. To see this page, navigate to your site and click the Projects page.

Add a Blog

Usually, it is easier to use a blogging platform to write a blog. However, we added this into your tech portfolio if you want to manage your blogs yourself. To add a new post...

1. In the website directory of the repo, find the blog folder.

2. Create a new file called <YEAR>-<MM>-<DD>-blog-post.md. Make sure you name it with the year, month, and date. If your month or day is single digits, make sure you add the 0 in front of it (e.g., February is 02). Keep the -blog-post.md.

3. Copy the contents of 2020-10-03-blog-template.md. Paste into your new blog post.

4. Change the title to one that you want to name your post.

5. Update the body of the post with some content.

6. Commit your changes and navigate to Actions, where the new build job will run and add your new blog post.

7. To see this page, navigate to your site and click the Blogs page.

Delete Your Portfolio

1. Navigate to Settings in your forked repo.

2. Scroll down to the bottom of the page until you see the Danger Zone.

3. Click "Delete this Repository" and follow the prompts to remove the repository.

Apply Updates from This Template Repository to Your Portfolio

Let's say you want to include the updates we made for the social media links into your portfolio. At the time, we didn't add dynamic creation of social media icons and you want to include your YouTube channel. You can update your portfolio to take advantage of template updates we make.

1. Go to your forked repository. You'll see at the top a box that says how commits different your repository is from our template repository.

2. Click the "Compare" button.

3. When you click compare, it might show "no differences" because GitHub compares the fork to the base. You want to compare the base to the fork! Click "switching the base" to reverse the comparison and compare the base to the fork.

4. You should see the base repository as your portfolio and the head repository as the template.

5. Click "Create Pull Request".

6. In the pull request dialog, name the pull request something descriptive like "updating my repo to match template". Then, click "Create Pull Request".

7. Click "Merge Pull Request" and click "Confirm Merge".

8. Your pull request should merge successfully. If you have conflicts, you will have to resolve them through the GitHub UI.