1026 lines
		
	
	
		
			30 KiB
		
	
	
	
		
			HTML
		
	
	
	
	
	
			
		
		
	
	
			1026 lines
		
	
	
		
			30 KiB
		
	
	
	
		
			HTML
		
	
	
	
	
	
| <!DOCTYPE html>
 | ||
| <html lang='en'>
 | ||
| 
 | ||
| <head>
 | ||
|   <meta charset='UTF-8' />
 | ||
|   <meta name='viewport' content='width=device-width, initial-scale=1' />
 | ||
|   <title>
 | ||
|     About me – Home
 | ||
|   </title>
 | ||
|   
 | ||
|     
 | ||
|       <meta property='og:description' content='Oct. 2018 to Aug. 2021:' />
 | ||
|       <meta property='og:site_name' content='Home' />
 | ||
|       <meta property='og:image' content />
 | ||
|       <meta property='og:type' content='website' />
 | ||
|       <meta property='og:title' content='About me' />
 | ||
|     
 | ||
|     
 | ||
|       <base href='/' />
 | ||
|       <link href='favicon.svg' rel='icon' />
 | ||
|     
 | ||
|     <script>
 | ||
|   window.MathJax = {
 | ||
|     startup: {
 | ||
|       ready: () => {
 | ||
|         MathJax.startup.defaultReady();
 | ||
|       }
 | ||
|     }
 | ||
|   };
 | ||
| </script>
 | ||
| <script async id='MathJax-script' src='https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-chtml.js'></script>
 | ||
| 
 | ||
| <!-- mermaid.js --><script src='https://cdn.jsdelivr.net/npm/mermaid/dist/mermaid.min.js'></script>
 | ||
| <script>
 | ||
|   mermaid.initialize({startOnLoad:false});
 | ||
|   mermaid.init(undefined,document.querySelectorAll(".mermaid"));
 | ||
| </script>
 | ||
| 
 | ||
| <!-- highlight.js -->
 | ||
| <link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.6.0/styles/hybrid.min.css' />
 | ||
| <script src='https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.6.0/highlight.min.js'></script>
 | ||
| <!-- Include languages that Emanote itself uses -->
 | ||
| <script src='https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.6.0/languages/haskell.min.js'></script>
 | ||
| <script src='https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.6.0/languages/nix.min.js'></script>
 | ||
| <script>hljs.highlightAll();</script>
 | ||
| 
 | ||
| 
 | ||
| 
 | ||
|   
 | ||
|   <link href='tailwind.css?instanceId=9a96156f-f633-42f8-838d-f30867d3069d' rel='stylesheet' type='text/css' />
 | ||
| 
 | ||
|   <style>
 | ||
|     /* Heist error element */
 | ||
|     strong.error {
 | ||
|       color: lightcoral;
 | ||
|       font-size: 90%;
 | ||
|       font-family: monospace;
 | ||
|     }
 | ||
| 
 | ||
|     /* External link icon */
 | ||
|     a[data-linkicon]:not([data-linkicon=""]):not([data-linkicon="none"])::after {
 | ||
|       /* filter converts black to rgb(156,163,175) */
 | ||
|       filter: invert(71%) sepia(3%) saturate(904%) hue-rotate(179deg) brightness(92%) contrast(87%);
 | ||
|       margin-left: 1px;
 | ||
|     }
 | ||
| 
 | ||
|     a[data-linkicon]:not([data-linkicon=""]):not([data-linkicon="none"]):hover::after {
 | ||
|       /* filter converts black to  rgb(175,85,99) */
 | ||
|       filter: invert(32%) sepia(10%) saturate(834%) hue-rotate(176deg) brightness(92%) contrast(88%);
 | ||
|     }
 | ||
| 
 | ||
|     a[data-linkicon=""]::after {
 | ||
|       content: ""
 | ||
|     }
 | ||
| 
 | ||
|     a[data-linkicon=none]::after {
 | ||
|       content: ""
 | ||
|     }
 | ||
| 
 | ||
|     a[data-linkicon="external"]::after {
 | ||
|       content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='1em' fill='none' viewBox='0 0 24 24' stroke='black' stroke-width='2'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14' /%3E%3C/svg%3E");
 | ||
|     }
 | ||
| 
 | ||
|     a[data-linkicon="external"][href^="mailto:"]::after {
 | ||
|       content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='1em' fill='none' viewBox='0 0 24 24' stroke='black' stroke-width='2'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z' /%3E%3C/svg%3E");
 | ||
|     }
 | ||
|   </style>
 | ||
|   <!-- What goes in this file will appear on near the end of <head>--><link rel='preload' href='_emanote-static/fonts/Work_Sans/WorkSans-VariableFont_wght.ttf' as='font' type='font/ttf' crossorigin />
 | ||
| 
 | ||
| <style>
 | ||
|   @font-face {
 | ||
|     font-family: 'WorkSans';
 | ||
|     /* FIXME: This ought to be: ${ema:emanoteStaticLayerUrl}/fonts/Work_Sans/WorkSans-VariableFont_wght.ttf */
 | ||
|     src: url(_emanote-static/fonts/Work_Sans/WorkSans-VariableFont_wght.ttf) format("truetype");
 | ||
|     font-display: swap;
 | ||
|   }
 | ||
| 
 | ||
|   body {
 | ||
|     font-family: 'WorkSans', sans-serif;
 | ||
|     font-variation-settings: 'wght' 350;
 | ||
|   }
 | ||
| 
 | ||
|   a.mavenLinkBold {
 | ||
|     font-variation-settings: 'wght' 400;
 | ||
|   }
 | ||
| 
 | ||
|   strong {
 | ||
|     font-variation-settings: 'wght' 500;
 | ||
|   }
 | ||
| 
 | ||
|   h1,
 | ||
|   h2,
 | ||
|   h3,
 | ||
|   h4,
 | ||
|   h5,
 | ||
|   h6,
 | ||
|   header,
 | ||
