Chapter Notes

Jekyll Theme

Introduction

What you Should Know

Chapter 1.1 Purpose of a Portfolio

Chapter 1.2 Installing Jekyll

Gemfile:

gem "minimal-mistakes-jekyll"
gem "jekyll-remote-theme"
group :jekyll_plugins do
  gem "jekyll-paginate"
  gem "jekyll-sitemap"
  gem "jekyll-gist"
  gem "jekyll-feed"
  gem "jemoji"
  gem "jekyll-include-cache"
  gem "jekyll-algolia"
end

_config.yml

# Build settings
remote_theme: "mmistakes/minimal-mistakes@4.24.0"
plugins:
  - jekyll-remote-theme
  - jekyll-paginate
  - jekyll-sitemap
  - jekyll-gist
  - jekyll-feed
  - jemoji
  - jekyll-include-cache

Chapter 1.3 Going Live On GitHub

No notes.

Chapter 1.4 Components of Jekyll

Chapter 2.1 Writing a Bio

No notes.

Chapter 2.2 Adding Skills

Examples of skills you can list:

Programming languages, Frameworks & libraries

Frameworks, libraries, and Programming languages: JavaScript, TypeScript, HTML5, CSS, PHP, etc.
Technologies: SQL Server, JAMStack, Gatsby, Netlify, GitHub, etc.
Website builders: WordPress, Wix, Webflow, Jekyll, etc.
Specialty Skills: Accessibility, Optimization, Dev ops
Software and tools: Jira, Figma, Sketch, VSCode, GitHub, Terminal

Soft Skills

Communication,
Mentorship/leadership skills
Collaboration
Time Management
Problem-Solving / Critical Thinking

Basic table

| Skill | Level |
| ---- | ---- |
| skill | level |

YAML

technical:
 - title: CSS and SCSS
   level: Intermediate
 - title: HTML5
   level: Intermediate
 - title: JavaScrpt
   level: Advanced
 - title: ReactJS
   level: Advanced

soft:
 - title: Writing
   level: Intermediate
 - title: Leadership
   level: Intermediate

Chapter 2.3 Site Design

Chapter 2.4 Customizing your site

Custom.html

<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link
    href="https://fonts.googleapis.com/css2?family=Rubik:wght@700&family=Waiting+for+the+Sunrise&family=Work+Sans:ital,wght@0,300;0,600;1,300&display=swap"
    rel="stylesheet">
<script src="https://cdnjs.cloudflare.com/ajax/libs/animejs/3.2.1/anime.min.js"></script>

Custom.scss

--- 
#to make sure Jekyll reads this 
--- 

@import "default";
@import "author";
@import "footer";
@import "grid_layout";
@import "home";
@import "nav";
@import "post";
@import "taxonomy";

anime.js

anime({
    targets: ".grid__item",
    scale: [
        { value: 1, duration: 800 },
        { value: 1.1, duration: 200 },
        { value: 1, duration: 800 },
    ],
    easing: "easeInOutSine",
    delay: function (el, i, l) {
        return i * 200;
    },
    loop: false,
});

Chapter 3.1 Building Layouts

No notes.

Chapter 3.2 Adding Tags and SEO

Layout changes

  <ul class="taxonomy__index">
    
    <li>
        <a href="#career">
            <strong>Career</strong> <span class="taxonomy__count"></span>
        </a>
    </li>
    
    <li>
        <a href="#design">
            <strong>Design</strong> <span class="taxonomy__count"></span>
        </a>
    </li>
    
    <li>
        <a href="#education">
            <strong>Education</strong> <span class="taxonomy__count"></span>
        </a>
    </li>
    
    <li>
        <a href="#part">
            <strong>Part</strong> <span class="taxonomy__count"></span>
        </a>
    </li>
    
    <li>
        <a href="#pdm-in-practice">
            <strong>PdM in Practice</strong> <span class="taxonomy__count"></span>
        </a>
    </li>
    
    <li>
        <a href="#writing">
            <strong>Writing</strong> <span class="taxonomy__count"></span>
        </a>
    </li>
    
</ul>

