https://christianinterno.github.io/blog/

1<!DOCTYPE html> <html lang="en"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title> blog | You R. Name </title> <meta name="author" content="You R. Name"> <meta name="description" content="A simple, whitespace theme for academics. Based on [*folio](https://github.com/bogoli/-folio) design. "> <meta name="keywords" content="jekyll, jekyll-theme, academic-website, portfolio-website"> <link rel="stylesheet" href="/assets/css/bootstrap.min.css?a4b3f509e79c54a512b890d73235ef04"> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/css/mdb.min.css" integrity="sha256-jpjYvU3G3N6nrrBwXJoVEYI/0zw8htfFnhT9ljN3JJw=" crossorigin="anonymous"> <link defer rel="stylesheet" href="/assets/css/academicons.min.css?f0b7046b84e425c55f3463ac249818f5"> <link defer rel="stylesheet" href="/assets/css/scholar-icons.css?62b2ac103a88034e6882a5be5f3e2772"> <link defer rel="stylesheet" type="text/css" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700|Roboto+Slab:100,300,400,500,700|Material+Icons&amp;display=swap"> <link defer rel="stylesheet" href="/assets/css/jekyll-pygments-themes-github.css?591dab5a4e56573bf4ef7fd332894c99" media="" id="highlight_theme_light"> <link rel="shortcut icon" href="data:image/svg+xml,&lt;svg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%20100%20100%22&gt;&lt;text%20y=%22.9em%22%20font-size=%2290%22&gt;%E2%9A%9B%EF%B8%8F&lt;/text&gt;&lt;/svg&gt;"> <link rel="stylesheet" href="/assets/css/main.css?d41d8cd98f00b204e9800998ecf8427e"> <link rel="canonical" href="https://christianinterno.github.io/blog/"> 

1<script src="/assets/js/theme.js?a81d82887dd692e91686b43de4542f18"></script>

1 <link defer rel="stylesheet" href="/assets/css/jekyll-pygments-themes-native.css?5847e5ed4a4568527aa6cfab446049ca" media="none" id="highlight_theme_dark"> 

1<script>
2    initTheme();
3  </script>

