Portainer Templates logo

Portainer Templates

Reach Me Out Reach Me Out

WebTools

Static, config-driven link-in-bio page. Profile card, tappable links, vCard download, QR share — all driven from a single YAML file baked at build time.

Image details

Pulls: 98
Architectures: amd64, arm64
Image size: 20 MB
Latest: v1.0.0
User: kartikey31choudhary
Created: Apr 20, 2026
Updated: 3 months ago
Status: active

Source details

Language: CSS
Updated: 3 months ago

Configuration

Type
Container
Platform
linux
Image
kartikey31choudhary/reach-me-out:latest
Ports
8080:80/tcp
Volumes
/usr/share/nginx/html/config.yaml : /path/to/config.yaml
Restart
unless-stopped

Notes

Mount your own config.yaml to /usr/share/nginx/html/config.yaml (read-only) to customize name, links and theme. See https://github.com/kartikeychoudhary/Reach-me-out for the YAML schema and examples.

Installation

  1. Ensure both Docker and Portainer are installed, and up-to-date
  2. Log into your Portainer web UI
  3. Under Settings → App Templates, paste the below URL
  4. Head to Home → App Templates, and the list of apps will show up
  5. Select the app you wish to deploy, fill in any config options, and hit Deploy

Template Import URL

https://raw.githubusercontent.com/Lissy93/portainer-templates/main/templates.json
Show Me demo

docker run -d --name reach-me-out \
  -p 8080:80/tcp \
  -v /path/to/config.yaml:/usr/share/nginx/html/config.yaml:ro \
  --restart=unless-stopped \
  kartikey31choudhary/reach-me-out:latest

Save this file as compose.yaml and run docker compose up -d
Use this only as a guide.

services:
  reach-me-out:
    image: kartikey31choudhary/reach-me-out:latest
    ports:
      - 8080:80/tcp
    volumes:
      - /path/to/config.yaml:/usr/share/nginx/html/config.yaml:ro
    restart: unless-stopped

Save this file as reach-me-out-stack.yml, then from a manager node, run docker stack deploy -c reach-me-out-stack.yml reach-me-out

version: '3.8'
services:
  reach-me-out:
    image: kartikey31choudhary/reach-me-out:latest
    ports:
      - 8080:80/tcp
    volumes:
      - /path/to/config.yaml:/usr/share/nginx/html/config.yaml:ro
    deploy:
      restart_policy:
        condition: any

Save each file below into a folder, then run kubectl apply -f .
Written for k3s, but works on any cluster: bind mounts use hostPath, named volumes get a persistent volume claim, and ports are exposed via a LoadBalancer service.

reach-me-out-deployment.yaml

apiVersion: apps/v1
kind: Deployment
metadata:
  name: reach-me-out
  labels:
    app: reach-me-out
spec:
  replicas: 1
  selector:
    matchLabels:
      app: reach-me-out
  template:
    metadata:
      labels:
        app: reach-me-out
    spec:
      containers:
        - name: reach-me-out
          image: kartikey31choudhary/reach-me-out:latest
          ports:
            - containerPort: 80
              protocol: TCP
          volumeMounts:
            - name: reach-me-out-data-0
              mountPath: /usr/share/nginx/html/config.yaml
              readOnly: true
      volumes:
        - name: reach-me-out-data-0
          hostPath:
            path: /path/to/config.yaml

reach-me-out-service.yaml

apiVersion: v1
kind: Service
metadata:
  name: reach-me-out
spec:
  type: LoadBalancer
  selector:
    app: reach-me-out
  ports:
    - name: 8080-tcp
      port: 8080
      targetPort: 80
      protocol: TCP

Save this file as ~/.config/containers/systemd/reach-me-out.container

[Unit]
Description=Reach Me Out

[Container]
Image=kartikey31choudhary/reach-me-out:latest
ContainerName=reach-me-out
PublishPort=8080:80/tcp
Volume=/path/to/config.yaml:/usr/share/nginx/html/config.yaml:ro

[Service]
Restart=always

[Install]
WantedBy=default.target

Then reload systemd and start the service:

systemctl --user daemon-reload
systemctl --user start reach-me-out

For a system-wide service, use /etc/containers/systemd/ and drop --user.

For more installation options, see the Documentation in our GitHub repo

For app-specific guidance, check Reach Me Out's own repo at kartikeychoudhary/Reach-me-out

reach-me-out

A static link-in-bio / contact page — React + Vite. Page content (profile, theme, link list) lives in a single config.yaml. Deployment is either:
  • Cloudflare Pages — config is baked into the bundle at build time. No
