portfolio-example

KO | EN

gitlite — search

#python #react #typescript #go #android #linux #nodejs #java #awesome #awesome-list #security #openai #mcp #ios

portfolio-example

(★ 18)

Simple portfolio example derived from the forty theme

portfolio-example Latest Version Download

Download Latest Version (.zip)

// repository documentation

Was this content helpful?

★ 0 (0 ratings)

# Simple Portfolio Template

This repository provides a template for sharing work as an online portfolio (website).
It was designed primarily for Data Scientists sharing their R projects,
with each project representing an `html` file (such as the product of knitting `Rmd`)
or a website (such as produced by a `shiny` app).

The template portfolio is a simple example built with [`hugo`](https://gohugo.io) 
derived from the [`forty`](https://themes.gohugo.io/forty/) theme.

To see a website using this template, 
check out this example: https://hugo-portfolio-example.netlify.app/

Inspired by Emi Tanaka's Showcase page: https://emitanaka.org/showcase/

## Why have a portfolio?

<blockquote class="twitter-tweet"><p lang="en" dir="ltr">My <a href="https://twitter.com/hashtag/rstats?src=hash&amp;ref_src=twsrc%5Etfw">#rstats</a> friends, can you believe that I got a job interview and possibly an offer because I made this treemap for <a href="https://twitter.com/hashtag/TidyTuesday?src=hash&amp;ref_src=twsrc%5Etfw">#TidyTuesday</a>? <br><br>You never know who is watching you till you get calls from those who would like hire you. Keep up the good work and share with us! <a href="https://t.co/bdI0zJ5vjJ">https://t.co/bdI0zJ5vjJ</a></p>&mdash; Zhi Yang, PhD (@zhiiiyang) <a href="https://twitter.com/zhiiiyang/status/1185328020745117698?ref_src=twsrc%5Etfw">October 18, 2019</a></blockquote>

## How does this work?

These steps will make a copy of this repository to your own GitHub account and connect it to a web host called Netlify.

Netlify handles most of the hard stuff (such as making html from your text and formatting), so you can concentrate on making content. It does this by using what's called a webpage rendering engine (called Hugo) to transform your text to the HTML web format.

To get started, you can work from the GitHub and Netlify sites directly.

## Getting Started

1. To get started, sign up for [GitHub](https://github.com) and [Netlify](https://netlify.com) accounts and then click the following button.
Clicking the button will walk you through a series of steps that will copy this template to your GitHub account and connect it with Netlify.

[![Deploy to Netlify Button](https://www.netlify.com/img/deploy/button.svg)](https://app.netlify.com/start/deploy?repository=https://github.com/laderast/portfolio-example)

2. You'll then be asked to connect your Netlify account to GitHub. Click the `Connect to GitHub` button.

![Connect to Github Button](https://raw.githubusercontent.com/laderast/portfolio-example/master/static/img/install/connect_github.png)

3. Name your repository anything you want:

![Naming box for repository](https://raw.githubusercontent.com/laderast/portfolio-example/master/static/img/install/name_repo.png)

then click the `Save and Deploy` button:

![Save and Deploy Button](https://raw.githubusercontent.com/laderast/portfolio-example/master/static/img/install/name_repo2.png)

If you haven't authorized Netlify to connect to your account, you'll be asked to authorize it. Make sure to authorize before moving on.

4. You'll then move on to what's called the `deploy` page. Notice that in the top left, there is a yellow **deploy in progress** indicator. Wait a second.

![Deploy in progress](https://raw.githubusercontent.com/laderast/portfolio-example/master/static/img/install/deploy1.png)

5. You'll now see a green link in the top left corner. Click on it, and you'll see your brand new site!

![Built link](https://raw.githubusercontent.com/laderast/portfolio-example/master/static/img/install/deploy2.png)

Here's your brand new site:

![](https://raw.githubusercontent.com/laderast/portfolio-example/master/static/img/install/site_first.png)

## Changing your domain Name

1. That crazy name is the address of your site. To change it, you can click on the **Domain Settings** button:

![Domain Settings Button](https://raw.githubusercontent.com/laderast/portfolio-example/master/static/img/install/site_name.png)

2. In the following page, click the **Options >> Edit Site Name** button. You can change the first part of the domain, such as "myportfolio.netlify.app).

![Edit Site Name](https://raw.githubusercontent.com/laderast/portfolio-example/master/static/img/install/site_name2.png)

## Customizing Your Site

1. Now you should start customizing your site. You can do most of the updating on your GitHub Repository page. To find it, you can click the "GitHub" Link in your deploy page, or find it at https://github.com/YOURUSERNAME/REPONAME, where YOURUSERNAME is your GitHub User Name, and REPONAME is the name of your repository.

![Your repository link](https://raw.githubusercontent.com/laderast/portfolio-example/master/static/img/install/your_repo.png)

2. Click on the `config.toml` file:

![](https://raw.githubusercontent.com/laderast/portfolio-example/master/static/img/install/config_toml.png)

and click the pencil in the top right corner to start editing it:

![](https://raw.githubusercontent.com/laderast/portfolio-example/master/static/img/install/edit_config.png)

Almost all elements are edited within the `config.toml` file. At the bare minimum, these are the fields you should customize.

Start by changing the fields with your name:

```
title = "Portfolio for Ted Laderas, PhD"
```

```
name = "Ted Laderas"
description = "Portfolio/CV for Ted Laderas"
```

Menu can be modified here. If you're not sure about this part, you can leave it be, other than changing the `title` and `subtitle`.

```
  [params.navigation]
    title = "Ted Laderas, PhD"
    subtitle = "Data Scientist and Collaborator"
    menu = "Menu"
    # Optional logo as brand stored in img/
    # logo = "logo.png"

[[params.navigation.links]]
      name = "Home"
      url = "#"

[[params.navigation.links]]
      name = "Blog"
      url = "blogs"

```

3. Edit the Banner information as well:

```
  # Banner section
  [params.banner]
    # To change the background image on the homepage banner, replace 'banner.jpg' in
    # the 'static/img' folder.
    title = "Ted Laderas, PhD"
    subtitle = "Portfolio of Data Science and Visualization Projects"

```

4. You can also edit your personal information:

```
v# Contact Section
    # You can add multiple emails, phone numbers, or addresses
    # by copying the corresponding map with frontmatter code.
    [[params.contact.email]]
    title = "Email"
    email = "tedladeras (at) gmail.com"

[[params.contact.phone]]
    title = "Phone"
    phone = "(000) 000-0000 x1234"

[[params.contact.address]]
    title = "Address"
    street = "3181 SW Sam Jackson Road"
    city = "Portland, OR 97212"
    country = "USA"

# Footer section
  [params.footer]
    enable = true
    copyright = "Ted Laderas"

# Uses font awesome icons
    [[params.footer.social]]
      icon = "fa-twitter"
      url= "https://www.twitter.com/tladeras"
      label = "Twitter"

#[[params.footer.social]]
     # icon = "fa-facebook"
      #url= "https://www.facebook.com"
      #label = "Facebook"

#[[params.footer.social]]
     # icon = "fa-instagram"
      #url= "https://www.instagram.com"
      #label = "Instagram"
    
    [[params.footer.social]]
      icon = "fa-github"
      url= "https://www.github.com/laderast"
      label = "GitHub"

[[params.footer.social]]
      icon = "fa-linkedin"
      url= "https://www.linkedin.com/in/ted-laderas-0714a92/"
      label = "LinkedIn"
 ```

5. When you're done editing, click the green `Commit Changes` at the bottom of the edit window to save your changes.

Wait a second. By the magic of Netlify, your site will be rebuilt with your settings.

![](https://raw.githubusercontent.com/laderast/portfolio-example/master/static/img/install/commit_changes.png)

Bask in your brand new site!

![](https://raw.githubusercontent.com/laderast/portfolio-example/master/static/img/install/site_first.png)

For more info on customizing, look at the theme page: https://themes.gohugo.io/forty/

## Adding your projects

Adding a project as a tile on your main page is a multi-part process. You can put in knitted `.html` RMarkdown files, or links to other websites (such as a https://shinyapp.io shiny app).

1. Add a project Rmarkdown by adding a folder in the `content/projects` directory, and name your 
RMarkdown html file `index.html` in the folder. The easiest way to do this is to create the folder on your machine with your `index.html` file in it, and then go to to **Add File >> Upload File**:

![](https://raw.githubusercontent.com/laderast/portfolio-example/master/static/img/install/add_file.png)

2. Drag and drop your folder with the `index.html` file in there. Save your changes by using the green `Commit Changes` button at the bottom of the page.

![](https://raw.githubusercontent.com/laderast/portfolio-example/master/static/img/install/upload_file.png)

You'll refer to the `url` as `projects/FOLDERNAME` (for example: `projects/choropleth`) Look in the `content/projects` folder for other examples.

3. (optional) Add an image for each tile in `static/image/projects/`, and refer to them in the `image` field as `projects/choropleth.png`.

4. Now add a `[[params.tiles.showcase]]` entry for your tile. It's probably easiest to copy and paste one of the tiles and edit it for right now.

You'll want to add your `url` to the `url` field, and if you have an `image`, add it to the `image` field. Make sure to edit the `title` and `subtitle`!

```
 [params.tiles]
    enable = true
    # Display your showcases here.
    
    [[params.tiles.showcase]]
      title = "Choropleths for Ready for R Class"
      subtitle = "Understanding our email list by country domain"
      image = "projects/choropleth.png"
      url = "projects/choropleth"

[[params.tiles.showcase]]
      title = "Animal Crossing Tidy Tuesday"
      subtitle = "Understanding Character and Animal Types in Animal Crossing"
      image = "projects/ac.png"
      url = "projects/animal_crossing"
```

Enjoy your updated portfolio! If you have a lot of projects, make sure to pick and choose, and have a good `title` and `subtitle`. I like to use my research question in the `subtitle`, such as "Where are the Ready for R Students from?"

## Next Step: Cloning your project to your desktop

The next thing you'll want to do is save a local copy to your machine.

That way, you can edit it in RStudio using the `blogdown` package and work on it on your machine.

Please look at [Happy Git and GitHub for the useR](https://happygitwithr.com/) for more info on how to clone a project to your machine.

## Going Further

This is just the tip of the iceberg. With some more learning, you'll be able to customize this site even further.

* Learn more about Netlify, RMarkdown, and hugo file structure by watching [Sharing Online on Short Notice](http://rstd.io/sharing).

* Learn a bit about how Git and GitHub work by checking out [Happy Git and GitHub for the useR](https://happygitwithr.com/).

* Then introduce yourself to the `blogdown` package via [blogdown: Creating Websites with RMarkdown](https://bookdown.org/yihui/blogdown/).

* Learn more about the hugo `forty` theme, which this website is based on: https://themes.gohugo.io/forty/

Be sure to share your web link with us! We want to see what you do with this.

## Make this tutorial better!

If there are any confusing bits that could be better worded, please mention them here: https://github.com/laderast/portfolio-example/issues/1

## Share your Portfolio

Share your portfolio site here: https://github.com/laderast/portfolio-example/issues/2

Or share it on twitter with the tag #ready4rportfolio!

## Acknowledgements

Thanks so much to Zhi Yang and Emi Tanaka for the inspiration.

Thanks to Alison Hill, for telling me about the "Deploy to Netlify" button.

Obviously big thanks to Yihui Xie for blogdown, and Marcus Virginia for the forty theme.

## Consider Buying Me a Coffee

I have a ko-fi page at https://ko-fi.com/laderast - any donations would be greatly appreciated.

Happy portfolios!

portfolio-example

portfolio-example Latest Version Download

Today's picks

Was this content helpful?

Recent Feedback

portfolio-example

portfolio-example Latest Version Download

Today's picks

Was this content helpful?

Recent Feedback

Download README