My Digital Portfolio
Background
Showcasing Yourself
Wouldn’t be nice to have a place to show off things you’ve made? This is a portfolio!
Wouldn’t it be even better to make a portfolio on the web using what we’ve learned today so you can share it easily others? Absolutely!
Your Mission
Let’s create and populate your portfolio! During this weekend, we’ve created:
- A game in Scratch
- A webpage
Let’s show them off!
Step 1: Setting Up the Portfolio
First, we need a we a place to show others what we’ve created. At https://github.com/spencertiberi/wca-portfolio you’ll see a repository of code on github that contains a template for a web-based portfolio. Let’s clone (download) that repository and enter the resulting direcotry using the following command:
git clone https://github.com/spencertiberi/wca-portfolio
cd wca-portfolio
After ruinning this, you’ll now have a copy of this code that you can edit to make your own! However, before we get ready to edit it, we will now want to connect this repository with one of your own. Head over to GitHub and create a new repo called wca-portfolio.
Now, back in your IDE run the following command with your username replacing username: git remote set-url origin https://github.com/username/wca-portfolio
Finally, we will “push” these changes to your github repo by running the command git push origin master.
Now, when you visit https://github.com/username/wca-portfolio, where username is your GitHub username, you will see all the code that you cloned from my repo! Let’s make this into a live website. To do so, click the settings tab while visitng https://github.com/username/wca-portfolio. There, scroll down to options for “GitHub Pages.” For the source option, click the dropdown, select master branch, and click save. It will often take a few minutes, but your fresh new website will be hosted at https://username.github.io/wca-portfolio (where username is your GitHub username, of course)!
Step 2: Editing the Portfolio
You’ll want to update the about page so that it actually reflects you! Also, feel free to edit the css to style the website differently.
The portfolio page contains a few options for you. Currently there are some placeholder cards for projects. We want to replace these cards with info on projects you’ve created. Let’s start with the two we’ve made this weekend.
All changes to your code should be added via the command line using git add * to add all changed files to be ready to be committed. Then, the files should be committed using git commit -m "message", where message is text describing what changed. Finally git push origin master will push the code to GitHub and the GitHub pages site will be recalculated and updated!
Once finished with adding this weekend’s projects to the website, let’s find a way to add more, shall we?
Step 3: Creating More Projects
To make some more projects that you can add to your portfolio, here are some ideas to choose from (pick at least 2):
- A calculator
- You can implement it here using this starter code in Scratch
- If you wish to use another languge that you’re comfortable with, feel free!
- A scheduling app in Scratch
- Another game implemented in Scratch
- Another project of your choosing in Scratch
- Another project of your choosing with another programming language
Once you’ve created these, add them to your porfolio. Be sure include a link to the project so people can assess them!