backend, no runtime fetch. Edit config.yaml, push to main, CI rebuilds.
  • Docker — config is mounted into the container as a volume and fetched
at runtime by the app. The image ships with a John Doe default; your mounted YAML overrides it without a rebuild.
Links:

  1. Prerequisites

| Tool | Version | | -------------------- | ------------------------------------------------- | | Node.js | ≥ 20 (see .nvmrc) | | npm | ≥ 10 (bundled with Node 20) | | gh CLI | latest — only if cloning via gh repo clone | | wrangler | invoked via npx — no global install needed | | A Cloudflare account | free tier is enough |

  1. Clone and install

gh repo clone kartikeychoudhary/reach-me-out
cd reach-me-out
npm install

  1. Run locally

npm run dev        # vite dev server on http://localhost:5173

The dev server hot-reloads edits to any source file including config.yaml — save the YAML and the page updates.
Other scripts:
npm run build      # bundle to dist/ (bakes config.yaml in)
npm run preview    # serve the built dist/ locally

There are
no environment variables to configure. Everything the browser needs is inside config.yaml and the built bundle.

  1. Edit your profile

All on-screen content lives in one file: config.yaml
.
profile:
  name: "Alex Rivera"
  title: "Designer & Full-Stack Developer"
  bio: "Building beautiful things on the internet."
  avatar: ""                 # path under public/, e.g. "avatar.jpg"
  phone: "+1234567890"
  email: "[email protected]"
  website: "https://alexrivera.dev"
  location: "San Francisco, CA"

theme:
  mode: dark                 # dark | light  (initial; user can toggle)
  background: mesh           # mesh | gradient | solid | noise
  primary: "#6366f1"           # indigo
  accent:  "#a855f7"           # violet
  radius:  16
  blur:    true

links:
  - label: "Call Me"
    url:   "tel:+1234567890"
    icon:  "fa-solid fa-phone"
    color: "#22c55e"

  - label: "LinkedIn"
    url:   "https://linkedin.com/in/username"
    icon:  "fa-brands fa-linkedin-in"
    color: "#0A66C2"
    badge: "Open to work"

  - label: "YouTube"
    url:   "https://youtube.com/@username"
    icon:  "fa-brands fa-youtube"
    color: "#FF0000"
    enabled: false           # hide without deleting

Field reference in CLAUDE.md → Configuration model.

Avatar

Drop your image into public/ (e.g. public/avatar.jpg) and set profile.avatar: "avatar.jpg". Leave blank to render initials from name.

Icons

icon: takes any Font Awesome 6 class string — brands (fa-brands fa-github) or solid (fa-solid fa-envelope). Browse at . Font Awesome is loaded from its CDN in index.html.

Theme

  • mode sets the initial dark/light state. The button in the top-right
corner lets visitors flip it at runtime, and the choice is remembered via localStorage under reach-me-out:mode.
  • primary and accent control every gradient, ring, and highlight on the
page — pick contrasting colors.
  • background picks one of four ambient treatments (animated blobs, angular
gradient, flat solid, SVG noise).

  1. Deploy the site to Cloudflare Pages (one-time)

Create the Pages project:
npx wrangler login                                  # opens browser
npx wrangler pages project create reach-me-out \
  --production-branch=main

Build locally and push a first manual deploy to confirm everything works:
npm run build
npx wrangler pages deploy dist \
  --project-name=reach-me-out --branch=main

Visit the printed *.pages.dev URL — you should see your page with the values from config.yaml.

  1. Wire up CI/CD (GitHub Actions)

After the one-time manual deploy, every push to main can redeploy automatically via .github/workflows/deploy.yml.

Create a Cloudflare API token

Dashboard → My ProfileAPI TokensCreate TokenCustom:
  • Permissions:
- Account → Cloudflare Pages → Edit
  • Account resources: include your account.

Copy the token.
Grab your Account ID from the right sidebar of the Workers & Pages dashboard.

Configure GitHub secrets

Repo → SettingsSecrets and variablesActionsSecrets:
| Name | Value | | ----------------------- | --------------------------- | | CLOUDFLARE_API_TOKEN | Token created above. | | CLOUDFLARE_ACCOUNT_ID | Your Cloudflare account ID. |
No public variables are needed — config.yaml is baked into the bundle at build time, and the app talks to nothing at runtime.

Push to main

