Showcase Your Content with the Jekyll Timeline Feature

In the world of web design, presentation is everything. Whether you’re a blogger, a developer, or a business owner, how you display your content can make a huge difference in engaging your audience. That’s where our Jekyll theme’s timeline feature comes in handy. Let’s dive into how this versatile tool can enhance your website and explore some exciting use cases.

What is the Timeline Feature?

The timeline feature is a sleek, chronological display of your content. It’s designed to present your posts, updates, or any time-based information in an easy-to-read, visually appealing format. With customizable options and responsive design, it’s a powerful addition to any Jekyll-based website.

Setting Up Your Timeline

Implementing the timeline is as easy as adding a single line to your Jekyll template:

<div class="mt-md-7 mb-9 mb-md-12">
  <div class="container-xl mx-auto p-responsive-blog">
<div class="TimelineItem flex-wrap">
  <div class="col-12 col-md-5 position-relative">
    <div class="TimelineItem-title mt-5 position-sticky d-flex">
      <div class="TimelineItem-badge"><svg height="16" class="octicon octicon-comment" viewBox="0 0 16 16" version="1.1" width="16" aria-hidden="true"><path d="M1 2.75C1 1.784 1.784 1 2.75 1h10.5c.966 0 1.75.784 1.75 1.75v7.5A1.75 1.75 0 0 1 13.25 12H9.06l-2.573 2.573A1.458 1.458 0 0 1 4 13.543V12H2.75A1.75 1.75 0 0 1 1 10.25Zm1.75-.25a.25.25 0 0 0-.25.25v7.5c0 .138.112.25.25.25h2a.75.75 0 0 1 .75.75v2.19l2.72-2.72a.749.749 0 0 1 .53-.22h4.5a.25.25 0 0 0 .25-.25v-7.5a.25.25 0 0 0-.25-.25Z"></path></svg></div>
      <div class="title">
        <div class="h2">
          <a href="/jekyll-theme-profile/2024/08/08/timeline.html">
            Showcase Your Content with the Jekyll Timeline Feature
          </a>
        </div>
        <div class="text-gray mb-2 ws-normal">Aug 08, 2024</div>
        <span class="IssueLabel IssueLabel--big color-bg-accent-emphasis color-fg-on-emphasis mr-1">news</span>
        <span class="IssueLabel IssueLabel--big color-bg-accent-emphasis color-fg-on-emphasis mr-1">includes</span>
      </div>
    </div>
  </div>
  <div class="col-12 col-md-7">
    <div class="pb-5 pt-0 py-md-7 ml-5 border-bottom">
        <div class="image-container">
          <img class="rounded-2" src="/assets/img/default.png" width="800" height="425" alt="Showcase Your Content with the Jekyll Timeline Feature" />
        </div>
        <div class="summary"> <p>In the world of web design, presentation is everything. Whether you’re a blogger, a developer, or a business owner, how you display your content can make a huge difference in engaging your audience. That’s where our Jekyll theme’s timeline feature comes in handy. Let’s dive into how this versatile tool can enhance your website and explore some exciting use cases.</p>
</div>
        <div class="more">
          <a href="/jekyll-theme-profile/2024/08/08/timeline.html" class="link-mktg arrow-target-mktg text-semibold f4-mktg">
            Contiue
            <svg xmlns="http://www.w3.org/2000/svg" class="octicon arrow-symbol-mktg" width="16" height="16"
              viewBox="0 0 16 16" fill="none">
              <path fill="currentColor"
                d="M7.28033 3.21967C6.98744 2.92678 6.51256 2.92678 6.21967 3.21967C5.92678 3.51256 5.92678 3.98744 6.21967 4.28033L7.28033 3.21967ZM11 8L11.5303 8.53033C11.8232 8.23744 11.8232 7.76256 11.5303 7.46967L11 8ZM6.21967 11.7197C5.92678 12.0126 5.92678 12.4874 6.21967 12.7803C6.51256 13.0732 6.98744 13.0732 7.28033 12.7803L6.21967 11.7197ZM6.21967 4.28033L10.4697 8.53033L11.5303 7.46967L7.28033 3.21967L6.21967 4.28033ZM10.4697 7.46967L6.21967 11.7197L7.28033 12.7803L11.5303 8.53033L10.4697 7.46967Z">
              </path>
              <path stroke="currentColor" d="M1.75 8H11" stroke-width="1.5" stroke-linecap="round"></path>
            </svg>
          </a>
        </div>
    </div>

  </div>
</div>

<div class="TimelineItem flex-wrap">
  <div class="col-12 col-md-5 position-relative">
    <div class="TimelineItem-title mt-5 position-sticky d-flex">
      <div class="TimelineItem-badge"><svg height="16" class="octicon octicon-comment" viewBox="0 0 16 16" version="1.1" width="16" aria-hidden="true"><path d="M1 2.75C1 1.784 1.784 1 2.75 1h10.5c.966 0 1.75.784 1.75 1.75v7.5A1.75 1.75 0 0 1 13.25 12H9.06l-2.573 2.573A1.458 1.458 0 0 1 4 13.543V12H2.75A1.75 1.75 0 0 1 1 10.25Zm1.75-.25a.25.25 0 0 0-.25.25v7.5c0 .138.112.25.25.25h2a.75.75 0 0 1 .75.75v2.19l2.72-2.72a.749.749 0 0 1 .53-.22h4.5a.25.25 0 0 0 .25-.25v-7.5a.25.25 0 0 0-.25-.25Z"></path></svg></div>
      <div class="title">
        <div class="h2">
          <a href="/jekyll-theme-profile/examples/2023/12/14/video.html">
            Empty post with video
          </a>
        </div>
        <div class="text-gray mb-2 ws-normal">Dec 14, 2023</div>
      </div>
    </div>
  </div>
  <div class="col-12 col-md-7">
    <div class="pb-5 pt-0 py-md-7 ml-5 border-bottom">
        <div id="Timeline-video-container" class="image-container">
          <iframe id="Timeline-video" src="https://www.youtube.com/embed/E4WlUXrJgy4?si=BhUjhwehMIZME9Cf" frameborder="0" height="inherited"
            width="inherited"></iframe>
        </div>
        <div class="summary"> 
</div>
    </div>

  </div>
</div>

<div class="TimelineItem flex-wrap">
  <div class="col-12 col-md-5 position-relative">
    <div class="TimelineItem-title mt-5 position-sticky d-flex">
      <div class="TimelineItem-badge"><svg height="16" class="octicon octicon-comment" viewBox="0 0 16 16" version="1.1" width="16" aria-hidden="true"><path d="M1 2.75C1 1.784 1.784 1 2.75 1h10.5c.966 0 1.75.784 1.75 1.75v7.5A1.75 1.75 0 0 1 13.25 12H9.06l-2.573 2.573A1.458 1.458 0 0 1 4 13.543V12H2.75A1.75 1.75 0 0 1 1 10.25Zm1.75-.25a.25.25 0 0 0-.25.25v7.5c0 .138.112.25.25.25h2a.75.75 0 0 1 .75.75v2.19l2.72-2.72a.749.749 0 0 1 .53-.22h4.5a.25.25 0 0 0 .25-.25v-7.5a.25.25 0 0 0-.25-.25Z"></path></svg></div>
      <div class="title">
        <div class="h2">
          <a href="/jekyll-theme-profile/examples/2023/11/21/empty.html">
            Empty post with image
          </a>
        </div>
        <div class="text-gray mb-2 ws-normal">Nov 21, 2023</div>
        <span class="IssueLabel IssueLabel--big color-bg-accent-emphasis color-fg-on-emphasis mr-1">sidebar</span>
      </div>
    </div>
  </div>
  <div class="col-12 col-md-7">
    <div class="pb-5 pt-0 py-md-7 ml-5 border-bottom">
        <div class="image-container">
          <img class="rounded-2" src="https://www.allisonthackston.com/assets/img/cover-1920.jpg" width="800" height="425" alt="Empty post with image" />
        </div>
        <div class="summary"> 
</div>
    </div>

  </div>
</div>

<div class="TimelineItem flex-wrap">
  <div class="col-12 col-md-5 position-relative">
    <div class="TimelineItem-title mt-5 position-sticky d-flex">
      <div class="TimelineItem-badge"><svg height="16" class="octicon octicon-comment" viewBox="0 0 16 16" version="1.1" width="16" aria-hidden="true"><path d="M1 2.75C1 1.784 1.784 1 2.75 1h10.5c.966 0 1.75.784 1.75 1.75v7.5A1.75 1.75 0 0 1 13.25 12H9.06l-2.573 2.573A1.458 1.458 0 0 1 4 13.543V12H2.75A1.75 1.75 0 0 1 1 10.25Zm1.75-.25a.25.25 0 0 0-.25.25v7.5c0 .138.112.25.25.25h2a.75.75 0 0 1 .75.75v2.19l2.72-2.72a.749.749 0 0 1 .53-.22h4.5a.25.25 0 0 0 .25-.25v-7.5a.25.25 0 0 0-.25-.25Z"></path></svg></div>
      <div class="title">
        <div class="h2">
          <a href="/jekyll-theme-profile/custom/2023/11/20/background.html">
            Post with custom background
          </a>
        </div>
        <div class="text-gray mb-2 ws-normal">Nov 20, 2023</div>
        <span class="IssueLabel IssueLabel--big color-bg-accent-emphasis color-fg-on-emphasis mr-1">style</span>
        <span class="IssueLabel IssueLabel--big color-bg-accent-emphasis color-fg-on-emphasis mr-1">background</span>
      </div>
    </div>
  </div>
  <div class="col-12 col-md-7">
    <div class="pb-5 pt-0 py-md-7 ml-5 border-bottom">
        <div class="image-container">
          <img class="rounded-2" src="/assets/img/default.png" width="800" height="425" alt="Post with custom background" />
        </div>
        <div class="summary"> <p>You’ll find this post in your <code class="language-plaintext highlighter-rouge">_posts</code> directory. Go ahead and edit it and re-build the site to see your changes. You can rebuild the site in many different ways, but the most common way is to run <code class="language-plaintext highlighter-rouge">jekyll serve</code>, which launches a web server and auto-regenerates your site when a file is updated.</p>
</div>
        <div class="more">
          <a href="/jekyll-theme-profile/custom/2023/11/20/background.html" class="link-mktg arrow-target-mktg text-semibold f4-mktg">
            Contiue
            <svg xmlns="http://www.w3.org/2000/svg" class="octicon arrow-symbol-mktg" width="16" height="16"
              viewBox="0 0 16 16" fill="none">
              <path fill="currentColor"
                d="M7.28033 3.21967C6.98744 2.92678 6.51256 2.92678 6.21967 3.21967C5.92678 3.51256 5.92678 3.98744 6.21967 4.28033L7.28033 3.21967ZM11 8L11.5303 8.53033C11.8232 8.23744 11.8232 7.76256 11.5303 7.46967L11 8ZM6.21967 11.7197C5.92678 12.0126 5.92678 12.4874 6.21967 12.7803C6.51256 13.0732 6.98744 13.0732 7.28033 12.7803L6.21967 11.7197ZM6.21967 4.28033L10.4697 8.53033L11.5303 7.46967L7.28033 3.21967L6.21967 4.28033ZM10.4697 7.46967L6.21967 11.7197L7.28033 12.7803L11.5303 8.53033L10.4697 7.46967Z">
              </path>
              <path stroke="currentColor" d="M1.75 8H11" stroke-width="1.5" stroke-linecap="round"></path>
            </svg>
          </a>
        </div>
    </div>

  </div>
</div>

<div class="TimelineItem flex-wrap">
  <div class="col-12 col-md-5 position-relative">
    <div class="TimelineItem-title mt-5 position-sticky d-flex">
      <div class="TimelineItem-badge"><svg height="16" class="octicon octicon-comment" viewBox="0 0 16 16" version="1.1" width="16" aria-hidden="true"><path d="M1 2.75C1 1.784 1.784 1 2.75 1h10.5c.966 0 1.75.784 1.75 1.75v7.5A1.75 1.75 0 0 1 13.25 12H9.06l-2.573 2.573A1.458 1.458 0 0 1 4 13.543V12H2.75A1.75 1.75 0 0 1 1 10.25Zm1.75-.25a.25.25 0 0 0-.25.25v7.5c0 .138.112.25.25.25h2a.75.75 0 0 1 .75.75v2.19l2.72-2.72a.749.749 0 0 1 .53-.22h4.5a.25.25 0 0 0 .25-.25v-7.5a.25.25 0 0 0-.25-.25Z"></path></svg></div>
      <div class="title">
        <div class="h2">
          <a href="/jekyll-theme-profile/style/2023/11/10/post-appbar.html">
            This is a appbar post style
          </a>
        </div>
        <div class="authors-wrap text-bold mb-2 mr-3 ">George P. Burdell</div>
        <div class="text-gray mb-2 ws-normal">Nov 10, 2023</div>
        <span class="IssueLabel IssueLabel--big color-bg-accent-emphasis color-fg-on-emphasis mr-1">style</span>
        <span class="IssueLabel IssueLabel--big color-bg-accent-emphasis color-fg-on-emphasis mr-1">appbar</span>
      </div>
    </div>
  </div>
  <div class="col-12 col-md-7">
    <div class="pb-5 pt-0 py-md-7 ml-5 border-bottom">
        <div class="image-container">
          <img class="rounded-2" src="https://github.blog/wp-content/uploads/2023/10/hero-light.jpg" width="800" height="425" alt="This is a appbar post style" />
        </div>
        <div class="summary"> <p>Eos eu docendi tractatos sapientem, brute option menandri in vix, quando vivendo accommodare te ius. Nec melius fastidii constituam id, viderer theophrastus ad sit, hinc semper periculis cum id. Noluisse postulant assentior est in, no choro sadipscing repudiandae vix. Vis in euismod delenit dignissim. Ex quod nostrum sit, suas decore animal id ius, nobis solet detracto quo te.</p>
</div>
        <div class="more">
          <a href="/jekyll-theme-profile/style/2023/11/10/post-appbar.html" class="link-mktg arrow-target-mktg text-semibold f4-mktg">
            Contiue
            <svg xmlns="http://www.w3.org/2000/svg" class="octicon arrow-symbol-mktg" width="16" height="16"
              viewBox="0 0 16 16" fill="none">
              <path fill="currentColor"
                d="M7.28033 3.21967C6.98744 2.92678 6.51256 2.92678 6.21967 3.21967C5.92678 3.51256 5.92678 3.98744 6.21967 4.28033L7.28033 3.21967ZM11 8L11.5303 8.53033C11.8232 8.23744 11.8232 7.76256 11.5303 7.46967L11 8ZM6.21967 11.7197C5.92678 12.0126 5.92678 12.4874 6.21967 12.7803C6.51256 13.0732 6.98744 13.0732 7.28033 12.7803L6.21967 11.7197ZM6.21967 4.28033L10.4697 8.53033L11.5303 7.46967L7.28033 3.21967L6.21967 4.28033ZM10.4697 7.46967L6.21967 11.7197L7.28033 12.7803L11.5303 8.53033L10.4697 7.46967Z">
              </path>
              <path stroke="currentColor" d="M1.75 8H11" stroke-width="1.5" stroke-linecap="round"></path>
            </svg>
          </a>
        </div>
    </div>

  </div>
</div>

<div class="TimelineItem flex-wrap">
  <div class="col-12 col-md-5 position-relative">
    <div class="TimelineItem-title mt-5 position-sticky d-flex">
      <div class="TimelineItem-badge"><svg height="16" class="octicon octicon-comment" viewBox="0 0 16 16" version="1.1" width="16" aria-hidden="true"><path d="M1 2.75C1 1.784 1.784 1 2.75 1h10.5c.966 0 1.75.784 1.75 1.75v7.5A1.75 1.75 0 0 1 13.25 12H9.06l-2.573 2.573A1.458 1.458 0 0 1 4 13.543V12H2.75A1.75 1.75 0 0 1 1 10.25Zm1.75-.25a.25.25 0 0 0-.25.25v7.5c0 .138.112.25.25.25h2a.75.75 0 0 1 .75.75v2.19l2.72-2.72a.749.749 0 0 1 .53-.22h4.5a.25.25 0 0 0 .25-.25v-7.5a.25.25 0 0 0-.25-.25Z"></path></svg></div>
      <div class="title">
        <div class="h2">
          <a href="/jekyll-theme-profile/style/2023/07/16/post-sidebar.html">
            This is a sidebar post style
          </a>
        </div>
        <div class="text-gray mb-2 ws-normal">Jul 16, 2023</div>
        <span class="IssueLabel IssueLabel--big color-bg-accent-emphasis color-fg-on-emphasis mr-1">style</span>
        <span class="IssueLabel IssueLabel--big color-bg-accent-emphasis color-fg-on-emphasis mr-1">sidebar</span>
      </div>
    </div>
  </div>
  <div class="col-12 col-md-7">
    <div class="pb-5 pt-0 py-md-7 ml-5 border-bottom">
        <div class="image-container">
          <img class="rounded-2" src="https://github.blog/wp-content/uploads/2023/08/1200x630-AI-Unfurl-DARK-Inverto.png" width="800" height="425" alt="This is a sidebar post style" />
        </div>
        <div class="summary"> <p>Eos eu docendi tractatos sapientem, brute option menandri in vix, quando vivendo accommodare te ius. Nec melius fastidii constituam id, viderer theophrastus ad sit, hinc semper periculis cum id. Noluisse postulant assentior est in, no choro sadipscing repudiandae vix. Vis in euismod delenit dignissim. Ex quod nostrum sit, suas decore animal id ius, nobis solet detracto quo te.</p>
</div>
        <div class="more">
          <a href="/jekyll-theme-profile/style/2023/07/16/post-sidebar.html" class="link-mktg arrow-target-mktg text-semibold f4-mktg">
            Contiue
            <svg xmlns="http://www.w3.org/2000/svg" class="octicon arrow-symbol-mktg" width="16" height="16"
              viewBox="0 0 16 16" fill="none">
              <path fill="currentColor"
                d="M7.28033 3.21967C6.98744 2.92678 6.51256 2.92678 6.21967 3.21967C5.92678 3.51256 5.92678 3.98744 6.21967 4.28033L7.28033 3.21967ZM11 8L11.5303 8.53033C11.8232 8.23744 11.8232 7.76256 11.5303 7.46967L11 8ZM6.21967 11.7197C5.92678 12.0126 5.92678 12.4874 6.21967 12.7803C6.51256 13.0732 6.98744 13.0732 7.28033 12.7803L6.21967 11.7197ZM6.21967 4.28033L10.4697 8.53033L11.5303 7.46967L7.28033 3.21967L6.21967 4.28033ZM10.4697 7.46967L6.21967 11.7197L7.28033 12.7803L11.5303 8.53033L10.4697 7.46967Z">
              </path>
              <path stroke="currentColor" d="M1.75 8H11" stroke-width="1.5" stroke-linecap="round"></path>
            </svg>
          </a>
        </div>
    </div>

  </div>
