Build an Interactive Portfolio with p5.js on a Raspberry Pi

Ever stared at a plain static portfolio and thought, “I could make this dance”? In 2024, hiring managers love to see a little playfulness, and a Raspberry Pi with p5.js gives you a cheap, hands‑on way to turn a web page into a living showcase.

Why an Interactive Portfolio?

A portfolio is more than a list of projects – it’s a glimpse into how you think. Adding a tiny interactive demo shows you can:

write clean front‑end code (p5.js is just JavaScript with a graphics wrapper)
set up a tiny server (the Pi does that for you)
blend software with hardware (the Pi can drive LEDs, sensors, or a small screen)

When I first built a “hello world” LED blink on a Pi for a class, the students’ eyes lit up. The same spark happens when a recruiter sees a moving background that reacts to mouse movement. It says, “I’m not afraid to tinker.”

What You’ll Need

Item	Why
Raspberry Pi 4 (2 GB or more)	Small enough to sit on a desk, powerful enough for p5.js
Micro‑SD card (16 GB)	Holds the OS and your code
Power supply (5 V 3 A)	Keeps the Pi happy
7‑inch HDMI display (or any monitor)	Where the portfolio lives
Keyboard & mouse (just for setup)	You’ll need them once
Optional: USB touch screen or motion sensor	Adds extra interactivity

All of these are under $100 if you shop smart. The Pi can run headless later, so you can hide the board inside a case and let the screen be the star.

Step 1 – Install the OS and Enable the Server

Download Raspberry Pi OS Lite from the official site.
Flash it to the SD card using the free Balena Etcher tool.
Insert the card, plug in the Pi, and power it up.
Connect via HDMI, keyboard, and mouse.
Open a terminal and run:

sudo apt update
sudo apt install nginx

Nginx is a tiny web server that will serve your p5 sketch. It’s lightweight and perfect for a single‑page portfolio.

Test it: open a browser on the Pi and go to http://localhost. You should see the default Nginx page. If you do, you’re ready to move on.

Step 2 – Write the p5.js Sketch

Create a folder for your site:

mkdir -p /var/www/html/portfolio
cd /var/www/html/portfolio

Now add three files: index.html, sketch.js, and style.css.

index.html

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Maya's Interactive Portfolio</title>
  <link rel="stylesheet" href="style.css">
  <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.7.0/p5.min.js"></script>
  <script src="sketch.js"></script>
</head>
<body>
  <div id="content">
    <h1>Hello, I’m Maya Patel</h1>
    <p>Full‑stack dev turned maker‑educator.</p>
    <p>Hover the canvas to see my projects come alive.</p>
  </div>
</body>
</html>

style.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

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:

<ul id="projects">
  <li data-color="#ff5733">Web App</li>
  <li data-color="#33ff57">IoT Device</li>
  <li data-color="#3357ff">Creative Code</li>
</ul>

And extend sketch.js:

function mousePressed() {
  // If we click on a project list item, change background hue
  let el = document.elementFromPoint(mouseX, mouseY);
  if (el && el.dataset && el.dataset.color) {
    background(el.dataset.color);
  }
}

Now the canvas reacts not just to mouse movement but also to clicks on the list. You can replace the list with images, icons, or even a QR code that opens a video.

Step 5 – Run It All the Time

To make the portfolio start on boot, add a simple systemd service:

sudo nano /etc/systemd/system/portfolio.service

Paste:

[Unit]
Description=Start portfolio server
After=network.target

[Service]
ExecStart=/usr/sbin/nginx -g 'daemon off;'
WorkingDirectory=/var/www/html/portfolio
Restart=always
User=www-data

[Install]
WantedBy=multi-user.target

Enable and start:

sudo systemctl enable portfolio.service
sudo systemctl start portfolio.service

Now the Pi will serve your interactive page as soon as it powers up. You can hide the Pi in a small case, plug the display into a wall outlet, and you have a live portfolio that never sleeps.

Wrap Up

Building an interactive portfolio with p5.js and a Raspberry Pi is a great way to showcase both coding chops and maker spirit. You get a cheap, portable web server, a canvas for creative coding, and the option to add real‑world hardware. The whole project fits in a single afternoon, but the impression it leaves can last a career.

Give it a try, tinker with the colors, add a sensor, or turn the whole thing into a wall‑mounted kiosk. At CraftCode Academy we love seeing students turn a simple idea into a tangible piece of art. Your next interview could start with a visitor moving their hand over a glowing display – and that’s a story you’ll never forget.