<section id="career" class="taxonomy__section">
    <h2 class="archive__subtitle">Career</h2>
    <div class="entries-grid">
        
<div class="grid__item">
  <article class="archive__item" itemscope itemtype="https://schema.org/CreativeWork">
    
      <div class="archive__item-teaser">
        <img src="https://images.unsplash.com/photo-1611444111920-89dfc4a01f43" alt="">
      </div>
    
    <h2 class="archive__item-title no_toc" itemprop="headline">
      
        <a href="/article/2023/06/22/how-to-win-at-a-hackathon-intro.html" rel="permalink">How to win at a hackathon
</a>
      
    </h2>
    
  <p class="page__meta">
    
      <span class="page__meta-date">
        <i class="far fa-calendar-alt" aria-hidden="true"></i>
        
        <time datetime="2023-06-22T00:15:27+00:00">June 22, 2023</time>
      </span>
    
  </p>

    <p class="archive__item-excerpt" itemprop="description">This article is written in three parts:

  Part 1: Investing in the “Dots”
  Part 2: Connecting the “Dots”
  Part 3: Casting the “Dots,” wide and far

</p>
  </article>
</div>

<div class="grid__item">
  <article class="archive__item" itemscope itemtype="https://schema.org/CreativeWork">
    
      <div class="archive__item-teaser">
        <img src="https://images.unsplash.com/photo-1516321318423-f06f85e504b3" alt="">
      </div>
    
    <h2 class="archive__item-title no_toc" itemprop="headline">
      
        <a href="/article/2023/06/22/professional-services.html" rel="permalink">Accelerating your Career
</a>
      
    </h2>
    
  <p class="page__meta">
    
      <span class="page__meta-date">
        <i class="far fa-calendar-alt" aria-hidden="true"></i>
        
        <time datetime="2023-06-22T00:13:27+00:00">June 22, 2023</time>
      </span>
    
  </p>

    <p class="archive__item-excerpt" itemprop="description">Looking back on my career, there are a few things I wish I had done earlier to boost my career progression and enhance my marketability. In this article, I w...</p>
  </article>
</div>

    </div>
    <a href="#page-title" class="back-to-top">Back to Top
        &uarr;</a>
</section>

<section id="design" class="taxonomy__section">
    <h2 class="archive__subtitle">Design</h2>
    <div class="entries-grid">
        
<div class="grid__item">
  <article class="archive__item" itemscope itemtype="https://schema.org/CreativeWork">
    
      <div class="archive__item-teaser">
        <img src="https://images.unsplash.com/photo-1576153192396-180ecef2a715" alt="">
      </div>
    
    <h2 class="archive__item-title no_toc" itemprop="headline">
      
        <a href="/article/2023/07/01/design-basics.html" rel="permalink">Design Basics
</a>
      
    </h2>
    
  <p class="page__meta">
    
      <span class="page__meta-date">
        <i class="far fa-calendar-alt" aria-hidden="true"></i>
        
        <time datetime="2023-07-01T21:13:27+00:00">July 1, 2023</time>
      </span>
    
  </p>

    <p class="archive__item-excerpt" itemprop="description">Your brain has two systems, a slow analytical side and a quick, instinctive “gut” side. For the most part, the instinctual side is lazy, conserving its energ...</p>
  </article>
</div>

<div class="grid__item">
  <article class="archive__item" itemscope itemtype="https://schema.org/CreativeWork">
    
      <div class="archive__item-teaser">
        <img src="https://images.unsplash.com/photo-1502691876148-a84978e59af8" alt="">
      </div>
    
    <h2 class="archive__item-title no_toc" itemprop="headline">
      
        <a href="/article/2023/07/01/color-theory-intro.html" rel="permalink">Color Theory
</a>
      
    </h2>
    
  <p class="page__meta">
    
      <span class="page__meta-date">
        <i class="far fa-calendar-alt" aria-hidden="true"></i>
        
        <time datetime="2023-07-01T21:13:27+00:00">July 1, 2023</time>
      </span>
    
  </p>

    <p class="archive__item-excerpt" itemprop="description">This article is written in three parts. You can find the entire series here:

  Part 1: Color Limitations
  Part 2: Color and Emotions
  Part 3: Color Paletts