</div>

<div class="TimelineItem flex-wrap">
  <div class="col-12 col-md-5 position-relative">
    <div class="TimelineItem-title mt-5 position-sticky d-flex">
      <div class="TimelineItem-badge"><svg height="16" class="octicon octicon-comment" viewBox="0 0 16 16" version="1.1" width="16" aria-hidden="true"><path d="M1 2.75C1 1.784 1.784 1 2.75 1h10.5c.966 0 1.75.784 1.75 1.75v7.5A1.75 1.75 0 0 1 13.25 12H9.06l-2.573 2.573A1.458 1.458 0 0 1 4 13.543V12H2.75A1.75 1.75 0 0 1 1 10.25Zm1.75-.25a.25.25 0 0 0-.25.25v7.5c0 .138.112.25.25.25h2a.75.75 0 0 1 .75.75v2.19l2.72-2.72a.749.749 0 0 1 .53-.22h4.5a.25.25 0 0 0 .25-.25v-7.5a.25.25 0 0 0-.25-.25Z"></path></svg></div>
      <div class="title">
        <div class="h2">
          <a href="/jekyll-theme-profile/style/2023/07/16/post-stacked.html">
            This is a stacked post style
          </a>
        </div>
        <div class="text-gray mb-2 ws-normal">Jul 16, 2023</div>
        <span class="IssueLabel IssueLabel--big color-bg-accent-emphasis color-fg-on-emphasis mr-1">style</span>
        <span class="IssueLabel IssueLabel--big color-bg-accent-emphasis color-fg-on-emphasis mr-1">stacked</span>
      </div>
    </div>
  </div>
  <div class="col-12 col-md-7">
    <div class="pb-5 pt-0 py-md-7 ml-5 border-bottom">
        <div class="image-container">
          <img class="rounded-2" src="https://github.blog/wp-content/uploads/2023/05/1200.630-Community-wLogo-e1698634509856.png" width="800" height="425" alt="This is a stacked post style" />
        </div>
        <div class="summary"> <p>Eos eu docendi tractatos sapientem, brute option menandri in vix, quando vivendo accommodare te ius. Nec melius fastidii constituam id, viderer theophrastus ad sit, hinc semper periculis cum id. Noluisse postulant assentior est in, no choro sadipscing repudiandae vix. Vis in euismod delenit dignissim. Ex quod nostrum sit, suas decore animal id ius, nobis solet detracto quo te.</p>
</div>
        <div class="more">
          <a href="/jekyll-theme-profile/style/2023/07/16/post-stacked.html" class="link-mktg arrow-target-mktg text-semibold f4-mktg">
            Contiue
            <svg xmlns="http://www.w3.org/2000/svg" class="octicon arrow-symbol-mktg" width="16" height="16"
              viewBox="0 0 16 16" fill="none">
              <path fill="currentColor"
                d="M7.28033 3.21967C6.98744 2.92678 6.51256 2.92678 6.21967 3.21967C5.92678 3.51256 5.92678 3.98744 6.21967 4.28033L7.28033 3.21967ZM11 8L11.5303 8.53033C11.8232 8.23744 11.8232 7.76256 11.5303 7.46967L11 8ZM6.21967 11.7197C5.92678 12.0126 5.92678 12.4874 6.21967 12.7803C6.51256 13.0732 6.98744 13.0732 7.28033 12.7803L6.21967 11.7197ZM6.21967 4.28033L10.4697 8.53033L11.5303 7.46967L7.28033 3.21967L6.21967 4.28033ZM10.4697 7.46967L6.21967 11.7197L7.28033 12.7803L11.5303 8.53033L10.4697 7.46967Z">
              </path>
              <path stroke="currentColor" d="M1.75 8H11" stroke-width="1.5" stroke-linecap="round"></path>
            </svg>
          </a>
        </div>
    </div>

  </div>
</div>

<div class="TimelineItem flex-wrap">
  <div class="col-12 col-md-5 position-relative">
    <div class="TimelineItem-title mt-5 position-sticky d-flex">
      <div class="TimelineItem-badge"><svg height="16" class="octicon octicon-comment" viewBox="0 0 16 16" version="1.1" width="16" aria-hidden="true"><path d="M1 2.75C1 1.784 1.784 1 2.75 1h10.5c.966 0 1.75.784 1.75 1.75v7.5A1.75 1.75 0 0 1 13.25 12H9.06l-2.573 2.573A1.458 1.458 0 0 1 4 13.543V12H2.75A1.75 1.75 0 0 1 1 10.25Zm1.75-.25a.25.25 0 0 0-.25.25v7.5c0 .138.112.25.25.25h2a.75.75 0 0 1 .75.75v2.19l2.72-2.72a.749.749 0 0 1 .53-.22h4.5a.25.25 0 0 0 .25-.25v-7.5a.25.25 0 0 0-.25-.25Z"></path></svg></div>
      <div class="title">
        <div class="h2">
          <a href="/jekyll-theme-profile/style/2023/07/16/post-topbar.html">
            This is a topbar post style
          </a>
        </div>
        <div class="authors-wrap text-bold mb-2 mr-3 ">George P. Burdell</div>
        <div class="text-gray mb-2 ws-normal">Jul 16, 2023</div>
        <span class="IssueLabel IssueLabel--big color-bg-accent-emphasis color-fg-on-emphasis mr-1">style</span>
        <span class="IssueLabel IssueLabel--big color-bg-accent-emphasis color-fg-on-emphasis mr-1">topbar</span>
      </div>
    </div>
  </div>
  <div class="col-12 col-md-7">
    <div class="pb-5 pt-0 py-md-7 ml-5 border-bottom">
        <div class="image-container">
          <img class="rounded-2" src="https://github.blog/wp-content/uploads/2023/10/hero-light.jpg" width="800" height="425" alt="This is a topbar post style" />
        </div>
        <div class="summary"> <p>Eos eu docendi tractatos sapientem, brute option menandri in vix, quando vivendo accommodare te ius. Nec melius fastidii constituam id, viderer theophrastus ad sit, hinc semper periculis cum id. Noluisse postulant assentior est in, no choro sadipscing repudiandae vix. Vis in euismod delenit dignissim. Ex quod nostrum sit, suas decore animal id ius, nobis solet detracto quo te.</p>
</div>
        <div class="more">
          <a href="/jekyll-theme-profile/style/2023/07/16/post-topbar.html" class="link-mktg arrow-target-mktg text-semibold f4-mktg">
            Contiue
            <svg xmlns="http://www.w3.org/2000/svg" class="octicon arrow-symbol-mktg" width="16" height="16"
              viewBox="0 0 16 16" fill="none">
              <path fill="currentColor"
                d="M7.28033 3.21967C6.98744 2.92678 6.51256 2.92678 6.21967 3.21967C5.92678 3.51256 5.92678 3.98744 6.21967 4.28033L7.28033 3.21967ZM11 8L11.5303 8.53033C11.8232 8.23744 11.8232 7.76256 11.5303 7.46967L11 8ZM6.21967 11.7197C5.92678 12.0126 5.92678 12.4874 6.21967 12.7803C6.51256 13.0732 6.98744 13.0732 7.28033 12.7803L6.21967 11.7197ZM6.21967 4.28033L10.4697 8.53033L11.5303 7.46967L7.28033 3.21967L6.21967 4.28033ZM10.4697 7.46967L6.21967 11.7197L7.28033 12.7803L11.5303 8.53033L10.4697 7.46967Z">
              </path>
              <path stroke="currentColor" d="M1.75 8H11" stroke-width="1.5" stroke-linecap="round"></path>
            </svg>
          </a>
        </div>
    </div>

  </div>
</div>

<div class="TimelineItem flex-wrap">
  <div class="col-12 col-md-5 position-relative">
    <div class="TimelineItem-title mt-5 position-sticky d-flex">
      <div class="TimelineItem-badge"><svg height="16" class="octicon octicon-comment" viewBox="0 0 16 16" version="1.1" width="16" aria-hidden="true"><path d="M1 2.75C1 1.784 1.784 1 2.75 1h10.5c.966 0 1.75.784 1.75 1.75v7.5A1.75 1.75 0 0 1 13.25 12H9.06l-2.573 2.573A1.458 1.458 0 0 1 4 13.543V12H2.75A1.75 1.75 0 0 1 1 10.25Zm1.75-.25a.25.25 0 0 0-.25.25v7.5c0 .138.112.25.25.25h2a.75.75 0 0 1 .75.75v2.19l2.72-2.72a.749.749 0 0 1 .53-.22h4.5a.25.25 0 0 0 .25-.25v-7.5a.25.25 0 0 0-.25-.25Z"></path></svg></div>
      <div class="title">
        <div class="h2">
          <a href="/jekyll-theme-profile/examples/2019/01/29/hello-world.html">
            Welcome to Jekyll!
          </a>
        </div>
        <div class="text-gray mb-2 ws-normal">Jan 29, 2019</div>
      </div>
    </div>
  </div>
  <div class="col-12 col-md-7">
    <div class="pb-5 pt-0 py-md-7 ml-5 border-bottom">
        <div class="image-container">
          <img class="rounded-2" src="/assets/img/default.png" width="800" height="425" alt="Welcome to Jekyll!" />
        </div>
        <div class="summary"> <p>You’ll find this post in your <code class="language-plaintext highlighter-rouge">_posts</code> directory. Go ahead and edit it and re-build the site to see your changes. You can rebuild the site in many different ways, but the most common way is to run <code class="language-plaintext highlighter-rouge">jekyll serve</code>, which launches a web server and auto-regenerates your site when a file is updated.</p>
</div>
        <div class="more">
          <a href="/jekyll-theme-profile/examples/2019/01/29/hello-world.html" class="link-mktg arrow-target-mktg text-semibold f4-mktg">
            Contiue
            <svg xmlns="http://www.w3.org/2000/svg" class="octicon arrow-symbol-mktg" width="16" height="16"
              viewBox="0 0 16 16" fill="none">
              <path fill="currentColor"
                d="M7.28033 3.21967C6.98744 2.92678 6.51256 2.92678 6.21967 3.21967C5.92678 3.51256 5.92678 3.98744 6.21967 4.28033L7.28033 3.21967ZM11 8L11.5303 8.53033C11.8232 8.23744 11.8232 7.76256 11.5303 7.46967L11 8ZM6.21967 11.7197C5.92678 12.0126 5.92678 12.4874 6.21967 12.7803C6.51256 13.0732 6.98744 13.0732 7.28033 12.7803L6.21967 11.7197ZM6.21967 4.28033L10.4697 8.53033L11.5303 7.46967L7.28033 3.21967L6.21967 4.28033ZM10.4697 7.46967L6.21967 11.7197L7.28033 12.7803L11.5303 8.53033L10.4697 7.46967Z">
              </path>
              <path stroke="currentColor" d="M1.75 8H11" stroke-width="1.5" stroke-linecap="round"></path>
            </svg>
          </a>
        </div>
    </div>

  </div>
</div>

<div class="TimelineItem flex-wrap">
  <div class="col-12 col-md-5 position-relative">
    <div class="TimelineItem-title mt-5 position-sticky d-flex">
      <div class="TimelineItem-badge"><svg height="16" class="octicon octicon-comment" viewBox="0 0 16 16" version="1.1" width="16" aria-hidden="true"><path d="M1 2.75C1 1.784 1.784 1 2.75 1h10.5c.966 0 1.75.784 1.75 1.75v7.5A1.75 1.75 0 0 1 13.25 12H9.06l-2.573 2.573A1.458 1.458 0 0 1 4 13.543V12H2.75A1.75 1.75 0 0 1 1 10.25Zm1.75-.25a.25.25 0 0 0-.25.25v7.5c0 .138.112.25.25.25h2a.75.75 0 0 1 .75.75v2.19l2.72-2.72a.749.749 0 0 1 .53-.22h4.5a.25.25 0 0 0 .25-.25v-7.5a.25.25 0 0 0-.25-.25Z"></path></svg></div>
      <div class="title">
        <div class="h2">
          <a href="/jekyll-theme-profile/examples/2019/01/29/syntax-highlighter.html">
            Syntax highlighter
          </a>
        </div>
        <div class="text-gray mb-2 ws-normal">Jan 29, 2019</div>
      </div>
    </div>
  </div>
  <div class="col-12 col-md-7">
    <div class="pb-5 pt-0 py-md-7 ml-5 border-bottom">
        <div class="image-container">
          <img class="rounded-2" src="/assets/img/default.png" width="800" height="425" alt="Syntax highlighter" />
        </div>
        <div class="summary"> <p>Below are some languages and their represntative styles.</p>
</div>
        <div class="more">
          <a href="/jekyll-theme-profile/examples/2019/01/29/syntax-highlighter.html" class="link-mktg arrow-target-mktg text-semibold f4-mktg">
            Contiue
            <svg xmlns="http://www.w3.org/2000/svg" class="octicon arrow-symbol-mktg" width="16" height="16"
              viewBox="0 0 16 16" fill="none">
              <path fill="currentColor"
                d="M7.28033 3.21967C6.98744 2.92678 6.51256 2.92678 6.21967 3.21967C5.92678 3.51256 5.92678 3.98744 6.21967 4.28033L7.28033 3.21967ZM11 8L11.5303 8.53033C11.8232 8.23744 11.8232 7.76256 11.5303 7.46967L11 8ZM6.21967 11.7197C5.92678 12.0126 5.92678 12.4874 6.21967 12.7803C6.51256 13.0732 6.98744 13.0732 7.28033 12.7803L6.21967 11.7197ZM6.21967 4.28033L10.4697 8.53033L11.5303 7.46967L7.28033 3.21967L6.21967 4.28033ZM10.4697 7.46967L6.21967 11.7197L7.28033 12.7803L11.5303 8.53033L10.4697 7.46967Z">
              </path>
              <path stroke="currentColor" d="M1.75 8H11" stroke-width="1.5" stroke-linecap="round"></path>
            </svg>
          </a>
        </div>
    </div>

  </div>
</div>

  </div>
</div>

You can customize it further with parameters:

<div class="mt-md-7 mb-9 mb-md-12">
  <div class="container-xl mx-auto p-responsive-blog">
<div class="TimelineItem flex-wrap">
  <div class="col-12 col-md-5 position-relative">
    <div class="TimelineItem-title mt-5 position-sticky d-flex">
      <div class="TimelineItem-badge"><svg height="16" class="octicon octicon-comment" viewBox="0 0 16 16" version="1.1" width="16" aria-hidden="true"><path d="M1 2.75C1 1.784 1.784 1 2.75 1h10.5c.966 0 1.75.784 1.75 1.75v7.5A1.75 1.75 0 0 1 13.25 12H9.06l-2.573 2.573A1.458 1.458 0 0 1 4 13.543V12H2.75A1.75 1.75 0 0 1 1 10.25Zm1.75-.25a.25.25 0 0 0-.25.25v7.5c0 .138.112.25.25.25h2a.75.75 0 0 1 .75.75v2.19l2.72-2.72a.749.749 0 0 1 .53-.22h4.5a.25.25 0 0 0 .25-.25v-7.5a.25.25 0 0 0-.25-.25Z"></path></svg></div>
      <div class="title">
        <div class="h2">
          <a href="/jekyll-theme-profile/2024/08/08/timeline.html">
            Showcase Your Content with the Jekyll Timeline Feature
          </a>
        </div>
        <div class="text-gray mb-2 ws-normal">Aug 08, 2024</div>
        <span class="IssueLabel IssueLabel--big color-bg-accent-emphasis color-fg-on-emphasis mr-1">news</span>
        <span class="IssueLabel IssueLabel--big color-bg-accent-emphasis color-fg-on-emphasis mr-1">includes</span>
      </div>
    </div>
  </div>
  <div class="col-12 col-md-7">
    <div class="pb-5 pt-0 py-md-7 ml-5 border-bottom">
        <div class="image-container">
          <img class="rounded-2" src="/assets/img/default.png" width="800" height="425" alt="Showcase Your Content with the Jekyll Timeline Feature" />
        </div>
        <div class="summary"> <p>In the world of web design, presentation is everything. Whether you’re a blogger, a developer, or a business owner, how you display your content can make a huge difference in engaging your audience. That’s where our Jekyll theme’s timeline feature comes in handy. Let’s dive into how this versatile tool can enhance your website and explore some exciting use cases.</p>
</div>
        <div class="more">
          <a href="/jekyll-theme-profile/2024/08/08/timeline.html" class="link-mktg arrow-target-mktg text-semibold f4-mktg">
            Contiue
            <svg xmlns="http://www.w3.org/2000/svg" class="octicon arrow-symbol-mktg" width="16" height="16"
              viewBox="0 0 16 16" fill="none">
              <path fill="currentColor"
                d="M7.28033 3.21967C6.98744 2.92678 6.51256 2.92678 6.21967 3.21967C5.92678 3.51256 5.92678 3.98744 6.21967 4.28033L7.28033 3.21967ZM11 8L11.5303 8.53033C11.8232 8.23744 11.8232 7.76256 11.5303 7.46967L11 8ZM6.21967 11.7197C5.92678 12.0126 5.92678 12.4874 6.21967 12.7803C6.51256 13.0732 6.98744 13.0732 7.28033 12.7803L6.21967 11.7197ZM6.21967 4.28033L10.4697 8.53033L11.5303 7.46967L7.28033 3.21967L6.21967 4.28033ZM10.4697 7.46967L6.21967 11.7197L7.28033 12.7803L11.5303 8.53033L10.4697 7.46967Z">
              </path>
              <path stroke="currentColor" d="M1.75 8H11" stroke-width="1.5" stroke-linecap="round"></path>
            </svg>
          </a>
        </div>
    </div>

  </div>
</div>

