Link In Bio Template

Link Card Template

A small, customizable "link in bio" style personal page built with Express and EJS, styled with a dark theme.

Features

• Profile header with monogram, subtitle, and bio
• List of social/contact links (Website, Discord, GitHub, Email and Current project)
• Project cards with thumbnail, title, description, and a link button
• Fallback placeholder shown automatically if a project image fails to load

Set up your environment variables

Copy the example env file to create your own local .env: (alternatively, create a new .env file)

cp example.env .env

Then open .env and set your port:

PORT=3000

Change 3000 to whatever port you'd like the server to run on.

Project Structure

.
├── index.js              # Express server entry point
├── example.env           # Change this to `.env` in production
├── package.json
├── views/
│   └── index.ejs         # Main page template
└── public/
    ├── css/
    │   └── styles.css    # Page styling
    └── favicon.ico        # (add your own)

Customizing Your Page

Open views/index.ejs and fill in the marked sections:

• <title> — set your page title
• Meta tags (og:title, og:description, og:image, og:url, og:site_name) — used for link previews when your page is shared
• .monogram — your initials or short name
• .subtitle — a short tagline
• .bio — a paragraph about yourself
• Links section — each link is an <a class="link"> block. Update the href, icon (optional), label, and detail text. Add or remove blocks as needed; keep one link primary for your main/featured link.
• Projects section — each project is a .project-card block. Update the thumbnail image, title, description, and button link. Copy the whole block to add more projects.
• Footer — add any closing text or credit link at the bottom.

Favicon

Drop a favicon.ico file into the public/ folder to replace the default browser icon.

Styling

All visual styling lives in public/css/styles.css. Colors, spacing, and fonts are defined near the top of relevant sections (e.g. .monogram, .link, .project-card) if you want to tweak the look.

Notes

• Broken project thumbnail images automatically fall back to a styled placeholder block, so missing images won't break the layout.
• The page is fully responsive down to small mobile widths.