Portainer Templates logo

Portainer Templates

Reach Me Out Reach Me Out

Container

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. Source: https://github.com/kartikeychoudhary/Reach-me-out

Image details

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

Source details

Repo: kartikeychoudhary/Reach-me-out
Language: CSS
Latest: v1.0.0 · 3 months ago
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.

Standalone Install

Select an install method, to see config/commands for deploying Reach Me Out

Installation method

Install on Portainer

Import all app templates into your Portainer instance, for easy 1-click deploys

  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 Reach Me Out, fill in any config options, and hit Deploy

Template Import URL

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

More install options in our documentation, or see kartikeychoudhary/Reach-me-out for app-specific guidance.

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

ToolVersion
Node.js≥ 20 (see .nvmrc)
npm≥ 10 (bundled with Node 20)
gh CLIlatest — only if cloning via gh repo clone
wranglerinvoked via npx — no global install needed
A Cloudflare accountfree 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: "hello@alexrivera.dev"
  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 Profile → API Tokens → Create Token → Custom:
  • 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 → Settings → Secrets and variables → Actions → Secrets:
NameValue
CLOUDFLAREAPITOKENToken created above.
CLOUDFLAREACCOUNTIDYour 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-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.

  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.

A single container

Reach Me Out runs as one container, the simplest kind of app here. Just the one image to pull and nothing else wired up alongside it.

The app image

An image is the app packed up ready to go, everything Reach Me Out needs bundled into one download. This template pulls kartikey31choudhary/reach-me-out:latest, which Docker fetches once (about 20 MB) and then starts your own copy from.

Where the image comes from

Docker pulls its images from registries, public libraries of ready-built apps. Reach Me Out's comes from Docker Hub, published by kartikey31choudhary.

Version tags

The bit after the colon in the image name is the version tag. Here it's latest, which always points at the newest build, so a redeploy can bump you to a newer release without you asking. Newest right now is v1.0.0. Pin a specific tag if you would rather stay on one version.

Which machines it runs on

Every image is built for particular CPU types. This one ships for amd64, arm64, so it runs on both regular x86 servers and ARM boards like a Raspberry Pi.

Ports

A port is the door the app answers on. A mapping like 8080:80 means it's reachable on port 8080 of your server, where the left number is yours to change and the right one belongs to the app. Once it's running, open http://your-server-ip:8080 in a browser. It opens:

  • 8080:80, likely the web interface

Volumes

A volume is where Reach Me Out keeps its files so they survive an update or a restart. Without one, anything it saves would sit inside the container and vanish the moment it's recreated. This template mounts:

  • /usr/share/nginx/html/config.yaml from /path/to/config.yaml on the host, read-only

Restart policy

The restart policy here is unless-stopped, so Docker restarts Reach Me Out after a crash or reboot, but leaves it off when you stop it on purpose. You can change this on the deploy screen. The choices are no (never restart), on-failure (only after a crash), unless-stopped (restart unless you stop it), and always (bring it back no matter what).

Networking

Nothing custom is set, so Reach Me Out sits on Docker's default bridge network: its own private space that reaches the outside world only through the ports it publishes.

Container name

Once it's deployed, Portainer names the container reach-me-out. That's what you'll spot in the containers list and use in commands like docker logs reach-me-out.

Platform

The platform is linux, the kind of system the container is built to run on. Docker and Portainer handle this on a normal Linux server.

Portainer app templates

Zooming out, this whole page comes from a Portainer app template: a short recipe telling Portainer how to set Reach Me Out up. Add the template list to Portainer once, then deploying Reach Me Out is a click rather than a wall of config.