<!DOCTYPE html>
<html lang="en"><head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=2">
    <meta name="author" content="Mostafa Elshamy">
    <meta name="description" content="Creating magical web experiences, a blog.">
    <meta name="theme-color" content="#ffffff">
    <title>Mostafa Elshamy</title>
    <link rel="preconnect" href="https://busy-dog-44.deno.dev">
    <link rel="preconnect" href="https://important-deer-81.deno.dev">
    <link rel="preconnect" href="https://early-fox-61.deno.dev">
    <link rel="preload" href="https://early-fox-61.deno.dev/sf-pro-text_regular.woff2" as="font" type="font/woff2" crossorigin="">
    <link rel="preload" href="https://early-fox-61.deno.dev/sf-pro-text_light.woff2" as="font" type="font/woff2" crossorigin="">
    <link rel="preload" href="https://early-fox-61.deno.dev/sf-pro-display_bold.woff2" as="font" type="font/woff2" crossorigin="">
    <link rel="preload" href="https://early-fox-61.deno.dev/sf-mono_regular.woff" as="font" type="font/woff" crossorigin="">
    <link rel="apple-touch-icon" href="/apple-touch-icon.png">
    <link rel="manifest" href="/manifest.webmanifest">
    <style data-shared="">html,body,section,nav,article,aside,h1,h2,h3,h4,h5,h6,hgroup,header,footer,address,p,hr,pre,blockquote,ol,ul,li,dl,dt,dd,figure,figcaption,div,table,caption,form,fieldset{vertical-align:baseline;margin:0;padding:0}body{font-family:var(--type-body);font-feature-settings:"liga" 1,"onum" 1,"kern" 1;background-color:rgb(var(--background-color));color:rgb(var(--text-color))}@supports (font-variant-ligatures: common-ligatures) and (font-variant-numeric: oldstyle-nums) and (font-kerning: normal){body{font-feature-settings:normal;font-variant-ligatures:common-ligatures;font-variant-numeric:oldstyle-nums;font-kerning:normal}}h1,h2,h3,h4,h5,h6{font-family:var(--type-display);font-feature-settings:"onum" 0}@supports (font-variant-numeric: lining-nums){h1,h2,h3,h4,h5,h6{font-feature-settings:normal;font-variant-numeric:lining-nums}}h3,abbr{hyphens:manual;text-transform:lowercase;font-feature-settings:"smcp" 1,"c2sc" 1}@supports (font-variant-caps: all-small-caps){h3,abbr{font-feature-settings:normal;font-variant-caps:all-small-caps}}.caps{letter-spacing:.05em}sub{font-feature-settings:"subs" 1}@supports (font-variant-position: sub){sub{font-feature-settings:normal;font-variant-position:sub}}@supports ((font-variant-position: sub) or (font-feature-settings: "subs" 1)){sub{vertical-align:inherit;font-size:inherit}}sup{font-feature-settings:"sups" 1}@supports (font-variant-position: super){sup{font-feature-settings:normal;font-variant-position:super}}@supports ((font-variant-position: super) or (font-feature-settings: "sups" 1)){sup{vertical-align:inherit;font-size:inherit}}p,blockquote{max-width:38em}p{margin-top:0;color:rgb(var(--text-color));hyphens:auto;hyphenate-limit-lines:2;hyphenate-limit-chars:6 3 2;hyphenate-limit-zone:8%;hyphenate-limit-last:always}blockquote{margin-left:1em}blockquote p{font-style:italic;margin-bottom:0}blockquote footer{text-align:right}.quoted p{quotes:"\201c" "\201d" "\2018" "\2019"}.quoted p:before{content:open-quote;margin-left:-.83ch}.quoted p:after{content:close-quote}hr{height:0;margin:0 0 1em;border-color:#0000001f;border-width:1px 0 0;box-sizing:content-box}ul,ol{margin-bottom:1em}p:has(+ul),p:has(+ol),ul:has(+p),ol:has(+p){margin-bottom:.5em}li ul,li ol{margin-bottom:0}ul{padding-left:1em}ol{padding-left:revert}a,a:link,a:visited,a:hover,a:active{color:rgb(var(--primary-color));text-decoration:none;transition:color .5s ease}a:visited{color:rgb(var(--accent-color))}a:hover,a:active{text-decoration:underline;text-decoration-skip-ink:auto}
</style>
    <style data-shared="">html,pre,p code,small{font-size:14px}:root{--line-height-h1: .6060606060606061em;--line-height-h2: .7692307692307693em;--line-height-h3: 1em;--line-height-body: 1.25em;--font-size-body: 1rem}h1{font-size:2.0625rem;line-height:1.2121212121212122}h2{font-size:1.625rem;line-height:.7692307692307693}h3{font-size:1.25rem;line-height:1}body,.type--body,p,h4,h5,h6,button,input[type=button]{font-size:1rem;line-height:1.25}p,blockquote{margin-bottom:1.25em}.type--body{font-family:var(--type-body);font-weight:400}@media (min-width: 60em){:root{--line-height-h1:.6190476190476191em;--line-height-h2: .7878787878787878em;--line-height-h3: 1em;--line-height-body: 1.3em;--font-size-body: 1.25rem}h1{font-size:2.625rem;line-height:1.2380952380952381}h2{font-size:2.0625rem;line-height:.7878787878787878}h3{font-size:1.625rem;line-height:1}body,.type--body,p,h4,h5,h6,button,input[type=button]{font-size:1.25rem;line-height:1.3}p,blockquote{margin-bottom:1.3em}.type--body{font-family:var(--type-body);font-weight:400}}@media (min-width: 120em){:root{--line-height-h1: .6190476190476191em;--line-height-h2: .7878787878787878em;--line-height-h3: 1em;--line-height-body: 1.3em;--font-size-body: 1.25rem}h1{font-size:2.625rem;line-height:1.2380952380952381}h2{font-size:2.0625rem;line-height:.7878787878787878}h3{font-size:1.625rem;line-height:1}body,.type--body,p,h4,h5,h6,button,input[type=button]{font-size:1.25rem;line-height:1.3}p,blockquote{margin-bottom:1.3em}.type--body{font-family:var(--type-body);font-weight:400}}
</style>
    <style data-shared="">button,input[type=button],a.button{--button-color: var(--accent-color);--opacity-enabled: 1;--opacity-hover: .76;--opacity-active: .38;--opacity-disabled: .32;font-family:var(--type-body);background-color:rgba(var(--button-color),var(--opacity-enabled));border:1px solid transparent;border-radius:var(--border-radius);text-decoration:none;padding:0 8px;display:inline-flex;position:relative;align-items:baseline;justify-content:center;box-sizing:border-box;height:var(--line-height-body);user-select:none;-webkit-appearance:none;overflow:hidden;color:rgb(var(--text-color))}button:hover,input[type=button]:hover,a.button:hover{cursor:pointer;background-color:rgba(var(--button-color),var(--opacity-hover));transition:background-color .5s ease}button:active,input[type=button]:active,a.button:active{outline:none;background-color:rgba(var(--button-color),var(--opacity-active))}button[disabled],input[type=button][disabled],a.button:not(:link){outline:none;background-color:rgba(var(--button-color),var(--opacity-disabled));color:rgba(var(--text-color),.38)}button.text,input[type=button].text,a.button.text{--button-color: 0, 0, 0;--opacity-enabled: 0;--opacity-hover: .12;--opacity-disabled: 0}
</style>
    <style data-shared="">@font-face{font-family:SF Pro Display;src:url(https://early-fox-61.deno.dev/sf-pro-display_regular.woff2) format("woff2");font-weight:400;font-display:fallback}@font-face{font-family:SF Pro Display;src:url(https://early-fox-61.deno.dev/sf-pro-display_bold.woff2) format("woff2");font-weight:700;font-display:fallback}@font-face{font-family:SF Pro Text;src:url(https://early-fox-61.deno.dev/sf-pro-text_light.woff2) format("woff2");font-weight:300;font-display:fallback}@font-face{font-family:SF Pro Text;src:url(https://early-fox-61.deno.dev/sf-pro-text_regular.woff2) format("woff2");font-weight:400;font-display:fallback}@font-face{font-family:SF Pro Text;src:url(https://early-fox-61.deno.dev/sf-pro-text_regular-italic.woff2) format("woff2");font-weight:400;font-style:italic;font-display:fallback}@font-face{font-family:SF Pro Text;src:url(https://early-fox-61.deno.dev/sf-pro-text_semibold.woff2) format("woff2");font-weight:600;font-display:fallback}@font-face{font-family:SF Pro Text;src:url(https://early-fox-61.deno.dev/sf-pro-text_bold.woff2) format("woff2");font-weight:700;font-display:fallback}@font-face{font-family:SF Ar;src:url(https://early-fox-61.deno.dev/sf-ar_regular.woff2) format("woff2");font-weight:400;font-display:fallback}@font-face{font-family:SF Mono;src:url(https://early-fox-61.deno.dev/sf-mono_regular.woff) format("woff");font-weight:400;font-display:fallback}@font-face{font-family:SF Mono;src:url(https://early-fox-61.deno.dev/sf-mono_bold.woff) format("woff");font-weight:700;font-display:fallback}:root{--type-mono: "SF Mono", monospace;--type-display: "SF Pro Display", "SF Ar", sans-serif;--type-body: "SF Pro Text", "SF Ar", sans-serif;--background-color: 255, 255, 255;--text-color: 37, 37, 36;--primary-color: transparent;--accent-color: 45, 112, 171;--border-radius: 3px;--text-decoration-color: 0, 208, 193;--amethyst: rgb(116, 109, 155);--malachite: rgb(20, 146, 101);--lapis-lazuli: rgb(45, 112, 171);--rv21: rgb(255,188,206);--g21: rgb(177,199,144);--b21: rgb(164,218,239);--pink: rgb(255,45,85);--red: rgb(255,59,48);--green: rgb(40,205,65);--blue: rgb(0,122,255)}a,a:link,a:visited,a:hover,a:active{text-decoration:underline;text-decoration-color:rgba(var(--accent-color),1);transition:none}a:visited{color:rgb(var(--text-color))}a:hover,a:active{color:rgb(var(--accent-color));text-decoration-color:rgb(var(--accent-color))}h1,h2,h3,h4,h5,h6{font-size:var(--font-size-body);margin-bottom:var(--line-height-body)}h1{margin-bottom:0}header a.base{color:rgb(var(--text-color));font-weight:700;text-decoration:none}header .logo{background:url(https://important-deer-81.deno.dev/img/about/profile_sm.webp),linear-gradient(90deg,var(--lapis-lazuli),rgb(141 206 255));background-position:center;background-size:cover;border-radius:50%}header .tagline{font-weight:300;font-size:smaller}header #main-links a,header #main-links a:link,header #main-links a:visited{color:#00000040;display:flex;align-items:center}header #main-links a:hover,header #main-links a:active{color:rgba(var(--accent-color),.8)}header #main-links button{border:0 none;margin-bottom:0;color:#0003;padding:0}header #main-links button:hover{background-color:transparent;color:rgba(var(--accent-color),.8)}header #main-links .symbol{padding-top:0}@media screen and (max-width: 60em){header #main-links a,header #main-links a:link,header #main-links a:visited{color:#0003}header #main-links a,header #main-links button,header #main-links a.button{padding:8px;height:auto;color:#0003;border-radius:50%}header #main-links a:first-child{padding-left:0}header #main-links button:last-child{color:#0003;background-color:transparent}}button,input[type=button],a.button{--button-color: 255, 255, 255;--opacity-hover: 1;--opacity-active: .24;align-items:center;margin-bottom:.5em;padding-bottom:2px;border:1.5px solid rgba(0,0,0,.2);text-decoration:none;border-radius:4px;font-feature-settings:normal;font-variant-caps:all-small-caps;gap:4px}button:hover,input[type=button]:hover,a.button:hover{background-color:rgba(var(--text-color),var(--opacity-hover));color:rgb(var(--background-color));transition:none}button:active,input[type=button]:active,a.button:active{color:rgb(var(--background-color));background-color:rgba(0,0,0,var(--opacity-active))}@media screen and (max-width: 60em){button,input[type=button],a.button{height:calc(1.5 * var(--line-height-body))}}.symbol{padding-top:2px}.scaled.symbol{width:var(--font-size-body);max-height:var(--font-size-body)}#header .actions{& a.button .symbol,button .symbol,input.button .symbol{width:20px;flex-shrink:0}& a.button .txt,button .txt,button .symbol{flex-grow:1}}.bookshelf ad-card img{aspect-ratio:1 / 1.5;object-fit:cover;max-height:200px;border-radius:calc(2*var(--border-radius))}.bookshelf ad-card::part(title),.bookshelf ad-card::part(subtitle){font-size:12px}.bookshelf ad-card::part(subtitle){font-weight:300}
</style>
    <style>body{display:flex;flex-direction:column;align-items:stretch;min-height:100vh}header{display:flex;flex-direction:column;flex:0 0 auto;padding:1em;box-sizing:border-box}header hgroup h1{display:flex;flex-direction:row;align-items:flex-start;margin-bottom:var(--line-height-body)}header .logo{display:block;width:calc(4px + 2*var(--line-height-body));aspect-ratio:1 / 1;margin-right:8px}header a.base{display:flex;align-items:center;gap:4px}#links{display:flex;height:calc(2*var(--line-height-body));flex-direction:column;justify-content:space-between;gap:4px}#links #main-links{display:flex;gap:8px}header .actions{display:flex;flex-direction:column;align-items:flex-start}main{display:flex;flex-direction:column;flex-grow:1;flex-basis:auto;padding:1em;box-sizing:border-box}@media screen and (min-width: 60em){body{flex-direction:row}header{width:38.2%}main{width:61.8%;padding-top:calc(1em + 4px + 3 * var(--line-height-body));min-height:calc(100vh - 40px - 2em)}}@media screen and (max-width: 60em){header .logo{width:calc(3*var(--line-height-body))}header #links{height:calc(3*var(--line-height-body))}main{width:100%;padding-top:1em}}
</style>
    <script type="importmap">
      {
        "imports": {
          "flare": "https://busy-dog-44.deno.dev/melhosseiny/flare/main/flare.js",
          "router": "https://busy-dog-44.deno.dev/melhosseiny/flare/main/router.js"
        }
      }
    </script>
    <script type="module">
      import { set_shared_style_sheets } from "flare";
      const document_style_sheets = [...document.styleSheets].filter(sheet =>
        sheet.ownerNode.hasAttribute("data-shared")
      )
      console.log(document_style_sheets);
      set_shared_style_sheets(document_style_sheets);
    </script>
    <script type="module">
      import { set_shared_style_sheets } from "https://busy-dog-44.deno.dev/melhosseiny/sourdough/main/sourdough.js";
      const document_style_sheets = [...document.styleSheets].filter(sheet =>
        sheet.ownerNode.hasAttribute("data-shared")
      )
      set_shared_style_sheets(document_style_sheets);
    </script>
  </head>
  <body>
    <ad-progress id="progress"></ad-progress>
    <ad-toast id="toast"></ad-toast>
    <wd-links-dialog id="links-dialog"></wd-links-dialog>
    <wd-contact-dialog id="contact-dialog"></wd-contact-dialog>
    <header id="header">
      <hgroup>
        <h1 class="type--body">
          <span class="logo"></span>
          <nav id="links">
            <a class="base" href="/">
              Mostafa Elshamy
            </a>
            <nav id="main-links">
              <a title="GitHub" href="https://github.com/melhosseiny" target="_blank" rel="noreferrer">
                <svg class="scaled symbol" fill="currentColor" viewbox="0 0 16 16">
                    <path d="M8 0c4.42 0 8 3.58 8 8a8.013 8.013 0 0 1-5.45 7.59c-.4.08-.55-.17-.55-.38 0-.27.01-1.13.01-2.2 0-.75-.25-1.23-.54-1.48 1.78-.2 3.65-.88 3.65-3.95 0-.88-.31-1.59-.82-2.15.08-.2.36-1.02-.08-2.12 0 0-.67-.22-2.2.82-.64-.18-1.32-.27-2-.27-.68 0-1.36.09-2 .27-1.53-1.03-2.2-.82-2.2-.82-.44 1.1-.16 1.92-.08 2.12-.51.56-.82 1.28-.82 2.15 0 3.06 1.86 3.75 3.64 3.95-.23.2-.44.55-.51 1.07-.46.21-1.61.55-2.33-.66-.15-.24-.6-.83-1.23-.82-.67.01-.27.38.01.53.34.19.73.9.82 1.13.16.45.68 1.31 2.69.94 0 .67.01 1.3.01 1.49 0 .21-.15.45-.55.38A7.995 7.995 0 0 1 0 8c0-4.42 3.58-8 8-8Z"></path>
                </svg>
              </a>
              <a title="LinkedIn" href="https://www.linkedin.com/in/mostafa-elshamy" target="_blank" rel="noreferrer">
                <svg class="scaled symbol" xmlns="http://www.w3.org/2000/svg" viewbox="2 2 20 20" fill="currentColor">
                  <path d="M20.5 2h-17A1.5 1.5 0 002 3.5v17A1.5 1.5 0 003.5 22h17a1.5 1.5 0 001.5-1.5v-17A1.5 1.5 0 0020.5 2zM8 19H5v-9h3zM6.5 8.25A1.75 1.75 0 118.3 6.5a1.78 1.78 0 01-1.8 1.75zM19 19h-3v-4.74c0-1.42-.6-1.93-1.38-1.93A1.74 1.74 0 0013 14.19a.66.66 0 000 .14V19h-3v-9h2.9v1.3a3.11 3.11 0 012.7-1.4c1.55 0 3.36.86 3.36 3.66z"></path>
                </svg>
              </a>
              <a title="Bluesky" href="https://bsky.app/profile/melshamy.bsky.social" target="_blank" rel="noreferrer">
                <svg class="scaled symbol" xmlns="http://www.w3.org/2000/svg" fill="none" viewbox="0 0 568 501">
                  <title>Bluesky butterfly logo</title>
                  <path fill="currentColor" d="M123.121 33.664C188.241 82.553 258.281 181.68 284 234.873c25.719-53.192 95.759-152.32 160.879-201.21C491.866-1.611 568-28.906 568 57.947c0 17.346-9.945 145.713-15.778 166.555-20.275 72.453-94.155 90.933-159.875 79.748C507.222 323.8 536.444 388.56 473.333 453.32c-119.86 122.992-172.272-30.859-185.702-70.281-2.462-7.227-3.614-10.608-3.631-7.733-.017-2.875-1.169.506-3.631 7.733-13.43 39.422-65.842 193.273-185.702 70.281-63.111-64.76-33.89-129.52 80.986-149.071-65.72 11.185-139.6-7.295-159.875-79.748C9.945 203.659 0 75.291 0 57.946 0-28.906 76.135-1.612 123.121 33.664Z"></path>
                </svg>
              </a>
              <a title="Google Scholar" href="https://scholar.google.com/citations?user=T-icgGMAAAAJ&amp;hl=en" target="_blank" rel="noreferrer">
                <svg class="scaled symbol" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 512 512">
                  <path fill="currentColor" d="M256 411.12L0 202.667 256 0z"></path>
                  <path fill="currentColor" d="M256 411.12l256-208.453L256 0z"></path>
                  <circle fill="currentColor" cx="256" cy="362.667" r="149.333"></circle>
                  <path fill="currentColor" d="M121.037 298.667c23.968-50.453 75.392-85.334 134.963-85.334s110.995 34.881 134.963 85.334H121.037z"></path>
                </svg>
              </a>
              <button id="links-btn" title="More links">
                <svg class="scaled symbol" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 21.8726 21.6382">
                  <g>
                   <rect height="21.6382" opacity="0" width="21.8726" x="0" y="0"></rect>
                   <path d="M11.7322 6.47339L9.92066 8.28491C10.8826 8.39722 11.6931 8.75854 12.2156 9.28101C13.7927 10.8533 13.7927 13.0505 12.2351 14.6082L8.89527 17.9382C7.32789 19.5007 5.14527 19.5007 3.57789 17.9333C2.00074 16.3562 2.00074 14.1736 3.56324 12.6062L4.81812 11.3562C4.43726 10.4919 4.27613 9.3689 4.56422 8.40698L1.87379 11.073C-0.631096 13.5583-0.621331 17.113 1.88355 19.6179C4.3982 22.1375 7.93824 22.1277 10.4285 19.6375L13.9246 16.1414C16.4197 13.6462 16.4246 10.1013 13.9099 7.59644C13.4168 7.09839 12.6599 6.6687 11.7322 6.47339ZM9.77906 15.0281L11.5906 13.2166C10.6287 13.1091 9.81812 12.7478 9.29566 12.2253C7.7234 10.6482 7.71851 8.45581 9.28101 6.89819L12.616 3.56812C14.1834 2.00073 16.366 2.00073 17.9382 3.573C19.5105 5.14526 19.5056 7.33765 17.948 8.89526L16.698 10.1453C17.074 11.0193 17.2302 12.1326 16.9519 13.0994L19.6423 10.4285C22.1423 7.94312 22.1375 4.39331 19.6326 1.88354C17.113-0.631104 13.573-0.621338 11.0779 1.87378L7.59156 5.36011C5.09644 7.85522 5.09156 11.4001 7.60133 13.905C8.09937 14.4031 8.85133 14.8328 9.77906 15.0281Z" fill="currentColor" fill-opacity="0.85"></path>
                  </g>
                </svg>
              </button>
            </nav>
          </nav>
        </h1>
      </hgroup>
      <nav class="actions">
        <a class="button" href="/about">
          <svg class="symbol" height="12.9077" width="17.6143" version="1.1" xmlns="http://www.w3.org/2000/svg" xlink="http://www.w3.org/1999/xlink" viewbox="0 0 17.6143 12.9077">
           <g>
            <rect height="12.9077" opacity="0" width="17.6143" x="0" y="0"></rect>
            <path d="M12.8413 7.3877C14.8252 7.83594 16.0869 8.58301 16.0869 9.35498C16.0869 10.5835 12.8413 11.7622 8.61621 11.7622C4.39941 11.7622 1.15381 10.5835 1.15381 9.35498C1.15381 8.59131 2.37402 7.86084 4.30811 7.4043L3.73535 6.3501C1.41943 6.95605 0 8.01855 0 9.35498C0 11.4717 3.57764 12.9077 8.61621 12.9077C13.6714 12.9077 17.2407 11.4717 17.2407 9.35498C17.2407 7.97705 15.73 6.88135 13.2812 6.28369ZM13.4473 2.76416L13.4473 4.16699C13.4473 6.95605 11.6377 8.84033 8.94824 8.84033L8.28418 8.84033C5.59473 8.84033 3.79346 6.96436 3.79346 4.16699L3.79346 2.76416L2.59814 2.76416L2.59814 4.16699C2.59814 7.61182 4.93896 10.0439 8.28418 10.0439L8.94824 10.0439C12.3018 10.0439 14.6426 7.61182 14.6426 4.16699L14.6426 2.76416ZM8.61621 5.53662C12.2188 5.53662 14.6426 4.43262 14.6426 2.76416C14.6426 1.104 12.2271 0 8.61621 0C5.00537 0 2.59814 1.104 2.59814 2.76416C2.59814 4.43262 5.01367 5.53662 8.61621 5.53662ZM8.61621 4.34131C5.84375 4.34131 3.79346 3.66064 3.79346 2.76416C3.79346 1.87598 5.84375 1.19531 8.61621 1.19531C11.397 1.19531 13.4473 1.87598 13.4473 2.76416C13.4473 3.66064 11.397 4.34131 8.61621 4.34131ZM13.8789 7.07227L14.4102 7.07227C15.9873 7.07227 16.917 6.25879 16.917 4.88916C16.917 3.53613 15.979 2.72266 14.4102 2.72266L13.9038 2.72266L13.9038 3.91797L14.4102 3.91797C15.2402 3.91797 15.7217 4.2749 15.7217 4.88916C15.7217 5.51172 15.2402 5.87695 14.4102 5.87695L13.8789 5.87695Z" fill="currentColor" fill-opacity="0.85"></path>
           </g>
          </svg>
          Get to know me
        </a>
        <a class="button" href="/feed">
          <svg class="symbol" version="1.1" height="14.0034" width="15.3979" xmlns="http://www.w3.org/2000/svg" xlink="http://www.w3.org/1999/xlink" viewbox="0 0 15.3979 14.0034">
           <g>
            <rect height="14.0034" opacity="0" width="15.3979" x="0" y="0"></rect>
            <path d="M0 11.895C0 13.2979 0.680664 13.9951 2.0918 13.9951L12.9077 13.9951C14.3271 13.9951 15.0244 13.3062 15.0244 11.9116L15.0244 2.0835C15.0244 0.688965 14.3271 0 12.9077 0L5.09668 0C3.67725 0 2.97998 0.688965 2.97998 2.0835L2.97998 5.03857L1.40283 5.03857C0.522949 5.03857 0 5.52002 0 6.3418ZM1.19531 11.9033L1.19531 6.58252C1.19531 6.3667 1.32812 6.23389 1.54395 6.23389L2.97998 6.23389L2.97998 11.9033C2.97998 12.4263 2.58154 12.7998 2.0918 12.7998C1.59375 12.7998 1.19531 12.4014 1.19531 11.9033ZM3.98438 12.7998C4.10889 12.5093 4.17529 12.1855 4.17529 11.8203L4.17529 2.1499C4.17529 1.51904 4.51562 1.19531 5.11328 1.19531L12.8911 1.19531C13.4888 1.19531 13.8291 1.51904 13.8291 2.1499L13.8291 11.8452C13.8291 12.4761 13.4888 12.7998 12.8911 12.7998ZM5.80225 3.96777L12.2104 3.96777C12.4678 3.96777 12.6587 3.76855 12.6587 3.51123C12.6587 3.26221 12.4678 3.07129 12.2104 3.07129L5.80225 3.07129C5.53662 3.07129 5.3374 3.26221 5.3374 3.51123C5.3374 3.76855 5.53662 3.96777 5.80225 3.96777ZM5.80225 6.23389L12.2104 6.23389C12.4678 6.23389 12.6587 6.04297 12.6587 5.79395C12.6587 5.53662 12.4678 5.3374 12.2104 5.3374L5.80225 5.3374C5.53662 5.3374 5.3374 5.53662 5.3374 5.79395C5.3374 6.04297 5.53662 6.23389 5.80225 6.23389ZM6.15918 10.8408L7.83594 10.8408C8.35889 10.8408 8.66602 10.5337 8.66602 10.019L8.66602 8.43359C8.66602 7.91895 8.35889 7.61182 7.83594 7.61182L6.15918 7.61182C5.64453 7.61182 5.3374 7.91895 5.3374 8.43359L5.3374 10.019C5.3374 10.5337 5.64453 10.8408 6.15918 10.8408ZM9.81982 8.5083L12.2104 8.5083C12.4678 8.5083 12.6587 8.31738 12.6587 8.06836C12.6587 7.81104 12.4678 7.61182 12.2104 7.61182L9.81982 7.61182C9.5542 7.61182 9.36328 7.81104 9.36328 8.06836C9.36328 8.31738 9.5542 8.5083 9.81982 8.5083ZM9.81982 10.8408L12.2104 10.8408C12.4678 10.8408 12.6587 10.6416 12.6587 10.4009C12.6587 10.1436 12.4678 9.93604 12.2104 9.93604L9.81982 9.93604C9.5542 9.93604 9.36328 10.1436 9.36328 10.4009C9.36328 10.6416 9.5542 10.8408 9.81982 10.8408Z" fill="currentColor" fill-opacity="0.85"></path>
           </g>
          </svg>
          Feed
        </a>
        <button id="contact-btn">
          <svg class="symbol" height="15.2485" width="19.5566" version="1.1" xmlns="http://www.w3.org/2000/svg" xlink="http://www.w3.org/1999/xlink" viewbox="0 0 19.5566 15.2485">
           <g>
            <rect height="15.2485" opacity="0" width="19.5566" x="0" y="0"></rect>
            <path d="M14.4683 3.1377L14.4683 3.27881L13.2729 3.27881L13.2729 3.1377C13.2729 1.85938 12.6919 1.22021 11.3555 1.22021L3.11279 1.22021C1.77637 1.22021 1.19531 1.85938 1.19531 3.1377L1.19531 7.96045C1.19531 9.23877 1.77637 9.87793 3.11279 9.87793L3.91797 9.87793C4.32471 9.87793 4.47412 10.0273 4.47412 10.4341L4.47412 12.3018L6.51611 10.2183C6.72211 9.99939 6.89317 9.91531 7.14581 9.88886C7.16139 10.3612 7.24246 10.7767 7.38783 11.1326L5.22949 13.0654C4.78125 13.4722 4.53223 13.6631 4.16699 13.6631C3.64404 13.6631 3.35352 13.2979 3.35352 12.7334L3.35352 11.0732L3.11279 11.0732C1.0708 11.0732 0 9.97754 0 7.96045L0 3.1377C0 1.12061 1.0708 0.0249023 3.11279 0.0249023L11.3555 0.0249023C13.3975 0.0249023 14.4683 1.12891 14.4683 3.1377Z" fill="currentColor" fill-opacity="0.85"></path>
            <path d="M10.8408 7.37109L15.5225 7.37109C15.8462 7.37109 16.0869 7.13037 16.0869 6.81494C16.0869 6.49951 15.8462 6.26709 15.5225 6.26709L10.8408 6.26709C10.5088 6.26709 10.2847 6.49951 10.2847 6.81494C10.2847 7.13037 10.5088 7.37109 10.8408 7.37109ZM10.8408 9.84473L14.269 9.84473C14.5762 9.84473 14.8252 9.62061 14.8252 9.29688C14.8252 8.98975 14.5762 8.74072 14.269 8.74072L10.8408 8.74072C10.5088 8.74072 10.2847 8.98975 10.2847 9.29688C10.2847 9.62061 10.5088 9.84473 10.8408 9.84473ZM10.2183 12.7583L11.9614 12.7583L14.1777 14.6509C14.6426 15.0493 14.8833 15.2485 15.2485 15.2485C15.7632 15.2485 16.0537 14.8833 16.0537 14.3188L16.0537 12.7583L16.0952 12.7583C18.1206 12.7583 19.1831 11.6709 19.1831 9.67871L19.1831 6.3584C19.1831 4.36621 18.1206 3.27881 16.0952 3.27881L10.2183 3.27881C8.19287 3.27881 7.13867 4.36621 7.13867 6.3584L7.13867 9.67871C7.13867 11.6709 8.19287 12.7583 10.2183 12.7583ZM10.2266 11.563C8.89844 11.563 8.33398 10.9404 8.33398 9.67041L8.33398 6.3584C8.33398 5.09668 8.89844 4.47412 10.2266 4.47412L16.0952 4.47412C17.4233 4.47412 17.9795 5.09668 17.9795 6.3584L17.9795 9.67041C17.9795 10.9321 17.4233 11.563 16.0952 11.563L15.5142 11.563C15.1904 11.563 14.9331 11.7539 14.9331 12.1772L14.9331 13.9121L12.6504 11.8618C12.4097 11.6377 12.2104 11.563 11.9199 11.563Z" fill="currentColor" fill-opacity="0.85"></path>
           </g>
          </svg>
          DM ME
        </button>
        <a class="button" href="/bookshelf">
          <svg class="symbol" height="15.0825" width="17.0166" version="1.1" xmlns="http://www.w3.org/2000/svg" xlink="http://www.w3.org/1999/xlink" viewbox="0 0 17.0166 15.0825">
           <g>
            <rect height="15.0825" opacity="0" width="17.0166" x="0" y="0"></rect>
            <path d="M0 12.8994C0 13.9951 0.53125 14.5347 1.61865 14.5347L10.5918 14.5347C11.6709 14.5347 12.2021 13.9951 12.2021 12.8994L12.2021 1.62695C12.2021 0.539551 11.6709 0 10.5918 0L9.34668 0C8.25928 0 7.72803 0.539551 7.72803 1.62695L7.72803 4.16699C7.57861 4.13379 7.4126 4.11719 7.23828 4.11719L4.42432 4.11719C4.2334 4.11719 4.06738 4.13379 3.92627 4.16699L3.92627 3.51123C3.92627 2.42383 3.38672 1.88428 2.31592 1.88428L1.61865 1.88428C0.53125 1.88428 0 2.42383 0 3.51123ZM1.12061 12.8081L1.12061 3.60254C1.12061 3.2207 1.32812 2.99658 1.73486 2.99658L2.18311 2.99658C2.59814 2.99658 2.80566 3.2207 2.80566 3.60254L2.80566 13.4141L1.73486 13.4141C1.32812 13.4141 1.12061 13.1982 1.12061 12.8081ZM3.92627 13.4141L3.92627 5.83545C3.92627 5.45361 4.13379 5.23779 4.54053 5.23779L7.11377 5.23779C7.52881 5.23779 7.72803 5.45361 7.72803 5.83545L7.72803 13.4141ZM8.84863 13.4141L8.84863 1.71826C8.84863 1.33643 9.06445 1.1123 9.47119 1.1123L10.4673 1.1123C10.8823 1.1123 11.0815 1.33643 11.0815 1.71826L11.0815 12.8081C11.0815 13.1982 10.8823 13.4141 10.4673 13.4141ZM4.47412 6.51611C4.47412 6.77344 4.66504 6.97266 4.93066 6.97266L6.74023 6.97266C6.99756 6.97266 7.18848 6.77344 7.18848 6.51611C7.18848 6.26709 6.99756 6.07617 6.74023 6.07617L4.93066 6.07617C4.66504 6.07617 4.47412 6.26709 4.47412 6.51611ZM4.47412 12.1274C4.47412 12.3848 4.66504 12.584 4.93066 12.584L6.74023 12.584C6.99756 12.584 7.18848 12.3848 7.18848 12.1274C7.18848 11.8784 6.99756 11.6875 6.74023 11.6875L4.93066 11.6875C4.66504 11.6875 4.47412 11.8784 4.47412 12.1274ZM12.7915 13.0986C12.9326 14.1777 13.5137 14.6841 14.5845 14.5181L15.2153 14.4351C16.2944 14.269 16.7427 13.7046 16.6182 12.6255L15.4478 2.93018C15.3232 1.85938 14.7339 1.34473 13.6548 1.51074L13.0239 1.60205C11.9365 1.75977 11.48 2.32422 11.6128 3.41162ZM13.8872 12.8662L12.7417 3.36182C12.6919 2.97998 12.8745 2.75586 13.2812 2.68945L13.6631 2.63135C14.0698 2.56494 14.3022 2.78076 14.3521 3.1543L15.4976 12.6587C15.5474 13.0488 15.3647 13.2729 14.9663 13.3394L14.5679 13.3975C14.1694 13.4639 13.937 13.2563 13.8872 12.8662Z" fill="currentColor" fill-opacity="0.85"></path>
           </g>
          </svg>
          Bookshelf
        </a>
      </nav>
    </header>
    <main id="main"></main>
    <script type="module">
      import "/components/app.js";

      import { progress } from "https://busy-dog-44.deno.dev/melhosseiny/aurora/main/src/progress/progress.js";
      import { toast } from "https://busy-dog-44.deno.dev/melhosseiny/aurora/main/src/toast/toast.js";
      import { card } from "https://busy-dog-44.deno.dev/melhosseiny/aurora/main/src/card/card.js";
      import { media_grid } from "https://busy-dog-44.deno.dev/melhosseiny/aurora/main/src/media_grid/media_grid.js";
      import { carousel } from "https://busy-dog-44.deno.dev/melhosseiny/aurora/main/src/carousel/carousel.js";
      import { toc } from "/components/toc.js";
      import { feed } from "/components/feed.js";
      import { post } from "/components/post.js";
      import { qa_card } from "/components/qa_card.js";

      let dm_me;

      if (window.HTMLDialogElement) {
        dm_me = async () => {
          const { contact_dialog } = await import("/components/contact_dialog.js");
          document.querySelector('#contact-dialog').component.show();
        }
      } else {
        document.querySelector("#contact-dialog").setAttribute("style", "display: none;");
        dm_me = () => {
          document.querySelector('#toast').component.display("Feature not supported in this browser.");
        }
      }
      document.querySelector('#contact-btn').addEventListener("click", dm_me);

      let links;

      if (window.HTMLDialogElement) {
        links = async () => {
          const { links_dialog } = await import("/components/links_dialog.js");
          document.querySelector('#links-dialog').component.show();
        }
      } else {
        document.querySelector("#links-dialog").setAttribute("style", "display: none;");
        links = () => {
          document.querySelector('#toast').component.display("Feature not supported in this browser.");
        }
      }
      document.querySelector('#links-btn').addEventListener("click", links);
    </script>
  

</body></html>