3 </head> <body class="fixed-top-nav "> <header> <nav id="navbar" class="navbar navbar-light navbar-expand-sm fixed-top" role="navigation"> <div class="container"> <a class="navbar-brand title font-weight-lighter" href="/"> <span class="font-weight-bold">You</span> R. Name </a> <button class="navbar-toggler collapsed ml-auto" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar top-bar"></span> <span class="icon-bar middle-bar"></span> <span class="icon-bar bottom-bar"></span> </button> <div class="collapse navbar-collapse text-right" id="navbarNav"> <ul class="navbar-nav ml-auto flex-nowrap"> <li class="nav-item "> <a class="nav-link" href="/">about </a> </li> <li class="nav-item active"> <a class="nav-link" href="/blog/">blog <span class="sr-only">(current)</span> </a> </li> <li class="nav-item "> <a class="nav-link" href="/publications/">publications </a> </li> <li class="nav-item "> <a class="nav-link" href="/projects/">projects </a> </li> <li class="nav-item "> <a class="nav-link" href="/repositories/">repositories </a> </li> <li class="nav-item "> <a class="nav-link" href="/cv/">cv </a> </li> <li class="nav-item "> <a class="nav-link" href="/teaching/">teaching </a> </li> <li class="nav-item "> <a class="nav-link" href="/people/">people </a> </li> <li class="nav-item dropdown active"> <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">submenus <span class="sr-only">(current)</span> </a> <div class="dropdown-menu dropdown-menu-right" aria-labelledby="navbarDropdown"> <a class="dropdown-item " href="/books/">bookshelf</a> <div class="dropdown-divider"></div> <a class="dropdown-item active" href="/blog/">blog</a> </div> </li> <li class="nav-item"> <button id="search-toggle" title="Search" onclick="openSearchModal()"> <span class="nav-link">ctrl k <i class="ti ti-search"></i></span> </button> </li> <li class="toggle-container"> <button id="light-toggle" title="Change theme"> <i class="ti ti-sun-moon" id="light-toggle-system"></i> <i class="ti ti-moon-filled" id="light-toggle-dark"></i> <i class="ti ti-sun-filled" id="light-toggle-light"></i> </button> </li> </ul> </div> </div> </nav> <progress id="progress" value="0"> <div class="progress-container"> <span class="progress-bar"></span> </div> </progress> </header> <div class="container mt-5" role="main"> <div class="post"> <div class="header-bar"> <h1>al-folio</h1> <h2>a simple whitespace theme for academics</h2> </div> <div class="tag-category-list"> <ul class="p-0 m-0"> <li> <i class="fa-solid fa-hashtag fa-sm"></i> <a href="/blog/tag/formatting">formatting</a> </li> <p>•</p> <li> <i class="fa-solid fa-hashtag fa-sm"></i> <a href="/blog/tag/images">images</a> </li> <p>•</p> <li> <i class="fa-solid fa-hashtag fa-sm"></i> <a href="/blog/tag/links">links</a> </li> <p>•</p> <li> <i class="fa-solid fa-hashtag fa-sm"></i> <a href="/blog/tag/math">math</a> </li> <p>•</p> <li> <i class="fa-solid fa-hashtag fa-sm"></i> <a href="/blog/tag/code">code</a> </li> <p>•</p> <li> <i class="fa-solid fa-hashtag fa-sm"></i> <a href="/blog/tag/blockquotes">blockquotes</a> </li> <p>•</p> <li> <i class="fa-solid fa-tag fa-sm"></i> <a href="/blog/category/external-services">external-services</a> </li> </ul> </div> <br> <div class="container featured-posts"> <div class="row row-cols-2"> <div class="col mb-4"> <a href="/blog/2021/distill/"> <div class="card hoverable"> <div class="row g-0"> <div class="col-md-12"> <div class="card-body"> <div class="float-right"> <i class="fa-solid fa-thumbtack fa-xs"></i> </div> <h3 class="card-title text-lowercase">a distill-style blog post</h3> <p class="card-text">an example of a distill-style blog post and main elements</p> <p class="post-meta"> 25 min read   ·   <a href="/blog/2021"> <i class="fa-solid fa-calendar fa-sm"></i> 2021 </a> </p> </div> </div> </div> </div> </a> </div> <div class="col mb-4"> <a href="/blog/2015/code/"> <div class="card hoverable"> <div class="row g-0"> <div class="col-md-12"> <div class="card-body"> <div class="float-right"> <i class="fa-solid fa-thumbtack fa-xs"></i> </div> <h3 class="card-title text-lowercase">a post with code</h3> <p class="card-text">an example of a blog post with some code</p> <p class="post-meta"> 4 min read   ·   <a href="/blog/2015"> <i class="fa-solid fa-calendar fa-sm"></i>