</p>
  </article>
</div>

    </div>
    <a href="#page-title" class="back-to-top">Back to Top
        &uarr;</a>
</section>

<section id="education" class="taxonomy__section">
    <h2 class="archive__subtitle">Education</h2>
    <div class="entries-grid">
        
<div class="grid__item">
  <article class="archive__item" itemscope itemtype="https://schema.org/CreativeWork">
    
      <div class="archive__item-teaser">
        <img src="https://images.unsplash.com/photo-1516321318423-f06f85e504b3" alt="">
      </div>
    
    <h2 class="archive__item-title no_toc" itemprop="headline">
      
        <a href="/article/2023/06/22/project_based_organic_learning.html" rel="permalink">Project-Based, Organic Education
</a>
      
    </h2>
    
  <p class="page__meta">
    
      <span class="page__meta-date">
        <i class="far fa-calendar-alt" aria-hidden="true"></i>
        
        <time datetime="2023-06-22T00:13:27+00:00">June 22, 2023</time>
      </span>
    
  </p>

    <p class="archive__item-excerpt" itemprop="description">Background
We all learn differntly, at different rates, from different cultures and perspectives, and from different levels of understanding. Additionally, t...</p>
  </article>
</div>

    </div>
    <a href="#page-title" class="back-to-top">Back to Top
        &uarr;</a>
</section>

<section id="part" class="taxonomy__section">
    <h2 class="archive__subtitle">Part</h2>
    <div class="entries-grid">
        
<div class="grid__item">
  <article class="archive__item" itemscope itemtype="https://schema.org/CreativeWork">
    
      <div class="archive__item-teaser">
        <img src="https://images.unsplash.com/photo-1502691876148-a84978e59af8" alt="">
      </div>
    
    <h2 class="archive__item-title no_toc" itemprop="headline">
      
        <a href="/article/2023/07/01/color-theory.html" rel="permalink">Part 1: Color Theory
</a>
      
    </h2>
    
  <p class="page__meta">
    
      <span class="page__meta-date">
        <i class="far fa-calendar-alt" aria-hidden="true"></i>
        
        <time datetime="2023-07-01T21:13:27+00:00">July 1, 2023</time>
      </span>
    
  </p>

    <p class="archive__item-excerpt" itemprop="description">
  “Color does not add a pleasant quality to design—it reinforces it.”
— Pierre Bonnard

</p>
  </article>
</div>

<div class="grid__item">
  <article class="archive__item" itemscope itemtype="https://schema.org/CreativeWork">
    
      <div class="archive__item-teaser">
        <img src="https://images.unsplash.com/photo-1502691876148-a84978e59af8" alt="">
      </div>
    
    <h2 class="archive__item-title no_toc" itemprop="headline">
      
        <a href="/article/2023/07/01/color-theory-3.html" rel="permalink">Part 3: Color Theory
</a>
      
    </h2>
    
  <p class="page__meta">
    
      <span class="page__meta-date">
        <i class="far fa-calendar-alt" aria-hidden="true"></i>
        
        <time datetime="2023-07-01T21:13:27+00:00">July 1, 2023</time>
      </span>
    
  </p>

    <p class="archive__item-excerpt" itemprop="description">Tips for Designing a Color Palette
In the first two sections of this book, Color Limitations and Color and Emotions, we looked at some interesting facts abou...</p>
  </article>
</div>

<div class="grid__item">
  <article class="archive__item" itemscope itemtype="https://schema.org/CreativeWork">
    
      <div class="archive__item-teaser">
        <img src="https://images.unsplash.com/photo-1502691876148-a84978e59af8" alt="">
      </div>
    
    <h2 class="archive__item-title no_toc" itemprop="headline">
      
        <a href="/article/2023/07/01/color-theory-2.html" rel="permalink">Part 2: Color Theory
</a>
      
    </h2>
    
  <p class="page__meta">
    
      <span class="page__meta-date">
        <i class="far fa-calendar-alt" aria-hidden="true"></i>
        
        <time datetime="2023-07-01T21:13:27+00:00">July 1, 2023</time>
      </span>
    
  </p>

    <p class="archive__item-excerpt" itemprop="description">Color and Emotions
