Create your stunning web portfolio for job hunting and freelance services with Quarto (no coding required)

About

Jan Strappa

(they / them)

Dr. in Computer Science, Information Systems Engineer at CONICET (National Scientific and Technical Research Council, Argentina)

Co-founder and organizer of R-Ladies Mendoza (see R-Ladies Global)

jstrappa | todon.eu@jansf

Jan Strappa Figueroa

Jess Garriga

(they / them)

Student of Sociology at the National University of Cuyo (Argentina).

They are currently working on a research project on “Big Data and Social Sciences”.

Jess Garriga

[<3 minutes]

Hi everyone, My name is Jan, my pronouns are they/them. I’m currently working as a researcher in Machine Learning and Parallel Computing in Mendoza, Argentina.

I am also a co-founder and member of R-Ladies Mendoza. which is a community of R users that welcomes people of all underrepresented genders in tech, including trans men and nonbinary people.

This workshop was made in collaboration with Jess Garriga, who is a student of Sociology and they’re currently working on several projects regarding topics in the intersection of Big Data, Data Analysis, and Social Sciences.

We made the materials together, and I’m going to be the speaker today.

Online slides

https://jstrappa.quarto.pub/quarto-portfolio-workshop

First of all, if your haven’t already, you can open the slides in your web browser if you want to access the links more quickly, or navigate them at your own pace.

Portfolios

A portfolio is a collection of highlighted projects and previous works that show potential clients or employers your abilities.

· · ·

Let’s check out some cool Quarto portfolios

• Andreas Handel: andreashandel.com

• Danielle Navarro: blog.djnavarro.net

• Bea Milz: beamilz.com

So, let’s begin by saying that a portfolio is…

This is a very popular tool to help you in your job search, although it’s not mandatory.

It doesn’t replace your CV, but it can complement your CV with more info.

And I want to show you some cool portfolios, all of them made with Quarto.

…

What I’m going to show you is much simpler, but I wanted you take a glimpse of what you can do with Quarto.

Why make one?

• attractive, professional, customizable
• a place to keep your info updated
• tell your story in your own words

· · ·

Questions for the audience

https://www.menti.com/alfqty7y7jb8

• attractive, professional, customizable
• a place to keep your info updated: it’s useful to have a link to your website on job applications or on your resume so that others can see your latest work, even if they have an outdated file
• tell your story in your own words, because you can choose what to show about yourself and how to show it… I can’t emphasize enough how important this is for trans people, since we can be especially vulnerable when we cannot control the information that is published about us

Before we start, I want to ask a question to understand your main challenges and your background.

Please open the link in the chat…

Why Quarto? What if I’m not a programmer?

• You don’t need to know programming
• You can learn while doing
• Documents are in plain text, you can use any editing software
• Open source: freedom, community
• More control over your website (customizable, efficient)
• Many hosting options (free / paid)
• For programmers: Quarto supports R, Python, Julia and Observable; lots of cool features for code, reproducibility, and more!

Now that I know something about you, I’m going to try to describe what are the benefits of this tool.

You don’t need to know programming, although it’s good if you can understand errors, for example in rendering and how to search for a solution

You can learn while doing, because markdown and Quarto are really easy to use

Documents are in plain text, they’re easy to maintain and modify with any editor of your choice

It’s Open source which means you have more freedom than with closed tools, there’s always a community doing interesting stuff, solving problems, and making more on top of this

More control over your website (you can customize every aspect, some free sites for making websites are very slow and they may show ads or change your content in ways you don’t like, but we’re going to see some free options that are much better)

You have many hosting options (free / paid)

And if you are a programmer, you can embed and execute code in different languages, and you have several tools for showing,copying and hiding source code which are really great.

First steps

1. Download & install VSCode: https://code.visualstudio.com
2. Download & install Quarto: https://quarto.org/docs/get-started
3. In VSCode, install Quarto extension:
   • Extensions → search bar: “quarto” → Install

While you do this…

A bit of history & context

• Markdown (.md): markup language
• Quarto (.qmd): open source system for publishing (Markdown + executable code)

A First Level Header
====================

A Second Level Header
---------------------

Some of these words *are emphasized*.
Some of these words _are emphasized also_.

Use two asterisks for **strong emphasis**.
Or, if you prefer, __use two underscores instead__.

### Header 3

> This is a blockquote.
>
> ## This is an H2 in a blockquote

A list

- one item
- another item

An ordered list

1. one step
1. another step

I believe it’s nice to know something about the tools that you’re using and why. It may be confusing if you just repeat steps and don’t have any background.

So the first thing I’d like to explain is that we will mostly be working with a kind of markup language called Markdown.

These kind of languages are used to give format to documents with a very simple syntax using plain text files, and then you can convert these files into a number of different formats, such as PDF documents, ebooks, or, as in our case, to html for the web.