3 2015 </a> </p> </div> </div> </div> </div> </a> </div> </div> </div> <hr> <ul class="post-list"> <li> <h3> <a class="post-title" href="/blog/2025/plotly/">a post with plotly.js</a> </h3> <p>this is what included plotly.js code could look like</p> <p class="post-meta"> 2 min read   ·   March 26, 2025 </p> <p class="post-tags"> <a href="/blog/2025"> <i class="fa-solid fa-calendar fa-sm"></i> 2025 </a>   ·   <a href="/blog/tag/formatting"> <i class="fa-solid fa-hashtag fa-sm"></i> formatting</a>   <a href="/blog/tag/charts"> <i class="fa-solid fa-hashtag fa-sm"></i> charts</a>   ·   <a href="/blog/category/sample-posts"> <i class="fa-solid fa-tag fa-sm"></i> sample-posts</a> </p> </li> <li> <div class="row"> <div class="col-sm-9"> <h3> <a class="post-title" href="/blog/2024/photo-gallery/">a post with image galleries</a> </h3> <p>this is what included image galleries could look like</p> <p class="post-meta"> 2 min read   ·   December 04, 2024 </p> <p class="post-tags"> <a href="/blog/2024"> <i class="fa-solid fa-calendar fa-sm"></i> 2024 </a>   ·   <a href="/blog/tag/formatting"> <i class="fa-solid fa-hashtag fa-sm"></i> formatting</a>   <a href="/blog/tag/images"> <i class="fa-solid fa-hashtag fa-sm"></i> images</a>   ·   <a href="/blog/category/sample-posts"> <i class="fa-solid fa-tag fa-sm"></i> sample-posts</a> </p> </div> <div class="col-sm-3"> <img class="card-img" src="/assets/img/9.jpg" style="object-fit: cover; height: 90%" alt="image"> </div> </div> </li> <li> <h3> <a class="post-title" href="https://blog.google/technology/ai/google-gemini-update-flash-ai-assistant-io-2024/" target="_blank" rel="external nofollow noopener">Google Gemini updates: Flash 1.5, Gemma 2 and Project Astra</a> <svg width="2rem" height="2rem" viewbox="0 0 40 40" xmlns="http://www.w3.org/2000/svg"> <path d="M17 13.5v6H5v-12h6m3-3h6v6m0-6-9 9" class="icon_svg-stroke" stroke="#999" stroke-width="1.5" fill="none" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round"></path> </svg> </h3> <p>We’re sharing updates across our Gemini family of models and a glimpse of Project Astra, our vision for the future of AI assistants.</p> <p class="post-meta"> 7 min read   ·   May 14, 2024   ·   Google Blog </p> <p class="post-tags"> <a href="/blog/2024"> <i class="fa-solid fa-calendar fa-sm"></i> 2024 </a> </p> </li> <li> <h3> <a class="post-title" href="/blog/2024/tabs/">a post with tabs</a> </h3> <p>this is what included tabs in a post could look like</p> <p class="post-meta"> 2 min read   ·   May 01, 2024 </p> <p class="post-tags"> <a href="/blog/2024"> <i class="fa-solid fa-calendar fa-sm"></i> 2024 </a>   ·   <a href="/blog/tag/formatting"> <i class="fa-solid fa-hashtag fa-sm"></i> formatting</a>   <a href="/blog/tag/code"> <i class="fa-solid fa-hashtag fa-sm"></i> code</a>   ·   <a href="/blog/category/sample-posts"> <i class="fa-solid fa-tag fa-sm"></i> sample-posts</a> </p> </li> <li> <h3> <a class="post-title" href="/blog/2024/typograms/">a post with typograms</a> </h3> <p>this is what included typograms code could look like</p> <p class="post-meta"> 1 min read   ·   April 29, 2024 </p> <p class="post-tags"> <a href="/blog/2024"> <i class="fa-solid fa-calendar fa-sm"></i> 2024 </a>   ·   <a href="/blog/tag/formatting"> <i class="fa-solid fa-hashtag fa-sm"></i> formatting</a>   <a href="/blog/tag/diagrams"> <i class="fa-solid fa-hashtag fa-sm"></i> diagrams</a>   ·   <a href="/blog/category/sample-posts"> <i class="fa-solid fa-tag fa-sm"></i> sample-posts</a> </p> </li> </ul> <nav aria-label="Blog page navigation"> <ul class="pagination pagination-lg justify-content-center"> <li class="page-item disabled"> <a class="page-link" href="" tabindex="-1" aria-disabled="">&lt;</a> </li> <li class="page-item active"> <a class="page-link" href="/blog/" title="blog">1</a> </li> <li class="page-item "> <a class="page-link" href="/blog/page/2/" title="blog - page 2">2</a> </li> <li class="page-item "> <a class="page-link" href="/blog/page/3/" title="blog - page 3">3</a> </li> <li class="page-item "> <a class="page-link" href="/blog/page/4/" title="blog - page 4">4</a> </li> <li class="page-item "> <a class="page-link" href="/blog/page/5/" title="blog - page 5">5</a> </li> <li class="page-item "> <a class="page-link" href="/blog/page/2/">&gt;</a> </li> </ul> </nav> </div> </div> <footer class="fixed-bottom" role="contentinfo"> <div class="container mt-0"> © Copyright 2025 You R. Name. Powered by <a href="https://jekyllrb.com/" target="_blank" rel="external nofollow noopener">Jekyll</a> with <a href="https://github.com/alshedivat/al-folio" rel="external nofollow noopener" target="_blank">al-folio</a> theme. Hosted by <a href="https://pages.github.com/" target="_blank" rel="external nofollow noopener">GitHub Pages</a>. Photos from <a href="https://unsplash.com" target="_blank" rel="external nofollow noopener">Unsplash</a>. </div> </footer> 