<div class="TimelineItem flex-wrap">
  <div class="col-12 col-md-5 position-relative">
    <div class="TimelineItem-title mt-5 position-sticky d-flex">
      <div class="TimelineItem-badge"><svg height="16" class="octicon octicon-comment" viewBox="0 0 16 16" version="1.1" width="16" aria-hidden="true"><path d="M1 2.75C1 1.784 1.784 1 2.75 1h10.5c.966 0 1.75.784 1.75 1.75v7.5A1.75 1.75 0 0 1 13.25 12H9.06l-2.573 2.573A1.458 1.458 0 0 1 4 13.543V12H2.75A1.75 1.75 0 0 1 1 10.25Zm1.75-.25a.25.25 0 0 0-.25.25v7.5c0 .138.112.25.25.25h2a.75.75 0 0 1 .75.75v2.19l2.72-2.72a.749.749 0 0 1 .53-.22h4.5a.25.25 0 0 0 .25-.25v-7.5a.25.25 0 0 0-.25-.25Z"></path></svg></div>
      <div class="title">
        <div class="h2">
          <a href="/jekyll-theme-profile/examples/2023/12/14/video.html">
            Empty post with video
          </a>
        </div>
        <div class="text-gray mb-2 ws-normal">Dec 14, 2023</div>
      </div>
    </div>
  </div>
  <div class="col-12 col-md-7">
    <div class="pb-5 pt-0 py-md-7 ml-5 border-bottom">
        <div id="Timeline-video-container" class="image-container">
          <iframe id="Timeline-video" src="https://www.youtube.com/embed/E4WlUXrJgy4?si=BhUjhwehMIZME9Cf" frameborder="0" height="inherited"
            width="inherited"></iframe>
        </div>
        <div class="summary"> 
</div>
    </div>

  </div>
</div>

<div class="TimelineItem flex-wrap">
  <div class="col-12 col-md-5 position-relative">
    <div class="TimelineItem-title mt-5 position-sticky d-flex">
      <div class="TimelineItem-badge"><svg height="16" class="octicon octicon-comment" viewBox="0 0 16 16" version="1.1" width="16" aria-hidden="true"><path d="M1 2.75C1 1.784 1.784 1 2.75 1h10.5c.966 0 1.75.784 1.75 1.75v7.5A1.75 1.75 0 0 1 13.25 12H9.06l-2.573 2.573A1.458 1.458 0 0 1 4 13.543V12H2.75A1.75 1.75 0 0 1 1 10.25Zm1.75-.25a.25.25 0 0 0-.25.25v7.5c0 .138.112.25.25.25h2a.75.75 0 0 1 .75.75v2.19l2.72-2.72a.749.749 0 0 1 .53-.22h4.5a.25.25 0 0 0 .25-.25v-7.5a.25.25 0 0 0-.25-.25Z"></path></svg></div>
      <div class="title">
        <div class="h2">
          <a href="/jekyll-theme-profile/examples/2023/11/21/empty.html">
            Empty post with image
          </a>
        </div>
        <div class="text-gray mb-2 ws-normal">Nov 21, 2023</div>
        <span class="IssueLabel IssueLabel--big color-bg-accent-emphasis color-fg-on-emphasis mr-1">sidebar</span>
      </div>
    </div>
  </div>
  <div class="col-12 col-md-7">
    <div class="pb-5 pt-0 py-md-7 ml-5 border-bottom">
        <div class="image-container">
          <img class="rounded-2" src="https://www.allisonthackston.com/assets/img/cover-1920.jpg" width="800" height="425" alt="Empty post with image" />
        </div>
        <div class="summary"> 
</div>
    </div>

  </div>
</div>

<div class="TimelineItem flex-wrap">
  <div class="col-12 col-md-5 position-relative">
    <div class="TimelineItem-title mt-5 position-sticky d-flex">
      <div class="TimelineItem-badge"><svg height="16" class="octicon octicon-comment" viewBox="0 0 16 16" version="1.1" width="16" aria-hidden="true"><path d="M1 2.75C1 1.784 1.784 1 2.75 1h10.5c.966 0 1.75.784 1.75 1.75v7.5A1.75 1.75 0 0 1 13.25 12H9.06l-2.573 2.573A1.458 1.458 0 0 1 4 13.543V12H2.75A1.75 1.75 0 0 1 1 10.25Zm1.75-.25a.25.25 0 0 0-.25.25v7.5c0 .138.112.25.25.25h2a.75.75 0 0 1 .75.75v2.19l2.72-2.72a.749.749 0 0 1 .53-.22h4.5a.25.25 0 0 0 .25-.25v-7.5a.25.25 0 0 0-.25-.25Z"></path></svg></div>
      <div class="title">
        <div class="h2">
          <a href="/jekyll-theme-profile/custom/2023/11/20/background.html">
            Post with custom background
          </a>
        </div>
        <div class="text-gray mb-2 ws-normal">Nov 20, 2023</div>
        <span class="IssueLabel IssueLabel--big color-bg-accent-emphasis color-fg-on-emphasis mr-1">style</span>
        <span class="IssueLabel IssueLabel--big color-bg-accent-emphasis color-fg-on-emphasis mr-1">background</span>
      </div>
    </div>
  </div>
  <div class="col-12 col-md-7">
    <div class="pb-5 pt-0 py-md-7 ml-5 border-bottom">
        <div class="image-container">
          <img class="rounded-2" src="/assets/img/default.png" width="800" height="425" alt="Post with custom background" />
        </div>
        <div class="summary"> <p>You’ll find this post in your <code class="language-plaintext highlighter-rouge">_posts</code> directory. Go ahead and edit it and re-build the site to see your changes. You can rebuild the site in many different ways, but the most common way is to run <code class="language-plaintext highlighter-rouge">jekyll serve</code>, which launches a web server and auto-regenerates your site when a file is updated.</p>
</div>
        <div class="more">
          <a href="/jekyll-theme-profile/custom/2023/11/20/background.html" class="link-mktg arrow-target-mktg text-semibold f4-mktg">
            Contiue
            <svg xmlns="http://www.w3.org/2000/svg" class="octicon arrow-symbol-mktg" width="16" height="16"
              viewBox="0 0 16 16" fill="none">
              <path fill="currentColor"
                d="M7.28033 3.21967C6.98744 2.92678 6.51256 2.92678 6.21967 3.21967C5.92678 3.51256 5.92678 3.98744 6.21967 4.28033L7.28033 3.21967ZM11 8L11.5303 8.53033C11.8232 8.23744 11.8232 7.76256 11.5303 7.46967L11 8ZM6.21967 11.7197C5.92678 12.0126 5.92678 12.4874 6.21967 12.7803C6.51256 13.0732 6.98744 13.0732 7.28033 12.7803L6.21967 11.7197ZM6.21967 4.28033L10.4697 8.53033L11.5303 7.46967L7.28033 3.21967L6.21967 4.28033ZM10.4697 7.46967L6.21967 11.7197L7.28033 12.7803L11.5303 8.53033L10.4697 7.46967Z">
              </path>
              <path stroke="currentColor" d="M1.75 8H11" stroke-width="1.5" stroke-linecap="round"></path>
            </svg>
          </a>
        </div>
    </div>

  </div>
</div>

<div class="TimelineItem flex-wrap">
  <div class="col-12 col-md-5 position-relative">
    <div class="TimelineItem-title mt-5 position-sticky d-flex">
      <div class="TimelineItem-badge"><svg height="16" class="octicon octicon-comment" viewBox="0 0 16 16" version="1.1" width="16" aria-hidden="true"><path d="M1 2.75C1 1.784 1.784 1 2.75 1h10.5c.966 0 1.75.784 1.75 1.75v7.5A1.75 1.75 0 0 1 13.25 12H9.06l-2.573 2.573A1.458 1.458 0 0 1 4 13.543V12H2.75A1.75 1.75 0 0 1 1 10.25Zm1.75-.25a.25.25 0 0 0-.25.25v7.5c0 .138.112.25.25.25h2a.75.75 0 0 1 .75.75v2.19l2.72-2.72a.749.749 0 0 1 .53-.22h4.5a.25.25 0 0 0 .25-.25v-7.5a.25.25 0 0 0-.25-.25Z"></path></svg></div>
      <div class="title">
        <div class="h2">
          <a href="/jekyll-theme-profile/style/2023/11/10/post-appbar.html">
            This is a appbar post style
          </a>
        </div>
        <div class="authors-wrap text-bold mb-2 mr-3 ">George P. Burdell</div>
        <div class="text-gray mb-2 ws-normal">Nov 10, 2023</div>
        <span class="IssueLabel IssueLabel--big color-bg-accent-emphasis color-fg-on-emphasis mr-1">style</span>
        <span class="IssueLabel IssueLabel--big color-bg-accent-emphasis color-fg-on-emphasis mr-1">appbar</span>
      </div>
    </div>
  </div>
  <div class="col-12 col-md-7">
    <div class="pb-5 pt-0 py-md-7 ml-5 border-bottom">
        <div class="image-container">
          <img class="rounded-2" src="https://github.blog/wp-content/uploads/2023/10/hero-light.jpg" width="800" height="425" alt="This is a appbar post style" />
        </div>
        <div class="summary"> <p>Eos eu docendi tractatos sapientem, brute option menandri in vix, quando vivendo accommodare te ius. Nec melius fastidii constituam id, viderer theophrastus ad sit, hinc semper periculis cum id. Noluisse postulant assentior est in, no choro sadipscing repudiandae vix. Vis in euismod delenit dignissim. Ex quod nostrum sit, suas decore animal id ius, nobis solet detracto quo te.</p>
</div>
        <div class="more">
          <a href="/jekyll-theme-profile/style/2023/11/10/post-appbar.html" class="link-mktg arrow-target-mktg text-semibold f4-mktg">
            Contiue
            <svg xmlns="http://www.w3.org/2000/svg" class="octicon arrow-symbol-mktg" width="16" height="16"
              viewBox="0 0 16 16" fill="none">
              <path fill="currentColor"
                d="M7.28033 3.21967C6.98744 2.92678 6.51256 2.92678 6.21967 3.21967C5.92678 3.51256 5.92678 3.98744 6.21967 4.28033L7.28033 3.21967ZM11 8L11.5303 8.53033C11.8232 8.23744 11.8232 7.76256 11.5303 7.46967L11 8ZM6.21967 11.7197C5.92678 12.0126 5.92678 12.4874 6.21967 12.7803C6.51256 13.0732 6.98744 13.0732 7.28033 12.7803L6.21967 11.7197ZM6.21967 4.28033L10.4697 8.53033L11.5303 7.46967L7.28033 3.21967L6.21967 4.28033ZM10.4697 7.46967L6.21967 11.7197L7.28033 12.7803L11.5303 8.53033L10.4697 7.46967Z">
              </path>
              <path stroke="currentColor" d="M1.75 8H11" stroke-width="1.5" stroke-linecap="round"></path>
            </svg>
          </a>
        </div>
    </div>

  </div>
</div>

  </div>
  <div class="container-xl mx-auto p-responsive-blog mt-6 mt-md-8 ">
    <div class="d-flex gutter-spacious">
      <div class="col-12 col-md-7 offset-md-5">
        <a href="/jekyll-theme-profile/articles/"
          class="Link--primary arrow-target-mktg text-semibold btn ml-5">View all <svg height="16" class="octicon octicon-chevron-right" viewBox="0 0 16 16" version="1.1" width="16" aria-hidden="true"><path d="M6.22 3.22a.75.75 0 0 1 1.06 0l4.25 4.25a.75.75 0 0 1 0 1.06l-4.25 4.25a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042L9.94 8 6.22 4.28a.75.75 0 0 1 0-1.06Z"></path></svg></a>
      </div>
    </div>
  </div>
</div>

This flexibility allows you to tailor the timeline to your specific needs.

Use Case 1: Company News and Updates

For businesses, the timeline can serve as a dynamic news feed:

Share company milestones: Highlight key achievements, new partnerships, or important announcements.
Showcase growth: Present your company’s journey in a visual, chronological format.
Engage stakeholders: Keep investors, employees, and customers informed about your latest developments.

Example:

<div class="mt-md-7 mb-9 mb-md-12">
  <div class="container-xl mx-auto p-responsive-blog">
<div class="TimelineItem flex-wrap">
  <div class="col-12 col-md-5 position-relative">
    <div class="TimelineItem-title mt-5 position-sticky d-flex">
      <div class="TimelineItem-badge"><svg height="16" class="octicon octicon-comment" viewBox="0 0 16 16" version="1.1" width="16" aria-hidden="true"><path d="M1 2.75C1 1.784 1.784 1 2.75 1h10.5c.966 0 1.75.784 1.75 1.75v7.5A1.75 1.75 0 0 1 13.25 12H9.06l-2.573 2.573A1.458 1.458 0 0 1 4 13.543V12H2.75A1.75 1.75 0 0 1 1 10.25Zm1.75-.25a.25.25 0 0 0-.25.25v7.5c0 .138.112.25.25.25h2a.75.75 0 0 1 .75.75v2.19l2.72-2.72a.749.749 0 0 1 .53-.22h4.5a.25.25 0 0 0 .25-.25v-7.5a.25.25 0 0 0-.25-.25Z"></path></svg></div>
      <div class="title">
        <div class="h2">
          <a href="/jekyll-theme-profile/2024/08/08/timeline.html">
            Showcase Your Content with the Jekyll Timeline Feature
          </a>
        </div>
        <div class="text-gray mb-2 ws-normal">Aug 08, 2024</div>
        <span class="IssueLabel IssueLabel--big color-bg-accent-emphasis color-fg-on-emphasis mr-1">news</span>
        <span class="IssueLabel IssueLabel--big color-bg-accent-emphasis color-fg-on-emphasis mr-1">includes</span>
      </div>
    </div>
  </div>
  <div class="col-12 col-md-7">
    <div class="pb-5 pt-0 py-md-7 ml-5 border-bottom">
        <div class="image-container">
          <img class="rounded-2" src="/assets/img/default.png" width="800" height="425" alt="Showcase Your Content with the Jekyll Timeline Feature" />
        </div>
        <div class="summary"> <p>In the world of web design, presentation is everything. Whether you’re a blogger, a developer, or a business owner, how you display your content can make a huge difference in engaging your audience. That’s where our Jekyll theme’s timeline feature comes in handy. Let’s dive into how this versatile tool can enhance your website and explore some exciting use cases.</p>
</div>
        <div class="more">
          <a href="/jekyll-theme-profile/2024/08/08/timeline.html" class="link-mktg arrow-target-mktg text-semibold f4-mktg">
            Contiue
            <svg xmlns="http://www.w3.org/2000/svg" class="octicon arrow-symbol-mktg" width="16" height="16"
              viewBox="0 0 16 16" fill="none">
              <path fill="currentColor"
                d="M7.28033 3.21967C6.98744 2.92678 6.51256 2.92678 6.21967 3.21967C5.92678 3.51256 5.92678 3.98744 6.21967 4.28033L7.28033 3.21967ZM11 8L11.5303 8.53033C11.8232 8.23744 11.8232 7.76256 11.5303 7.46967L11 8ZM6.21967 11.7197C5.92678 12.0126 5.92678 12.4874 6.21967 12.7803C6.51256 13.0732 6.98744 13.0732 7.28033 12.7803L6.21967 11.7197ZM6.21967 4.28033L10.4697 8.53033L11.5303 7.46967L7.28033 3.21967L6.21967 4.28033ZM10.4697 7.46967L6.21967 11.7197L7.28033 12.7803L11.5303 8.53033L10.4697 7.46967Z">
              </path>
              <path stroke="currentColor" d="M1.75 8H11" stroke-width="1.5" stroke-linecap="round"></path>
            </svg>
          </a>
        </div>
    </div>

  </div>
</div>

<div class="TimelineItem flex-wrap">
  <div class="col-12 col-md-5 position-relative">
    <div class="TimelineItem-title mt-5 position-sticky d-flex">
      <div class="TimelineItem-badge"><svg height="16" class="octicon octicon-comment" viewBox="0 0 16 16" version="1.1" width="16" aria-hidden="true"><path d="M1 2.75C1 1.784 1.784 1 2.75 1h10.5c.966 0 1.75.784 1.75 1.75v7.5A1.75 1.75 0 0 1 13.25 12H9.06l-2.573 2.573A1.458 1.458 0 0 1 4 13.543V12H2.75A1.75 1.75 0 0 1 1 10.25Zm1.75-.25a.25.25 0 0 0-.25.25v7.5c0 .138.112.25.25.25h2a.75.75 0 0 1 .75.75v2.19l2.72-2.72a.749.749 0 0 1 .53-.22h4.5a.25.25 0 0 0 .25-.25v-7.5a.25.25 0 0 0-.25-.25Z"></path></svg></div>
      <div class="title">
        <div class="h2">
          <a href="/jekyll-theme-profile/examples/2023/12/14/video.html">
            Empty post with video
          </a>
        </div>
        <div class="text-gray mb-2 ws-normal">Dec 14, 2023</div>
      </div>
    </div>
  </div>
  <div class="col-12 col-md-7">
    <div class="pb-5 pt-0 py-md-7 ml-5 border-bottom">
        <div id="Timeline-video-container" class="image-container">
          <iframe id="Timeline-video" src="https://www.youtube.com/embed/E4WlUXrJgy4?si=BhUjhwehMIZME9Cf" frameborder="0" height="inherited"
            width="inherited"></iframe>
        </div>
        <div class="summary"> 
</div>
    </div>

  </div>
</div>

<div class="TimelineItem flex-wrap">
  <div class="col-12 col-md-5 position-relative">
    <div class="TimelineItem-title mt-5 position-sticky d-flex">
      <div class="TimelineItem-badge"><svg height="16" class="octicon octicon-comment" viewBox="0 0 16 16" version="1.1" width="16" aria-hidden="true"><path d="M1 2.75C1 1.784 1.784 1 2.75 1h10.5c.966 0 1.75.784 1.75 1.75v7.5A1.75 1.75 0 0 1 13.25 12H9.06l-2.573 2.573A1.458 1.458 0 0 1 4 13.543V12H2.75A1.75 1.75 0 0 1 1 10.25Zm1.75-.25a.25.25 0 0 0-.25.25v7.5c0 .138.112.25.25.25h2a.75.75 0 0 1 .75.75v2.19l2.72-2.72a.749.749 0 0 1 .53-.22h4.5a.25.25 0 0 0 .25-.25v-7.5a.25.25 0 0 0-.25-.25Z"></path></svg></div>
      <div class="title">
        <div class="h2">
          <a href="/jekyll-theme-profile/examples/2023/11/21/empty.html">
            Empty post with image
          </a>
        </div>
        <div class="text-gray mb-2 ws-normal">Nov 21, 2023</div>
        <span class="IssueLabel IssueLabel--big color-bg-accent-emphasis color-fg-on-emphasis mr-1">sidebar</span>
      </div>
    </div>
  </div>
  <div class="col-12 col-md-7">
    <div class="pb-5 pt-0 py-md-7 ml-5 border-bottom">
        <div class="image-container">
          <img class="rounded-2" src="https://www.allisonthackston.com/assets/img/cover-1920.jpg" width="800" height="425" alt="Empty post with image" />
        </div>
        <div class="summary"> 