git init
git branch -M main
git add .
git commit -m "Initial reach-me-out site"
git remote add origin https://github.com/kartikeychoudhary/reach-me-out.git
git push -u origin main

The workflow runs automatically. Follow it under the Actions tab.

  1. Custom domain (optional)

Cloudflare Pages dashboard → reach-me-outCustom domainsSet up a custom domain. If your DNS is on Cloudflare, it's one click — otherwise add the CNAME they print at your DNS provider.

  1. Run with Docker

An nginx-based image is published at kartikey31choudhary/reach-me-out on Docker Hub. Image size ≈ 30 MB, non-privileged port 80 inside the container.
Behavior:
  • The image ships with a John Doe default config baked in.
  • On every request the app fetches /config.yaml from the container root.
  • Mount your own config.yaml to /usr/share/nginx/html/config.yaml to
override the default — no rebuild required.
  • If the mount path is missing or the file can't be parsed, the bundled
fallback is used instead (page still renders).

8a. Run the published image

# Default (John Doe)
docker run --rm -p 8080:80 kartikey31choudhary/reach-me-out:latest

# With your own config
docker run --rm -p 8080:80 \
  -v "$(pwd)/config.yaml:/usr/share/nginx/html/config.yaml:ro" \
  kartikey31choudhary/reach-me-out:latest

# Pin an exact version (recommended for production)
docker run --rm -p 8080:80 \
  -v "$(pwd)/config.yaml:/usr/share/nginx/html/config.yaml:ro" \
  kartikey31choudhary/reach-me-out:v1.0.0

Visit . Edit the host config.yaml and refresh — the page picks up the change without a container restart (the YAML is served with Cache-Control: no-store).

8b. docker-compose

services:
  reach-me-out:
    image: kartikey31choudhary/reach-me-out:v1.0.0
    restart: unless-stopped
    ports:
      - "8080:80"
    volumes:
      - ./config.yaml:/usr/share/nginx/html/config.yaml:ro

docker compose up -d to start, docker compose pull && docker compose up -d to upgrade.

8c. Build the image yourself

docker build -t reach-me-out:local .
docker run --rm -p 8080:80 \
  -v "$(pwd)/config.yaml:/usr/share/nginx/html/config.yaml:ro" \
  reach-me-out:local

The Dockerfile is a two-stage build: Node 20 compiles the React bundle, then the output plus docker/default-config.yaml is copied into a fresh nginx:alpine. See docker/nginx.conf for the vhost (cache headers, SPA fallback, gzip, security headers).

8d. Cutting a new Docker release

Manual release commands live in RELEASE.md — multi-arch build with buildx, push to Docker Hub, tag the git repo, and create the GitHub release with the image links as notes.

  1. Repo layout

reach-me-out/
├── .github/workflows/deploy.yml    # CI: Pages deploy on push to main
├── docs/
│   ├── overview.md                 # high-level architecture
│   ├── features.md                 # feature index
│   └── feature/
│       └── deploy-pipeline.md
├── public/                         # static assets (avatar, favicon, …)
├── src/
│   ├── main.jsx                    # React entry
│   ├── App.jsx                     # composes the page + wires state
│   ├── components/
│   │   ├── Background.jsx          # particle canvas + blobs + noise
│   │   ├── ParticleCanvas.jsx
│   │   ├── ProfileCard.jsx
│   │   ├── Avatar.jsx
│   │   ├── ActionButtons.jsx       # Save Contact / Share QR / Share
│   │   ├── LinkList.jsx
│   │   ├── LinkRow.jsx
│   │   ├── QrSheet.jsx             # iOS-style bottom sheet
│   │   ├── Toast.jsx
│   │   ├── ThemeToggle.jsx
│   │   └── Footer.jsx
│   ├── hooks/useToast.js
│   ├── utils/
│   │   ├── vcard.js                # vCard builder + download
│   │   ├── theme.js                # applies tokens to <html>/<body>
│   │   └── initials.js
│   └── styles/                     # globals.css + components.css
├── docker/
│   ├── default-config.yaml         # John Doe default baked into the image
│   └── nginx.conf                  # vhost: no-cache /config.yaml, SPA fallback
├── Dockerfile                      # multi-stage build (Node → nginx:alpine)
├── .dockerignore
├── config.yaml                     # ← the only thing you edit for content
├── CLAUDE.md                       # guide for Claude Code
├── RELEASE.md                      # manual release runbook (Docker + GitHub)
├── index.html
└── vite.config.js

  1. Troubleshooting