3<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>

3 

3<script src="/assets/js/bootstrap.bundle.min.js"></script>

3 

3<script src="https://cdn.jsdelivr.net/npm/[email protected]/js/mdb.min.js" integrity="sha256-NdbiivsvWt7VYCt6hYNT3h/th9vSTL4EDWeGs5SN3DA=" crossorigin="anonymous"></script>

3 

3<script defer src="https://cdn.jsdelivr.net/npm/[email protected]/dist/masonry.pkgd.min.js" integrity="sha256-Nn1q/fx0H7SNLZMQ5Hw5JLaTRZp0yILA/FRexe19VdI=" crossorigin="anonymous"></script>

3 

3<script defer src="https://cdn.jsdelivr.net/npm/[email protected]/imagesloaded.pkgd.min.js" integrity="sha256-htrLFfZJ6v5udOG+3kNLINIKh2gvoKqwEhHYfTTMICc=" crossorigin="anonymous"></script>

3 

3<script defer src="/assets/js/masonry.js?a0db7e5d5c70cc3252b3138b0c91dcaf" type="text/javascript"></script>

3 

3<script defer src="https://cdn.jsdelivr.net/npm/[email protected]/dist/medium-zoom.min.js" integrity="sha256-ZgMyDAIYDYGxbcpJcfUnYwNevG/xi9OHKaR/8GK+jWc=" crossorigin="anonymous"></script>

3 

3<script defer src="/assets/js/zoom.js?85ddb88934d28b74e78031fd54cf8308"></script>

3 

3<script src="/assets/js/no_defer.js?2781658a0a2b13ed609542042a859126"></script>

3 

3<script defer src="/assets/js/common.js?c15de51d4bb57887caa2c21988d97279"></script>

3 

3<script defer src="/assets/js/copy_code.js?c8a01c11a92744d44b093fc3bda915df" type="text/javascript"></script>

3 

3<script defer src="/assets/js/jupyter_new_tab.js?d9f17b6adc2311cbabd747f4538bb15f"></script>

3 

3<script async src="https://d1bxh8uas1mnw7.cloudfront.net/assets/embed.js"></script>

3 

3<script async src="https://badge.dimensions.ai/badge.js"></script>

3 

3<script defer type="text/javascript" id="MathJax-script" src="https://cdn.jsdelivr.net/npm/[email protected]/es5/tex-mml-chtml.js" integrity="sha256-MASABpB4tYktI2Oitl4t+78w/lyA+D7b/s9GEP0JOGI=" crossorigin="anonymous"></script>

3 

3<script src="/assets/js/mathjax-setup.js?a5bb4e6a542c546dd929b24b8b236dfd"></script>

3 

3<script defer src="https://cdnjs.cloudflare.com/polyfill/v3/polyfill.min.js?features=es6" crossorigin="anonymous"></script>

3 

3<script defer src="/assets/js/progress-bar.js?2f30e0e6801ea8f5036fa66e1ab0a71a" type="text/javascript"></script>

3 

3<script src="/assets/js/vanilla-back-to-top.min.js?f40d453793ff4f64e238e420181a1d17"></script>

3 

3<script>
4    addBackToTop();
5  </script>

5 

5<script type="module" src="/assets/js/search/ninja-keys.min.js?a3446f084dcaecc5f75aa1757d087dcf"></script>

5 <ninja-keys hidebreadcrumbs noautoloadmdicons placeholder="Type to start searching"></ninja-keys> 

5<script src="/assets/js/search-setup.js?6c304f7b1992d4b60f7a07956e52f04a"></script>

5 

5<script src="/assets/js/search-data.js"></script>

5 

5<script src="/assets/js/shortcut-key.js?6f508d74becd347268a7f822bca7309d"></script>

5 </body> </html>