Mention Thanksgiving to any American and they will paint a picture in their head with gold, orange, red, and brown hues. It will also like...</p>
  </article>
</div>

<div class="grid__item">
  <article class="archive__item" itemscope itemtype="https://schema.org/CreativeWork">
    
      <div class="archive__item-teaser">
        <img src="https://images.unsplash.com/photo-1611444111920-89dfc4a01f43" alt="">
      </div>
    
    <h2 class="archive__item-title no_toc" itemprop="headline">
      
        <a href="/article/2023/06/22/how-to-win-at-a-hackathon.html" rel="permalink">Part 1: How to win at a hackathon
</a>
      
    </h2>
    
  <p class="page__meta">
    
      <span class="page__meta-date">
        <i class="far fa-calendar-alt" aria-hidden="true"></i>
        
        <time datetime="2023-06-22T00:15:27+00:00">June 22, 2023</time>
      </span>
    
  </p>

    <p class="archive__item-excerpt" itemprop="description">
  Time  and pressure can change almost anything from what it was into what it has become. Time will change,  “Caterpillar into butterflies, sand into pearls...</p>
  </article>
</div>

<div class="grid__item">
  <article class="archive__item" itemscope itemtype="https://schema.org/CreativeWork">
    
      <div class="archive__item-teaser">
        <img src="https://images.unsplash.com/photo-1512928210967-3dced5ba507b" alt="">
      </div>
    
    <h2 class="archive__item-title no_toc" itemprop="headline">
      
        <a href="/article/2023/06/22/how-to-win-at-a-hackathon-2.html" rel="permalink">Part 2: How to win at a hackathon
</a>
      
    </h2>
    
  <p class="page__meta">
    
      <span class="page__meta-date">
        <i class="far fa-calendar-alt" aria-hidden="true"></i>
        
        <time datetime="2023-06-22T00:14:27+00:00">June 22, 2023</time>
      </span>
    
  </p>

    <p class="archive__item-excerpt" itemprop="description">
  “You can’t connect the dots looking forward; you can only connect them looking backwards. So you have to trust that the dots will somehow connect in your ...</p>
  </article>
</div>

<div class="grid__item">
  <article class="archive__item" itemscope itemtype="https://schema.org/CreativeWork">
    
      <div class="archive__item-teaser">
        <img src="https://images.unsplash.com/photo-1574664620916-fb955a65cab3" alt="">
      </div>
    
    <h2 class="archive__item-title no_toc" itemprop="headline">
      
        <a href="/article/2023/06/22/how-to-win-at-a-hackathon-3.html" rel="permalink">Part 3: How to win at a hackathon
</a>
      
    </h2>
    
  <p class="page__meta">
    
      <span class="page__meta-date">
        <i class="far fa-calendar-alt" aria-hidden="true"></i>
        
        <time datetime="2023-06-22T00:13:27+00:00">June 22, 2023</time>
      </span>
    
  </p>

    <p class="archive__item-excerpt" itemprop="description">
  “No struggle, no success! The strongest thunder strikes often bring the heaviest rainfall! The weight of your fulfillment depends on how wide you cast you...</p>
  </article>
</div>

    </div>
    <a href="#page-title" class="back-to-top">Back to Top
        &uarr;</a>
</section>

<section id="pdm-in-practice" class="taxonomy__section">
    <h2 class="archive__subtitle">PdM in Practice</h2>
    <div class="entries-grid">
        
<div class="grid__item">
  <article class="archive__item" itemscope itemtype="https://schema.org/CreativeWork">
    
      <div class="archive__item-teaser">
        <img src="https://images.unsplash.com/photo-1516321318423-f06f85e504b3" alt="">
      </div>
    
    <h2 class="archive__item-title no_toc" itemprop="headline">
      
        <a href="/article/2024/02/14/prioritization.html" rel="permalink">Prioritization
