Skip to content

Commit

Permalink
updated portfolio share out info + example (week 6); added tips from …
Browse files Browse the repository at this point in the history
…miya to pre-class prep (week 2)
  • Loading branch information
samanthacsik committed Sep 9, 2024
1 parent dd3ee09 commit 14ea101
Show file tree
Hide file tree
Showing 14 changed files with 279 additions and 92 deletions.
Binary file added course-materials/images/sam-brand-slide.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
2 changes: 1 addition & 1 deletion course-materials/week0-build-websites.qmd
Original file line number Diff line number Diff line change
Expand Up @@ -83,7 +83,7 @@ We'll walk through the steps of building and deploying our personal websites tog

## {{< fa plus title="plus" >}} What should I continue working on? {#continue-working}

1. [**Build your personal branding guide.**]{.teal-text} Next week, you'll learn how to customize your website so that it better reflects you and your goals, motivations, values, and interests. To do so effectively, you'll first want to spend some time thinking intentionally about your *personal brand*. See the next [pre-class prep](week2-customizing-websites.qmd#pre-class-prep) for detailed instructions on how to prepare your personal branding guide.
1. [**Build your personal branding guide.**]{.teal-text} Next class, you'll learn how to customize your website so that it better reflects you and your goals, motivations, values, and interests. To do so effectively, you'll first want to spend some time thinking intentionally about your *personal brand*. See the next [pre-class prep](week2-customizing-websites.qmd#pre-class-prep) for detailed instructions on how to prepare your personal branding guide.


<!-- ::: {.callout-tip} -->
Expand Down
38 changes: 31 additions & 7 deletions course-materials/week2-customizing-websites.qmd
Original file line number Diff line number Diff line change
Expand Up @@ -25,6 +25,7 @@ knitr::include_graphics("../images/sass-css.png")

By the end of today's class, you should have:

- your personal branding guide *(to be completed ahead of class)*
- a stylesheet (`.scss` file) for customizing your website's appearance

## {{< fa clipboard-list title="a clipboard with a To Do list" >}} Pre-class Prep {#pre-class-prep}
Expand All @@ -35,9 +36,26 @@ This week's pre-class prep is to create your own personal branding guide -- a co

***Why is it important that you consider your brand identity?*** Bren Teaching Faculty and science communication professional, [Alex Phillips](https://www.alexandraatleephillips.com/){target="_blank"}, summarizes this nicely in her talk [Establishing Your Online Presence](https://docs.google.com/presentation/d/1PVLZdL8CLbauFW-Ev1bxhiJCXlsWI3J2i4pCNrsEmsA/edit#slide=id.p){target="_blank"}. She explains that establishing your brand identity:

- gives you more control over your online presence
- gives you more control over your online presence
<!-- - e.g. you're not constrained by a platform's (e.g. LinkedIn) layout or style -->
- creates consistency, which builds trustworthiness and credibility
<!-- - e.g. consistent messaging and focus encourages visitors to return for more -->
- filters decision-making about your online content
<!-- - e.g. if you want your brand to promote your expertise in data science, is your website the right place to also add your travel blog? -->

::: {.callout-tip collapse=true}
## Interested in reading more about the benefits of developing a personal brand? Check out these resources:

Many thanks to [Miya Scheble](https://bren.ucsb.edu/people/miya-scheble) (MEDS career Development Program Manager) for sharing these resources!

- [How to build your personal brand as a newbie data analyst.](https://brighteze.medium.com/how-to-build-your-personal-brand-as-a-newbie-data-analyst-257a0697eb1d), by [Bright](https://brighteze.medium.com/)
- [Building a Personal Brand in Data Science: Your Key to Career Advancement](https://www.linkedin.com/pulse/building-personal-brand-data-science-your-key-career-advancement/), by [Kannan Kasi](https://www.linkedin.com/in/kannankasi/)
- [Using data science to build a personal brand](https://www.linkedin.com/pulse/using-data-science-build-personal-brand-abigail-abby-shockley-phd/), by [Abigail (Abby) Shockley](https://www.linkedin.com/in/acshock/)
- [How To Build a Personal Brand: 10 Tips](https://graduate.northeastern.edu/resources/tips-for-building-your-personal-brand/), by [Shayna Joubert](https://www.linkedin.com/in/shaynajoubert/)
- [How to Build a Personal Brand Website: 5 Essentials to Include](https://www.kadencewp.com/blog/how-to-build-a-personal-brand-website-5-essentials-to-include/), by [Kathryn Lang](https://www.kadencewp.com/author/klangithemes/)
- [Building a Data Science Brand](https://www.discoverdatascience.org/articles/building-a-data-science-brand/), by [Kate Strachnyi](https://www.datacated.com/about)

:::

[**Fill out this [personal branding guide template](https://docs.google.com/document/d/1_GDgYPRR5hZzodwXyJV2aBWKU_OTBY3JOwi0dlSyBAQ/edit){target="_blank"} ahead of class. Read through sections I - VI, below, for guidance.**]{.teal-text} Here is [my personal branding guide](https://docs.google.com/document/d/1mJTS_ky_RY5JGFDoAGA004z01gMw2-Lu0w_ONtvl2DE/edit?usp=sharing){target="_blank"}, as an example.

Expand Down Expand Up @@ -67,7 +85,7 @@ Consider:

- How do these key messages incorporate / add context to your personal branding adjectives?
- Aim for ~2-3 sentences (can be bullet points)
- Similar to your adjectives, these key messages do not need to be explicitly stated somewhere on your website. However, you may find that they work well as taglines on your landing page (or even your LinkedIn profile), or help you construct your website bio.
- Similar to your adjectives, these key messages do not need to be explicitly stated somewhere on your website. However, you may find that they work well as taglines on your landing page (or even your LinkedIn profile), or help you (re)frame your website bio.
:::

#### II. Define your target audience(s)
Expand All @@ -83,6 +101,12 @@ Your brand does not need to speak to or reach *everyone* -- instead, you should
- your tone

[**Write down your target audience(s).**]{.teal-text}

Some examples include:

- potential employers (feel free to be more specific here as well, e.g. potential employers in the environmental data science sector)
- early career data scientists or environmental scientists
- environmental data scientists who are also passionate about X ([Jadey Ryan](https://jadeyryan.com/) is a great example of this!)
:::

#### III. Select your typefaces / fonts
Expand Down Expand Up @@ -133,7 +157,7 @@ $orange: #ad7237;
```

#### Tips on choosing your color palette:
- **Stick to about 3-4 colors.** Choosing too many colors can overwhelm readers. Consider using different shades of the primary color throughout your site, with a couple complementing / contrasting colors for important highlighted text and / or features.
- **Stick to about 3-4 main colors.** Choosing too many colors can overwhelm readers. Consider using different shades of the primary color throughout your site, with a couple complementing / contrasting colors for important highlighted text and / or features. A good general rule of thumb is the [60-30-10 rule](https://www.freecodecamp.org/news/the-60-30-10-rule-in-design/) -- your primary color should be used in ~60% of your design, the secondary color should take up ~30%, and your accent color ~10%.
- **Consider what emotions your color choices evoke:** Colors influence perceptions, emotions, and even behavior. Consider which colors best reflect your branding adjectives and key messages. See [this post on color psychology](https://blog.hubspot.com/the-hustle/psychology-of-color), by HubSpot for guidance.
- **Use a random color generator.** My favorite is <https://coolors.co/> -- press the space bar to generate new colors. When you see one (or more) that you like, "lock" them in place by clicking on the lock icon. Continue pressing the space bar to generate new colors in the "unlocked" positions.
- **Generate a color palette from a photo / image.** Have an interesting background in your headshot? Consider generating a palette off of it! Check out [Color Thief](https://lokeshdhakar.com/projects/color-thief/) for all your color stealing needs. Alternatively, explore pre-made palettes generated from [trending Adobe Stock photos](https://color.adobe.com/trends).
Expand All @@ -160,7 +184,7 @@ Quarto supports adding a personal logo to the top left corner of your website's

- Keep it simple
- Consider incorporating your name or initials (though not necessarily required)
- Colors and fonts should match / complement the rest of your branding package
- Colors and fonts should match / complement the rest of your branding guide
- Consider creating a [favicon](https://en.wikipedia.org/wiki/Favicon) (image displayed in a web browser's address bar) that matches / complements your logo
- Try out one of these free logo makers:
- [Adobe Express](https://www.adobe.com/express/create/logo) (this is what I used for my personal logo)
Expand All @@ -183,7 +207,7 @@ These include your logo, headshot, and any other photos / images you plan to use

## {{< fa person-chalkboard title="a person pointing at a chalkboard" >}} Lecture Materials {#lecture-materials}

We'll spend our class time learning how to style our Quarto websites using a variety of approaches -- from modifying our `_quarto.yml` file, to creating a stylesheet with Sass variables and CSS rules. Have your personal branding guide ready to reference throughout! All code and examples that we'll cover can be found in these slides:
We'll spend our class time learning how to style our Quarto websites using a variety of approaches -- from modifying our `_quarto.yml` file, to creating a stylesheet with Sass variables and CSS rules. **Have your personal branding guide ready to reference throughout!** All code and examples that we'll cover can be found in these slides:

::: {.center-text}
[{{< fa person-chalkboard title="A person motioning at a chalkboard" >}} Customizing Quarto websites](https://ucsb-meds.github.io/customizing-quarto-websites/#/title-slide){.btn role="button" target="_blank"}
Expand All @@ -193,7 +217,7 @@ We'll spend our class time learning how to style our Quarto websites using a var

1. [**Seek feedback on your personal brand from those who know you well.**]{.teal-text} Would they use the same adjectives to describe you? What strengths and characteristics do they perceive that you hadn't identified yourself? What emotions do your colors, fonts, imagery, and tone evoke? ***It's important to remember that your personal brand can (and should) evolve with you! This week is just a starting point.***
2. [**Revisit and revise your landing page content / bio, as needed.**]{.teal-text} Does your landing page bio fit your personal brand? Consider what information you include and your tone -- does it make sense to revise your bio to better fit your brand? Consider if your chosen [template](https://quarto.org/docs/websites/website-about.html#templates) suits your needs, or if a different layout might work better.
3. [**Add pages to your website.**]{.teal-text} Has thinking deeply about your personal brand inspired ideas for different web pages? Go ahead and add them! Recall that you can add / remove pages by modifying your `_quarto.yml` file. See [last class' materials](https://ucsb-meds.github.io/creating-quarto-websites/#add-additional-pages-to-your-website) if you need a reminder of how to do so. It's sufficient to include placeholder text to those pages (e.g. *Coming soon!*) if you're not quite ready to complete them. You may also remove pages (e.g. `about.qmd` and `resources.qmd`) if you don't plan to use them (though note that you *must* keep `index.qmd`).
4. [**Try different color combos and / or fonts.**]{.teal-text} This is arguably the most fun part of building your website and where you can really let your personality and brand shine through. It can take a while to settle on something that you feel really represents *you*, and that's okay (I've changed my entire color scheme and font styles multiple times over the years).
3. [**Add pages to your website.**]{.teal-text} Has thinking deeply about your personal brand inspired ideas for different web pages? Go ahead and add them! Recall that you can add / remove pages by modifying your `_quarto.yml` file (see [last class' materials](https://ucsb-meds.github.io/creating-quarto-websites/#add-additional-pages-to-your-website) if you need a reminder of how to do so). It's sufficient to include placeholder text to those pages (e.g. *Coming soon!*) if you're not quite ready to complete them. You may also remove pages (e.g. `about.qmd` and `resources.qmd`) if you don't plan to use them (though note that you *must* keep `index.qmd`).
4. [**Finish applying your colors to different website elements using [Quarto's Sass variables](https://quarto.org/docs/output-formats/html-themes.html#sass-variables).**]{.teal-text} And test out different color combos and / or fonts, if you're not totally satisfied with your original choices. This is arguably the most fun part of building your website and where you can really let your personality and brand shine through. It can take a while to settle on something that you feel really represents *you*, and that's okay (I've changed my entire color scheme and font styles multiple times over the years).
5. [**Consider writing / borrowing / adapting CSS rules to refine your website styling.**]{.teal-text} You can take your website styling *far* just by defining [Quarto's Sass variables](https://quarto.org/docs/output-formats/html-themes.html#sass-variables). However, if you're looking to fine-tune the appearance of certain web page elements, you may consider turning to more CSS. Review the [workshop slides](https://ucsb-meds.github.io/customizing-quarto-websites/#/title-slide) for suggested approaches and tools for guiding your CSS-writing journeys.

27 changes: 22 additions & 5 deletions course-materials/week4-writing-blogs.qmd
Original file line number Diff line number Diff line change
Expand Up @@ -28,12 +28,16 @@ By the end of today's class, you should have:

## {{< fa clipboard-list title="a clipboard with a To Do list" >}} Pre-class Prep {#pre-class-prep}

https://docs.google.com/presentation/d/1dxviUquj4xTNY5pzoGSL-pukWgqC_nPqM9jCemiRAuY/edit#slide=id.g20e7ef3cb4c_0_365
<!-- https://docs.google.com/presentation/d/1dxviUquj4xTNY5pzoGSL-pukWgqC_nPqM9jCemiRAuY/edit#slide=id.g20e7ef3cb4c_0_365 -->

Please be sure to complete the following before class:

### A. Check out some data science-y blog posts

::: {.callout-important}
## TODO come back to this
:::

Reading other data science blogs is the best way to get a sense of not only the breadth of topics folks in the community are writing about, but also the tone, writing styles, and creative approaches you might take as a blogger. Check out a couple posts before class!

::: {.callout-tip collapse=true}
Expand Down Expand Up @@ -63,15 +67,28 @@ And a few additional fun blogs to keep an eye on:
This is only a small sampling of the *many* rad data science bloggers out there -- if you stumble upon others that you enjoy, be sure to share them in the class Slack channel!
:::

### B. Pick a function to blog about!
### B. Add potential blog post topics / ideas to your personal branding guide (part VII)

::: {.callout-important}
## TODO come back to this
:::

Today, you'll be heeding David Robinson's advice and draft a blog post about a function or method...
<!-- - have a list of blog post topics ahead of time -- why would someone come to your website and what can you provide them? no one is just going to come to your website -- when no one does, they discover why they should come back; see resource / interesteing story; build a pattern of trust with your website and brand -->
<!-- - what would be somehting that would bring someone to my page; be strategic; give options for ideas -->
<!-- - highlighting how a function works; advice that you wish you had before (don't be prescriptive, but give them ideas) -->
<!-- - have them read 2 posts in class and highlight what they do or don't like about them in class; can think about tone, framing, humor, illustrations/visuals (what did they add/subtract); writing is subjective! -->

<!-- - have a draft outline of a blog post; by end of course, there should a fully finished blog; can amplify on social media -->

<!-- - storytelling -- core pieces + embellishments (e.g. humor;j should add some but don't have to add all of them) -->

<!-- - rescue was usign a super frustrating fxn but then found a new bettter one! -->

<!-- - can break the rules; should have a story but not all of it has to be a part of the story necessarily -->

<!-- - read some curated SECTIONS of blog posts and discuss things like tone, audience, humor, visuals (things they liked/didnt like as both a reader and a writer -->
<!-- - draft an outline of their blog post in class and maybe exchange with someone for thoughts -->

Target audience -- next MEDS cohort (new learners)

## {{< fa person-chalkboard title="a person pointing at a chalkboard" >}} Lecture Materials {#lecture-materials}

Expand All @@ -89,5 +106,5 @@ Target audience -- next MEDS cohort (new learners)
## TODO come back to this
:::

1. [**Continue drafting / polishing your blog post.**]{.teal-text}
1. [**Continue drafting, writing, and polishing your blog post.**]{.teal-text} You (most likely) won't have a fully-written blog post by the end of class today, but **you should plan to complete and publish your post by the end of this class.**
2. [**Seek feedback from others.**]{.teal-text} Consider switching blog posts with one (or more) of your peers, or stick around for office hours to chat with me about your ideas!
Loading

0 comments on commit 14ea101

Please sign in to comment.