There are many tools that use Markdown and add a their own functionality on top of it. One of them (as you may have guessed) is Quarto, which allows you to create websites, blogs, reports, presentations, in a very simple way.

Tools and formats we will use

Name	Extension	Purpose
Quarto	.qmd	content
YAML	.yml	configuration
CSS	.css	style
HTML	.html	output

So this is what we’re going to use: we’re going to create a blog directly with Quarto, and we’re going to edit the style, layout and content so that it becomes our portfolio. I’m going to show you the basics, which only involve editing some qmd files for the content, and yml files for the configuration, but there is a lot you can do from there; for instance you can add your own custom CSS to change the style.

How does it work? Well, we have our input files, which are qmd and others, then they will be converted, you don’t have to worry about all that happens here in the middle, and finally you get to see and check your final result, and you can go back to editing your qmd files again.

Do we have to write all these files by ourselves?

No! We’ll use an IDE (Integrated Development Environment):

VSCode, RStudio, Vim, text editors…

· · ·

Process overview

1. IDE creates the ‘skeleton’ for your blog
2. you focus on content and configuration
3. IDE renders the project
4. repeat steps 2 to 4
5. publish online

/ You may be asking yourselves: do we have to write all these files? Of course not.

/ We’re going to use an IDE, or integrated development environment, which is a software that performs a lot of your tasks automatically. I’m going to use VSCode for this workshop because it’s very easy to use, but there are many others, you can choose whichever one you like.

/ So using your IDE the process will be like this. First you will tell VSCode to create the basic structure or skeleton for our blog, then we will edit the files with whatever content we want to create, we will change some of the configuration, add some images; and then we simply tell the IDE to render our project, which will create the website, and we’ll be able to access it locally.

Once we’re happy with our project, we will see our publishing options.

Hopefully, you will spend most of your time in step 2. And I recommend starting with a minimal version of your portfolio and publishing it, so that you can add more content incrementally.

Creating a blog

1. Open VSCode
2. Open the Command Palette
3. Type ‘quarto’
4. Choose ‘Quarto: Create Project’
5. Choose ‘Blog Project’

But let’s begin with our first steps.

I’m going to open VSCode and walk you through this part.

Creating a blog

Project structure in VSCode

_quarto.yml

project:
  type: website

website:
  title: "Deep Space Solutions"
  navbar:
    right:
      - about.qmd
      - icon: github
        href: https://github.com/jstrappa
      - icon: twitter
        href: https://twitter.com/StarTrek
format:
  html:
    theme: 
      light: journal
      dark: vapor
    css: styles.css

• Choose title, add social media links, and choose a blog theme

about.qmd

---
title: "About"
image: profile.jpg
about:
  template: jolla
  links:
    - icon: twitter
      text: Twitter
      href: https://twitter.com/StarTrek
    - icon: linkedin
      text: Speaker's LinkedIn
      href: https://www.linkedin.com/in/jan-strappa/?locale=en_US
    - icon: github
      text: Speaker's Github
      href: https://github.com/jstrappa
---

As a Research and Development Scientist, I bring a unique combination of scientific expertise and leadership skills to drive innovation and discovery. With premier distinctions in astrophysics, exoarchaeology, exobiology, and zoology from Starfleet Academy, I have a deep understanding of various scientific disciplines. As the Chief Science Officer of Deep Space Nine, I discovered the Bajoran wormhole, opening up a new era in Federation history. I also successfully commanded a critical mission to destroy a major Dominion sensor array, significantly impacting their dominance in five sectors. I am excited to bring my diverse skill set to a new challenge and make significant contributions to the field of research and development.

• Save your picture as profile.jpg, choose template, add social media links, and write your about text!
• There are more templates

Post template: index.qmd

---
title: 'post title'
subtitle: 'post subtitle'
author:
  - name: your name
date: "mm/dd/yyyy"
lang: en
categories:
  - data
  - code
  - blog
draft: true # change to false to publish!
description: 'description for this post'
image: ""
archives:
  - ""
---

This is the first post in a Quarto blog. Welcome!

![](thumbnail.jpg)

## Section

Since this post doesn't specify an explicit `image`, the first image in the post will be used in the listing page of posts.

• Tip: Keep a template folder for posts with this file inside. When making a new post, copy it, rename it, and edit the content to make your post. Change draft: false to make it public.

Example Post

---
title: 'Wormhole discovery'
subtitle: 'Journal entry'
author:
  - name: Jadzia
date: "04/13/2369"
lang: en
categories:
  - data
  - code
  - blog
draft: false # change to false to publish
description: 'My journal entry for when I found the wormhole'
image: ""
archives:
  - ""
---