|   .header-font {
 | ||
|     font-family: 'WorkSans', sans-serif;
 | ||
|   }
 | ||
| 
 | ||
|   h1 {
 | ||
|     font-variation-settings: 'wght' 500;
 | ||
|   }
 | ||
| 
 | ||
|   h2 {
 | ||
|     font-variation-settings: 'wght' 400;
 | ||
|   }
 | ||
| 
 | ||
|   h3 {
 | ||
|     font-variation-settings: 'wght' 300;
 | ||
|   }
 | ||
| </style>
 | ||
| 
 | ||
| 
 | ||
|   
 | ||
|     <link rel='stylesheet' href='_emanote-static/inverted-tree.css' />
 | ||
|   
 | ||
|   <link rel='stylesheet' href='_emanote-static/stork/flat.css' />
 | ||
| <!-- Custom Stork-search styling for Emanote -->
 | ||
| <style>
 | ||
|   #stork-search-container {
 | ||
|     z-index: 1000;
 | ||
|     background-color: rgb(15 23 42/.8);
 | ||
|   }
 | ||
| 
 | ||
|   .stork-overflow-hidden-important {
 | ||
|     overflow: hidden !important;
 | ||
|   }
 | ||
| </style>
 | ||
| 
 | ||
| 
 | ||
| <script src='_emanote-static/stork/stork.js'></script>
 | ||
| 
 | ||
|   
 | ||
|     <script data-emanote-base-url='/'>
 | ||
|       window.emanote = {};
 | ||
|       window.emanote.stork = {
 | ||
|         searchShown: false,
 | ||
|         toggleSearch: function () {
 | ||
|           document.getElementById('stork-search-container').classList.toggle('hidden');
 | ||
|           window.emanote.stork.searchShown = document.body.classList.toggle('stork-overflow-hidden-important');
 | ||
|           if (window.emanote.stork.searchShown) {
 | ||
|             document.getElementById('stork-search-input').focus();
 | ||
|           }
 | ||
|         },
 | ||
|         clearSearch: function () {
 | ||
|           document.getElementById('stork-search-container').classList.add('hidden');
 | ||
|           document.body.classList.remove('stork-overflow-hidden-important');
 | ||
|           window.emanote.stork.searchShown = false;
 | ||
|         },
 | ||
| 
 | ||
|         init: function () {
 | ||
|           const indexName = 'emanote-search'; // used to match input[data-stork] attribute value
 | ||
|           const baseUrl = document.currentScript.getAttribute('data-emanote-base-url') || '/';
 | ||
|           const indexUrl = baseUrl + '-/stork.st';
 | ||
|           if (document.readyState !== 'complete') {
 | ||
|             window.addEventListener('load', function () {
 | ||
|               stork.initialize(baseUrl + '_emanote-static/stork/stork.wasm');
 | ||
|               stork.register(indexName, indexUrl);
 | ||
|             });
 | ||
| 
 | ||
|             document.addEventListener('keydown', event => {
 | ||
|               if (window.emanote.stork.searchShown && event.key === 'Escape') {
 | ||
|                 window.emanote.stork.clearSearch();
 | ||
|                 event.preventDefault();
 | ||
|               } else if ((event.key == 'k' || event.key == 'K') && (event.ctrlKey || event.metaKey)) {
 | ||
|                 window.emanote.stork.toggleSearch();
 | ||
|                 event.preventDefault();
 | ||
|               }
 | ||
|             });
 | ||
|           } else {
 | ||
|             // Override existing on Ema's hot-reload
 | ||
|             stork.register(indexName, indexUrl, { forceOverwrite: true });
 | ||
|           }
 | ||
|         }
 | ||
|       };
 | ||
| 
 | ||
|       window.emanote.stork.init();
 | ||
|     </script>
 | ||
|   
 | ||
| 
 | ||
| </head>
 | ||
| 
 | ||
| <!-- DoNotFormat -->
 | ||
| 
 | ||
| 
 | ||
| 
 | ||
| <!-- DoNotFormat -->
 | ||
| 
 | ||
| <body class='bg-gray-400 overflow-y-scroll'>
 | ||
|   
 | ||
|     <div class='container mx-auto'>
 | ||
| 
 | ||
|       <nav id='breadcrumbs' class='w-full text-gray-700 md:hidden'>
 | ||
|   <div class='flex justify-left'>
 | ||
|     <div class='w-full px-2 py-2 bg-gray-50'>
 | ||
|       <ul class='flex flex-wrap text-lg'>
 | ||
|         <li class='inline-flex items-center'>
 | ||
|           
 | ||
|             
 | ||
|               <img style='width: 1rem;' src='favicon.svg' />
 | ||
|             
 | ||
|           
 | ||
|         </li>
 | ||
|         
 | ||
|           
 | ||
|             <li class='inline-flex items-center'>
 | ||
|               <a class='px-1 font-bold' href=''>
 | ||
|                 Home
 | ||
|               </a>
 | ||
|               <svg fill='currentColor' viewBox='0 0 20 20' class='w-auto h-5 text-gray-400'>
 | ||
|                 <path fill-rule='evenodd' d='M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z' clip-rule='evenodd'></path>
 | ||
|               </svg>
 | ||
|             </li>
 | ||
|           
 | ||
|             <li class='inline-flex items-center'>
 | ||
|               <a class='px-1 font-bold' href='About'>
 | ||
|                 About
 | ||
|               </a>
 | ||
|               <svg fill='currentColor' viewBox='0 0 20 20' class='w-auto h-5 text-gray-400'>
 | ||
|                 <path fill-rule='evenodd' d='M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z' clip-rule='evenodd'></path>
 | ||
|               </svg>
 | ||
|             </li>
 | ||
|           
 | ||
|         
 | ||
|       </ul>
 | ||
|     </div>
 | ||
|     <button class='inline px-2 py-1 bg-gray-50 outline-none cursor-pointer focus:outline-none' title='Search (Ctrl+K)' type='button' onclick='window.emanote.stork.toggleSearch()'>
 | ||
