Modern Linktree Template

A lightweight, privacy-focused, and fully responsive Linktree alternative built with pure HTML, CSS, and JavaScript. Designed for developers and creators who want a fast, customizable, and open-source "link in bio" solution without the bloat of third-party platforms.

Features

This template is packed with modern features to give your link page a professional edge:

• Modern Glassmorphism UI: A sleek, frosted-glass design with smooth animations and a dynamic particle background.
• Dark/Light Mode: Fully functional theme toggler with system preference detection and local storage persistence.
• Fully Responsive: Optimized for mobile, tablet, and desktop screens using CSS Grid and Flexbox.
• Zero Dependencies: No frameworks, no build steps, and no external CSS/JS libraries. Just pure, performant code.
• Privacy First: No tracking cookies or external analytics scripts included by default.
• Share Functionality: Native Web Share API integration for mobile devices, with a clipboard fallback for desktop.
• QR Code Generator: Automatically generates a QR code for your profile URL for easy offline sharing.
• Back to Top: A convenient button to quickly navigate back to the top of the page.
• EU Compliance Ready: Includes placeholders for Impressum (Legal Notice) and Privacy Policy modals.
• Customizable: Easily edit your profile, bio, and social links via a simple JavaScript configuration object.

Getting Started

Prerequisites

• A code editor (e.g., VS Code, Sublime Text).
• A GitHub account (for hosting).
• A profile picture (recommended size: 200x200px).

1. Editing Your Profile

Open script.js in your code editor. You will see a userConfig object at the very top. This is where you customize the page.

Change Name & Bio

const userConfig = {
    name: "Your Name", // Change this
    bio: "Your Title | Your Skillset | Your Passion", // Change this
    avatar: "URL_TO_YOUR_IMAGE", // See below for avatar setup
    // ...
};

Add Your Profile Picture

You have two options for the avatar URL:

1. Direct URL: Paste a link to your image (e.g., from AWS S3, Imgur, or your own server).
2. GitHub Avatar: Use your GitHub User ID.
   • Go to your GitHub profile.
   • Look at the URL: github.com/USERNAME.
   • Your avatar URL is: https://avatars.githubusercontent.com/u/YOUR_USER_ID.

Add Your Links

The categories array contains your links. You can add as many categories and links as you want.

categories: [
    {
        title: "Professional", // Category Header
        links: [
            { 
                title: "My Portfolio", // Button Text
                url: "https://example.com", // Destination URL
                icon: "website" // Icon Key (see list below)
            },
            { 
                title: "GitHub", 
                url: "https://github.com/yourusername", 
                icon: "github" 
            }
        ]
    },
    // Add more categories here...
]

Available Icons: The template supports a wide range of icons. Use the keys below in the icon property: github, twitter, linkedin, instagram, youtube, facebook, website, email, whatsapp, telegram, discord, tiktok, snapchat, reddit, pinterest, tumblr, threads, mastodon, bluesky, twitch, quora, rumble, lemon8, kuaishou, douyin, wechat, vk, line, xiaohongshu, sharechat, huggingface, kaggle, slack.

2. Customizing Legal Pages

This template includes modals for Impressum and Privacy Policy to help with EU compliance (GDPR).

1. Open index.html.
2. Scroll down to the <!-- MODALS --> section.
3. Find the impressum-modal and privacy-modal divs.
4. Replace the placeholder text (e.g., "Max Mustermann") with your actual legal information.

3. Hosting on GitHub Pages

This template is designed to be hosted for free on GitHub Pages.

Step 1: Create a Repository

1. Log in to GitHub.
2. Click the + icon in the top-right and select New repository.
3. Name your repository (e.g., links).
4. Make sure it is set to Public.
5. Click Create repository.

Step 2: Upload Your Files

1. In your new repository, click Add file > Upload files.
2. Drag and drop your index.html, style.css, and script.js files.
3. In the "Commit changes" box, type a message like "Initial commit".
4. Click Commit changes.

Step 3: Activate GitHub Pages

1. Go to your repository Settings (top tab).
2. On the left sidebar, click Pages.
3. Under Build and deployment > Source, select Deploy from a branch.
4. Select main (or master) branch and the / (root) folder.
5. Click Save.

Step 4: View Your Site

GitHub will take a few minutes to build your site. Once ready, you will see a link at the top of the Pages settings page (e.g., https://yourusername.github.io/links/).

Customization Guide

Changing the Color Theme

Open style.css and modify the :root variables at the top.

:root {
    --accent-color: #3b82f6; /* Change this to your brand color */
    --accent-hover: #2563eb;
    /* ... */
}

Removing the Background Animation

If you prefer a static background:

1. Open index.html.
2. Delete the line: <canvas id="bg-canvas"></canvas>.
3. Open script.js.
4. Remove the call to initAnimation() inside the DOMContentLoaded event listener.

Adding a Custom Domain

If you own a domain (e.g., harisn.de), you can connect it to GitHub Pages:

1. Go to your repository Settings > Pages.
2. Under Custom domain, type your domain.
3. Update your DNS provider (Namecheap, GoDaddy, etc.) with the CNAME or A records provided by GitHub.

License

This project is open source and available under the MIT License.

Acknowledgments

• Built with semantic HTML5 & CSS3.
• Icons sourced from open-source SVG libraries.
• Inspired by the need for privacy-focused, developer-friendly link tools.

---

Note: This template was created with assistance from modern LLM (GLM-4.7) to ensure clean code and accessibility standards.