Skip to content

README.md

Latest commit

 

History

History
152 lines (117 loc) · 4.43 KB

README.md

File metadata and controls

152 lines (117 loc) · 4.43 KB
Raw

Link in Bio

A modern, open-source Link-in-Bio page — a clean recreation of click.bitlab.lk in a dark theme.

Everything you see is driven by four configuration files. No JSX editing required.

  • React 19 + TypeScript
  • Vite + TanStack Start (file-based routing)
  • Tailwind CSS v4
  • Framer Motion animations
  • Lucide React + React Icons
  • No backend, no database

Quick start

npm install
npm run dev      # http://localhost:8080
npm run build    # production build
npm run preview  # preview the production build

Making it yours

A non-technical user only needs these four steps:

  1. Replace public/profile.png with your own avatar (square image, ~512×512).
  2. Replace / add icons in public/favicons/.
  3. Edit the config files in src/config/.
  4. Commit and push — Vercel publishes the site automatically.

1. Profile — src/config/profile.ts

export const profile = {
  name: "BitLab",
  verified: true, // shows / hides the blue badge
  avatar: "/profile.png",
  bio: "", // optional line under the name
  share: true, // floating Share button
  enableSearch: false, // optional search bar
  footer: "© BitLab", // empty string hides the footer
  seo: { title: "…", description: "…" },
};

2. Social icons — src/config/socials.ts

export const socials = [
  { icon: "youtube", url: "https://youtube.com/@you" },
  { icon: "github", url: "https://github.com/you" },
];

Supported keys: youtube, facebook, whatsapp, linkedin, instagram, tiktok, github, behance, x, twitter, threads, dribbble, telegram, discord, pinterest, reddit, spotify, twitch, medium, email, website. Add more in the ICONS map inside src/components/SocialIcons.tsx.

3. Links — src/config/links.ts

export const links = [
  {
    id: "nas", // unique id
    title: "Nomad Architecture Studio",
    subtitle: "", // optional second line
    url: "https://nas.lk",
    favicon: "nas.png", // file in public/favicons/
  },
];

If favicon is missing (or the file fails to load) a globe icon is shown instead.

4. Theme — src/config/theme.ts

Background gradient, button color, hover color, text color, accent color, border radius, font family and max content width. Each value becomes a CSS custom property (--lb-*), so one edit restyles the whole page.

Deployment

Vercel (automatic)

The project includes a vercel.json configuration file pre-configured for Vercel deployment.

  1. Import your Git repository into Vercel.
  2. Vercel automatically detects the build settings:
    • Framework Preset: Vite
    • Build Command: npm run build (or bun run build)
    • Output Directory: dist/client
  3. Click Deploy. Every push to main will automatically trigger a new deployment.

Lovable

Click Publish in the editor to deploy to a *.lovable.app URL or a custom domain.

Project structure

src/
  components/
    Profile.tsx        avatar, name, verified badge, bio
    SocialIcons.tsx    social row (icon map lives here)
    LinkButton.tsx     one link card with favicon + hover arrow
    ShareButton.tsx    navigator.share() with clipboard fallback + toast
    SearchBar.tsx      optional filter input ("/" shortcut)
    Footer.tsx         optional footer
  config/
    profile.ts  socials.ts  links.ts  theme.ts
  lib/
    analytics.ts       placeholder — plug in Plausible / GA / Umami
  routes/
    index.tsx          the page (layout + SEO metadata)
    __root.tsx         html shell, fonts, manifest, toaster
    sitemap[.]xml.ts   /sitemap.xml
  types.ts             shared config types
public/
  profile.png          avatar
  favicon.png  icon-192.png  icon-512.png
  favicons/            per-link icons
  manifest.json  robots.txt

Features

  • Dark-only theme with gradient background, centered 430px column
  • Subtle Framer Motion entrance + hover animations (lift, scale, glow)
  • Share button: Web Share API with clipboard fallback and toast
  • Optional search across title, subtitle and URL (/ to focus, Esc to clear)
  • Verified badge toggle, optional bio, optional footer
  • SEO: title, description, OpenGraph, Twitter cards, JSON-LD, robots.txt, sitemap.xml
  • Installable web app manifest with app icons
  • Accessible: skip link, ARIA labels, visible focus rings, keyboard navigable, WCAG AA contrast
  • Lazy-loaded favicons, tree-shaken icon imports, no heavy dependencies

License

MIT — free to use, fork and rebrand.