|       <svg xmlns='http://www.w3.org/2000/svg' style='width: 1rem;' class='hover:text-purple-700' f
 | ||
|  fill='none' viewBox='0 0 24 24' stroke='currentColor' stroke-width='2'>
 | ||
|   <path stroke-linecap='round' stroke-linejoin='round' d='M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z'></path>
 | ||
| </svg>
 | ||
|     </button>
 | ||
|     <button class='inline px-2 py-1 text-white bg-purple-600 outline-none cursor-pointer focus:outline-none' title='Toggle sidebar' type='button' onclick="toggleHidden('sidebar')">
 | ||
|       <svg xmlns='http://www.w3.org/2000/svg' class='w-4' fill='none' viewBox='0 0 24 24' stroke='currentColor'>
 | ||
|         <path stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M4 6h16M4 12h16M4 18h16'></path>
 | ||
|       </svg>
 | ||
|     </button>
 | ||
|     <script>
 | ||
|       function toggleHidden(elemId) {
 | ||
|         document.getElementById(elemId).classList.toggle("hidden");
 | ||
|       }
 | ||
|     </script>
 | ||
|   </div>
 | ||
| </nav>
 | ||
| 
 | ||
|       <div id='container' class='flex flex-nowrap flex-col md:flex-row bg-gray-50 md:mt-8 md:shadow-2xl md:mb-8'>
 | ||
|         <!-- Sidebar column -->
 | ||
|         <nav id='sidebar' class='flex-shrink hidden leading-relaxed md:block md:sticky md:top-0 md:h-full md:w-48 xl:w-64'>
 | ||
|           <div class='px-2 py-2 text-gray-800'>
 | ||
|             <div id='indexing-links' class='flex flex-row float-right p-2 space-x-2 text-gray-500'>
 | ||
|               <a href='-/tags' title='View tags'>
 | ||
|                 <svg style='width: 1rem;' class='hover:text-purple-700' fill='none' stroke='currentColor' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'>
 | ||
|                   <path stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M7 7h.01M7 3h5c.512 0 1.024.195 1.414.586l7 7a2 2 0 010 2.828l-7 7a2 2 0 01-2.828 0l-7-7A1.994 1.994 0 013 12V7a4 4 0 014-4z'>
 | ||
|                   </path>
 | ||
|                 </svg>
 | ||
|               </a>
 | ||
|               <a href='-/all' title='Expand full tree'>
 | ||
|                 <svg style='width: 1rem;' class='hover:text-purple-700' fill='none' stroke='currentColor' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'>
 | ||
|                   <path stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M4 8V4m0 0h4M4 4l5 5m11-1V4m0 0h-4m4 0l-5 5M4 16v4m0 0h4m-4 0l5-5m11 5l-5-5m5 5v-4m0 4h-4'>
 | ||
|                   </path>
 | ||
|                 </svg>
 | ||
|               </a>
 | ||
|               <a title='Search (Ctrl+K)' class='cursor-pointer' onclick='window.emanote.stork.toggleSearch()'>
 | ||
|                 <svg xmlns='http://www.w3.org/2000/svg' style='width: 1rem;' class='hover:text-purple-700' f
 | ||
|  fill='none' viewBox='0 0 24 24' stroke='currentColor' stroke-width='2'>
 | ||
|   <path stroke-linecap='round' stroke-linejoin='round' d='M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z'></path>
 | ||
| </svg>
 | ||
|               </a>
 | ||
|             </div>
 | ||
| 
 | ||
|             <div id='site-logo' class='pl-2'>
 | ||
|               <div class='flex items-center my-2 space-x-2 justify-left'>
 | ||
|                 <a href='' title='Go to Home'>
 | ||
|                   
 | ||
|                     
 | ||
|                       <!-- The style width attribute here is to prevent huge
 | ||
|                       icon from displaying at those rare occasions when Tailwind
 | ||
|                       hasn't kicked in immediately on page load 
 | ||
|                       -->
 | ||
|                       <img style='width: 1rem;' class='transition transform hover:scale-110 hover:opacity-80' src='favicon.svg' />
 | ||
|                     
 | ||
|                   
 | ||
|                 </a>
 | ||
|                 <a class='font-bold truncate' title='Go to Home' href=''>
 | ||
|                   Home
 | ||
|                 </a>
 | ||
|               </div>
 | ||
|             </div>
 | ||
| 
 | ||
|             
 | ||
|               <!-- Variable bindings for this tree-->
 | ||
|   
 | ||
|     
 | ||
|       
 | ||
|       
 | ||
|     
 | ||
| 
 | ||
| 
 | ||
| 
 | ||
|   
 | ||
|   
 | ||
| 
 | ||
| <!-- Rendering of this tree -->
 | ||
| <div class='pl-2'>
 | ||
|   <!-- Node's rootLabel-->
 | ||
|   <div class='flex items-center my-2 space-x-2 justify-left'>
 | ||
|     
 | ||
|     
 | ||
|       <svg xmlns='http://www.w3.org/2000/svg' class='w-4 h-4 flex-shrink-0 inline text-gray-700' viewBox='0 0 20 20' fill='currentColor'>
 | ||
|         <path fill-rule='evenodd' d='M2 6a2 2 0 012-2h4l2 2h4a2 2 0 012 2v1H8a3 3 0 00-3 3v1.5a1.5 1.5 0 01-3 0V6z' clip-rule='evenodd'></path>
 | ||
|         <path d='M6 12a2 2 0 012-2h8a2 2 0 012 2v2a2 2 0 01-2 2H2h2a2 2 0 002-2v-2z'></path>
 | ||
|       </svg>
 | ||
|       
 | ||
|   
 | ||
|     <a class='font-bold hover:underline truncate' title='About' href='About'>
 | ||
|       About
 | ||
|     </a>
 | ||
|     
 | ||
|       
 | ||
|   </div>
 | ||
| 
 | ||
|   <!-- Node's children forest, displayed only on active trees
 | ||
|     TODO: Use <details> to toggle visibility?
 | ||