</a>
      
    </h2>
    
  <p class="page__meta">
    
      <span class="page__meta-date">
        <i class="far fa-calendar-alt" aria-hidden="true"></i>
        
        <time datetime="2024-02-14T00:13:27+00:00">February 14, 2024</time>
      </span>
    
  </p>

    <p class="archive__item-excerpt" itemprop="description">Background
Working at a SaaS startup can introduce unique prioritization challenges. You typically work with a small dev team, have many features to execute,...</p>
  </article>
</div>

    </div>
    <a href="#page-title" class="back-to-top">Back to Top
        &uarr;</a>
</section>

<section id="writing" class="taxonomy__section">
    <h2 class="archive__subtitle">Writing</h2>
    <div class="entries-grid">
        
<div class="grid__item">
  <article class="archive__item" itemscope itemtype="https://schema.org/CreativeWork">
    
      <div class="archive__item-teaser">
        <img src="https://images.unsplash.com/photo-1444858291040-58f756a3bdd6" alt="">
      </div>
    
    <h2 class="archive__item-title no_toc" itemprop="headline">
      
        <a href="/article/2023/07/14/BARN.html" rel="permalink">The B.A.R.N. Framework
</a>
      
    </h2>
    
  <p class="page__meta">
    
      <span class="page__meta-date">
        <i class="far fa-calendar-alt" aria-hidden="true"></i>
        
        <time datetime="2023-07-14T21:13:27+00:00">July 14, 2023</time>
      </span>
    
  </p>

    <p class="archive__item-excerpt" itemprop="description">Introduction
Writing about your projects is crucial to giving context for the work. Writing an impactful article requires a structured approach that captures...</p>
  </article>
</div>

    </div>
    <a href="#page-title" class="back-to-top">Back to Top
        &uarr;</a>
</section>

Adding SEO

Install: https://github.com/jekyll/jekyll-seo-tag/blob/master/docs/installation.md
Add `

Chapter Notes | Leigh Stewardson

` to the includes/head/custom.html file

Chapter 3.3 Adding images

Adding Images to the Home Page

![my avatar](/assets/images/bioshot.jpeg){: .avatar} 
# Hi! I'm Leigh Stewardson. 
I am a self-taught programmer, instructor, product manager, game developer, painter and writer. Check out some of my favorite articles and projects below or go to [**My Work**](/mywork) or [**My Writing**](/mywriting) to see a categorized list.

Adding images to an Article

header:
  overlay_image: https://images.unsplash.com/photo-1502691876148-a84978e59af8
  teaser: https://images.unsplash.com/photo-1502691876148-a84978e59af8
  caption: "Photo credit: [**Unsplash**](https://unsplash.com)"

Adding ICO

https://www.favicon.cc/?

Chapter 3.4 Project Writeups and Articles

Read articles provided:

Chapter 4.1 Working in Codespaces: Shuffling Cards

Create repo from zipped project Shuffling_Cards in the zipped_file folder.

Chapter 4.2 Working in Codespaces: Piece of Cake

Create repo from zipped project Piece_of_Cake in the zipped_file folder.

Conclusion

Here are a list of projects you might want to consider for your portfolio:

Chapter Notes

Jekyll Theme

Links

Introduction

What you Should Know

Chapter 1.1 Purpose of a Portfolio

Links

Chapter 1.2 Installing Jekyll

Links

Gemfile:

_config.yml

Chapter 1.3 Going Live On GitHub

Chapter 1.4 Components of Jekyll

Links

Chapter 2.1 Writing a Bio

Chapter 2.2 Adding Skills

Programming languages, Frameworks & libraries

Soft Skills

Basic table

YAML

Chapter 2.3 Site Design

Links

Chapter 2.4 Customizing your site

Custom.html

Custom.scss

anime.js

Chapter 3.1 Building Layouts

Chapter 3.2 Adding Tags and SEO

Layout changes

Adding SEO

Chapter 3.3 Adding images

Adding Images to the Home Page

Adding images to an Article

Adding ICO

Chapter 3.4 Project Writeups and Articles

Chapter 4.1 Working in Codespaces: Shuffling Cards

Links

Chapter 4.2 Working in Codespaces: Piece of Cake

Links

Conclusion