Hello, I’m Maya Patel
Full‑stack dev turned maker‑educator.
Hover the canvas to see my projects come alive.
```
**style.css**
```css
body { margin:0; font-family:Arial, sans-serif; background:#111; color:#eee; }
#content { position:absolute; top:20px; left:20px; z-index:10; }
canvas { display:block; }
```
**sketch.js**
```js
let circles = [];
function setup() {
createCanvas(windowWidth, windowHeight);
noStroke();
}
function draw() {
background(20, 30, 40, 20); // slight trail effect
for (let i = circles.length - 1; i >= 0; i--) {
let c = circles[i];
fill(c.col);
ellipse(c.x, c.y, c.r);
c.r *= 0.96; // shrink
if (c.r < 2) circles.splice(i, 1);
}
}
// Add a circle where the mouse moves
function mouseMoved() {
circles.push({
x: mouseX,
y: mouseY,
r: random(30, 80),
col: color(random(100,255), random(100,255), random(100,255), 150)
});
}
// Keep canvas full screen
function windowResized() {
resizeCanvas(windowWidth, windowHeight);
}
```
That’s it – a simple canvas that leaves a colorful trail wherever the mouse goes. Feel free to replace the colors or shapes with icons that represent your own projects.
## Step 3 – Wire the Physical Display
If you’re using a regular HDMI monitor, you’re done. For a more “maker” feel, try a small 7‑inch touch screen that plugs into the Pi’s HDMI and USB ports. The screen will act like a regular monitor, but you can also read touch events in p5.js with the `touchStarted` function.
For a hardware twist, connect a few NeoPixel LEDs to the Pi’s GPIO pins. Install the **rpi_ws281x** library:
```
sudo pip install rpi_ws281x
```
Then add a tiny Node‑JS script that listens on a local socket and changes LED colors based on the sketch’s background. This step is optional, but it shows how software can control real light.
## Step 4 – Make It Interactive
Now let’s add a little extra magic: when a visitor clicks a project name, the background changes to a color that matches that project’s theme.
Add this to `index.html` inside the `#content` div:
```html