Choose your own assignment - Quarto website

Due on Wednesday June 4 (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 Elizabeth Pearson’s “4 Reasons Having a Personal Website Will Help Your Career” 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.

Components

Part 1. Understand the context

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

Some examples of personal Quarto websites include:

• past 193DS students (from Spring 2024): Evelyn Bermudez, Owen Choy, Dylan Freebairn-Smith, Ada Chibueze, Aidan Robertson, Brooke Ryan
• professionals: Meghan Harris, Jadey Ryan, Bea Milz, Sam Shanny-Csik
• the instructors’ sites: Thuy-Tien, An

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 Shanny-Csik 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.

Part 2. Your assignment

Requirements

Your website should have at least the following pages:

• a landing page with a
  • photo
  • brief bio (education, work, etc.)
• an about me page, which should include
  • at least 3 photos (can be of you or other things: pets, food, places)
  • at least 3 sections (of whatever you want to share about yourself)
• a project page with
  • at least one post with code, its output, and writing about what you’re doing and why
  • at least one post with project or paper description (from a job, research project, class)
• another page (a free for all)
  • could be about anything (hobbies, interests, etc.)
  • must be organized with section headers
  • must have photos or visuals of some kind
• a resume or CV
  • can be a page itself or a PDF

Additionally, you need to include all of the following add-ons/customizations:

• somewhere on your website, there should be an interactive figure or map (examples of how to do that here)
• 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 a tutorial for how to do that).

For your final submission (on Canvas), you will also submit a write-up of your process (details below).

a. List the “pages” you want to include on your website with section headers.

Do this in a word doc or in Google docs. Do not code this.

For your project page, you could format using blog posts. 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”.

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

Optional check-in here!

If you want to check in with An, you can turn in this outline by the 21st of May.

This check-in is optional. However, if you choose to do the check-in, the more detail you have on your sketch, the more thorough feedback you will receive.

b. Make your website following your outline.

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

Required check-in here!

There is a required check-in for this assignment due on the 28th of May so that you can get directed feedback on your progress so far.

For the required check-in, you should have all the pages created for your website (landing page, about me page, project page, free for all page, resume/CV), but you do not have to have anything filled in yet.

c. Fill out your website.

Include text, photos, etc.

d. Write about your process.

Respond to the following prompts with 1-3 sentences each:

• 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?
• Which examples did you find most useful? Be specific about the components of your website that you copied from other people (e.g. I saw a photo gallery on this person’s website, so I created a gallery of…).

Checklist

Your submission should include

• A link to the GitHub repository where your website is held
  
• A link to your actual website
  
• Your write up (as text in the Canvas submission)

Additionally, you should be committing and pushing changes throughout your completion of this assignment. Thus, you should make sure that you have at least 10 commits/pushes with informative commit messages.