Reach Me Out
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
Configuration
TypeContainerlinuxkartikey31choudhary/reach-me-out:latest8080:80/tcp/usr/share/nginx/html/config.yaml : /path/to/config.yamlunless-stoppedNotes
Installation
- Ensure both Docker and Portainer are installed, and up-to-date
- Log into your Portainer web UI
- Under Settings → App Templates, paste the below URL
- Head to Home → App Templates, and the list of apps will show up
- 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
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:latestSave 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.targetThen reload systemd and start the service:
systemctl --user daemon-reload
systemctl --user start reach-me-outFor 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 singleconfig.yaml. Deployment is either:- Cloudflare Pages — config is baked into the bundle at build time. No
config.yaml, push to main, CI rebuilds.- Docker — config is mounted into the container as a volume and fetched
Links:
- Live architecture: docs/overview.md
- Feature specs: docs/features.md
- Release process: RELEASE.md
- Claude Code guide: CLAUDE.md
- 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 |- Clone and install
gh repo clone kartikeychoudhary/reach-me-out
cd reach-me-out
npm install- Run locally
npm run dev # vite dev server on http://localhost:5173The 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/ locallyThere are no environment variables to configure. Everything the browser needs is inside
config.yaml and the built bundle.- 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 deletingField reference in CLAUDE.md → Configuration model.
Avatar
Drop your image intopublic/ (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
Theme
modesets the initial dark/light state. The button in the top-right
localStorage under reach-me-out:mode.primaryandaccentcontrol every gradient, ring, and highlight on the
backgroundpicks one of four ambient treatments (animated blobs, angular
- 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=mainBuild 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=mainVisit the printed
*.pages.dev URL — you should see your page with the
values from config.yaml.- 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 Profile → API Tokens → Create Token → Custom:- Permissions:
- 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 → Settings → Secrets and variables → Actions → Secrets:| 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 mainThe workflow runs automatically. Follow it under the Actions tab.
- Custom domain (optional)
Cloudflare Pages dashboard → reach-me-out → Custom domains → Set up
a custom domain. If your DNS is on Cloudflare, it's one click — otherwise
add the CNAME they print at your DNS provider.- 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.yamlfrom the container root. - Mount your own
config.yamlto/usr/share/nginx/html/config.yamlto
- If the mount path is missing or the file can't be parsed, the bundled
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.0Visit
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:rodocker 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:localThe 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 withbuildx, push to Docker Hub, tag the git repo, and create the GitHub
release with the image links as notes.- 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- 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_TOKENhas Cloudflare Pages → Edit. - Confirm
CLOUDFLARE_ACCOUNT_IDis set. - Ensure the Pages project
reach-me-outexists (step 5).
Docker: my mounted
config.yaml isn't showing up- Confirm the mount target is
/usr/share/nginx/html/config.yamlexactly. - Confirm the host path is absolute —
docker run -v ./cfg:/…silently
$(pwd)/config.yaml or an absolute path.- Hard-refresh the browser — browsers will respect the `Cache-Control:
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:
137means killed, usually out of memory.126or127means 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:80only 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.yamlis 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 loginto 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
noso the failure stays visible.
Raise an issue
Found something which isn't working as it should? Here's how to report it.
- Bug within the app: Open an issue on kartikeychoudhary/Reach-me-out
- Template not working: Open an issue within the template's repo
- This website not working: Open an issue on lissy93/portainer-templates