|   -->
 | ||
|   
 | ||
|     
 | ||
|       <!-- Variable bindings for this tree-->
 | ||
|   
 | ||
|   
 | ||
| 
 | ||
| 
 | ||
|   
 | ||
| 
 | ||
| 
 | ||
| <!-- Rendering of this tree -->
 | ||
| <div class='pl-2'>
 | ||
|   <!-- Node's rootLabel-->
 | ||
|   <div class='flex items-center my-2 space-x-2 justify-left'>
 | ||
|     
 | ||
|     
 | ||
|       <svg class='w-4 h-4 flex-shrink-0 inline' fill='none' stroke='currentColor' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'>
 | ||
|         <path stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z'>
 | ||
|         </path>
 | ||
|       </svg>
 | ||
|       
 | ||
|   
 | ||
|     <a class='font-bold text-purple-600 hover:underline truncate' title='About me' href='About/CV'>
 | ||
|       About me
 | ||
|     </a>
 | ||
|     
 | ||
|       
 | ||
|   </div>
 | ||
| 
 | ||
|   <!-- Node's children forest, displayed only on active trees
 | ||
|     TODO: Use <details> to toggle visibility?
 | ||
|   -->
 | ||
|   
 | ||
|     
 | ||
|   
 | ||
| </div>
 | ||
|     
 | ||
|       <!-- Variable bindings for this tree-->
 | ||
|   
 | ||
|     
 | ||
|   
 | ||
| 
 | ||
| 
 | ||
| 
 | ||
|   
 | ||
| 
 | ||
| 
 | ||
| <!-- Rendering of this tree -->
 | ||
| <div class='pl-2'>
 | ||
|   <!-- Node's rootLabel-->
 | ||
|   <div class='flex items-center my-2 space-x-2 justify-left'>
 | ||
|     
 | ||
|     
 | ||
|       <svg class='w-4 h-4 flex-shrink-0 inline' fill='none' stroke='currentColor' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'>
 | ||
|         <path stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M7 21h10a2 2 0 002-2V9.414a1 1 0 00-.293-.707l-5.414-5.414A1 1 0 0012.586 3H7a2 2 0 00-2 2v14a2 2 0 002 2z'>
 | ||
|         </path>
 | ||
|       </svg>
 | ||
|     
 | ||
|   
 | ||
|     <a class='hover:underline truncate' title='Highlights of my experiences in the programming world' href='About/Experience'>
 | ||
|       Highlights of my experiences in the programming world
 | ||
|     </a>
 | ||
|     
 | ||
|       
 | ||
|         
 | ||
|     
 | ||
|   </div>
 | ||
| 
 | ||
|   <!-- Node's children forest, displayed only on active trees
 | ||
|     TODO: Use <details> to toggle visibility?
 | ||
|   -->
 | ||
|   
 | ||
| </div>
 | ||
|     
 | ||
|       <!-- Variable bindings for this tree-->
 | ||
|   
 | ||
|     
 | ||
|   
 | ||
| 
 | ||
| 
 | ||
| 
 | ||
|   
 | ||
| 
 | ||
| 
 | ||
| <!-- Rendering of this tree -->
 | ||
| <div class='pl-2'>
 | ||
|   <!-- Node's rootLabel-->
 | ||
|   <div class='flex items-center my-2 space-x-2 justify-left'>
 | ||
|     
 | ||
|     
 | ||
|       <svg class='w-4 h-4 flex-shrink-0 inline' fill='none' stroke='currentColor' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'>
 | ||
|         <path stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M7 21h10a2 2 0 002-2V9.414a1 1 0 00-.293-.707l-5.414-5.414A1 1 0 0012.586 3H7a2 2 0 00-2 2v14a2 2 0 002 2z'>
 | ||
|         </path>
 | ||
|       </svg>
 | ||
|     
 | ||
|   
 | ||
|     <a class='hover:underline truncate' title='Work-Experience' href='About/Work'>
 | ||
|       Work-Experience
 | ||
|     </a>
 | ||
|     
 | ||
|       
 | ||
|         
 | ||
|     
 | ||
|   </div>
 | ||
| 
 | ||
|   <!-- Node's children forest, displayed only on active trees
 | ||
|     TODO: Use <details> to toggle visibility?
 | ||
|   -->
 | ||
|   
 | ||
| </div>
 | ||
|     
 | ||
|   
 | ||
| </div>
 | ||
|             
 | ||
|               <!-- Variable bindings for this tree-->
 | ||
|   
 | ||
|     
 | ||
|   
 | ||
| 
 | ||
| 
 | ||
| 
 | ||
|   
 | ||
|   
 | ||
| 
 | ||
| <!-- Rendering of this tree -->
 | ||
| <div class='pl-2'>
 | ||
|   <!-- Node's rootLabel-->
 | ||
|   <div class='flex items-center my-2 space-x-2 justify-left'>
 | ||
|     
 | ||
|     
 | ||
|       <svg xmlns='http://www.w3.org/2000/svg' class='w-4 h-4 flex-shrink-0 inline text-gray-500' viewBox='0 0 20 20' fill='currentColor'>
 | ||
|         <path d='M2 6a2 2 0 012-2h5l2 2h5a2 2 0 012 2v6a2 2 0 01-2 2H4a2 2 0 01-2-2V6z'></path>
 | ||
|       </svg>
 | ||
|     
 | ||
|   
 | ||
|     <a class='hover:underline truncate' title='Android' href='Android'>
 | ||
|       Android
 | ||
|     </a>
 | ||
|     
 | ||
|       
 | ||
|         <span class='text-gray-300' title='1 children inside'>
 | ||
|           1
 | ||
|         </span>
 | ||
|       
 | ||
|     
 | ||
|   </div>
 | ||
| 
 | ||
|   <!-- Node's children forest, displayed only on active trees
 | ||
|     TODO: Use <details> to toggle visibility?
 | ||
|   -->
 | ||
|   
 | ||
| </div>
 | ||