</div>
    </div>

  </div>
</div>

<div class="TimelineItem flex-wrap">
  <div class="col-12 col-md-5 position-relative">
    <div class="TimelineItem-title mt-5 position-sticky d-flex">
      <div class="TimelineItem-badge"><svg height="16" class="octicon octicon-comment" viewBox="0 0 16 16" version="1.1" width="16" aria-hidden="true"><path d="M1 2.75C1 1.784 1.784 1 2.75 1h10.5c.966 0 1.75.784 1.75 1.75v7.5A1.75 1.75 0 0 1 13.25 12H9.06l-2.573 2.573A1.458 1.458 0 0 1 4 13.543V12H2.75A1.75 1.75 0 0 1 1 10.25Zm1.75-.25a.25.25 0 0 0-.25.25v7.5c0 .138.112.25.25.25h2a.75.75 0 0 1 .75.75v2.19l2.72-2.72a.749.749 0 0 1 .53-.22h4.5a.25.25 0 0 0 .25-.25v-7.5a.25.25 0 0 0-.25-.25Z"></path></svg></div>
      <div class="title">
        <div class="h2">
          <a href="/jekyll-theme-profile/custom/2023/11/20/background.html">
            Post with custom background
          </a>
        </div>
        <div class="text-gray mb-2 ws-normal">Nov 20, 2023</div>
        <span class="IssueLabel IssueLabel--big color-bg-accent-emphasis color-fg-on-emphasis mr-1">style</span>
        <span class="IssueLabel IssueLabel--big color-bg-accent-emphasis color-fg-on-emphasis mr-1">background</span>
      </div>
    </div>
  </div>
  <div class="col-12 col-md-7">
    <div class="pb-5 pt-0 py-md-7 ml-5 border-bottom">
        <div class="image-container">
          <img class="rounded-2" src="/assets/img/default.png" width="800" height="425" alt="Post with custom background" />
        </div>
        <div class="summary"> <p>You’ll find this post in your <code class="language-plaintext highlighter-rouge">_posts</code> directory. Go ahead and edit it and re-build the site to see your changes. You can rebuild the site in many different ways, but the most common way is to run <code class="language-plaintext highlighter-rouge">jekyll serve</code>, which launches a web server and auto-regenerates your site when a file is updated.</p>
</div>
        <div class="more">
          <a href="/jekyll-theme-profile/custom/2023/11/20/background.html" class="link-mktg arrow-target-mktg text-semibold f4-mktg">
            Contiue
            <svg xmlns="http://www.w3.org/2000/svg" class="octicon arrow-symbol-mktg" width="16" height="16"
              viewBox="0 0 16 16" fill="none">
              <path fill="currentColor"
                d="M7.28033 3.21967C6.98744 2.92678 6.51256 2.92678 6.21967 3.21967C5.92678 3.51256 5.92678 3.98744 6.21967 4.28033L7.28033 3.21967ZM11 8L11.5303 8.53033C11.8232 8.23744 11.8232 7.76256 11.5303 7.46967L11 8ZM6.21967 11.7197C5.92678 12.0126 5.92678 12.4874 6.21967 12.7803C6.51256 13.0732 6.98744 13.0732 7.28033 12.7803L6.21967 11.7197ZM6.21967 4.28033L10.4697 8.53033L11.5303 7.46967L7.28033 3.21967L6.21967 4.28033ZM10.4697 7.46967L6.21967 11.7197L7.28033 12.7803L11.5303 8.53033L10.4697 7.46967Z">
              </path>
              <path stroke="currentColor" d="M1.75 8H11" stroke-width="1.5" stroke-linecap="round"></path>
            </svg>
          </a>
        </div>
    </div>

  </div>
</div>

<div class="TimelineItem flex-wrap">
  <div class="col-12 col-md-5 position-relative">
    <div class="TimelineItem-title mt-5 position-sticky d-flex">
      <div class="TimelineItem-badge"><svg height="16" class="octicon octicon-comment" viewBox="0 0 16 16" version="1.1" width="16" aria-hidden="true"><path d="M1 2.75C1 1.784 1.784 1 2.75 1h10.5c.966 0 1.75.784 1.75 1.75v7.5A1.75 1.75 0 0 1 13.25 12H9.06l-2.573 2.573A1.458 1.458 0 0 1 4 13.543V12H2.75A1.75 1.75 0 0 1 1 10.25Zm1.75-.25a.25.25 0 0 0-.25.25v7.5c0 .138.112.25.25.25h2a.75.75 0 0 1 .75.75v2.19l2.72-2.72a.749.749 0 0 1 .53-.22h4.5a.25.25 0 0 0 .25-.25v-7.5a.25.25 0 0 0-.25-.25Z"></path></svg></div>
      <div class="title">
        <div class="h2">
          <a href="/jekyll-theme-profile/style/2023/11/10/post-appbar.html">
            This is a appbar post style
          </a>
        </div>
        <div class="authors-wrap text-bold mb-2 mr-3 ">George P. Burdell</div>
        <div class="text-gray mb-2 ws-normal">Nov 10, 2023</div>
        <span class="IssueLabel IssueLabel--big color-bg-accent-emphasis color-fg-on-emphasis mr-1">style</span>
        <span class="IssueLabel IssueLabel--big color-bg-accent-emphasis color-fg-on-emphasis mr-1">appbar</span>
      </div>
    </div>
  </div>
  <div class="col-12 col-md-7">
    <div class="pb-5 pt-0 py-md-7 ml-5 border-bottom">
        <div class="image-container">
          <img class="rounded-2" src="https://github.blog/wp-content/uploads/2023/10/hero-light.jpg" width="800" height="425" alt="This is a appbar post style" />
        </div>
        <div class="summary"> <p>Eos eu docendi tractatos sapientem, brute option menandri in vix, quando vivendo accommodare te ius. Nec melius fastidii constituam id, viderer theophrastus ad sit, hinc semper periculis cum id. Noluisse postulant assentior est in, no choro sadipscing repudiandae vix. Vis in euismod delenit dignissim. Ex quod nostrum sit, suas decore animal id ius, nobis solet detracto quo te.</p>
</div>
        <div class="more">
          <a href="/jekyll-theme-profile/style/2023/11/10/post-appbar.html" class="link-mktg arrow-target-mktg text-semibold f4-mktg">
            Contiue
            <svg xmlns="http://www.w3.org/2000/svg" class="octicon arrow-symbol-mktg" width="16" height="16"
              viewBox="0 0 16 16" fill="none">
              <path fill="currentColor"
                d="M7.28033 3.21967C6.98744 2.92678 6.51256 2.92678 6.21967 3.21967C5.92678 3.51256 5.92678 3.98744 6.21967 4.28033L7.28033 3.21967ZM11 8L11.5303 8.53033C11.8232 8.23744 11.8232 7.76256 11.5303 7.46967L11 8ZM6.21967 11.7197C5.92678 12.0126 5.92678 12.4874 6.21967 12.7803C6.51256 13.0732 6.98744 13.0732 7.28033 12.7803L6.21967 11.7197ZM6.21967 4.28033L10.4697 8.53033L11.5303 7.46967L7.28033 3.21967L6.21967 4.28033ZM10.4697 7.46967L6.21967 11.7197L7.28033 12.7803L11.5303 8.53033L10.4697 7.46967Z">
              </path>
              <path stroke="currentColor" d="M1.75 8H11" stroke-width="1.5" stroke-linecap="round"></path>
            </svg>
          </a>
        </div>
    </div>

  </div>
</div>

<div class="TimelineItem flex-wrap">
  <div class="col-12 col-md-5 position-relative">
    <div class="TimelineItem-title mt-5 position-sticky d-flex">
      <div class="TimelineItem-badge"><svg height="16" class="octicon octicon-comment" viewBox="0 0 16 16" version="1.1" width="16" aria-hidden="true"><path d="M1 2.75C1 1.784 1.784 1 2.75 1h10.5c.966 0 1.75.784 1.75 1.75v7.5A1.75 1.75 0 0 1 13.25 12H9.06l-2.573 2.573A1.458 1.458 0 0 1 4 13.543V12H2.75A1.75 1.75 0 0 1 1 10.25Zm1.75-.25a.25.25 0 0 0-.25.25v7.5c0 .138.112.25.25.25h2a.75.75 0 0 1 .75.75v2.19l2.72-2.72a.749.749 0 0 1 .53-.22h4.5a.25.25 0 0 0 .25-.25v-7.5a.25.25 0 0 0-.25-.25Z"></path></svg></div>
      <div class="title">
        <div class="h2">
          <a href="/jekyll-theme-profile/style/2023/07/16/post-sidebar.html">
            This is a sidebar post style
          </a>
        </div>
        <div class="text-gray mb-2 ws-normal">Jul 16, 2023</div>
        <span class="IssueLabel IssueLabel--big color-bg-accent-emphasis color-fg-on-emphasis mr-1">style</span>
        <span class="IssueLabel IssueLabel--big color-bg-accent-emphasis color-fg-on-emphasis mr-1">sidebar</span>
      </div>
    </div>
  </div>
  <div class="col-12 col-md-7">
    <div class="pb-5 pt-0 py-md-7 ml-5 border-bottom">
        <div class="image-container">
          <img class="rounded-2" src="https://github.blog/wp-content/uploads/2023/08/1200x630-AI-Unfurl-DARK-Inverto.png" width="800" height="425" alt="This is a sidebar post style" />
        </div>
        <div class="summary"> <p>Eos eu docendi tractatos sapientem, brute option menandri in vix, quando vivendo accommodare te ius. Nec melius fastidii constituam id, viderer theophrastus ad sit, hinc semper periculis cum id. Noluisse postulant assentior est in, no choro sadipscing repudiandae vix. Vis in euismod delenit dignissim. Ex quod nostrum sit, suas decore animal id ius, nobis solet detracto quo te.</p>
</div>
        <div class="more">
          <a href="/jekyll-theme-profile/style/2023/07/16/post-sidebar.html" class="link-mktg arrow-target-mktg text-semibold f4-mktg">
            Contiue
            <svg xmlns="http://www.w3.org/2000/svg" class="octicon arrow-symbol-mktg" width="16" height="16"
              viewBox="0 0 16 16" fill="none">
              <path fill="currentColor"
                d="M7.28033 3.21967C6.98744 2.92678 6.51256 2.92678 6.21967 3.21967C5.92678 3.51256 5.92678 3.98744 6.21967 4.28033L7.28033 3.21967ZM11 8L11.5303 8.53033C11.8232 8.23744 11.8232 7.76256 11.5303 7.46967L11 8ZM6.21967 11.7197C5.92678 12.0126 5.92678 12.4874 6.21967 12.7803C6.51256 13.0732 6.98744 13.0732 7.28033 12.7803L6.21967 11.7197ZM6.21967 4.28033L10.4697 8.53033L11.5303 7.46967L7.28033 3.21967L6.21967 4.28033ZM10.4697 7.46967L6.21967 11.7197L7.28033 12.7803L11.5303 8.53033L10.4697 7.46967Z">
              </path>
              <path stroke="currentColor" d="M1.75 8H11" stroke-width="1.5" stroke-linecap="round"></path>
            </svg>
          </a>
        </div>
    </div>

  </div>
</div>

<div class="TimelineItem flex-wrap">
  <div class="col-12 col-md-5 position-relative">
    <div class="TimelineItem-title mt-5 position-sticky d-flex">
      <div class="TimelineItem-badge"><svg height="16" class="octicon octicon-comment" viewBox="0 0 16 16" version="1.1" width="16" aria-hidden="true"><path d="M1 2.75C1 1.784 1.784 1 2.75 1h10.5c.966 0 1.75.784 1.75 1.75v7.5A1.75 1.75 0 0 1 13.25 12H9.06l-2.573 2.573A1.458 1.458 0 0 1 4 13.543V12H2.75A1.75 1.75 0 0 1 1 10.25Zm1.75-.25a.25.25 0 0 0-.25.25v7.5c0 .138.112.25.25.25h2a.75.75 0 0 1 .75.75v2.19l2.72-2.72a.749.749 0 0 1 .53-.22h4.5a.25.25 0 0 0 .25-.25v-7.5a.25.25 0 0 0-.25-.25Z"></path></svg></div>
      <div class="title">
        <div class="h2">
          <a href="/jekyll-theme-profile/style/2023/07/16/post-stacked.html">
            This is a stacked post style
          </a>
        </div>
        <div class="text-gray mb-2 ws-normal">Jul 16, 2023</div>
        <span class="IssueLabel IssueLabel--big color-bg-accent-emphasis color-fg-on-emphasis mr-1">style</span>
        <span class="IssueLabel IssueLabel--big color-bg-accent-emphasis color-fg-on-emphasis mr-1">stacked</span>
      </div>
    </div>
  </div>
  <div class="col-12 col-md-7">
    <div class="pb-5 pt-0 py-md-7 ml-5 border-bottom">
        <div class="image-container">
          <img class="rounded-2" src="https://github.blog/wp-content/uploads/2023/05/1200.630-Community-wLogo-e1698634509856.png" width="800" height="425" alt="This is a stacked post style" />
        </div>
        <div class="summary"> <p>Eos eu docendi tractatos sapientem, brute option menandri in vix, quando vivendo accommodare te ius. Nec melius fastidii constituam id, viderer theophrastus ad sit, hinc semper periculis cum id. Noluisse postulant assentior est in, no choro sadipscing repudiandae vix. Vis in euismod delenit dignissim. Ex quod nostrum sit, suas decore animal id ius, nobis solet detracto quo te.</p>
</div>
        <div class="more">
          <a href="/jekyll-theme-profile/style/2023/07/16/post-stacked.html" class="link-mktg arrow-target-mktg text-semibold f4-mktg">
            Contiue
            <svg xmlns="http://www.w3.org/2000/svg" class="octicon arrow-symbol-mktg" width="16" height="16"
              viewBox="0 0 16 16" fill="none">
              <path fill="currentColor"
                d="M7.28033 3.21967C6.98744 2.92678 6.51256 2.92678 6.21967 3.21967C5.92678 3.51256 5.92678 3.98744 6.21967 4.28033L7.28033 3.21967ZM11 8L11.5303 8.53033C11.8232 8.23744 11.8232 7.76256 11.5303 7.46967L11 8ZM6.21967 11.7197C5.92678 12.0126 5.92678 12.4874 6.21967 12.7803C6.51256 13.0732 6.98744 13.0732 7.28033 12.7803L6.21967 11.7197ZM6.21967 4.28033L10.4697 8.53033L11.5303 7.46967L7.28033 3.21967L6.21967 4.28033ZM10.4697 7.46967L6.21967 11.7197L7.28033 12.7803L11.5303 8.53033L10.4697 7.46967Z">
              </path>
              <path stroke="currentColor" d="M1.75 8H11" stroke-width="1.5" stroke-linecap="round"></path>
            </svg>
          </a>
        </div>
    </div>

  </div>
</div>

<div class="TimelineItem flex-wrap">
  <div class="col-12 col-md-5 position-relative">
    <div class="TimelineItem-title mt-5 position-sticky d-flex">
      <div class="TimelineItem-badge"><svg height="16" class="octicon octicon-comment" viewBox="0 0 16 16" version="1.1" width="16" aria-hidden="true"><path d="M1 2.75C1 1.784 1.784 1 2.75 1h10.5c.966 0 1.75.784 1.75 1.75v7.5A1.75 1.75 0 0 1 13.25 12H9.06l-2.573 2.573A1.458 1.458 0 0 1 4 13.543V12H2.75A1.75 1.75 0 0 1 1 10.25Zm1.75-.25a.25.25 0 0 0-.25.25v7.5c0 .138.112.25.25.25h2a.75.75 0 0 1 .75.75v2.19l2.72-2.72a.749.749 0 0 1 .53-.22h4.5a.25.25 0 0 0 .25-.25v-7.5a.25.25 0 0 0-.25-.25Z"></path></svg></div>
      <div class="title">
        <div class="h2">
          <a href="/jekyll-theme-profile/style/2023/07/16/post-topbar.html">
            This is a topbar post style
          </a>
        </div>
        <div class="authors-wrap text-bold mb-2 mr-3 ">George P. Burdell</div>
        <div class="text-gray mb-2 ws-normal">Jul 16, 2023</div>
        <span class="IssueLabel IssueLabel--big color-bg-accent-emphasis color-fg-on-emphasis mr-1">style</span>
        <span class="IssueLabel IssueLabel--big color-bg-accent-emphasis color-fg-on-emphasis mr-1">topbar</span>
      </div>
    </div>
  </div>
  <div class="col-12 col-md-7">
    <div class="pb-5 pt-0 py-md-7 ml-5 border-bottom">
        <div class="image-container">
          <img class="rounded-2" src="https://github.blog/wp-content/uploads/2023/10/hero-light.jpg" width="800" height="425" alt="This is a topbar post style" />
        </div>
        <div class="summary"> <p>Eos eu docendi tractatos sapientem, brute option menandri in vix, quando vivendo accommodare te ius. Nec melius fastidii constituam id, viderer theophrastus ad sit, hinc semper periculis cum id. Noluisse postulant assentior est in, no choro sadipscing repudiandae vix. Vis in euismod delenit dignissim. Ex quod nostrum sit, suas decore animal id ius, nobis solet detracto quo te.</p>
