Add avatar to the index page

content/index.html

@@ -1,9 +1,23 @@
-<p><strong>Deepak Jois</strong></p>
+<div class="intro">
+    <img class="avatar" src="/avatar.webp" alt="pixel art avatar"/>
+    <div class="bio">
+        <h3>Deepak Jois</h3>
+        <p><a href="mailto:[email protected]">[email protected]</a></p>
+    </div>
+</div>
 
-<p>I am a computer programmer with a highly distractable brain.</p>
+<p>Computer programmer with a highly distractable brain.</p>
 
 <p>I keep a <a href="/daily">daily log</a>.</p>
 
-<p>You can follow me on <a href="https://twitter.com/debugjois">X</a> and <a href="https://instagram.com/debugjois">Instagram</a>, or email me at <a href="mailto:[email protected]">[email protected]</a> 🫶🏽.</p>
+<p>You can follow me on <a href="https://twitter.com/debugjois">X</a> and <a href="https://instagram.com/debugjois">Instagram</a>.</p>
 
-<p>&gt; <em>Currently, I am digging into AI models, learning Zig and perfecting my pidgin Spanish.</em></p>
+<p>&gt; <em>Currently, I am digging into AI models, learning Zig and perfecting my pidgin Spanish.</em></p>
+
+<h3>Coding</h3>
+<p>Some selected projects:</p>
+<ul>
+<li><p></p><a href="https://github.com/deepakjois/podscript">podscript</a> – use Large Language Models (LLM) and Speech-To-Text (STT) models to generate podcast transcripts.</p></li>
+<li><p><a href="https://github.com/ufyTeX/luaharfbuzz">luaharfbuzz</a> – Lua bindings for <a href="https://harfbuzz.github.io">Harfbuzz</a> (bundled with <a href="https://www.luatex.org/">LuaTeX</a>).</p></li>
+<li><p><a href="https://deepakjois.github.io/hs-logo/">hs-logo</a> (archived) – an interpreter for the <a href="https://en.wikipedia.org/wiki/Logo_(programming_language)">Logo</a> programming language written in Haskell.</p></li>
+</ul>

static/styles.css

@@ -20,6 +20,27 @@ main {
     padding: 4vw;
 }
 
+.intro {
+    display: flex;
+}
+
+img.avatar {
+    display: block;
+    width:200px;
+    height:200px;
+}
+
+.bio {
+    display: flex;
+    flex-direction: column;
+    justify-content: flex-start;
+    padding-left: 20px;
+}
+
+.bio h3 {
+    margin-top: 0;
+}
+
 h3 {
     font-size: 2rem;
     line-height: 1.2;