reannafrancis.dev

Code

codeJun 30, 2026

React Card component with Tailwind CSS

A minimal Card design to practice my understanding of React and CSS.

jsx — Card.jsx

export function Card({ name, title, bio }) {
  return (
    <div className="card">
      <h2>{name}</h2>
      <p className="card-title">{title}</p>
      <p>{bio}</p>
    </div>
  )
}

export function App() {
  return (
    <div className="flex-container">
      <Card
        name="John Doe"
        title="Software Engineer"
        bio="Passionate about coding and technology."
      />
    </div>
  );
}

⬇ Download Card.jsx

html — index.html

<!doctype html>
<html>
<head>
  <meta charset="utf-8">
   <title>React Card Component</title>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/react/18.3.1/umd/react-dom.development.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/18.3.1/umd/react-dom.development.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/7.26.3/babel.min.js"></script>
  <script data-plugins="transform-modules-umd" type="text/babel" src="./Card.jsx"></script>
  <link rel="stylesheet" href="./styles.css"/>
</head>
<body>
  <div id="root"></div>
  <script data-plugins="transform-modules-umd" type="text/babel" data-presets="react" data-type="module">
 import { App } from './index.js'; ReactDOM.createRoot(document.getElementById('root')).render(<App />);
</script>
</body>
</html>

⬇ Download index.html

css — styles.css

:root {
  --dark-grey: #1b1b32;
  --light-grey: #f5f5f5;
  --dark-orange: #f89808;
}

body {
  background-color: var(--dark-grey);
}

.flex-container {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
  align-items: center;
}

.card {
  border: 5px solid var(--dark-orange);
  border-radius: 10px;
  background-color: var(--light-grey);
  padding: 20px;
  margin: 10px 0;
  width: 100%;
}

.card-title {
  border-bottom: 4px solid var(--dark-orange);
  width: fit-content;
}

@media (min-width: 768px) {
  .card {
    width: 300px;
  }
}

⬇ Download styles.css

Live Preview

0 views

Code

codeJun 20, 2026

Plotting a Damped Sine Wave with NumPy + Matplotlib

Click Run to execute real Python in your browser — numpy does the math, matplotlib draws the graph. Nothing leaves your machine.

python — damped_sine.py

import numpy as np
import matplotlib.pyplot as plt

t = np.linspace(0, 10, 500)
y = np.exp(-0.3 * t) * np.sin(2 * np.pi * t)

print('peak amplitude:', round(y.max(), 4))
print('samples:', t.size)

plt.figure(figsize=(7, 3.5))
plt.plot(t, y, color='#8b5cf6', linewidth=2)
plt.title('Damped Sine Wave')
plt.xlabel('time (s)')
plt.ylabel('amplitude')
plt.grid(True, alpha=0.3)
plt.show()

⬇ Download damped_sine.py

Live Preview

0 views

Code

codeJun 15, 2026

A Pill-Tab Filter Component — HTML, CSS, and JSX

Three ways to build the same filter tabs you see on my feed. Start with plain HTML/CSS, then the React version that actually ships.

html — tabs.html

<div class="filter-bar">
  <button class="tab active">All</button>
  <button class="tab">Code</button>
  <button class="tab">Art</button>
</div>

⬇ Download tabs.html

css — tabs.css

.tab {
  padding: 6px 16px;
  border-radius: 999px;
  border: 2px solid var(--border);
  background: transparent;
  color: var(--muted);
  cursor: pointer;
}

.tab.active {
  background: var(--lavender);
  color: var(--bg);
  box-shadow: 3px 3px 0 #8b5cf6;
}

⬇ Download tabs.css

jsx — FilterBar.jsx

function FilterBar({ tabs, active, onSelect }) {
  return (
    <div className="filter-bar">
      {tabs.map((tab) => (
        <button
          key={tab}
          className={`tab ${active === tab ? 'active' : ''}`}
          onClick={() => onSelect(tab)}
        >
          {tab}
        </button>
      ))}
    </div>
  )
}

⬇ Download FilterBar.jsx

Live Preview

0 views

Code

codeJun 15, 2026

A Pill-Tab Filter Component — HTML, CSS, and JSX

Three ways to build the same filter tabs you see on my feed. Start with plain HTML/CSS, then the React version that actually ships.

html — tabs.html

<div class="filter-bar">
  <button class="tab active">All</button>
  <button class="tab">Code</button>
  <button class="tab">Art</button>
</div>

⬇ Download tabs.html

css — tabs.css

.filter-bar {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.tab {
  padding: 6px 16px;
  border-radius: 999px;
  border: 2px solid #4a3f6b;
  background: transparent;
  color: #9d8ec4;
  cursor: pointer;
}

.tab.active {
  background: #c4b5fd;
  color: #1a1625;
  box-shadow: 3px 3px 0 #8b5cf6;
}

⬇ Download tabs.css

jsx — FilterBar.jsx

function FilterBar({ tabs, active, onSelect }) {
  return (
    <div className="filter-bar">
      {tabs.map((tab) => (
        <button
          key={tab}
          className={`tab ${active === tab ? 'active' : ''}`}
          onClick={() => onSelect(tab)}
        >
          {tab}
        </button>
      ))}
    </div>
  )
}

⬇ Download FilterBar.jsx

Live Preview

0 views

Code

codeJun 1, 2026

Docker Compose for Next.js + Mongo

A minimal setup that gives you hot-reload Next.js and persistent MongoDB in one command.

yaml — docker-compose.yml

services:
  app:
    build: .
    ports: ["3000:3000"]
  mongo:
    image: mongo:7

⬇ Download docker-compose.yml

0 views

Code

textJun 1, 2026

Hello World — Portfolio is Live

This is the first post on my portfolio feed. Welcome.

I built this to document what I'm working on — code, hardware, art, and the occasional deep-dive article. Posts live here in the content/posts/ folder as Markdown or JSON, or I add them via the dashboard at /admin.

What's here

Code posts with syntax highlighting and download buttons
IoT / hardware project logs
Art process posts with images
Solar punk builds and concepts
Articles — long-form, readable at /articles/[slug]

Scroll down. More soon.

0 views

IoT / HardwareCode

downloadMay 20, 2026

ESP32 Sensor Firmware v1.0.0

First stable release of the environmental sensor firmware. Reads temperature, humidity, and CO₂. Reports via MQTT. Supports OTA updates.

esp32-sensor-v1.0.0.bin

118 KBESP32PlatformIO

⬇ Download

0 views

IoT / HardwareCode

articleMay 10, 2026

Building a Self-Healing Sensor Network with ESP32 and MQTT

Most DIY sensor setups fail silently — a node drops off the network and you don't notice until your grow tent cooks your seedlings at 3am. The architecture After three iterations, here's what I settled on: - Watchdog timers on each node force a reboot if the main loop …

🌿

Reanna Francis

8 min read · 0 views

Read Article →

0 views