|             
 | ||
|               <!-- Variable bindings for this tree-->
 | ||
|   
 | ||
|     
 | ||
|   
 | ||
| 
 | ||
| 
 | ||
| 
 | ||
|   
 | ||
|   
 | ||
| 
 | ||
| <!-- Rendering of this tree -->
 | ||
| <div class='pl-2'>
 | ||
|   <!-- Node's rootLabel-->
 | ||
|   <div class='flex items-center my-2 space-x-2 justify-left'>
 | ||
|     
 | ||
|     
 | ||
|       <svg xmlns='http://www.w3.org/2000/svg' class='w-4 h-4 flex-shrink-0 inline text-gray-500' viewBox='0 0 20 20' fill='currentColor'>
 | ||
|         <path d='M2 6a2 2 0 012-2h5l2 2h5a2 2 0 012 2v6a2 2 0 01-2 2H4a2 2 0 01-2-2V6z'></path>
 | ||
|       </svg>
 | ||
|     
 | ||
|   
 | ||
|     <a class='hover:underline truncate' title='Coding' href='Coding'>
 | ||
|       Coding
 | ||
|     </a>
 | ||
|     
 | ||
|       
 | ||
|         <span class='text-gray-300' title='2 children inside'>
 | ||
|           2
 | ||
|         </span>
 | ||
|       
 | ||
|     
 | ||
|   </div>
 | ||
| 
 | ||
|   <!-- Node's children forest, displayed only on active trees
 | ||
|     TODO: Use <details> to toggle visibility?
 | ||
|   -->
 | ||
|   
 | ||
| </div>
 | ||
|             
 | ||
|               <!-- Variable bindings for this tree-->
 | ||
|   
 | ||
|     
 | ||
|   
 | ||
| 
 | ||
| 
 | ||
| 
 | ||
|   
 | ||
| 
 | ||
| 
 | ||
| <!-- Rendering of this tree -->
 | ||
| <div class='pl-2'>
 | ||
|   <!-- Node's rootLabel-->
 | ||
|   <div class='flex items-center my-2 space-x-2 justify-left'>
 | ||
|     
 | ||
|     
 | ||
|       <svg class='w-4 h-4 flex-shrink-0 inline' fill='none' stroke='currentColor' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'>
 | ||
|         <path stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M7 21h10a2 2 0 002-2V9.414a1 1 0 00-.293-.707l-5.414-5.414A1 1 0 0012.586 3H7a2 2 0 00-2 2v14a2 2 0 002 2z'>
 | ||
|         </path>
 | ||
|       </svg>
 | ||
|     
 | ||
|   
 | ||
|     <a class='hover:underline truncate' title='Logik für Dummies' href='Logik'>
 | ||
|       Logik für Dummies
 | ||
|     </a>
 | ||
|     
 | ||
|       
 | ||
|         
 | ||
|     
 | ||
|   </div>
 | ||
| 
 | ||
|   <!-- Node's children forest, displayed only on active trees
 | ||
|     TODO: Use <details> to toggle visibility?
 | ||
|   -->
 | ||
|   
 | ||
| </div>
 | ||
|             
 | ||
|               <!-- Variable bindings for this tree-->
 | ||
|   
 | ||
|     
 | ||
|   
 | ||
| 
 | ||
| 
 | ||
| 
 | ||
|   
 | ||
|   
 | ||
| 
 | ||
| <!-- Rendering of this tree -->
 | ||
| <div class='pl-2'>
 | ||
|   <!-- Node's rootLabel-->
 | ||
|   <div class='flex items-center my-2 space-x-2 justify-left'>
 | ||
|     
 | ||
|     
 | ||
|       <svg xmlns='http://www.w3.org/2000/svg' class='w-4 h-4 flex-shrink-0 inline text-gray-500' viewBox='0 0 20 20' fill='currentColor'>
 | ||
|         <path d='M2 6a2 2 0 012-2h5l2 2h5a2 2 0 012 2v6a2 2 0 01-2 2H4a2 2 0 01-2-2V6z'></path>
 | ||
|       </svg>
 | ||
|     
 | ||
|   
 | ||
|     <a class='hover:underline truncate' title='Opinions' href='Opinions'>
 | ||
|       Opinions
 | ||
|     </a>
 | ||
|     
 | ||
|       
 | ||
|         <span class='text-gray-300' title='2 children inside'>
 | ||
|           2
 | ||
|         </span>
 | ||
|       
 | ||
|     
 | ||
|   </div>
 | ||
| 
 | ||
|   <!-- Node's children forest, displayed only on active trees
 | ||
|     TODO: Use <details> to toggle visibility?
 | ||
|   -->
 | ||
|   
 | ||
| </div>
 | ||
|             
 | ||
|               <!-- Variable bindings for this tree-->
 | ||
|   
 | ||
|     
 | ||
|   
 | ||
| 
 | ||
| 
 | ||
| 
 | ||
|   
 | ||
| 
 | ||
| 
 | ||
| <!-- Rendering of this tree -->
 | ||
| <div class='pl-2'>
 | ||
|   <!-- Node's rootLabel-->
 | ||
|   <div class='flex items-center my-2 space-x-2 justify-left'>
 | ||
|     
 | ||
|     
 | ||
|       <svg class='w-4 h-4 flex-shrink-0 inline' fill='none' stroke='currentColor' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'>
 | ||
|         <path stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M7 21h10a2 2 0 002-2V9.414a1 1 0 00-.293-.707l-5.414-5.414A1 1 0 0012.586 3H7a2 2 0 00-2 2v14a2 2 0 002 2z'>
 | ||
|         </path>
 | ||
|       </svg>
 | ||
|     
 | ||
|   
 | ||
|     <a class='hover:underline truncate' title='Todo' href='TODO'>
 | ||
|       Todo
 | ||
|     </a>
 | ||
|     
 | ||
|       
 | ||
|         
 | ||
|     
 | ||
|   </div>
 | ||
| 
 | ||
|   <!-- Node's children forest, displayed only on active trees
 | ||