</div>
        <div class="more">
          <a href="/jekyll-theme-profile/style/2023/07/16/post-topbar.html" class="link-mktg arrow-target-mktg text-semibold f4-mktg">
            Contiue
            <svg xmlns="http://www.w3.org/2000/svg" class="octicon arrow-symbol-mktg" width="16" height="16"
              viewBox="0 0 16 16" fill="none">
              <path fill="currentColor"
                d="M7.28033 3.21967C6.98744 2.92678 6.51256 2.92678 6.21967 3.21967C5.92678 3.51256 5.92678 3.98744 6.21967 4.28033L7.28033 3.21967ZM11 8L11.5303 8.53033C11.8232 8.23744 11.8232 7.76256 11.5303 7.46967L11 8ZM6.21967 11.7197C5.92678 12.0126 5.92678 12.4874 6.21967 12.7803C6.51256 13.0732 6.98744 13.0732 7.28033 12.7803L6.21967 11.7197ZM6.21967 4.28033L10.4697 8.53033L11.5303 7.46967L7.28033 3.21967L6.21967 4.28033ZM10.4697 7.46967L6.21967 11.7197L7.28033 12.7803L11.5303 8.53033L10.4697 7.46967Z">
              </path>
              <path stroke="currentColor" d="M1.75 8H11" stroke-width="1.5" stroke-linecap="round"></path>
            </svg>
          </a>
        </div>
    </div>

  </div>
</div>

<div class="TimelineItem flex-wrap">
  <div class="col-12 col-md-5 position-relative">
    <div class="TimelineItem-title mt-5 position-sticky d-flex">
      <div class="TimelineItem-badge"><svg height="16" class="octicon octicon-comment" viewBox="0 0 16 16" version="1.1" width="16" aria-hidden="true"><path d="M1 2.75C1 1.784 1.784 1 2.75 1h10.5c.966 0 1.75.784 1.75 1.75v7.5A1.75 1.75 0 0 1 13.25 12H9.06l-2.573 2.573A1.458 1.458 0 0 1 4 13.543V12H2.75A1.75 1.75 0 0 1 1 10.25Zm1.75-.25a.25.25 0 0 0-.25.25v7.5c0 .138.112.25.25.25h2a.75.75 0 0 1 .75.75v2.19l2.72-2.72a.749.749 0 0 1 .53-.22h4.5a.25.25 0 0 0 .25-.25v-7.5a.25.25 0 0 0-.25-.25Z"></path></svg></div>
      <div class="title">
        <div class="h2">
          <a href="/jekyll-theme-profile/examples/2019/01/29/hello-world.html">
            Welcome to Jekyll!
          </a>
        </div>
        <div class="text-gray mb-2 ws-normal">Jan 29, 2019</div>
      </div>
    </div>
  </div>
  <div class="col-12 col-md-7">
    <div class="pb-5 pt-0 py-md-7 ml-5 border-bottom">
        <div class="image-container">
          <img class="rounded-2" src="/assets/img/default.png" width="800" height="425" alt="Welcome to Jekyll!" />
        </div>
        <div class="summary"> <p>You’ll find this post in your <code class="language-plaintext highlighter-rouge">_posts</code> directory. Go ahead and edit it and re-build the site to see your changes. You can rebuild the site in many different ways, but the most common way is to run <code class="language-plaintext highlighter-rouge">jekyll serve</code>, which launches a web server and auto-regenerates your site when a file is updated.</p>
</div>
        <div class="more">
          <a href="/jekyll-theme-profile/examples/2019/01/29/hello-world.html" class="link-mktg arrow-target-mktg text-semibold f4-mktg">
            Contiue
            <svg xmlns="http://www.w3.org/2000/svg" class="octicon arrow-symbol-mktg" width="16" height="16"
              viewBox="0 0 16 16" fill="none">
              <path fill="currentColor"
                d="M7.28033 3.21967C6.98744 2.92678 6.51256 2.92678 6.21967 3.21967C5.92678 3.51256 5.92678 3.98744 6.21967 4.28033L7.28033 3.21967ZM11 8L11.5303 8.53033C11.8232 8.23744 11.8232 7.76256 11.5303 7.46967L11 8ZM6.21967 11.7197C5.92678 12.0126 5.92678 12.4874 6.21967 12.7803C6.51256 13.0732 6.98744 13.0732 7.28033 12.7803L6.21967 11.7197ZM6.21967 4.28033L10.4697 8.53033L11.5303 7.46967L7.28033 3.21967L6.21967 4.28033ZM10.4697 7.46967L6.21967 11.7197L7.28033 12.7803L11.5303 8.53033L10.4697 7.46967Z">
              </path>
              <path stroke="currentColor" d="M1.75 8H11" stroke-width="1.5" stroke-linecap="round"></path>
            </svg>
          </a>
        </div>
    </div>

  </div>
</div>

<div class="TimelineItem flex-wrap">
  <div class="col-12 col-md-5 position-relative">
    <div class="TimelineItem-title mt-5 position-sticky d-flex">
      <div class="TimelineItem-badge"><svg height="16" class="octicon octicon-comment" viewBox="0 0 16 16" version="1.1" width="16" aria-hidden="true"><path d="M1 2.75C1 1.784 1.784 1 2.75 1h10.5c.966 0 1.75.784 1.75 1.75v7.5A1.75 1.75 0 0 1 13.25 12H9.06l-2.573 2.573A1.458 1.458 0 0 1 4 13.543V12H2.75A1.75 1.75 0 0 1 1 10.25Zm1.75-.25a.25.25 0 0 0-.25.25v7.5c0 .138.112.25.25.25h2a.75.75 0 0 1 .75.75v2.19l2.72-2.72a.749.749 0 0 1 .53-.22h4.5a.25.25 0 0 0 .25-.25v-7.5a.25.25 0 0 0-.25-.25Z"></path></svg></div>
      <div class="title">
        <div class="h2">
          <a href="/jekyll-theme-profile/examples/2019/01/29/syntax-highlighter.html">
            Syntax highlighter
          </a>
        </div>
        <div class="text-gray mb-2 ws-normal">Jan 29, 2019</div>
      </div>
    </div>
  </div>
  <div class="col-12 col-md-7">
    <div class="pb-5 pt-0 py-md-7 ml-5 border-bottom">
        <div class="image-container">
          <img class="rounded-2" src="/assets/img/default.png" width="800" height="425" alt="Syntax highlighter" />
        </div>
        <div class="summary"> <p>Below are some languages and their represntative styles.</p>
</div>
        <div class="more">
          <a href="/jekyll-theme-profile/examples/2019/01/29/syntax-highlighter.html" class="link-mktg arrow-target-mktg text-semibold f4-mktg">
            Contiue
            <svg xmlns="http://www.w3.org/2000/svg" class="octicon arrow-symbol-mktg" width="16" height="16"
              viewBox="0 0 16 16" fill="none">
              <path fill="currentColor"
                d="M7.28033 3.21967C6.98744 2.92678 6.51256 2.92678 6.21967 3.21967C5.92678 3.51256 5.92678 3.98744 6.21967 4.28033L7.28033 3.21967ZM11 8L11.5303 8.53033C11.8232 8.23744 11.8232 7.76256 11.5303 7.46967L11 8ZM6.21967 11.7197C5.92678 12.0126 5.92678 12.4874 6.21967 12.7803C6.51256 13.0732 6.98744 13.0732 7.28033 12.7803L6.21967 11.7197ZM6.21967 4.28033L10.4697 8.53033L11.5303 7.46967L7.28033 3.21967L6.21967 4.28033ZM10.4697 7.46967L6.21967 11.7197L7.28033 12.7803L11.5303 8.53033L10.4697 7.46967Z">
              </path>
              <path stroke="currentColor" d="M1.75 8H11" stroke-width="1.5" stroke-linecap="round"></path>
            </svg>
          </a>
        </div>
    </div>

  </div>
</div>

  </div>
</div>

Use Case 2: Changelogs

For software developers or product managers, the timeline is perfect for displaying changelogs. It allows you to:

Organize updates chronologically: Present your software updates, bug fixes, and new features in a clear, date-based format.
Highlight major releases: Use the post-timeline-card.html to style major releases differently, making them stand out.
Provide a historical view: Users can easily track the evolution of your product over time.

Example:

<div class="mt-md-7 mb-9 mb-md-12">
  <div class="container-xl mx-auto p-responsive-blog">
<div class="TimelineItem flex-wrap">
  <div class="col-12 col-md-5 position-relative">
    <div class="TimelineItem-title mt-5 position-sticky d-flex">
      <div class="TimelineItem-badge"><svg height="16" class="octicon octicon-comment" viewBox="0 0 16 16" version="1.1" width="16" aria-hidden="true"><path d="M1 2.75C1 1.784 1.784 1 2.75 1h10.5c.966 0 1.75.784 1.75 1.75v7.5A1.75 1.75 0 0 1 13.25 12H9.06l-2.573 2.573A1.458 1.458 0 0 1 4 13.543V12H2.75A1.75 1.75 0 0 1 1 10.25Zm1.75-.25a.25.25 0 0 0-.25.25v7.5c0 .138.112.25.25.25h2a.75.75 0 0 1 .75.75v2.19l2.72-2.72a.749.749 0 0 1 .53-.22h4.5a.25.25 0 0 0 .25-.25v-7.5a.25.25 0 0 0-.25-.25Z"></path></svg></div>
      <div class="title">
        <div class="h2">
          <a href="/jekyll-theme-profile/2024/08/08/timeline.html">
            Showcase Your Content with the Jekyll Timeline Feature
          </a>
        </div>
        <div class="text-gray mb-2 ws-normal">Aug 08, 2024</div>
        <span class="IssueLabel IssueLabel--big color-bg-accent-emphasis color-fg-on-emphasis mr-1">news</span>
        <span class="IssueLabel IssueLabel--big color-bg-accent-emphasis color-fg-on-emphasis mr-1">includes</span>
      </div>
    </div>
  </div>
  <div class="col-12 col-md-7">
    <div class="pb-5 pt-0 py-md-7 ml-5 border-bottom">
        <div class="image-container">
          <img class="rounded-2" src="/assets/img/default.png" width="800" height="425" alt="Showcase Your Content with the Jekyll Timeline Feature" />
        </div>
        <div class="summary"> <p>In the world of web design, presentation is everything. Whether you’re a blogger, a developer, or a business owner, how you display your content can make a huge difference in engaging your audience. That’s where our Jekyll theme’s timeline feature comes in handy. Let’s dive into how this versatile tool can enhance your website and explore some exciting use cases.</p>
</div>
        <div class="more">
          <a href="/jekyll-theme-profile/2024/08/08/timeline.html" class="link-mktg arrow-target-mktg text-semibold f4-mktg">
            Contiue
            <svg xmlns="http://www.w3.org/2000/svg" class="octicon arrow-symbol-mktg" width="16" height="16"
              viewBox="0 0 16 16" fill="none">
              <path fill="currentColor"
                d="M7.28033 3.21967C6.98744 2.92678 6.51256 2.92678 6.21967 3.21967C5.92678 3.51256 5.92678 3.98744 6.21967 4.28033L7.28033 3.21967ZM11 8L11.5303 8.53033C11.8232 8.23744 11.8232 7.76256 11.5303 7.46967L11 8ZM6.21967 11.7197C5.92678 12.0126 5.92678 12.4874 6.21967 12.7803C6.51256 13.0732 6.98744 13.0732 7.28033 12.7803L6.21967 11.7197ZM6.21967 4.28033L10.4697 8.53033L11.5303 7.46967L7.28033 3.21967L6.21967 4.28033ZM10.4697 7.46967L6.21967 11.7197L7.28033 12.7803L11.5303 8.53033L10.4697 7.46967Z">
              </path>
              <path stroke="currentColor" d="M1.75 8H11" stroke-width="1.5" stroke-linecap="round"></path>
            </svg>
          </a>
        </div>
    </div>

  </div>
</div>

<div class="TimelineItem flex-wrap">
  <div class="col-12 col-md-5 position-relative">
    <div class="TimelineItem-title mt-5 position-sticky d-flex">
      <div class="TimelineItem-badge"><svg height="16" class="octicon octicon-comment" viewBox="0 0 16 16" version="1.1" width="16" aria-hidden="true"><path d="M1 2.75C1 1.784 1.784 1 2.75 1h10.5c.966 0 1.75.784 1.75 1.75v7.5A1.75 1.75 0 0 1 13.25 12H9.06l-2.573 2.573A1.458 1.458 0 0 1 4 13.543V12H2.75A1.75 1.75 0 0 1 1 10.25Zm1.75-.25a.25.25 0 0 0-.25.25v7.5c0 .138.112.25.25.25h2a.75.75 0 0 1 .75.75v2.19l2.72-2.72a.749.749 0 0 1 .53-.22h4.5a.25.25 0 0 0 .25-.25v-7.5a.25.25 0 0 0-.25-.25Z"></path></svg></div>
      <div class="title">
        <div class="h2">
          <a href="/jekyll-theme-profile/examples/2023/12/14/video.html">
            Empty post with video
          </a>
        </div>
        <div class="text-gray mb-2 ws-normal">Dec 14, 2023</div>
      </div>
    </div>
  </div>
  <div class="col-12 col-md-7">
    <div class="pb-5 pt-0 py-md-7 ml-5 border-bottom">
        <div id="Timeline-video-container" class="image-container">
          <iframe id="Timeline-video" src="https://www.youtube.com/embed/E4WlUXrJgy4?si=BhUjhwehMIZME9Cf" frameborder="0" height="inherited"
            width="inherited"></iframe>
        </div>
        <div class="summary"> 
</div>
    </div>

  </div>
</div>

<div class="TimelineItem flex-wrap">
  <div class="col-12 col-md-5 position-relative">
    <div class="TimelineItem-title mt-5 position-sticky d-flex">
      <div class="TimelineItem-badge"><svg height="16" class="octicon octicon-comment" viewBox="0 0 16 16" version="1.1" width="16" aria-hidden="true"><path d="M1 2.75C1 1.784 1.784 1 2.75 1h10.5c.966 0 1.75.784 1.75 1.75v7.5A1.75 1.75 0 0 1 13.25 12H9.06l-2.573 2.573A1.458 1.458 0 0 1 4 13.543V12H2.75A1.75 1.75 0 0 1 1 10.25Zm1.75-.25a.25.25 0 0 0-.25.25v7.5c0 .138.112.25.25.25h2a.75.75 0 0 1 .75.75v2.19l2.72-2.72a.749.749 0 0 1 .53-.22h4.5a.25.25 0 0 0 .25-.25v-7.5a.25.25 0 0 0-.25-.25Z"></path></svg></div>
      <div class="title">
        <div class="h2">
          <a href="/jekyll-theme-profile/examples/2023/11/21/empty.html">
            Empty post with image
          </a>
        </div>
        <div class="text-gray mb-2 ws-normal">Nov 21, 2023</div>
        <span class="IssueLabel IssueLabel--big color-bg-accent-emphasis color-fg-on-emphasis mr-1">sidebar</span>
      </div>
    </div>
  </div>
  <div class="col-12 col-md-7">
    <div class="pb-5 pt-0 py-md-7 ml-5 border-bottom">
        <div class="image-container">
          <img class="rounded-2" src="https://www.allisonthackston.com/assets/img/cover-1920.jpg" width="800" height="425" alt="Empty post with image" />
        </div>
        <div class="summary"> 
</div>
    </div>

  </div>
</div>

<div class="TimelineItem flex-wrap">
  <div class="col-12 col-md-5 position-relative">
    <div class="TimelineItem-title mt-5 position-sticky d-flex">
      <div class="TimelineItem-badge"><svg height="16" class="octicon octicon-comment" viewBox="0 0 16 16" version="1.1" width="16" aria-hidden="true"><path d="M1 2.75C1 1.784 1.784 1 2.75 1h10.5c.966 0 1.75.784 1.75 1.75v7.5A1.75 1.75 0 0 1 13.25 12H9.06l-2.573 2.573A1.458 1.458 0 0 1 4 13.543V12H2.75A1.75 1.75 0 0 1 1 10.25Zm1.75-.25a.25.25 0 0 0-.25.25v7.5c0 .138.112.25.25.25h2a.75.75 0 0 1 .75.75v2.19l2.72-2.72a.749.749 0 0 1 .53-.22h4.5a.25.25 0 0 0 .25-.25v-7.5a.25.25 0 0 0-.25-.25Z"></path></svg></div>
      <div class="title">
        <div class="h2">
          <a href="/jekyll-theme-profile/custom/2023/11/20/background.html">
            Post with custom background
          </a>
        </div>
        <div class="text-gray mb-2 ws-normal">Nov 20, 2023</div>
        <span class="IssueLabel IssueLabel--big color-bg-accent-emphasis color-fg-on-emphasis mr-1">style</span>
        <span class="IssueLabel IssueLabel--big color-bg-accent-emphasis color-fg-on-emphasis mr-1">background</span>
      </div>
    </div>
  </div>
  <div class="col-12 col-md-7">
    <div class="pb-5 pt-0 py-md-7 ml-5 border-bottom">
        <div class="image-container">
          <img class="rounded-2" src="/assets/img/default.png" width="800" height="425" alt="Post with custom background" />
        </div>
        <div class="summary"> <p>You’ll find this post in your <code class="language-plaintext highlighter-rouge">_posts</code> directory. Go ahead and edit it and re-build the site to see your changes. You can rebuild the site in many different ways, but the most common way is to run <code class="language-plaintext highlighter-rouge">jekyll serve</code>, which launches a web server and auto-regenerates your site when a file is updated.</p>
</div>
        <div class="more">
          <a href="/jekyll-theme-profile/custom/2023/11/20/background.html" class="link-mktg arrow-target-mktg text-semibold f4-mktg">
            Contiue
            <svg xmlns="http://www.w3.org/2000/svg" class="octicon arrow-symbol-mktg" width="16" height="16"
              viewBox="0 0 16 16" fill="none">
              <path fill="currentColor"
                d="M7.28033 3.21967C6.98744 2.92678 6.51256 2.92678 6.21967 3.21967C5.92678 3.51256 5.92678 3.98744 6.21967 4.28033L7.28033 3.21967ZM11 8L11.5303 8.53033C11.8232 8.23744 11.8232 7.76256 11.5303 7.46967L11 8ZM6.21967 11.7197C5.92678 12.0126 5.92678 12.4874 6.21967 12.7803C6.51256 13.0732 6.98744 13.0732 7.28033 12.7803L6.21967 11.7197ZM6.21967 4.28033L10.4697 8.53033L11.5303 7.46967L7.28033 3.21967L6.21967 4.28033ZM10.4697 7.46967L6.21967 11.7197L7.28033 12.7803L11.5303 8.53033L10.4697 7.46967Z">
              </path>
              <path stroke="currentColor" d="M1.75 8H11" stroke-width="1.5" stroke-linecap="round"></path>
            </svg>
          </a>
        </div>
    </div>

  </div>
