about and new hero

index.html

@@ -456,7 +456,7 @@
       <div id="scene-content">
         <h1 id="scene-title"></h1>
         <h2 id="scene-subtitle"></h2>
-        <p id="scene-body"></p>
+        <div id="scene-body"></div>
       </div>
       <div id="resume-section"></div>
       <div id="projects-section"></div>

src/data/scenes/about.ts

@@ -3,5 +3,29 @@ import type { SceneContent } from './index'
 export const about: SceneContent = {
   title: 'ABOUT',
   subtitle: 'Who I am and what I do',
-  body: 'My name is Ahmed Alaa Ahmed Mohamed (aka Djoser/Djosen/Inedited), I\'m a passionate creative software engineer and game developer. ',
+  body: `\
+<p>My name is Ahmed Alaa Ahmed Mohamed (aka Djoser / Djosen / Inedited). I'm a passionate creative software engineer and game developer.</p>
+
+<p>I hold a master's degree in games engineering from TUM, with a strong background in graphics programming, real-time rendering, XR development, game development, and AI engineering.</p>
+
+<p>I have experience working on AAA titles (Forza Motorsport 8) with Turn10 Games, as well as indie games and other personal projects. If it involves computers and is fun, I'm in.</p>
+
+<p>Recently I've been getting into AI Engineering during my work at Siemens, and have developed workflows with Nvidia and Meta XR-AI for industrial operations.</p>
+
+<p>Besides my professional work, I do some other fun stuff:</p>
+
+<ul>
+  <li>Video games</li>
+  <li>Music production and sound design</li>
+  <li>Audio reactive visualizations</li>
+  <li>Shader programming</li>
+  <li>Sim racing</li>
+  <li>Hardware tinkering</li>
+  <li>Making more video games and whatnot</li>
+</ul>
+
+<p>You can reach me at <a href="mailto:ineditedofficial@gmail.com">ineditedofficial@gmail.com</a> or <a href="mailto:djoser@djosen.one">djoser@djosen.one</a> or "inedited" on discord. </p>
+<p>It's a little hard to try to dumb everything about me in one page so just reach out to me, let's have a chat!</p>
+`
+,
 }

src/data/scenes/hero.ts

@@ -2,6 +2,9 @@ import type { SceneContent } from './index'
 
 export const hero: SceneContent = {
   title: 'Ahmed A. Mohamed',
-  subtitle: 'Creative Developer & Graphics Engineer',
+  subtitle: 'Creative Developer | Game Developer | Software Engineer',
-  body: 'Welcome to my personal website, there\'s a lot going on in my life that I will be sharing here randomly over time so take a look.',
+  body: `\
+<p>Welcome to my personal website. There's a lot going on in my life that I'll be sharing here over time, professional and not.</p>
+
+<p>Everything is still under construction, I'll be adding updates as I go.</p>`,
 }

src/ui/overlay.ts

@@ -215,7 +215,7 @@ export class DomOverlay {
     if (content) {
       this.titleEl.textContent = content.title
       this.subtitleEl.textContent = content.subtitle
-      this.bodyEl.textContent = content.body
+      this.bodyEl.innerHTML = content.body
     }
 
     // default: show scene-content, hide special sections