|     TODO: Use <details> to toggle visibility?
 | ||
|   -->
 | ||
|   
 | ||
| </div>
 | ||
|             
 | ||
|               <!-- Variable bindings for this tree-->
 | ||
|   
 | ||
|     
 | ||
|   
 | ||
| 
 | ||
| 
 | ||
| 
 | ||
|   
 | ||
|   
 | ||
| 
 | ||
| <!-- Rendering of this tree -->
 | ||
| <div class='pl-2'>
 | ||
|   <!-- Node's rootLabel-->
 | ||
|   <div class='flex items-center my-2 space-x-2 justify-left'>
 | ||
|     
 | ||
|     
 | ||
|       <svg xmlns='http://www.w3.org/2000/svg' class='w-4 h-4 flex-shrink-0 inline text-gray-500' viewBox='0 0 20 20' fill='currentColor'>
 | ||
|         <path d='M2 6a2 2 0 012-2h5l2 2h5a2 2 0 012 2v6a2 2 0 01-2 2H4a2 2 0 01-2-2V6z'></path>
 | ||
|       </svg>
 | ||
|     
 | ||
|   
 | ||
|     <a class='hover:underline truncate' title='Uni' href='Uni'>
 | ||
|       Uni
 | ||
|     </a>
 | ||
|     
 | ||
|       
 | ||
|         <span class='text-gray-300' title='2 children inside'>
 | ||
|           2
 | ||
|         </span>
 | ||
|       
 | ||
|     
 | ||
|   </div>
 | ||
| 
 | ||
|   <!-- Node's children forest, displayed only on active trees
 | ||
|     TODO: Use <details> to toggle visibility?
 | ||
|   -->
 | ||
|   
 | ||
| </div>
 | ||
|             
 | ||
|               <!-- Variable bindings for this tree-->
 | ||
|   
 | ||
|     
 | ||
|   
 | ||
| 
 | ||
| 
 | ||
| 
 | ||
|   
 | ||
|   
 | ||
| 
 | ||
| <!-- Rendering of this tree -->
 | ||
| <div class='pl-2'>
 | ||
|   <!-- Node's rootLabel-->
 | ||
|   <div class='flex items-center my-2 space-x-2 justify-left'>
 | ||
|     
 | ||
|     
 | ||
|       <svg xmlns='http://www.w3.org/2000/svg' class='w-4 h-4 flex-shrink-0 inline text-gray-500' viewBox='0 0 20 20' fill='currentColor'>
 | ||
|         <path d='M2 6a2 2 0 012-2h5l2 2h5a2 2 0 012 2v6a2 2 0 01-2 2H4a2 2 0 01-2-2V6z'></path>
 | ||
|       </svg>
 | ||
|     
 | ||
|   
 | ||
|     <a class='hover:underline truncate' title='Unix' href='Unix'>
 | ||
|       Unix
 | ||
|     </a>
 | ||
|     
 | ||
|       
 | ||
|         <span class='text-gray-300' title='1 children inside'>
 | ||
|           1
 | ||
|         </span>
 | ||
|       
 | ||
|     
 | ||
|   </div>
 | ||
| 
 | ||
|   <!-- Node's children forest, displayed only on active trees
 | ||
|     TODO: Use <details> to toggle visibility?
 | ||
|   -->
 | ||
|   
 | ||
| </div>
 | ||
|             
 | ||
| 
 | ||
|           </div>
 | ||
|         </nav>
 | ||
| 
 | ||
|         <!-- Main body column -->
 | ||
|         <div class='flex-1 w-full overflow-x-auto bg-white'>
 | ||
|           <main class='px-4 py-4'>
 | ||
|             <!-- DoNotFormat -->
 | ||
| <!-- DoNotFormat -->
 | ||
| 
 | ||
| <nav id='uptree' class='flipped tree' style='transform-origin: 50%;'>
 | ||
|   <ul class='root'>
 | ||
|     <li>
 | ||
|       
 | ||
|         <ul>
 | ||
|           
 | ||
|             <li>
 | ||
| 
 | ||
|   <div class='text-gray-900 forest-link'>
 | ||
|     <a href='About'>
 | ||
|       About
 | ||
|     </a>
 | ||
|   </div>
 | ||
| 
 | ||
|   
 | ||
|     <ul>
 | ||
|       
 | ||
|         <li>
 | ||
| 
 | ||
|   <div class='text-gray-900 forest-link'>
 | ||
|     <a href=''>
 | ||
|       Home
 | ||
|     </a>
 | ||
|   </div>
 | ||
| 
 | ||
|   
 | ||
| </li>
 | ||
|       
 | ||
|     </ul>
 | ||
|   
 | ||
| </li>
 | ||
|           
 | ||
|         </ul>
 | ||
|       
 | ||
|     </li>
 | ||
|   </ul>
 | ||
| </nav>
 | ||
|             <h1 class='flex items-end justify-center mb-4 p-3 bg-purple-100 text-5xl font-extrabold text-black rounded'>
 | ||
|   <a class='z-40 tracking-tighter '>
 | ||
|     About me
 | ||
|   </a>
 | ||
| </h1>
 | ||
|             <article class='overflow-auto'>
 | ||
|   <!-- What goes in this file will appear on top of note body-->
 | ||
|   <h1 id='drezil' class='pb-2 mb-2 text-5xl font-bold text-center'>Drezil</h1><div xmlhtmlRaw><img class="border border-solid w32 rounded-xl lg:rounded-3xl lg:w64 float-right" style="	border-color: rgb(217 70 239);" src="/About/avatar_neu.png"/>
 | ||
| </div><h2 id='work' class='inline-block mt-6 mb-4 text-4xl font-bold text-gray-700 border-b-2'>Work</h2>
 | ||
|     <ul class='my-3 ml-6 space-y-1 list-disc'>
 | ||
|       
 | ||
|         <li>
 | ||
|           
 | ||
|     <p class='mb-3'>
 | ||