</div>

<div class="TimelineItem flex-wrap">
  <div class="col-12 col-md-5 position-relative">
    <div class="TimelineItem-title mt-5 position-sticky d-flex">
      <div class="TimelineItem-badge"><svg height="16" class="octicon octicon-comment" viewBox="0 0 16 16" version="1.1" width="16" aria-hidden="true"><path d="M1 2.75C1 1.784 1.784 1 2.75 1h10.5c.966 0 1.75.784 1.75 1.75v7.5A1.75 1.75 0 0 1 13.25 12H9.06l-2.573 2.573A1.458 1.458 0 0 1 4 13.543V12H2.75A1.75 1.75 0 0 1 1 10.25Zm1.75-.25a.25.25 0 0 0-.25.25v7.5c0 .138.112.25.25.25h2a.75.75 0 0 1 .75.75v2.19l2.72-2.72a.749.749 0 0 1 .53-.22h4.5a.25.25 0 0 0 .25-.25v-7.5a.25.25 0 0 0-.25-.25Z"></path></svg></div>
      <div class="title">
        <div class="h2">
          <a href="/jekyll-theme-profile/style/2023/11/10/post-appbar.html">
            This is a appbar post style
          </a>
        </div>
        <div class="authors-wrap text-bold mb-2 mr-3 ">George P. Burdell</div>
        <div class="text-gray mb-2 ws-normal">Nov 10, 2023</div>
        <span class="IssueLabel IssueLabel--big color-bg-accent-emphasis color-fg-on-emphasis mr-1">style</span>
        <span class="IssueLabel IssueLabel--big color-bg-accent-emphasis color-fg-on-emphasis mr-1">appbar</span>
      </div>
    </div>
  </div>
  <div class="col-12 col-md-7">
    <div class="pb-5 pt-0 py-md-7 ml-5 border-bottom">
        <div class="image-container">
          <img class="rounded-2" src="https://github.blog/wp-content/uploads/2023/10/hero-light.jpg" width="800" height="425" alt="This is a appbar post style" />
        </div>
        <div class="summary"> <p>Eos eu docendi tractatos sapientem, brute option menandri in vix, quando vivendo accommodare te ius. Nec melius fastidii constituam id, viderer theophrastus ad sit, hinc semper periculis cum id. Noluisse postulant assentior est in, no choro sadipscing repudiandae vix. Vis in euismod delenit dignissim. Ex quod nostrum sit, suas decore animal id ius, nobis solet detracto quo te.</p>
</div>
        <div class="more">
          <a href="/jekyll-theme-profile/style/2023/11/10/post-appbar.html" class="link-mktg arrow-target-mktg text-semibold f4-mktg">
            Contiue
            <svg xmlns="http://www.w3.org/2000/svg" class="octicon arrow-symbol-mktg" width="16" height="16"
              viewBox="0 0 16 16" fill="none">
              <path fill="currentColor"
                d="M7.28033 3.21967C6.98744 2.92678 6.51256 2.92678 6.21967 3.21967C5.92678 3.51256 5.92678 3.98744 6.21967 4.28033L7.28033 3.21967ZM11 8L11.5303 8.53033C11.8232 8.23744 11.8232 7.76256 11.5303 7.46967L11 8ZM6.21967 11.7197C5.92678 12.0126 5.92678 12.4874 6.21967 12.7803C6.51256 13.0732 6.98744 13.0732 7.28033 12.7803L6.21967 11.7197ZM6.21967 4.28033L10.4697 8.53033L11.5303 7.46967L7.28033 3.21967L6.21967 4.28033ZM10.4697 7.46967L6.21967 11.7197L7.28033 12.7803L11.5303 8.53033L10.4697 7.46967Z">
              </path>
              <path stroke="currentColor" d="M1.75 8H11" stroke-width="1.5" stroke-linecap="round"></path>
            </svg>
          </a>
        </div>
    </div>

  </div>
</div>

<div class="TimelineItem flex-wrap">
  <div class="col-12 col-md-5 position-relative">
    <div class="TimelineItem-title mt-5 position-sticky d-flex">
      <div class="TimelineItem-badge"><svg height="16" class="octicon octicon-comment" viewBox="0 0 16 16" version="1.1" width="16" aria-hidden="true"><path d="M1 2.75C1 1.784 1.784 1 2.75 1h10.5c.966 0 1.75.784 1.75 1.75v7.5A1.75 1.75 0 0 1 13.25 12H9.06l-2.573 2.573A1.458 1.458 0 0 1 4 13.543V12H2.75A1.75 1.75 0 0 1 1 10.25Zm1.75-.25a.25.25 0 0 0-.25.25v7.5c0 .138.112.25.25.25h2a.75.75 0 0 1 .75.75v2.19l2.72-2.72a.749.749 0 0 1 .53-.22h4.5a.25.25 0 0 0 .25-.25v-7.5a.25.25 0 0 0-.25-.25Z"></path></svg></div>
      <div class="title">
        <div class="h2">
          <a href="/jekyll-theme-profile/style/2023/07/16/post-sidebar.html">
            This is a sidebar post style
          </a>
        </div>
        <div class="text-gray mb-2 ws-normal">Jul 16, 2023</div>
        <span class="IssueLabel IssueLabel--big color-bg-accent-emphasis color-fg-on-emphasis mr-1">style</span>
        <span class="IssueLabel IssueLabel--big color-bg-accent-emphasis color-fg-on-emphasis mr-1">sidebar</span>
      </div>
    </div>
  </div>
  <div class="col-12 col-md-7">
    <div class="pb-5 pt-0 py-md-7 ml-5 border-bottom">
        <div class="image-container">
          <img class="rounded-2" src="https://github.blog/wp-content/uploads/2023/08/1200x630-AI-Unfurl-DARK-Inverto.png" width="800" height="425" alt="This is a sidebar post style" />
        </div>
        <div class="summary"> <p>Eos eu docendi tractatos sapientem, brute option menandri in vix, quando vivendo accommodare te ius. Nec melius fastidii constituam id, viderer theophrastus ad sit, hinc semper periculis cum id. Noluisse postulant assentior est in, no choro sadipscing repudiandae vix. Vis in euismod delenit dignissim. Ex quod nostrum sit, suas decore animal id ius, nobis solet detracto quo te.</p>
</div>
        <div class="more">
          <a href="/jekyll-theme-profile/style/2023/07/16/post-sidebar.html" class="link-mktg arrow-target-mktg text-semibold f4-mktg">
            Contiue
            <svg xmlns="http://www.w3.org/2000/svg" class="octicon arrow-symbol-mktg" width="16" height="16"
              viewBox="0 0 16 16" fill="none">
              <path fill="currentColor"
                d="M7.28033 3.21967C6.98744 2.92678 6.51256 2.92678 6.21967 3.21967C5.92678 3.51256 5.92678 3.98744 6.21967 4.28033L7.28033 3.21967ZM11 8L11.5303 8.53033C11.8232 8.23744 11.8232 7.76256 11.5303 7.46967L11 8ZM6.21967 11.7197C5.92678 12.0126 5.92678 12.4874 6.21967 12.7803C6.51256 13.0732 6.98744 13.0732 7.28033 12.7803L6.21967 11.7197ZM6.21967 4.28033L10.4697 8.53033L11.5303 7.46967L7.28033 3.21967L6.21967 4.28033ZM10.4697 7.46967L6.21967 11.7197L7.28033 12.7803L11.5303 8.53033L10.4697 7.46967Z">
              </path>
              <path stroke="currentColor" d="M1.75 8H11" stroke-width="1.5" stroke-linecap="round"></path>
            </svg>
          </a>
        </div>
    </div>

  </div>
</div>

<div class="TimelineItem flex-wrap">
  <div class="col-12 col-md-5 position-relative">
    <div class="TimelineItem-title mt-5 position-sticky d-flex">
      <div class="TimelineItem-badge"><svg height="16" class="octicon octicon-comment" viewBox="0 0 16 16" version="1.1" width="16" aria-hidden="true"><path d="M1 2.75C1 1.784 1.784 1 2.75 1h10.5c.966 0 1.75.784 1.75 1.75v7.5A1.75 1.75 0 0 1 13.25 12H9.06l-2.573 2.573A1.458 1.458 0 0 1 4 13.543V12H2.75A1.75 1.75 0 0 1 1 10.25Zm1.75-.25a.25.25 0 0 0-.25.25v7.5c0 .138.112.25.25.25h2a.75.75 0 0 1 .75.75v2.19l2.72-2.72a.749.749 0 0 1 .53-.22h4.5a.25.25 0 0 0 .25-.25v-7.5a.25.25 0 0 0-.25-.25Z"></path></svg></div>
      <div class="title">
        <div class="h2">
          <a href="/jekyll-theme-profile/style/2023/07/16/post-stacked.html">
            This is a stacked post style
          </a>
        </div>
        <div class="text-gray mb-2 ws-normal">Jul 16, 2023</div>
        <span class="IssueLabel IssueLabel--big color-bg-accent-emphasis color-fg-on-emphasis mr-1">style</span>
        <span class="IssueLabel IssueLabel--big color-bg-accent-emphasis color-fg-on-emphasis mr-1">stacked</span>
      </div>
    </div>
  </div>
  <div class="col-12 col-md-7">
    <div class="pb-5 pt-0 py-md-7 ml-5 border-bottom">
        <div class="image-container">
          <img class="rounded-2" src="https://github.blog/wp-content/uploads/2023/05/1200.630-Community-wLogo-e1698634509856.png" width="800" height="425" alt="This is a stacked post style" />
        </div>
        <div class="summary"> <p>Eos eu docendi tractatos sapientem, brute option menandri in vix, quando vivendo accommodare te ius. Nec melius fastidii constituam id, viderer theophrastus ad sit, hinc semper periculis cum id. Noluisse postulant assentior est in, no choro sadipscing repudiandae vix. Vis in euismod delenit dignissim. Ex quod nostrum sit, suas decore animal id ius, nobis solet detracto quo te.</p>
</div>
        <div class="more">
          <a href="/jekyll-theme-profile/style/2023/07/16/post-stacked.html" class="link-mktg arrow-target-mktg text-semibold f4-mktg">
            Contiue
            <svg xmlns="http://www.w3.org/2000/svg" class="octicon arrow-symbol-mktg" width="16" height="16"
              viewBox="0 0 16 16" fill="none">
              <path fill="currentColor"
                d="M7.28033 3.21967C6.98744 2.92678 6.51256 2.92678 6.21967 3.21967C5.92678 3.51256 5.92678 3.98744 6.21967 4.28033L7.28033 3.21967ZM11 8L11.5303 8.53033C11.8232 8.23744 11.8232 7.76256 11.5303 7.46967L11 8ZM6.21967 11.7197C5.92678 12.0126 5.92678 12.4874 6.21967 12.7803C6.51256 13.0732 6.98744 13.0732 7.28033 12.7803L6.21967 11.7197ZM6.21967 4.28033L10.4697 8.53033L11.5303 7.46967L7.28033 3.21967L6.21967 4.28033ZM10.4697 7.46967L6.21967 11.7197L7.28033 12.7803L11.5303 8.53033L10.4697 7.46967Z">
              </path>
              <path stroke="currentColor" d="M1.75 8H11" stroke-width="1.5" stroke-linecap="round"></path>
            </svg>
          </a>
        </div>
    </div>

  </div>
</div>

<div class="TimelineItem flex-wrap">
  <div class="col-12 col-md-5 position-relative">
    <div class="TimelineItem-title mt-5 position-sticky d-flex">
      <div class="TimelineItem-badge"><svg height="16" class="octicon octicon-comment" viewBox="0 0 16 16" version="1.1" width="16" aria-hidden="true"><path d="M1 2.75C1 1.784 1.784 1 2.75 1h10.5c.966 0 1.75.784 1.75 1.75v7.5A1.75 1.75 0 0 1 13.25 12H9.06l-2.573 2.573A1.458 1.458 0 0 1 4 13.543V12H2.75A1.75 1.75 0 0 1 1 10.25Zm1.75-.25a.25.25 0 0 0-.25.25v7.5c0 .138.112.25.25.25h2a.75.75 0 0 1 .75.75v2.19l2.72-2.72a.749.749 0 0 1 .53-.22h4.5a.25.25 0 0 0 .25-.25v-7.5a.25.25 0 0 0-.25-.25Z"></path></svg></div>
      <div class="title">
        <div class="h2">
          <a href="/jekyll-theme-profile/style/2023/07/16/post-topbar.html">
            This is a topbar post style
          </a>
        </div>
        <div class="authors-wrap text-bold mb-2 mr-3 ">George P. Burdell</div>
        <div class="text-gray mb-2 ws-normal">Jul 16, 2023</div>
        <span class="IssueLabel IssueLabel--big color-bg-accent-emphasis color-fg-on-emphasis mr-1">style</span>
        <span class="IssueLabel IssueLabel--big color-bg-accent-emphasis color-fg-on-emphasis mr-1">topbar</span>
      </div>
    </div>
  </div>
  <div class="col-12 col-md-7">
    <div class="pb-5 pt-0 py-md-7 ml-5 border-bottom">
        <div class="image-container">
          <img class="rounded-2" src="https://github.blog/wp-content/uploads/2023/10/hero-light.jpg" width="800" height="425" alt="This is a topbar post style" />
        </div>
        <div class="summary"> <p>Eos eu docendi tractatos sapientem, brute option menandri in vix, quando vivendo accommodare te ius. Nec melius fastidii constituam id, viderer theophrastus ad sit, hinc semper periculis cum id. Noluisse postulant assentior est in, no choro sadipscing repudiandae vix. Vis in euismod delenit dignissim. Ex quod nostrum sit, suas decore animal id ius, nobis solet detracto quo te.</p>
</div>
        <div class="more">
          <a href="/jekyll-theme-profile/style/2023/07/16/post-topbar.html" class="link-mktg arrow-target-mktg text-semibold f4-mktg">
            Contiue
            <svg xmlns="http://www.w3.org/2000/svg" class="octicon arrow-symbol-mktg" width="16" height="16"
              viewBox="0 0 16 16" fill="none">
              <path fill="currentColor"
                d="M7.28033 3.21967C6.98744 2.92678 6.51256 2.92678 6.21967 3.21967C5.92678 3.51256 5.92678 3.98744 6.21967 4.28033L7.28033 3.21967ZM11 8L11.5303 8.53033C11.8232 8.23744 11.8232 7.76256 11.5303 7.46967L11 8ZM6.21967 11.7197C5.92678 12.0126 5.92678 12.4874 6.21967 12.7803C6.51256 13.0732 6.98744 13.0732 7.28033 12.7803L6.21967 11.7197ZM6.21967 4.28033L10.4697 8.53033L11.5303 7.46967L7.28033 3.21967L6.21967 4.28033ZM10.4697 7.46967L6.21967 11.7197L7.28033 12.7803L11.5303 8.53033L10.4697 7.46967Z">
              </path>
              <path stroke="currentColor" d="M1.75 8H11" stroke-width="1.5" stroke-linecap="round"></path>
            </svg>
          </a>
        </div>
    </div>

  </div>
</div>

<div class="TimelineItem flex-wrap">
  <div class="col-12 col-md-5 position-relative">
    <div class="TimelineItem-title mt-5 position-sticky d-flex">
      <div class="TimelineItem-badge"><svg height="16" class="octicon octicon-comment" viewBox="0 0 16 16" version="1.1" width="16" aria-hidden="true"><path d="M1 2.75C1 1.784 1.784 1 2.75 1h10.5c.966 0 1.75.784 1.75 1.75v7.5A1.75 1.75 0 0 1 13.25 12H9.06l-2.573 2.573A1.458 1.458 0 0 1 4 13.543V12H2.75A1.75 1.75 0 0 1 1 10.25Zm1.75-.25a.25.25 0 0 0-.25.25v7.5c0 .138.112.25.25.25h2a.75.75 0 0 1 .75.75v2.19l2.72-2.72a.749.749 0 0 1 .53-.22h4.5a.25.25 0 0 0 .25-.25v-7.5a.25.25 0 0 0-.25-.25Z"></path></svg></div>
      <div class="title">
        <div class="h2">
          <a href="/jekyll-theme-profile/examples/2019/01/29/hello-world.html">
            Welcome to Jekyll!
          </a>
        </div>
        <div class="text-gray mb-2 ws-normal">Jan 29, 2019</div>
      </div>
    </div>
  </div>
  <div class="col-12 col-md-7">
    <div class="pb-5 pt-0 py-md-7 ml-5 border-bottom">
        <div class="image-container">
          <img class="rounded-2" src="/assets/img/default.png" width="800" height="425" alt="Welcome to Jekyll!" />
        </div>
        <div class="summary"> <p>You’ll find this post in your <code class="language-plaintext highlighter-rouge">_posts</code> directory. Go ahead and edit it and re-build the site to see your changes. You can rebuild the site in many different ways, but the most common way is to run <code class="language-plaintext highlighter-rouge">jekyll serve</code>, which launches a web server and auto-regenerates your site when a file is updated.</p>
</div>
        <div class="more">
          <a href="/jekyll-theme-profile/examples/2019/01/29/hello-world.html" class="link-mktg arrow-target-mktg text-semibold f4-mktg">
            Contiue
            <svg xmlns="http://www.w3.org/2000/svg" class="octicon arrow-symbol-mktg" width="16" height="16"
              viewBox="0 0 16 16" fill="none">
              <path fill="currentColor"
                d="M7.28033 3.21967C6.98744 2.92678 6.51256 2.92678 6.21967 3.21967C5.92678 3.51256 5.92678 3.98744 6.21967 4.28033L7.28033 3.21967ZM11 8L11.5303 8.53033C11.8232 8.23744 11.8232 7.76256 11.5303 7.46967L11 8ZM6.21967 11.7197C5.92678 12.0126 5.92678 12.4874 6.21967 12.7803C6.51256 13.0732 6.98744 13.0732 7.28033 12.7803L6.21967 11.7197ZM6.21967 4.28033L10.4697 8.53033L11.5303 7.46967L7.28033 3.21967L6.21967 4.28033ZM10.4697 7.46967L6.21967 11.7197L7.28033 12.7803L11.5303 8.53033L10.4697 7.46967Z">
              </path>
              <path stroke="currentColor" d="M1.75 8H11" stroke-width="1.5" stroke-linecap="round"></path>
            </svg>
          </a>
        </div>
    </div>

  </div>
</div>

