🔗 LinkBio - Modern Links in Bio

A beautiful, modern alternative to Linktree with glassmorphism design, smooth animations, mobile-first approach, multilingual support, and dynamic theming.

LinkBio Preview

✨ Features

🎨 Modern Design: Glassmorphism UI with vibrant gradients and a Bento grid layout.
📱 Mobile First: Responsive design with breakpoints at 768px (tablet) and 1024px (desktop).
⚡ Fast Loading: Optimized for Core Web Vitals with minimal CSS/JS and image compression.
🔄 Smooth Animations: Subtle parallax, ripple, fade-in, and pulse effects with prefers-reduced-motion fallback.
🌍 Multilingual Support: 26 languages with dynamic updates for links, bio, and socials.
🎨 Dynamic Theming: 27 customizable themes (e.g., aurora, dark, solarized) with localStorage persistence.
♿ Accessibility: Semantic HTML5, ARIA labels, keyboard navigation, and RTL support.
🎯 Easy Setup: Deploy in 5 minutes using GitHub Pages.
🆓 Completely Free: No monthly fees, hosted on GitHub Pages.
🔧 Fully Customizable: Modular CSS (BEM), centralized configuration, and reusable JavaScript components.

🆙 Upgrades

LinkBio has evolved significantly with the following enhancements:

Multilingual Support: Added support for 26 languages with dynamic updates for links, social media, and bio.
Dynamic Theming: Expanded to 27 themes with smooth transitions and localStorage persistence.
Bento Grid Layout: Implemented for tablet/desktop, enhancing visual organization of links.
Accessibility Improvements: Added ARIA labels, keyboard navigation, and RTL support for languages like Arabic and Persian.
Performance Optimization: Improved Core Web Vitals with WebP images, GPU-accelerated animations, and minified CSS/JS.

LinkBio Upgrades

🚀 Quick Start (5 Minutes Setup)

Method 1: Use GitHub Template (Easiest)

Click "Use this template" at the top of the repository.
Name your repository (e.g., my-linkbio).
Make it public (required for free GitHub Pages).
Go to Settings → Pages → Select GitHub Actions → Define GitHub Pages Jekyll → Press Configure.
Your site is live at https://yourusername.github.io/repository-name.

Method 2: Fork and Customize

Fork the repository.

Clone to your computer:

git clone https://github.com/yourusername/linkbio.git
cd linkbio

Edit index.html, js/data.js, js/links.js, and js/languages.js with your details.

Push changes:

git add .
git commit -m "Customize my LinkBio"
git push

📝 Customization Guide

Step 1: Update Your Profile

Edit js/data.js:

export const data = {
  name: "Your Name Here",
  image: "your-image-url",
  bio: { en: "Your tagline or bio", fr: "Votre slogan ou bio" }
};

Update profile image in assets/images/ or use a CDN URL (e.g., GitHub avatar).

Step 2: Add Social Media Links

Edit js/links.js and js/languages.js:

// js/links.js
export const socials = [
  { name: "twitter", icon: "<svg>...</svg>" },
  { name: "instagram", icon: "<svg>...</svg>" }
];

// js/languages.js
export const languageLinks = {
  twitter: {
    url: { en: "https://twitter.com/yourusername", fr: "https://twitter.com/yourusername_fr" },
    label: { en: "Follow me on Twitter", fr: "Suivez-moi sur Twitter" }
  }
};

Step 3: Customize Main Links

Edit js/links.js:

export const links = [
  {
    url: { en: "https://your-website.com", fr: "https://your-website.fr" },
    title: { en: "My Website", fr: "Mon Site" },
    subtitle: { en: "Visit my site", fr: "Visitez mon site" },
    icon: "🌐",
    size: "medium",
    type: "external"
  }
];

Step 4: Customize Themes

Edit css/themes.css and js/themes.js:

