Spring 2024 - Choose your own assignment

Due on Wednesday June 5 (week 10) at 11:59 PM

Description

In this assignment, you’ll create your own personal website using Quarto. By the end of this assignment, you’ll have a website that you developed using data science tools. You’ll also see how Quarto pages fit together like a puzzle to create a finished website.

Why make a website at all? Having a website is a great way of developing a digital portfolio of your skills and interests. Read Casey Botticello’s blog post: “5 Important Reasons Why You Still Need a Personal Website” for more.

How does making a website using Quarto actually work? In class, we use Quarto markdown documents to write code with text, then render the document into the format we want (usually .pdf or .docx). One major benefit to using Quarto + Rprojects is that 1) Quarto renders to .html and 2) Quarto can render a bunch of Qmd files in a single project to create a website.

Why make a website using Quarto? It’s a great way of demonstrating your skills to the data science community to show that you have some competency in knowing how Quarto documents work together.

See the checklist at the end for components you will need to turn in. Note: if deploying your website using GitHub, you will need a GitHub account (which you should have already, after completing Homework 1).

Components

Tasks

1. Look at a Quarto website for some ideas regarding structure and content

Some examples of personal Quarto websites include:

past 193DS students (Maddie Manzagol, Bianca Berron, Katie Miller)
professionals (Meghan Harris, Jadey Ryan, Bea Milz)
the instructors’ sites (Caitlin, An)

2. List the “pages” you want to include on your website.

Keeping in mind that your website is a digital portfolio, list 3 of your projects, skills, interests, etc. that you want to highlight and how you are going to display them on your website.

For example, you could have blog posts highlighting writing pieces you’re proud of. You can enhance these with citations, figures, etc. to fill them out. Alternatively, you could use the blog post format to highlight classes you’ve taken to show you’ve developed skills in whatever those classes are about (for example, literary criticism, GIS, visual art). Note: you can have multiple pages in “blog” format - see Sam Csik’s personal website where the “talks & workshops”, “courses”, “projects”, and “posts” pages are all “blogs”.

You could also have photo galleries to share any visual media you might have - illustration, photography, etc.

Lastly, you could have a dedicated “About” page, where you write a bio for yourself so that people can learn more about you!

3. Make your website with the pages you listed in task 1.

Follow these directions written by Sam Csik (from above!). Read the directions before you start.

Tip

Sam has very generously offered to answer any questions about her tutorial as you’re working through this assignment. If you have questions, feel free to email scsik@ucsb.edu with:
1. What you want to do,
2. What you need help with, and
3. What you’ve done to try to fix the problem

Also, if you liked the tutorials, you should shoot her an email and tell her!

4. Fill out your website.

Insert a photo of yourself, educational background, short bio, and links (e.g. GitHub, LinkedIn) on the landing page.
Change the theme of your website from the default (here’s a list of Quarto themes).
Change the CSS and/or SASS defaults for the theme to colors, fonts, etc. of your choice (here’s Sam’s tutorial for how to do that).

At minimum, you should change:
- The font
- The color scheme (text, background, links, sidebar/header)

Tip

If you see a feature on someone’s Quarto website that you want to implement, go to their GitHub repository for the site to see how they made it. For example, Sam has a map of all the hikes she logged using Strava, which is an embedded product from a dashboard she created. The repository for Sam’s website is here, and the Strava dashboard is here.

Checklist

Your submission should include

A link to the GitHub repository where your website is held
A link to your actual website
8-10 sentences summarizing your experience, addressing (for example): What was hard about this? What was easy? What was new to you? What was familiar to you? How did following the tutorial go for you?