|       <strong>Oct. 2018 to Aug. 2021</strong>:
 | ||
|     </p>
 | ||
|   
 | ||
|     <ul class='my-3 ml-6 space-y-1 list-disc'>
 | ||
|       
 | ||
|         <li>
 | ||
|           ML-Specialist at <a href='https://jobware.de' class='text-purple-600 hover:underline' data-linkicon='external' target='_blank' rel='noopener'>Jobware</a> (Paderborn; german Job-Advertising-Platform)
 | ||
|         </li>
 | ||
|       
 | ||
|     </ul>
 | ||
|   
 | ||
|         </li>
 | ||
|       
 | ||
|         <li>
 | ||
|           
 | ||
|     <p class='mb-3'>
 | ||
|       <strong>2013-2018</strong> several jobs at my University including
 | ||
|     </p>
 | ||
|   
 | ||
|     <ul class='my-3 ml-6 space-y-1 list-disc'>
 | ||
|       
 | ||
|         <li>
 | ||
|           Worked 6 Months in the Workgroup “Theoretical Computer Science” on migrating algorithms to <strong>CUDA</strong>
 | ||
|         </li>
 | ||
|       
 | ||
|         <li>
 | ||
|           Tutor “Introduction to Machine Learning”
 | ||
|     <ul class='my-3 ml-6 space-y-1 list-disc'>
 | ||
|       
 | ||
|         <li>
 | ||
|           Was awarded <strong>Tutoring-Award</strong> of the Faculty of Technology for excellent tutoring
 | ||
|         </li>
 | ||
|       
 | ||
|     </ul>
 | ||
|   
 | ||
|         </li>
 | ||
|       
 | ||
|         <li>
 | ||
|           <a href='Coding/Haskell/FFPiH' class='text-purple-600 mavenLinkBold hover:underline' data-wikilink-type='WikiLinkBranch'>Lecture "Intermediate Functional Programming in Haskell"</a>
 | ||
|         </li>
 | ||
|       
 | ||
|         <li>
 | ||
|           Development of Pandoc-Filters for effective <strong>generation of lecture-slides</strong> for Mario Botsch (Leader Workgroup Computer Graphics) using Pandoc & reveal.js
 | ||
|         </li>
 | ||
|       
 | ||
|     </ul>
 | ||
|   
 | ||
|         </li>
 | ||
|       
 | ||
|     </ul>
 | ||
|   <h2 id='education' class='inline-block mt-6 mb-4 text-4xl font-bold text-gray-700 border-b-2'>Education</h2>
 | ||
|     <ul class='my-3 ml-6 space-y-1 list-disc'>
 | ||
|       
 | ||
|         <li>
 | ||
|           <strong>Bachelor</strong> “Kognitive Informatik” (Cognitive Informatics) in Bielefeld 2010-2014
 | ||
|         </li>
 | ||
|       
 | ||
|         <li>
 | ||
|           <strong>Master</strong> “Naturwissenschaftliche Informatik” (Informatics in the natural sciences) 2014-2018
 | ||
|         </li>
 | ||
|       
 | ||
|     </ul>
 | ||
|   <h3 id='extraordinary-grades-excerpt-of-my-transcript' class='mt-6 mb-2 text-3xl font-bold text-gray-700'>Extraordinary grades (Excerpt of my Transcript)</h3>
 | ||
|     <p class='mb-3'>
 | ||
|       Note: Scale of grades in Germany is 1.0 to 4.0 with 1.0 being best, 4.0 being passing grade, 5.0 being failed grade
 | ||
|     </p>
 | ||
|   
 | ||
|     <ul class='my-3 ml-6 space-y-1 list-disc'>
 | ||
|       
 | ||
|         <li>
 | ||
|           <strong>1.0 in Modern Data Analysis</strong>
 | ||
|     <ul class='my-3 ml-6 space-y-1 list-disc'>
 | ||
|       
 | ||
|         <li>
 | ||
|           Master course on data-analysis (time-series, core-vector-machines, gaussian processes, …)
 | ||
|         </li>
 | ||
|       
 | ||
|     </ul>
 | ||
|   
 | ||
|         </li>
 | ||
|       
 | ||
|         <li>
 | ||
|           <strong>1.0 in Computergraphics</strong>
 | ||
|     <ul class='my-3 ml-6 space-y-1 list-disc'>
 | ||
|       
 | ||
|         <li>
 | ||
|           Raytracing, Modern OpenGL
 | ||
|         </li>
 | ||
|       
 | ||
|     </ul>
 | ||
|   
 | ||
|         </li>
 | ||
|       
 | ||
|         <li>
 | ||
|           <strong>1.3 in Computer-Animation</strong>
 | ||
|     <ul class='my-3 ml-6 space-y-1 list-disc'>
 | ||
|       
 | ||
|         <li>
 | ||
|           Dual-Quarternion-Skinning, Character-Animation, FACS-Poses, etc.
 | ||
|         </li>
 | ||
|       
 | ||
|     </ul>
 | ||
|   
 | ||
|         </li>
 | ||
|       
 | ||
|         <li>
 | ||
|           <strong>1.3 in GPU-Computing (CUDA)</strong>
 | ||
|     <ul class='my-3 ml-6 space-y-1 list-disc'>
 | ||
|       
 | ||
|         <li>
 | ||
|           originally a 1.7 by timing (task was de-mosaicing on images, grade was measured in ms, whereby 400ms equated to 4.0 and 100ms equated to 1.0), but because my deep knowledge was visible in the code i was given a 1.3 after oral presentation.
 | ||
|         </li>
 | ||
|       
 | ||
|     </ul>
 | ||
|   
 | ||
|         </li>
 | ||
|       
 | ||
|         <li>
 | ||
|           <strong>1.0 in Parallel Algorithms and Data-Structures</strong>
 | ||
|         </li>
 | ||
|       
 | ||
|         <li>
 | ||
|           <strong>Ethical Hacking</strong>
 | ||
|     <ul class='my-3 ml-6 space-y-1 list-disc'>
 | ||
