Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/joatmon08/tech-portfolio
A repository you can use to template your technical portfolio
https://github.com/joatmon08/tech-portfolio
Last synced: 5 days ago
JSON representation
A repository you can use to template your technical portfolio
- Host: GitHub
- URL: https://github.com/joatmon08/tech-portfolio
- Owner: joatmon08
- License: mpl-2.0
- Created: 2020-08-25T18:03:00.000Z (over 4 years ago)
- Default Branch: main
- Last Pushed: 2023-08-11T15:37:28.000Z (over 1 year ago)
- Last Synced: 2024-12-04T05:03:53.371Z (19 days ago)
- Language: JavaScript
- Homepage: https://joatmon08.github.io/tech-portfolio/
- Size: 17.8 MB
- Stars: 112
- Watchers: 5
- Forks: 695
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# 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](./FAQ.md) 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](./assets/ghc.pdf).
* [Prerequisites](#prerequisites)
* [Getting Started](#getting-started)
* [Copying the template repository](#copying-the-template-repository)
* [Edit your portfolio with your personal info](#edit-your-portfolio-with-your-personal-info)
* [Update with your name and tagline](#update-with-your-name-and-tagline)
* [Update your site URL and organization](#update-your-site-url-and-organization)
* [Commit your changes](#commit-your-changes)
* [Review the Actions workflow](#review-the-actions-workflow)
* [Update Your Profile Picture](#update-your-profile-picture)
* [Update Your Social Media Links](#update-your-social-media-links)
* [Update Your About Page](#update-your-about-page)
* [Update Your Projects Page](#update-your-projects-page)
* [Add a Blog](#add-a-blog)
* [Delete Your Portfolio](#delete-your-portfolio)
* [Apply Updates from This Template Repository to Your Portfolio](#apply-updates-from-this-template-repository-to-your-portfolio)
## Prerequisites
* [A GitHub Account](https://github.com/signup)
* [Markdown Cheatsheet](https://guides.github.com/features/mastering-markdown/): This is used for typing your blog, about, and project pages.
* For more information about Markdown, visit [this guide from GitHub](https://guides.github.com/pdfs/markdown-cheatsheet-online.pdf).
## 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](https://github.com/joatmon08/tech-portfolio) in your web browser.
1. 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.
> :bangbang: Ensure you are on your forked repository by checking the upper left title of the repo. It should contain your GitHub user name.
1. Navigate to Settings in your forked repo.
1. On the Settings page, navigate to "Options" and scroll to the bottom to the "GitHub Pages" section.
1. Change the Source branch to "gh-pages" and keep the "/(root)" path and save this change. This contains the GitHub Actions workflow.
1. Go to the Actions page of the repostiory.
1. 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."
> :bangbang: 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.
1. 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.
```js
...
title: 'YOUR NAME',
```
1. 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!
```js
...
tagline: 'Technologist, awesome, and amazing.',
```
#### Update your site URL and organization
1. The next line is `url` and should be your GitHub username.
```js
...
url: 'https://YOUR-GITHUB-USER.github.io',
```
1. Keep the `baseUrl` and `projectName` fields the same.
> :bangbang: 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.
1. Your `organizationName` is your GitHub username.
```js
...
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.
1. 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`.
1. Navigate to the `website/static/img` folder of your technical portfolio.
1. Click the Add file drop-down and choose "Upload files".
1. Choose your file called `profile.png` and commit this as a change to your repository.
1. 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.
1. Check out the `socialMedia` section. This section controls the social media icons and links at the bottom of your portfolio!
```js
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/'
},
```
1. 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.
1. On your profile page, click "Edit public profile & URL" from the upper right section of the page.
1. Under "Edit your custom URL", copy the entire URL (`https://www.linkedin.com/in/yourprofile`). This is your LinkedIn profile URL.
1. Paste it in your `linkedin:` setting.
```js
linkedin: 'https://www.linkedin.com/in/yourprofile',
```
1. 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.
```js
linkedin: 'https://www.linkedin.com/in/yourprofile', <- delete the // at the beginning of the line to use
```
1. 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.
```js
// linkedin: 'https://www.linkedin.com/in/yourprofile', <- added the // at the beginning of the line to ignore
```
1. 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.
1. Update this page with a little bit about yourself!
1. 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.
1. Navigate to the `docs/assets/` folder of your technical portfolio and click the Add file drop-down and choose "Upload files".
1. Choose your file and commit this as a change to your repository.
1. In the `docs` directory of the repo, open the `projects.md` page and edit it.
1. Update this page with a short description of the project with a link to see it live if available.
1. To add the screenshot, you will use the Markdown syntax with alt text in `[]` and a relative link to the image in `()`.
1. Commit your changes and navigate to Actions, where the new build job will run and update your page.
1. 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.
1. Create a new file called `--
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`.
1. Copy the contents of `2020-10-03-blog-template.md`. Paste into your new blog post.
1. Change the title to one that you want to name your post.
1. Update the body of the post with some content.
1. Commit your changes and navigate to Actions, where the new build job will run and add your new blog post.
1. To see this page, navigate to your site and click the `Blogs` page.
## Delete Your Portfolio
1. Navigate to Settings in your forked repo.
1. Scroll down to the bottom of the page until you see the **Danger Zone**.
1. 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.
1. Click the "Compare" button.
1. 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.
1. You should see the base repository as _your_ portfolio and the head repository as the template.
1. Click "Create Pull Request".
1. In the pull request dialog, name the pull request something descriptive like "updating my repo to match template".
Then, click "Create Pull Request".
1. Click "Merge Pull Request" and click "Confirm Merge".
1. Your pull request should merge successfully. If you have conflicts, you will have to resolve
them through the GitHub UI.
