Floating Profile Picture for Your Quarto Website About Page

In this post I share how to make your profile picture “float” in your quarto website about page. To achieve the desired effect I use the trestles theme which for large screens displays as a two column layout. The mobile view is unaffected. Currently the YAML for my about page is the following.

title: "About"
image: 
  profile.svg
about:
  image-shape: rectangle
  image-width: 5cm
  template: trestles
  links:
    - icon: linkedin
      text: LinkedIn
      href: https://www.linkedin.com/in/filipr/
    - icon: github
      text: GitHub
      href: https://www.github.com/freierson
echo: false
warning: false

To make the profile picture and links float as the user scrolls I added the follow CSS.

@media (min-width: 991.98px) {
    div.quarto-about-trestles .about-entity {
        position: sticky;
        top: 50px;
        align-self: flex-start;
    }
}

I hope that you have found this useful.