<div class="TimelineItem flex-wrap">
  <div class="col-12 col-md-5 position-relative">
    <div class="TimelineItem-title mt-5 position-sticky d-flex">
      <div class="TimelineItem-badge"><svg height="16" class="octicon octicon-comment" viewBox="0 0 16 16" version="1.1" width="16" aria-hidden="true"><path d="M1 2.75C1 1.784 1.784 1 2.75 1h10.5c.966 0 1.75.784 1.75 1.75v7.5A1.75 1.75 0 0 1 13.25 12H9.06l-2.573 2.573A1.458 1.458 0 0 1 4 13.543V12H2.75A1.75 1.75 0 0 1 1 10.25Zm1.75-.25a.25.25 0 0 0-.25.25v7.5c0 .138.112.25.25.25h2a.75.75 0 0 1 .75.75v2.19l2.72-2.72a.749.749 0 0 1 .53-.22h4.5a.25.25 0 0 0 .25-.25v-7.5a.25.25 0 0 0-.25-.25Z"></path></svg></div>
      <div class="title">
        <div class="h2">
          <a href="/jekyll-theme-profile/examples/2019/01/29/syntax-highlighter.html">
            Syntax highlighter
          </a>
        </div>
        <div class="text-gray mb-2 ws-normal">Jan 29, 2019</div>
      </div>
    </div>
  </div>
  <div class="col-12 col-md-7">
    <div class="pb-5 pt-0 py-md-7 ml-5 border-bottom">
        <div class="image-container">
          <img class="rounded-2" src="/assets/img/default.png" width="800" height="425" alt="Syntax highlighter" />
        </div>
        <div class="summary"> <p>Below are some languages and their represntative styles.</p>
</div>
        <div class="more">
          <a href="/jekyll-theme-profile/examples/2019/01/29/syntax-highlighter.html" class="link-mktg arrow-target-mktg text-semibold f4-mktg">
            Contiue
            <svg xmlns="http://www.w3.org/2000/svg" class="octicon arrow-symbol-mktg" width="16" height="16"
              viewBox="0 0 16 16" fill="none">
              <path fill="currentColor"
                d="M7.28033 3.21967C6.98744 2.92678 6.51256 2.92678 6.21967 3.21967C5.92678 3.51256 5.92678 3.98744 6.21967 4.28033L7.28033 3.21967ZM11 8L11.5303 8.53033C11.8232 8.23744 11.8232 7.76256 11.5303 7.46967L11 8ZM6.21967 11.7197C5.92678 12.0126 5.92678 12.4874 6.21967 12.7803C6.51256 13.0732 6.98744 13.0732 7.28033 12.7803L6.21967 11.7197ZM6.21967 4.28033L10.4697 8.53033L11.5303 7.46967L7.28033 3.21967L6.21967 4.28033ZM10.4697 7.46967L6.21967 11.7197L7.28033 12.7803L11.5303 8.53033L10.4697 7.46967Z">
              </path>
              <path stroke="currentColor" d="M1.75 8H11" stroke-width="1.5" stroke-linecap="round"></path>
            </svg>
          </a>
        </div>
    </div>

  </div>
</div>

  </div>
</div>

Use Case 3: Portfolio Timeline

For creatives and professionals, the timeline can be adapted to showcase your work:

Display projects chronologically: Show the evolution of your skills and style over time.
Highlight key works: Use the limit parameter to feature your most significant or recent projects.
Tell your professional story: Each entry can include details about the project, skills used, or outcomes achieved.

Example:

<div class="mt-md-7 mb-9 mb-md-12">
  <div class="container-xl mx-auto p-responsive-blog">
<div class="TimelineItem flex-wrap">
  <div class="col-12 col-md-5 position-relative">
    <div class="TimelineItem-title mt-5 position-sticky d-flex">
      <div class="TimelineItem-badge"><svg height="16" class="octicon octicon-comment" viewBox="0 0 16 16" version="1.1" width="16" aria-hidden="true"><path d="M1 2.75C1 1.784 1.784 1 2.75 1h10.5c.966 0 1.75.784 1.75 1.75v7.5A1.75 1.75 0 0 1 13.25 12H9.06l-2.573 2.573A1.458 1.458 0 0 1 4 13.543V12H2.75A1.75 1.75 0 0 1 1 10.25Zm1.75-.25a.25.25 0 0 0-.25.25v7.5c0 .138.112.25.25.25h2a.75.75 0 0 1 .75.75v2.19l2.72-2.72a.749.749 0 0 1 .53-.22h4.5a.25.25 0 0 0 .25-.25v-7.5a.25.25 0 0 0-.25-.25Z"></path></svg></div>
      <div class="title">
        <div class="h2">
          <a href="/jekyll-theme-profile/2024/08/08/timeline.html">
            Showcase Your Content with the Jekyll Timeline Feature
          </a>
        </div>
        <div class="text-gray mb-2 ws-normal">Aug 08, 2024</div>
        <span class="IssueLabel IssueLabel--big color-bg-accent-emphasis color-fg-on-emphasis mr-1">news</span>
        <span class="IssueLabel IssueLabel--big color-bg-accent-emphasis color-fg-on-emphasis mr-1">includes</span>
      </div>
    </div>
  </div>
  <div class="col-12 col-md-7">
    <div class="pb-5 pt-0 py-md-7 ml-5 border-bottom">
        <div class="image-container">
          <img class="rounded-2" src="/assets/img/default.png" width="800" height="425" alt="Showcase Your Content with the Jekyll Timeline Feature" />
        </div>
        <div class="summary"> <p>In the world of web design, presentation is everything. Whether you’re a blogger, a developer, or a business owner, how you display your content can make a huge difference in engaging your audience. That’s where our Jekyll theme’s timeline feature comes in handy. Let’s dive into how this versatile tool can enhance your website and explore some exciting use cases.</p>
</div>
        <div class="more">
          <a href="/jekyll-theme-profile/2024/08/08/timeline.html" class="link-mktg arrow-target-mktg text-semibold f4-mktg">
            Contiue
            <svg xmlns="http://www.w3.org/2000/svg" class="octicon arrow-symbol-mktg" width="16" height="16"
              viewBox="0 0 16 16" fill="none">
              <path fill="currentColor"
                d="M7.28033 3.21967C6.98744 2.92678 6.51256 2.92678 6.21967 3.21967C5.92678 3.51256 5.92678 3.98744 6.21967 4.28033L7.28033 3.21967ZM11 8L11.5303 8.53033C11.8232 8.23744 11.8232 7.76256 11.5303 7.46967L11 8ZM6.21967 11.7197C5.92678 12.0126 5.92678 12.4874 6.21967 12.7803C6.51256 13.0732 6.98744 13.0732 7.28033 12.7803L6.21967 11.7197ZM6.21967 4.28033L10.4697 8.53033L11.5303 7.46967L7.28033 3.21967L6.21967 4.28033ZM10.4697 7.46967L6.21967 11.7197L7.28033 12.7803L11.5303 8.53033L10.4697 7.46967Z">
              </path>
              <path stroke="currentColor" d="M1.75 8H11" stroke-width="1.5" stroke-linecap="round"></path>
            </svg>
          </a>
        </div>
    </div>

  </div>
</div>

<div class="TimelineItem flex-wrap">
  <div class="col-12 col-md-5 position-relative">
    <div class="TimelineItem-title mt-5 position-sticky d-flex">
      <div class="TimelineItem-badge"><svg height="16" class="octicon octicon-comment" viewBox="0 0 16 16" version="1.1" width="16" aria-hidden="true"><path d="M1 2.75C1 1.784 1.784 1 2.75 1h10.5c.966 0 1.75.784 1.75 1.75v7.5A1.75 1.75 0 0 1 13.25 12H9.06l-2.573 2.573A1.458 1.458 0 0 1 4 13.543V12H2.75A1.75 1.75 0 0 1 1 10.25Zm1.75-.25a.25.25 0 0 0-.25.25v7.5c0 .138.112.25.25.25h2a.75.75 0 0 1 .75.75v2.19l2.72-2.72a.749.749 0 0 1 .53-.22h4.5a.25.25 0 0 0 .25-.25v-7.5a.25.25 0 0 0-.25-.25Z"></path></svg></div>
      <div class="title">
        <div class="h2">
          <a href="/jekyll-theme-profile/examples/2023/12/14/video.html">
            Empty post with video
          </a>
        </div>
        <div class="text-gray mb-2 ws-normal">Dec 14, 2023</div>
      </div>
    </div>
  </div>
  <div class="col-12 col-md-7">
    <div class="pb-5 pt-0 py-md-7 ml-5 border-bottom">
        <div id="Timeline-video-container" class="image-container">
          <iframe id="Timeline-video" src="https://www.youtube.com/embed/E4WlUXrJgy4?si=BhUjhwehMIZME9Cf" frameborder="0" height="inherited"
            width="inherited"></iframe>
        </div>
        <div class="summary"> 
</div>
    </div>

  </div>
</div>

<div class="TimelineItem flex-wrap">
  <div class="col-12 col-md-5 position-relative">
    <div class="TimelineItem-title mt-5 position-sticky d-flex">
      <div class="TimelineItem-badge"><svg height="16" class="octicon octicon-comment" viewBox="0 0 16 16" version="1.1" width="16" aria-hidden="true"><path d="M1 2.75C1 1.784 1.784 1 2.75 1h10.5c.966 0 1.75.784 1.75 1.75v7.5A1.75 1.75 0 0 1 13.25 12H9.06l-2.573 2.573A1.458 1.458 0 0 1 4 13.543V12H2.75A1.75 1.75 0 0 1 1 10.25Zm1.75-.25a.25.25 0 0 0-.25.25v7.5c0 .138.112.25.25.25h2a.75.75 0 0 1 .75.75v2.19l2.72-2.72a.749.749 0 0 1 .53-.22h4.5a.25.25 0 0 0 .25-.25v-7.5a.25.25 0 0 0-.25-.25Z"></path></svg></div>
      <div class="title">
        <div class="h2">
          <a href="/jekyll-theme-profile/examples/2023/11/21/empty.html">
            Empty post with image
          </a>
        </div>
        <div class="text-gray mb-2 ws-normal">Nov 21, 2023</div>
        <span class="IssueLabel IssueLabel--big color-bg-accent-emphasis color-fg-on-emphasis mr-1">sidebar</span>
      </div>
    </div>
  </div>
  <div class="col-12 col-md-7">
    <div class="pb-5 pt-0 py-md-7 ml-5 border-bottom">
        <div class="image-container">
          <img class="rounded-2" src="https://www.allisonthackston.com/assets/img/cover-1920.jpg" width="800" height="425" alt="Empty post with image" />
        </div>
        <div class="summary"> 
</div>
    </div>

  </div>
</div>

<div class="TimelineItem flex-wrap">
  <div class="col-12 col-md-5 position-relative">
    <div class="TimelineItem-title mt-5 position-sticky d-flex">
      <div class="TimelineItem-badge"><svg height="16" class="octicon octicon-comment" viewBox="0 0 16 16" version="1.1" width="16" aria-hidden="true"><path d="M1 2.75C1 1.784 1.784 1 2.75 1h10.5c.966 0 1.75.784 1.75 1.75v7.5A1.75 1.75 0 0 1 13.25 12H9.06l-2.573 2.573A1.458 1.458 0 0 1 4 13.543V12H2.75A1.75 1.75 0 0 1 1 10.25Zm1.75-.25a.25.25 0 0 0-.25.25v7.5c0 .138.112.25.25.25h2a.75.75 0 0 1 .75.75v2.19l2.72-2.72a.749.749 0 0 1 .53-.22h4.5a.25.25 0 0 0 .25-.25v-7.5a.25.25 0 0 0-.25-.25Z"></path></svg></div>
      <div class="title">
        <div class="h2">
          <a href="/jekyll-theme-profile/custom/2023/11/20/background.html">
            Post with custom background
          </a>
        </div>
        <div class="text-gray mb-2 ws-normal">Nov 20, 2023</div>
        <span class="IssueLabel IssueLabel--big color-bg-accent-emphasis color-fg-on-emphasis mr-1">style</span>
        <span class="IssueLabel IssueLabel--big color-bg-accent-emphasis color-fg-on-emphasis mr-1">background</span>
      </div>
    </div>
  </div>
  <div class="col-12 col-md-7">
    <div class="pb-5 pt-0 py-md-7 ml-5 border-bottom">
        <div class="image-container">
          <img class="rounded-2" src="/assets/img/default.png" width="800" height="425" alt="Post with custom background" />
        </div>
        <div class="summary"> <p>You’ll find this post in your <code class="language-plaintext highlighter-rouge">_posts</code> directory. Go ahead and edit it and re-build the site to see your changes. You can rebuild the site in many different ways, but the most common way is to run <code class="language-plaintext highlighter-rouge">jekyll serve</code>, which launches a web server and auto-regenerates your site when a file is updated.</p>
</div>
        <div class="more">
          <a href="/jekyll-theme-profile/custom/2023/11/20/background.html" class="link-mktg arrow-target-mktg text-semibold f4-mktg">
            Contiue
            <svg xmlns="http://www.w3.org/2000/svg" class="octicon arrow-symbol-mktg" width="16" height="16"
              viewBox="0 0 16 16" fill="none">
              <path fill="currentColor"
                d="M7.28033 3.21967C6.98744 2.92678 6.51256 2.92678 6.21967 3.21967C5.92678 3.51256 5.92678 3.98744 6.21967 4.28033L7.28033 3.21967ZM11 8L11.5303 8.53033C11.8232 8.23744 11.8232 7.76256 11.5303 7.46967L11 8ZM6.21967 11.7197C5.92678 12.0126 5.92678 12.4874 6.21967 12.7803C6.51256 13.0732 6.98744 13.0732 7.28033 12.7803L6.21967 11.7197ZM6.21967 4.28033L10.4697 8.53033L11.5303 7.46967L7.28033 3.21967L6.21967 4.28033ZM10.4697 7.46967L6.21967 11.7197L7.28033 12.7803L11.5303 8.53033L10.4697 7.46967Z">
              </path>
              <path stroke="currentColor" d="M1.75 8H11" stroke-width="1.5" stroke-linecap="round"></path>
            </svg>
          </a>
        </div>
    </div>

  </div>
</div>

<div class="TimelineItem flex-wrap">
  <div class="col-12 col-md-5 position-relative">
    <div class="TimelineItem-title mt-5 position-sticky d-flex">
      <div class="TimelineItem-badge"><svg height="16" class="octicon octicon-comment" viewBox="0 0 16 16" version="1.1" width="16" aria-hidden="true"><path d="M1 2.75C1 1.784 1.784 1 2.75 1h10.5c.966 0 1.75.784 1.75 1.75v7.5A1.75 1.75 0 0 1 13.25 12H9.06l-2.573 2.573A1.458 1.458 0 0 1 4 13.543V12H2.75A1.75 1.75 0 0 1 1 10.25Zm1.75-.25a.25.25 0 0 0-.25.25v7.5c0 .138.112.25.25.25h2a.75.75 0 0 1 .75.75v2.19l2.72-2.72a.749.749 0 0 1 .53-.22h4.5a.25.25 0 0 0 .25-.25v-7.5a.25.25 0 0 0-.25-.25Z"></path></svg></div>
      <div class="title">
        <div class="h2">
          <a href="/jekyll-theme-profile/style/2023/11/10/post-appbar.html">
            This is a appbar post style
          </a>
        </div>
        <div class="authors-wrap text-bold mb-2 mr-3 ">George P. Burdell</div>
        <div class="text-gray mb-2 ws-normal">Nov 10, 2023</div>
        <span class="IssueLabel IssueLabel--big color-bg-accent-emphasis color-fg-on-emphasis mr-1">style</span>
        <span class="IssueLabel IssueLabel--big color-bg-accent-emphasis color-fg-on-emphasis mr-1">appbar</span>
      </div>
    </div>
  </div>
  <div class="col-12 col-md-7">
    <div class="pb-5 pt-0 py-md-7 ml-5 border-bottom">
        <div class="image-container">
          <img class="rounded-2" src="https://github.blog/wp-content/uploads/2023/10/hero-light.jpg" width="800" height="425" alt="This is a appbar post style" />
        </div>
        <div class="summary"> <p>Eos eu docendi tractatos sapientem, brute option menandri in vix, quando vivendo accommodare te ius. Nec melius fastidii constituam id, viderer theophrastus ad sit, hinc semper periculis cum id. Noluisse postulant assentior est in, no choro sadipscing repudiandae vix. Vis in euismod delenit dignissim. Ex quod nostrum sit, suas decore animal id ius, nobis solet detracto quo te.</p>
</div>
        <div class="more">
          <a href="/jekyll-theme-profile/style/2023/11/10/post-appbar.html" class="link-mktg arrow-target-mktg text-semibold f4-mktg">
            Contiue
            <svg xmlns="http://www.w3.org/2000/svg" class="octicon arrow-symbol-mktg" width="16" height="16"
              viewBox="0 0 16 16" fill="none">
              <path fill="currentColor"
                d="M7.28033 3.21967C6.98744 2.92678 6.51256 2.92678 6.21967 3.21967C5.92678 3.51256 5.92678 3.98744 6.21967 4.28033L7.28033 3.21967ZM11 8L11.5303 8.53033C11.8232 8.23744 11.8232 7.76256 11.5303 7.46967L11 8ZM6.21967 11.7197C5.92678 12.0126 5.92678 12.4874 6.21967 12.7803C6.51256 13.0732 6.98744 13.0732 7.28033 12.7803L6.21967 11.7197ZM6.21967 4.28033L10.4697 8.53033L11.5303 7.46967L7.28033 3.21967L6.21967 4.28033ZM10.4697 7.46967L6.21967 11.7197L7.28033 12.7803L11.5303 8.53033L10.4697 7.46967Z">
              </path>
              <path stroke="currentColor" d="M1.75 8H11" stroke-width="1.5" stroke-linecap="round"></path>
            </svg>
          </a>
        </div>
    </div>

  </div>
</div>

