Build html CV

class: center, middle, inverse, title-slide

# Build html CV
## with R markdown
### Lin Yu
### University of Alberta
### 2021/08/23 (updated: 2021-09-21)

---

# Motivation

For fun;

To reduce repetitive effort;   
 
To make it easier to share my CV with others;
 
To have the most-recent CV ready!

---

class: inverse, center, middle

# Get Started

---

# Install Package

--
- Since you will need to use R markdown to write your CV, so you have to install the **rmarkdown** package if you have not install it:

```r
install.packages("rmarkdown")
library(rmarkdown)
```

- Then create a new .Rmd file by clicking  `File - New 
File -> R Markdown`

- edit your metadata as below:(you can also add pdf output as you want)

```r
title: ""
author: "" 
date: ""
output: html_document
```

---

# Add CSS Chunk

--
Why?

- You might want to customize your CV in the same way that you would in Word or Google Docs. For example, you may see some text was centered, some was right aligned, and some was bold. The font size also seemed different. 
--

How?

Easy:) You just need to add a css chunk in R markdown file right after the setup R chunk. See next slide.
 
However, if you do not have experience with CSS style (like me). you need to spend some time on it. I learned basic CSS in [w3schools](https://www.w3schools.com/css/default.asp).
 
---

# Add CSS Chunk (Continued)

```r
{css echo=FALSE}

h1 {
  text-align: center;
  text-transform: uppercase;
  color: steelblue;
}

h2 {
  text-transform: uppercase;
  color: #4CAF50;
}

.p1 {
   text-transform: uppercase;
   color: steelblue;
   font-size: 14px;
}
.p2 {
  font-size: 12px;
}

```

---

#Add icons

You might wish to include icons in your CV as well. I looked into two options for adding icons. (In fact, there are two packages)

- method 1: [`icons` package](icons packages https://github.com/mitchelloharawild/icons )

```r
{r eval=FALSE}
install.packages("remotes")
remotes::install_github("mitchelloharawild/icons")
icons::download_academicons() 
icons::download_fontawesome()

```
after installation, you need to use `downlaod_*()`function to load different icons.

then run the r code:`icons::fontawesome("user-graduate", style = "solid")`

you will get the following result:

---

# Add icons (Continued)

- Method 2: **fa** function in [`fontawesome` package](https://cran.r-project.org/web/packages/fontawesome/fontawesome.pdf)

- Run the following inline R code

```r

r fontawesome::fa(name = "envelope", fill = "steelblue",fill_opacity = 0.5, height = "1em")

```

![](data:image/png;base64,#C:/20summer/blog/static/slides/write_cv_envelope.png)

You can visit [fontawesome](https://fontawesome.com/) for more icons.

---

# Right alignment

- You can align your items to the right or left by altering the `` tag setting.
 
 - for example, set `content to the right` and `content to the left` in the same line.

content to the left content to the right

You can use the following codes:

`content to the left content to the right `

The ` ` at the end represents `break`. This allows you to start a new line.

---

# Some tips

That is pretty much about it. Here are a few tips you should be aware of.

- Use `&nbsp;` for space. for example,

*There are several spaces between you &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;me*
  
```r
There are several spaces between you &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;me

```

- Use ` ` tag after inline passages

as aforementioned, you can always start a new line by adding a ` ` tag

- Use `` to add comments or session breaks

- Finally, be familiar with CSS or html

---
background-image: url(data:image/png;base64,#https://media4.giphy.com/media/fGU4lCGuH1sSffgNIE/200w.gif?cid=82a1493btnd325t1jxs7tfuglukb10rdhy9jzydo7b6h1b9n&rid=200w.gif&ct=g)
background-position: 50% 40%
class: center

# I hope you find this helpful!

---
class: center, middle, inverse

# Thank you