src/posts/hello-world.md


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34

---
layout: base.njk
title: Hello World
date: 2025-12-14
---

# Hello World!

This is my first blog post. I can write regular markdown here.

## Interactive Toy Example

Here's a little interactive toy:

<div id="color-toy" style="padding: 2rem; background: #f0f0f0; border-radius: 8px; text-align: center;">
  <button id="change-color">Click me!</button>
  <p id="color-display" style="margin-top: 1rem; font-weight: bold;">Color: #f0f0f0</p>
</div>

<script>
  const btn = document.getElementById('change-color');
  const display = document.getElementById('color-display');
  const toy = document.getElementById('color-toy');

  btn.addEventListener('click', () => {
    const randomColor = '#' + Math.floor(Math.random()*16777215).toString(16);
    toy.style.background = randomColor;
    display.textContent = 'Color: ' + randomColor;
  });
</script>

## More Content

And I can continue writing markdown after the interactive bit!