.theme--aurora {
  --primary-gradient: linear-gradient(135deg, #00ff87 0%, #60efff 50%, #b967db 100%);
}

export const themes = [
  { id: "aurora", label: "Aurora Borealis" },
  { id: "dark", label: "Dark" }
];

Popular themes:

Purple: linear-gradient(135deg, #667eea 0%, #764ba2 100%)
Sunset: linear-gradient(135deg, #f093fb 0%, #f5576c 100%)
Ocean: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%)

📱 Testing Your Site

Local Testing

Install Live Server extension in VS Code.
Open index.html and select Open with Live Server.
Test with live reload in your browser.

Mobile Testing

Use Chrome DevTools (F12 → mobile icon) to simulate devices.
Visit the live URL on a real mobile device.
Test responsiveness across screen sizes.

🌐 Going Live

GitHub Pages Setup

Go to your repository’s Settings → Pages.
Set Source to Deploy from a branch.
Select main or gh-pages branch and / (root) folder.
Save and wait 2-3 minutes.
Your site is live at https://yourusername.github.io/repository-name.

Custom Domain (Optional)

Purchase a domain (e.g., Namecheap, GoDaddy).
Add a CNAME file to your repository with your domain.
Update DNS settings to point to GitHub Pages.
Enable HTTPS in GitHub Pages settings.

🔧 Advanced Tips

Analytics

Add Google Analytics in index.html:

<script async src="https://www.googletagmanager.com/gtag/js?id=GA_TRACKING_ID"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'GA_TRACKING_ID');
</script>

Extend js/utils.js for click tracking:

export function trackClick(type, title) {
  gtag('event', 'click', { 'event_category': type, 'event_label': title });
}

SEO Optimization

Update meta tags in index.html:

<meta name="description" content="Your bio and what you do">
<meta name="keywords" content="your, keywords, here">
<meta property="og:title" content="Your Name - Links">
<meta property="og:description" content="Your bio">
<meta property="og:image" content="your-image-url">

Performance Tips

Images: Use WebP format, compress to <100KB, add loading="lazy".
CSS/JS: Minify files, debounce event listeners in js/main.js.
CDN: Host images on Imgur or similar for faster loading.
Testing: Use Google PageSpeed Insights for performance checks.

🆕 Adding New Languages

Edit js/languages.js to add a new language:

languages.push({ code: "es", label: "Español", icon: "🇪🇸", dir: "ltr" });
translations.bio.es = "Tu biografía aquí";
translations.languageLabel.es = "Seleccionar idioma";
languageLinks.twitter.url.es = "https://twitter.com/yourusername_es";
languageLinks.twitter.label.es = "Sígueme en Twitter";

Update js/links.js for main links and footer:

links[0].title.es = "Mi Sitio";
links[0].subtitle.es = "Visita mi sitio";
footer.github.label.es = "Perfil de GitHub";

Test locally, ensuring bio, links, and socials update correctly.

🆕 Adding New Links

Add to js/links.js:

links.push({
  url: { en: "https://newlink.com", fr: "https://newlink.fr" },
  title: { en: "New Link", fr: "Nouveau Lien" },
  subtitle: { en: "Description", fr: "Description" },
  icon: "🔗",
  size: "medium",
  type: "external"
});

For social links, update socials in js/links.js and languageLinks in js/languages.js.
Test across languages and devices.

📂 File Structure

project-root/
├── index.html            # Main HTML file
├── css/
│   ├── buttons.css       # Button and switcher styles
│   ├── components.css    # Profile, footer, and link grid styles
│   ├── main.css          # Global styles, resets, animations
│   ├── responsive.css    # Media queries for tablet/desktop
│   └── themes.css        # Theme-specific styles
├── js/
│   ├── components.js     # UI components (LinkButton, SocialFooter, etc.)
│   ├── data.js           # Profile configuration
│   ├── languages.js      # Language settings and translations
│   ├── links.js          # Links and social media configurations
│   ├── main.js           # App initialization
│   ├── themes.js         # Theme configurations
│   └── utils.js          # Helper functions
├── assets/
│   └── images/           # Profile and background images
└── README.md             # Project documentation

❓ FAQ

Q: Is this really free?
A: Yes! GitHub Pages is free for public repositories.

Q: Can I use a custom domain?
A: Yes, configure in GitHub Pages settings with a CNAME file.

Q: How do I update links?
A: Edit js/links.js, commit, and push. Changes reflect in 1-2 minutes.

Q: Can I add more languages?
A: Yes, update js/languages.js and js/links.js for translations.

Q: Does it work on mobile?
A: Yes, designed mobile-first with responsive breakpoints.

Q: Can I remove the footer?
A: Yes, delete the footer section in index.html or js/components.js.

🆘 Need Help?

Check /docs folder or examples in the repository.
Watch the video tutorial (linked in repository).
Open an issue on GitHub for support.

🎯 Examples & Inspiration

📄 License

MIT License - Free for personal or commercial use.

📜 Changelog

v3.0.0 (June 6, 2025): Added 26-language support, Bento grid, 27 themes, enhanced accessibility, and performance optimizations.
v2.0.0: Introduced multiple themes and internationalization foundation.
**v1.0.0

Linkbio.github.io

Install / Use

README