--- title: "Choose your own assignment - Quarto website" editor: source freeze: auto published-title: "Due date" date: 2024-06-05 date-modified: last-modified --- [Due on Wednesday June 5 (week 10) at 11:59 PM]{style="color: #79ACBD; font-size: 24px;"} ## Description In this assignment, you’ll create your own personal website using Quarto. **By the end of this assignment, you’ll have a website that you developed using data science tools.** You’ll also see how Quarto pages fit together like a puzzle to create a finished website. **Why make a website at all?** Having a website is a great way of developing a digital portfolio of your skills and interests. Read Casey Botticello’s blog post: [“5 Important Reasons Why You Still Need a Personal Website”](https://medium.com/digital-marketing-lab/5-important-reasons-why-you-still-need-a-personal-website-d0fba1f51911) for more. **How does making a website using Quarto actually work?** In class, we use Quarto markdown documents to write code with text, then render the document into the format we want (usually .pdf or .docx). One major benefit to using Quarto + Rprojects is that 1) Quarto renders to .html and 2) Quarto can render a bunch of Qmd files in a single project to create a website. **Why make a website using Quarto?** It’s a great way of demonstrating your skills to the data science community to show that you have some competency in knowing how Quarto documents work together. See the checklist at the end for components you will need to turn in. Note: if deploying your website using GitHub, you will need a GitHub account (which you should have already, after completing Homework 1). ## Components ### Tasks #### 1. Look at a Quarto website for some ideas regarding structure and content Some examples of personal Quarto websites include: - past 193DS students ([Maddie Manzagol](https://maddie-manzagol.github.io/), [Bianca Berron](https://bianca-berron.github.io/), [Katie Miller](https://katelyn-rose.github.io/)) - professionals ([Meghan Harris](https://thetidytrekker.com/), [Jadey Ryan](https://jadeyryan.com/), [Bea Milz](https://beamilz.com/)) - the instructors' sites ([Caitlin](https://cnordheim-maestas.github.io/), [An](https://an-bui.com/)) #### 2. List the "pages" you want to include on your website. Keeping in mind that your website is a digital portfolio, **list 3 of your projects, skills, interests, etc. that you want to highlight and how you are going to display them on your website**. For example, you could have [blog posts](https://quarto.org/docs/websites/website-blog.html) highlighting writing pieces you're proud of. You can enhance these with citations, figures, etc. to fill them out. Alternatively, you could use the blog post format to highlight classes you've taken to show you've developed skills in whatever those classes are about (for example, literary criticism, GIS, visual art). **Note:** you can have multiple pages in "blog" format - see [Sam Csik's personal website](https://samanthacsik.github.io/) where the "talks & workshops", "courses", "projects", and "posts" pages are all "blogs". You could also have [photo galleries](https://quarto-ext.github.io/lightbox/) to share any visual media you might have - illustration, photography, etc. Lastly, you could have a dedicated "About" page, where you write a bio for yourself so that people can learn more about you! #### 3. Make your website with the pages you listed in task 1. Follow [these directions](https://ucsb-meds.github.io/creating-quarto-websites/) written by Sam Csik (from above!). **Read the directions before you start**. :::{.callout-tip} Sam has very generously offered to answer any questions about her tutorial as you’re working through this assignment. If you have questions, feel free to email scsik@ucsb.edu with: 1. What you want to do, 2. What you need help with, and 3. What you’ve done to try to fix the problem Also, if you liked the tutorials, you should shoot her an email and tell her! ::: #### 4. Fill out your website. - Insert a photo of yourself, educational background, short bio, and links (e.g. GitHub, LinkedIn) on the landing page. - Change the theme of your website from the default (here's a list of [Quarto themes](https://quarto.org/docs/output-formats/html-themes.html)). - Change the CSS and/or SASS defaults for the theme to colors, fonts, etc. of your choice (here's Sam's tutorial for [how to do that](https://ucsb-meds.github.io/customizing-quarto-websites/#/title-slide)). At minimum, you should change: - The font - The color scheme (text, background, links, sidebar/header) :::{.callout-tip} If you see a feature on someone’s Quarto website that you want to implement, go to their GitHub repository for the site to see how they made it. For example, Sam has a [map of all the hikes she logged using Strava](https://samanthacsik.github.io/about.html), which is an embedded product from a [dashboard](https://samanthacsik.shinyapps.io/strava_dashboard/) she created. The repository for Sam’s website is [here](https://github.com/samanthacsik/samanthacsik.github.io), and the Strava dashboard is [here](https://github.com/samanthacsik/strava-dashboard). ::: ## Checklist Your submission should include - A link to the GitHub repository where your website is held - A link to your actual website - 8-10 sentences summarizing your experience, addressing (for example): What was hard about this? What was easy? What was new to you? What was familiar to you? How did following the tutorial go for you?