|       
 | ||
|         <li>
 | ||
|           Reverse Engineering with IDApro
 | ||
|         </li>
 | ||
|       
 | ||
|     </ul>
 | ||
|   
 | ||
|         </li>
 | ||
|       
 | ||
|     </ul>
 | ||
|   <h2 id='further-information' class='inline-block mt-6 mb-4 text-4xl font-bold text-gray-700 border-b-2'>Further information</h2>
 | ||
|     <ul class='my-3 ml-6 space-y-1 list-disc'>
 | ||
|       
 | ||
|         <li>
 | ||
|           <a href='About/Work' class='text-purple-600 mavenLinkBold hover:underline' data-wikilink-type='WikiLinkBranch'>More details on my work-experience</a>
 | ||
|         </li>
 | ||
|       
 | ||
|         <li>
 | ||
|           <a href='About/Experience' class='text-purple-600 mavenLinkBold hover:underline' data-wikilink-type='WikiLinkBranch'>More details of my coding</a>
 | ||
|         </li>
 | ||
|       
 | ||
|         <li>
 | ||
|           <a href='Uni/Extracurricular' class='text-purple-600 mavenLinkBold hover:underline' data-wikilink-type='WikiLinkBranch'>More details of things i did beside studying at University</a>
 | ||
|         </li>
 | ||
|       
 | ||
|     </ul>
 | ||
|   
 | ||
| 
 | ||
|   <!-- div class="flex items-center justify-center mt-2">
 | ||
|   <ema:metadata>
 | ||
|     <with var="template">
 | ||
|       <a class="text-gray-300 hover:text-${theme}-600 text-sm" title="Edit this page on GitHub"
 | ||
|         href="${value:editBaseUrl}/${ema:note:source-path}">
 | ||
|         <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
 | ||
|           <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
 | ||
|             d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z" />
 | ||
|         </svg>
 | ||
|       </a>
 | ||
|     </with>
 | ||
|   </ema:metadata>
 | ||
| </div -->
 | ||
| </article>
 | ||
|             <div class='flex flex-col lg:flex-row lg:space-x-2'>
 | ||
|               
 | ||
|               
 | ||
|             </div>
 | ||
|             
 | ||
|   <section class='flex flex-wrap items-end justify-center my-4 space-x-2 space-y-2 font-mono text-sm'>
 | ||
|     
 | ||
|   </section>
 | ||
| 
 | ||
|             <!-- What goes in this file will at the very end of the main div -->
 | ||
|           </main>
 | ||
|         </div>
 | ||
|       </div>
 | ||
|       <footer class='flex items-center justify-center mt-2 mb-8 space-x-4 text-center text-gray-800'>
 | ||
|   
 | ||
|   <div>
 | ||
|     <a href='' title='Go to Home page'>
 | ||
|       <svg xmlns='http://www.w3.org/2000/svg' class='w-6 h-6 hover:text-purple-700' fill='none' viewBox='0 0 24 24' stroke='currentColor'>
 | ||
|         <path stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6'></path>
 | ||
|       </svg>
 | ||
|     </a>
 | ||
|   </div>
 | ||
|   <div>
 | ||
|     <a href='-/all' title='View Index'>
 | ||
|       <svg class='w-6 h-6 hover:text-purple-700' fill='none' stroke='currentColor' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'>
 | ||
|         <path stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M4 8V4m0 0h4M4 4l5 5m11-1V4m0 0h-4m4 0l-5 5M4 16v4m0 0h4m-4 0l5-5m11 5l-5-5m5 5v-4m0 4h-4'>
 | ||
|         </path>
 | ||
|       </svg>
 | ||
|     </a>
 | ||
|   </div>
 | ||
|   <div>
 | ||
|     <a href='https://emanote.srid.ca' target='_blank' title='Generated by Emanote 0.8.1.10'>
 | ||
|       <img class='w-6 h-6 hover:text-purple-700' src='_emanote-static/emanote-logo.svg' />
 | ||
|     </a>
 | ||
|   </div>
 | ||
|   <div>
 | ||
|     <a href='-/tags' title='View tags'>
 | ||
|       <svg class='w-6 h-6 hover:text-purple-700' fill='none' stroke='currentColor' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'>
 | ||
|         <path stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M7 7h.01M7 3h5c.512 0 1.024.195 1.414.586l7 7a2 2 0 010 2.828l-7 7a2 2 0 01-2.828 0l-7-7A1.994 1.994 0 013 12V7a4 4 0 014-4z'>
 | ||
|         </path>
 | ||
|       </svg>
 | ||
|     </a>
 | ||
|   </div>
 | ||
|   <div>
 | ||
|     <a href='-/tasks' title='View tasks'>
 | ||
|       <svg xmlns='http://www.w3.org/2000/svg' class='w-6 h-6 hover:text-purple-700' fill='none' viewBox='0 0 24 24' stroke='currentColor'>
 | ||
|         <path stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z'></path>
 | ||
|       </svg>
 | ||
|     </a>
 | ||
|   </div>
 | ||
| </footer>
 | ||
|     </div>
 | ||
|   
 | ||
|   <div id='stork-search-container' class='hidden fixed w-screen h-screen inset-0 backdrop-filter backdrop-blur-sm'>
 | ||
|   <div class='fixed w-screen h-screen inset-0' onclick='window.emanote.stork.toggleSearch()'></div>
 | ||
| 
 | ||
|   <div class='container mx-auto p-10 mt-10'>
 | ||
|     <div class='stork-wrapper-flat container mx-auto'>
 | ||
|       <input id='stork-search-input' data-stork='emanote-search' class='stork-input' placeholder='Search (Ctrl+K) ...' />
 | ||
|       <div data-stork='emanote-search-output' class='stork-output'></div>
 | ||
|     </div>
 | ||
|   </div>
 | ||
| </div>
 | ||
|   
 | ||
|     
 | ||
|   
 | ||
| </body>
 | ||
| 
 | ||
| </html>
 |