Something something

![](wormhole.jpg)

• Tip: Remember to double check image filenames (you can use autocomplete in VSCode)

Additional elements: Projects section

1. Create a folder projects (works like posts).
2. Create projects.qmd:

---
title: "Projects"
listing:
  contents: projects     # folder with your project posts
  sort: "title"
  type: grid
  image-height: 260px
  categories: true
  sort-ui: true          # order by
  filter-ui: true        # filter by
page-layout: full
title-block-banner: false
comments: false
---

3. In _quarto.yml, add inside navbar:

    - text: Projects
      href: projects.qmd

Additional elements: downloadable resume

1. Copy your resume inside the project folder, e.g. files/resume.pdf.

2. In _quarto.yml, add inside navbar:

      - text: CV
        href: resume.qmd

3. Create resume.qmd:

<iframe 
  width="1050" 
  height="1200" 
  src="files/resume.pdf">
</iframe>

Additional elements: favicon

1. Find or make an icon and save it inside your project folder; e.g. images/favicon.png

2. In _quarto.yml, add inside website:

website:
  favicon: "images/favicon.png"

Where to get icons

• icons8.com
• flaticon.com

Publishing

How to publish your Quarto portfolio

1. Sign up at Quarto Pub: https://quartopub.com/sign-up

2. In the terminal, type: quarto publish quarto-pub
3. Authenticate (first time)

Published portfolio: Homepage

Published portfolio: About

Final thoughts (off-topic)

It looks so easy, but… (we’re trans)

• What to do if my legal name is different?
• Should I let them know that I’m trans?
• How do I talk about previous work without outing myself?
• Should I put my pronouns or not?
• There is information about me online that I don’t want employers/clients to see. What can I do?

My thoughts

• No single answer; do what feels best for you
• It’s OK to have different information for different audiences (e.g. resume vs public)
• It’s OK to have conflicting information (e.g. you wrote an article under your previous name, you can cite yourself with your REAL name)
• Learn about data privacy:
  • some information is not needed (age, gender)
  • configure irrelevant accounts to be hidden from web search engines
  • the ‘right to be forgotten’: asking for private information to be deleted from public view (usually not easy to achieve)
  • create profiles on highly visible websites to draw more attention to your current situation, not past

Remember that you are valid and deserve unconditional love!

• There is no single answer so don’t try to find the perfect fix for everything
• In general, it’s best to do what feels best for you and don’t feel guilty for trying to be safe. We don’t have to be heroes or activists all the time, we don’t have to be visible all the time. But it’s also important to try to check if your clients or employers are respectful, and for some of us, being upfront might work best sometimes.
• It’s OK to have different information for different audiences (e.g. resume vs public web portfolio or LinkedIn profile): so, maybe you want to share your pronouns with potential employers but not the whole world, so you have a PDF file that you send companies with more information. Or maybe you don’t say everything on your resume
• It’s OK to have conflicting information in different places (e.g. citing yourself with your REAL name while the original publication has your name assigned at birth) I haven’t had any situation where someone has asked me why my name was different. I honestly believe they didn’t bother reading the whole citation, so don’t take this as general advice, it’s just an example to show you that you don’t have to solve every problem. You don’t have to be the sole database manager of your identity in the whole world!!
• Learn about data privacy:
  • think before sharing: some information is not needed (age, gender, address)
  • configure accounts to be hidden from web search engines (if they allow it)
  • the ‘right to be forgotten’ on the internet: asking for your private information to be deleted from public view (usually not easy to achieve)
  • if you want to - attention from some web result, create more profiles on websites that have high visibility (e.g. for researchers, arXiv, ResearchGate, etc) (nobody goes past the 1st page of results!)
  • be aware that your public (or even private) information may be accessed by scraping tools, sold, analyzed and/or published somewhere else

Thank you for joining

Useful links

• Workshop slides: view | source
• Jadzia Dax’s portfolio: view | source (jd-portfolio)
• Quarto tutorial for blog (VSCode / RStudio / Terminal)
• Quarto tutorial for Data Science web portfolio (RStudio)
• Bea Milz’s tutorial for creating a blog with Quarto
• Markdown basics, Markdown Guide

Alternative IDEs:

• Download & Install RStudio
• Sign up to use Posit Cloud (previously RStudio Cloud)

Alternative publishing options:

• Netlify, Github Pages, and more…

Here are some useful links, which you will be able to check in the slides online. And credits for some of the content I’ve used.

Credits

• Quarto workflow diagram
• Beautiful illustrations: The Latest Kate
• Jadzia Dax - Memory Alpha
• Jadzia Dax - Wikipedia
• Jadzia photo: Wikipedia, © Paramount Pictures
• Favicon: Star Trek Deep Space Nine icon by Icons8