wrangler pages deploy fails with Project not found Create the Pages project first: npx wrangler pages project create reach-me-out --production-branch=main.
YAML edits don't show up The bundle is built, not fetched. Run npm run build again (or push to main to let CI rebuild). The dev server (npm run dev) hot-reloads on save.
Font Awesome icons render as squares Check that index.html still has the CDN <link> to cdnjs.cloudflare.com/.../font-awesome/.../all.min.css, and that the icon: value in config.yaml uses a full class string like fa-solid fa-phone (not just phone).
Avatar image doesn't load Place the file under public/ and reference it without a leading slash (e.g. avatar: "avatar.jpg"). The component falls back to initials if the image 404s.
Particle canvas lags on low-end devices Open src/components/ParticleCanvas.jsx and lower COUNT (default 48) or MAX_DIST (default 120). Or set theme.background: solid in config.yaml to bypass the canvas visually.
GitHub Actions fails on wrangler pages deploy
  • Confirm CLOUDFLARE_API_TOKEN has Cloudflare Pages → Edit.
  • Confirm CLOUDFLARE_ACCOUNT_ID is set.
  • Ensure the Pages project reach-me-out exists (step 5).

Docker: my mounted config.yaml isn't showing up
  • Confirm the mount target is /usr/share/nginx/html/config.yaml exactly.
  • Confirm the host path is absolute — docker run -v ./cfg:/… silently
creates an empty directory at the target if the host path is relative or doesn't exist. Prefer $(pwd)/config.yaml or an absolute path.
  • Hard-refresh the browser — browsers will respect the `Cache-Control:
no-store header on /config.yaml`, but service workers / extensions can still interpose.
Docker: browser shows John Doe even after mounting The mounted YAML is probably invalid — the app silently falls back to the baked default when js-yaml can't parse it. Run yq . config.yaml (or python -c "import yaml,sys;yaml.safe_load(open('config.yaml'))") locally to confirm.

License

Personal project — all rights reserved. Feel free to take inspiration from the architecture; please don't copy the content verbatim.

Serve Reach Me Out on your own domain behind Caddy, Nginx or Traefik. Fill in your domain and copy the result. It's a starting point, some apps need their own base URL or extra headers set too.

Proxying reach-me-out.example.com to http://reach-me-out:80

Add this to your Caddyfile

reach-me-out.example.com {
	reverse_proxy http://reach-me-out:80
}

Check the logs first

Nine times out of ten the logs tell you exactly what went wrong.

  • In Portainer, go to Containers, click the container, then Logs. Or run docker logs reach-me-out
  • Exit codes help too: 137 means killed, usually out of memory. 126 or 127 means the command inside the image is broken.

Port already in use

If deployment fails with "Bind for 0.0.0.0:8080 failed: port is already allocated", something else on your server is using that port.

  • Find what's using it: sudo ss -tlnp | grep :8080
  • Stop the other service, or pick a different host port. In 8080:80 only the left number is yours to change, the right one belongs to the app.

Running but the page won't load

The container is up but nothing appears in your browser.

  • Use your server's real IP: http://your-server-ip:8080. The 0.0.0.0 link Portainer shows isn't a real address.
  • Give it a minute after first deploy, reach-me-out can take a while to initialise.
  • Make sure your firewall allows the port, e.g. sudo ufw allow 8080

Permission denied on volumes

If the logs show "permission denied", the app can't write to its data folder on the host.

  • Seeing "read-only file system"? /path/to/config.yaml is mounted read-only on purpose, the app isn't meant to write there.

Image won't pull

Test the pull directly on the host: docker pull kartikey31choudhary/reach-me-out:latest

  • "manifest unknown" means the tag no longer exists. This template uses latest, so try pinning a specific version instead.
  • "toomanyrequests" is the Docker Hub rate limit. Log in with docker login to raise it.
  • "no space left on device" means a full disk. Reclaim space with docker system prune

"exec format error"

This means the image was built for a different CPU architecture than your server.

  • This image supports: amd64, arm64
  • Check yours with uname -m: x86_64 is amd64, aarch64 is arm64. Raspberry Pi and other ARM boards are the usual culprits.

Container keeps restarting

The unless-stopped restart policy relaunches the app after every crash, so the real error can scroll past.

  • Check the logs right after a restart, the last few lines before it died are the useful ones.
  • Get the exit code with docker inspect reach-me-out --format '{{.State.ExitCode}}'
  • Still stuck? Redeploy once with the restart policy set to no so the failure stays visible.

Raise an issue

Found something which isn't working as it should? Here's how to report it.

Similar apps