<div class="TimelineItem flex-wrap">
  <div class="col-12 col-md-5 position-relative">
    <div class="TimelineItem-title mt-5 position-sticky d-flex">
      <div class="TimelineItem-badge"><svg height="16" class="octicon octicon-comment" viewBox="0 0 16 16" version="1.1" width="16" aria-hidden="true"><path d="M1 2.75C1 1.784 1.784 1 2.75 1h10.5c.966 0 1.75.784 1.75 1.75v7.5A1.75 1.75 0 0 1 13.25 12H9.06l-2.573 2.573A1.458 1.458 0 0 1 4 13.543V12H2.75A1.75 1.75 0 0 1 1 10.25Zm1.75-.25a.25.25 0 0 0-.25.25v7.5c0 .138.112.25.25.25h2a.75.75 0 0 1 .75.75v2.19l2.72-2.72a.749.749 0 0 1 .53-.22h4.5a.25.25 0 0 0 .25-.25v-7.5a.25.25 0 0 0-.25-.25Z"></path></svg></div>
      <div class="title">
        <div class="h2">
          <a href="/jekyll-theme-profile/style/2023/07/16/post-sidebar.html">
            This is a sidebar post style
          </a>
        </div>
        <div class="text-gray mb-2 ws-normal">Jul 16, 2023</div>
        <span class="IssueLabel IssueLabel--big color-bg-accent-emphasis color-fg-on-emphasis mr-1">style</span>
        <span class="IssueLabel IssueLabel--big color-bg-accent-emphasis color-fg-on-emphasis mr-1">sidebar</span>
      </div>
    </div>
  </div>
  <div class="col-12 col-md-7">
    <div class="pb-5 pt-0 py-md-7 ml-5 border-bottom">
        <div class="image-container">
          <img class="rounded-2" src="https://github.blog/wp-content/uploads/2023/08/1200x630-AI-Unfurl-DARK-Inverto.png" width="800" height="425" alt="This is a sidebar post style" />
        </div>
        <div class="summary"> <p>Eos eu docendi tractatos sapientem, brute option menandri in vix, quando vivendo accommodare te ius. Nec melius fastidii constituam id, viderer theophrastus ad sit, hinc semper periculis cum id. Noluisse postulant assentior est in, no choro sadipscing repudiandae vix. Vis in euismod delenit dignissim. Ex quod nostrum sit, suas decore animal id ius, nobis solet detracto quo te.</p>
</div>
        <div class="more">
          <a href="/jekyll-theme-profile/style/2023/07/16/post-sidebar.html" class="link-mktg arrow-target-mktg text-semibold f4-mktg">
            Contiue
            <svg xmlns="http://www.w3.org/2000/svg" class="octicon arrow-symbol-mktg" width="16" height="16"
              viewBox="0 0 16 16" fill="none">
              <path fill="currentColor"
                d="M7.28033 3.21967C6.98744 2.92678 6.51256 2.92678 6.21967 3.21967C5.92678 3.51256 5.92678 3.98744 6.21967 4.28033L7.28033 3.21967ZM11 8L11.5303 8.53033C11.8232 8.23744 11.8232 7.76256 11.5303 7.46967L11 8ZM6.21967 11.7197C5.92678 12.0126 5.92678 12.4874 6.21967 12.7803C6.51256 13.0732 6.98744 13.0732 7.28033 12.7803L6.21967 11.7197ZM6.21967 4.28033L10.4697 8.53033L11.5303 7.46967L7.28033 3.21967L6.21967 4.28033ZM10.4697 7.46967L6.21967 11.7197L7.28033 12.7803L11.5303 8.53033L10.4697 7.46967Z">
              </path>
              <path stroke="currentColor" d="M1.75 8H11" stroke-width="1.5" stroke-linecap="round"></path>
            </svg>
          </a>
        </div>
    </div>

  </div>
</div>

<div class="TimelineItem flex-wrap">
  <div class="col-12 col-md-5 position-relative">
    <div class="TimelineItem-title mt-5 position-sticky d-flex">
      <div class="TimelineItem-badge"><svg height="16" class="octicon octicon-comment" viewBox="0 0 16 16" version="1.1" width="16" aria-hidden="true"><path d="M1 2.75C1 1.784 1.784 1 2.75 1h10.5c.966 0 1.75.784 1.75 1.75v7.5A1.75 1.75 0 0 1 13.25 12H9.06l-2.573 2.573A1.458 1.458 0 0 1 4 13.543V12H2.75A1.75 1.75 0 0 1 1 10.25Zm1.75-.25a.25.25 0 0 0-.25.25v7.5c0 .138.112.25.25.25h2a.75.75 0 0 1 .75.75v2.19l2.72-2.72a.749.749 0 0 1 .53-.22h4.5a.25.25 0 0 0 .25-.25v-7.5a.25.25 0 0 0-.25-.25Z"></path></svg></div>
      <div class="title">
        <div class="h2">
          <a href="/jekyll-theme-profile/style/2023/07/16/post-stacked.html">
            This is a stacked post style
          </a>
        </div>
        <div class="text-gray mb-2 ws-normal">Jul 16, 2023</div>
        <span class="IssueLabel IssueLabel--big color-bg-accent-emphasis color-fg-on-emphasis mr-1">style</span>
        <span class="IssueLabel IssueLabel--big color-bg-accent-emphasis color-fg-on-emphasis mr-1">stacked</span>
      </div>
    </div>
  </div>
  <div class="col-12 col-md-7">
    <div class="pb-5 pt-0 py-md-7 ml-5 border-bottom">
        <div class="image-container">
          <img class="rounded-2" src="https://github.blog/wp-content/uploads/2023/05/1200.630-Community-wLogo-e1698634509856.png" width="800" height="425" alt="This is a stacked post style" />
        </div>
        <div class="summary"> <p>Eos eu docendi tractatos sapientem, brute option menandri in vix, quando vivendo accommodare te ius. Nec melius fastidii constituam id, viderer theophrastus ad sit, hinc semper periculis cum id. Noluisse postulant assentior est in, no choro sadipscing repudiandae vix. Vis in euismod delenit dignissim. Ex quod nostrum sit, suas decore animal id ius, nobis solet detracto quo te.</p>
</div>
        <div class="more">
          <a href="/jekyll-theme-profile/style/2023/07/16/post-stacked.html" class="link-mktg arrow-target-mktg text-semibold f4-mktg">
            Contiue
            <svg xmlns="http://www.w3.org/2000/svg" class="octicon arrow-symbol-mktg" width="16" height="16"
              viewBox="0 0 16 16" fill="none">
              <path fill="currentColor"
                d="M7.28033 3.21967C6.98744 2.92678 6.51256 2.92678 6.21967 3.21967C5.92678 3.51256 5.92678 3.98744 6.21967 4.28033L7.28033 3.21967ZM11 8L11.5303 8.53033C11.8232 8.23744 11.8232 7.76256 11.5303 7.46967L11 8ZM6.21967 11.7197C5.92678 12.0126 5.92678 12.4874 6.21967 12.7803C6.51256 13.0732 6.98744 13.0732 7.28033 12.7803L6.21967 11.7197ZM6.21967 4.28033L10.4697 8.53033L11.5303 7.46967L7.28033 3.21967L6.21967 4.28033ZM10.4697 7.46967L6.21967 11.7197L7.28033 12.7803L11.5303 8.53033L10.4697 7.46967Z">
              </path>
              <path stroke="currentColor" d="M1.75 8H11" stroke-width="1.5" stroke-linecap="round"></path>
            </svg>
          </a>
        </div>
    </div>

  </div>
</div>

<div class="TimelineItem flex-wrap">
  <div class="col-12 col-md-5 position-relative">
    <div class="TimelineItem-title mt-5 position-sticky d-flex">
      <div class="TimelineItem-badge"><svg height="16" class="octicon octicon-comment" viewBox="0 0 16 16" version="1.1" width="16" aria-hidden="true"><path d="M1 2.75C1 1.784 1.784 1 2.75 1h10.5c.966 0 1.75.784 1.75 1.75v7.5A1.75 1.75 0 0 1 13.25 12H9.06l-2.573 2.573A1.458 1.458 0 0 1 4 13.543V12H2.75A1.75 1.75 0 0 1 1 10.25Zm1.75-.25a.25.25 0 0 0-.25.25v7.5c0 .138.112.25.25.25h2a.75.75 0 0 1 .75.75v2.19l2.72-2.72a.749.749 0 0 1 .53-.22h4.5a.25.25 0 0 0 .25-.25v-7.5a.25.25 0 0 0-.25-.25Z"></path></svg></div>
      <div class="title">
        <div class="h2">
          <a href="/jekyll-theme-profile/style/2023/07/16/post-topbar.html">
            This is a topbar post style
          </a>
        </div>
        <div class="authors-wrap text-bold mb-2 mr-3 ">George P. Burdell</div>
        <div class="text-gray mb-2 ws-normal">Jul 16, 2023</div>
        <span class="IssueLabel IssueLabel--big color-bg-accent-emphasis color-fg-on-emphasis mr-1">style</span>
        <span class="IssueLabel IssueLabel--big color-bg-accent-emphasis color-fg-on-emphasis mr-1">topbar</span>
      </div>
    </div>
  </div>
  <div class="col-12 col-md-7">
    <div class="pb-5 pt-0 py-md-7 ml-5 border-bottom">
        <div class="image-container">
          <img class="rounded-2" src="https://github.blog/wp-content/uploads/2023/10/hero-light.jpg" width="800" height="425" alt="This is a topbar post style" />
        </div>
        <div class="summary"> <p>Eos eu docendi tractatos sapientem, brute option menandri in vix, quando vivendo accommodare te ius. Nec melius fastidii constituam id, viderer theophrastus ad sit, hinc semper periculis cum id. Noluisse postulant assentior est in, no choro sadipscing repudiandae vix. Vis in euismod delenit dignissim. Ex quod nostrum sit, suas decore animal id ius, nobis solet detracto quo te.</p>
</div>
        <div class="more">
          <a href="/jekyll-theme-profile/style/2023/07/16/post-topbar.html" class="link-mktg arrow-target-mktg text-semibold f4-mktg">
            Contiue
            <svg xmlns="http://www.w3.org/2000/svg" class="octicon arrow-symbol-mktg" width="16" height="16"
              viewBox="0 0 16 16" fill="none">
              <path fill="currentColor"
                d="M7.28033 3.21967C6.98744 2.92678 6.51256 2.92678 6.21967 3.21967C5.92678 3.51256 5.92678 3.98744 6.21967 4.28033L7.28033 3.21967ZM11 8L11.5303 8.53033C11.8232 8.23744 11.8232 7.76256 11.5303 7.46967L11 8ZM6.21967 11.7197C5.92678 12.0126 5.92678 12.4874 6.21967 12.7803C6.51256 13.0732 6.98744 13.0732 7.28033 12.7803L6.21967 11.7197ZM6.21967 4.28033L10.4697 8.53033L11.5303 7.46967L7.28033 3.21967L6.21967 4.28033ZM10.4697 7.46967L6.21967 11.7197L7.28033 12.7803L11.5303 8.53033L10.4697 7.46967Z">
              </path>
              <path stroke="currentColor" d="M1.75 8H11" stroke-width="1.5" stroke-linecap="round"></path>
            </svg>
          </a>
        </div>
    </div>

  </div>
</div>

<div class="TimelineItem flex-wrap">
  <div class="col-12 col-md-5 position-relative">
    <div class="TimelineItem-title mt-5 position-sticky d-flex">
      <div class="TimelineItem-badge"><svg height="16" class="octicon octicon-comment" viewBox="0 0 16 16" version="1.1" width="16" aria-hidden="true"><path d="M1 2.75C1 1.784 1.784 1 2.75 1h10.5c.966 0 1.75.784 1.75 1.75v7.5A1.75 1.75 0 0 1 13.25 12H9.06l-2.573 2.573A1.458 1.458 0 0 1 4 13.543V12H2.75A1.75 1.75 0 0 1 1 10.25Zm1.75-.25a.25.25 0 0 0-.25.25v7.5c0 .138.112.25.25.25h2a.75.75 0 0 1 .75.75v2.19l2.72-2.72a.749.749 0 0 1 .53-.22h4.5a.25.25 0 0 0 .25-.25v-7.5a.25.25 0 0 0-.25-.25Z"></path></svg></div>
      <div class="title">
        <div class="h2">
          <a href="/jekyll-theme-profile/examples/2019/01/29/hello-world.html">
            Welcome to Jekyll!
          </a>
        </div>
        <div class="text-gray mb-2 ws-normal">Jan 29, 2019</div>
      </div>
    </div>
  </div>
  <div class="col-12 col-md-7">
    <div class="pb-5 pt-0 py-md-7 ml-5 border-bottom">
        <div class="image-container">
          <img class="rounded-2" src="/assets/img/default.png" width="800" height="425" alt="Welcome to Jekyll!" />
        </div>
        <div class="summary"> <p>You’ll find this post in your <code class="language-plaintext highlighter-rouge">_posts</code> directory. Go ahead and edit it and re-build the site to see your changes. You can rebuild the site in many different ways, but the most common way is to run <code class="language-plaintext highlighter-rouge">jekyll serve</code>, which launches a web server and auto-regenerates your site when a file is updated.</p>
</div>
        <div class="more">
          <a href="/jekyll-theme-profile/examples/2019/01/29/hello-world.html" class="link-mktg arrow-target-mktg text-semibold f4-mktg">
            Contiue
            <svg xmlns="http://www.w3.org/2000/svg" class="octicon arrow-symbol-mktg" width="16" height="16"
              viewBox="0 0 16 16" fill="none">
              <path fill="currentColor"
                d="M7.28033 3.21967C6.98744 2.92678 6.51256 2.92678 6.21967 3.21967C5.92678 3.51256 5.92678 3.98744 6.21967 4.28033L7.28033 3.21967ZM11 8L11.5303 8.53033C11.8232 8.23744 11.8232 7.76256 11.5303 7.46967L11 8ZM6.21967 11.7197C5.92678 12.0126 5.92678 12.4874 6.21967 12.7803C6.51256 13.0732 6.98744 13.0732 7.28033 12.7803L6.21967 11.7197ZM6.21967 4.28033L10.4697 8.53033L11.5303 7.46967L7.28033 3.21967L6.21967 4.28033ZM10.4697 7.46967L6.21967 11.7197L7.28033 12.7803L11.5303 8.53033L10.4697 7.46967Z">
              </path>
              <path stroke="currentColor" d="M1.75 8H11" stroke-width="1.5" stroke-linecap="round"></path>
            </svg>
          </a>
        </div>
    </div>

  </div>
</div>

<div class="TimelineItem flex-wrap">
  <div class="col-12 col-md-5 position-relative">
    <div class="TimelineItem-title mt-5 position-sticky d-flex">
      <div class="TimelineItem-badge"><svg height="16" class="octicon octicon-comment" viewBox="0 0 16 16" version="1.1" width="16" aria-hidden="true"><path d="M1 2.75C1 1.784 1.784 1 2.75 1h10.5c.966 0 1.75.784 1.75 1.75v7.5A1.75 1.75 0 0 1 13.25 12H9.06l-2.573 2.573A1.458 1.458 0 0 1 4 13.543V12H2.75A1.75 1.75 0 0 1 1 10.25Zm1.75-.25a.25.25 0 0 0-.25.25v7.5c0 .138.112.25.25.25h2a.75.75 0 0 1 .75.75v2.19l2.72-2.72a.749.749 0 0 1 .53-.22h4.5a.25.25 0 0 0 .25-.25v-7.5a.25.25 0 0 0-.25-.25Z"></path></svg></div>
      <div class="title">
        <div class="h2">
          <a href="/jekyll-theme-profile/examples/2019/01/29/syntax-highlighter.html">
            Syntax highlighter
          </a>
        </div>
        <div class="text-gray mb-2 ws-normal">Jan 29, 2019</div>
      </div>
    </div>
  </div>
  <div class="col-12 col-md-7">
    <div class="pb-5 pt-0 py-md-7 ml-5 border-bottom">
        <div class="image-container">
          <img class="rounded-2" src="/assets/img/default.png" width="800" height="425" alt="Syntax highlighter" />
        </div>
        <div class="summary"> <p>Below are some languages and their represntative styles.</p>
</div>
        <div class="more">
          <a href="/jekyll-theme-profile/examples/2019/01/29/syntax-highlighter.html" class="link-mktg arrow-target-mktg text-semibold f4-mktg">
            Contiue
            <svg xmlns="http://www.w3.org/2000/svg" class="octicon arrow-symbol-mktg" width="16" height="16"
              viewBox="0 0 16 16" fill="none">
              <path fill="currentColor"
                d="M7.28033 3.21967C6.98744 2.92678 6.51256 2.92678 6.21967 3.21967C5.92678 3.51256 5.92678 3.98744 6.21967 4.28033L7.28033 3.21967ZM11 8L11.5303 8.53033C11.8232 8.23744 11.8232 7.76256 11.5303 7.46967L11 8ZM6.21967 11.7197C5.92678 12.0126 5.92678 12.4874 6.21967 12.7803C6.51256 13.0732 6.98744 13.0732 7.28033 12.7803L6.21967 11.7197ZM6.21967 4.28033L10.4697 8.53033L11.5303 7.46967L7.28033 3.21967L6.21967 4.28033ZM10.4697 7.46967L6.21967 11.7197L7.28033 12.7803L11.5303 8.53033L10.4697 7.46967Z">
              </path>
              <path stroke="currentColor" d="M1.75 8H11" stroke-width="1.5" stroke-linecap="round"></path>
            </svg>
          </a>
        </div>
    </div>

  </div>
</div>

  </div>
</div>

Customizing Your Timeline

The timeline feature is highly customizable, allowing you to tailor it to your specific needs and design preferences. To learn more about how to customize your timeline, including available parameters, CSS classes, and dependencies, please refer to our detailed documentation:

Post Timeline Documentation

This documentation provides in-depth information on:

All available parameters and their usage
How to modify the appearance of the timeline
Dependencies and required files
Tips for integrating the timeline with your Jekyll theme

Bringing It All Together

The timeline feature is more than just a way to display posts — it’s a storytelling tool. Whether you’re narrating your blog’s journey, showcasing your product’s evolution, or presenting your company’s growth, the timeline provides a visually compelling way to engage your audience.

So why stick to the same old list format when you can have a dynamic, engaging timeline? Give it a try and watch as your content comes to life in a whole new way. Your readers (and your website) will thank you!

Ready to get started? Just add that simple include to your template, consult the documentation for customization options, and you’re on your way to a more engaging, visual website. Happy timeline creating!

Tags:

What is the Timeline Feature?

Setting Up Your Timeline

Use Case 1: Company News and Updates

Use Case 2: Changelogs

Use Case 3: Portfolio Timeline

Customizing Your Timeline

Bringing It All Together

Table of Contents