/linktree-templates

Templates for basic Linktree pages that can be published on the permaweb.

Primary LanguageCSSMIT LicenseMIT

Linktree Template Repository

Welcome to the Linktree Template Repository! This project contains a collection of customizable templates for building a modern, stylish linktree page on the Permaweb. Each template comes with distinct design themes (such as minimalist, retro, and monochromatic) and is fully responsive, mobile-friendly, and easily customizable.

Features

  • Multiple Themes: Choose from a variety of beautifully designed templates that suit your personal style.
  • Light and Dark Modes: Many templates come with light and dark mode toggles for user convenience.
  • Fully Responsive: All templates are mobile-friendly and adapt to different screen sizes.
  • Twinkling Backgrounds: Some templates feature dynamic backgrounds like twinkling stars or retro themes.
  • Customizable Scrollbars: Templates include custom scrollbars to enhance the aesthetic.

Quick Start

1. Clone or Download the Repository

To get started, clone or download this repository:

git clone https://github.com/yourusername/linktree-templates.git

Alternatively, you can download a ZIP file of your favorite template directly from the repository.

2. Choose and Customize a Template

Navigate to the folder of the template you want to use. Each template comes with HTML, CSS, and JavaScript files that are easy to modify.

  • HTML: Edit the index.html file to change your username, profile image, description, and links.
  • CSS: Modify the styles.css file to customize the colors, fonts, and overall appearance.
  • JavaScript: Customize the script.js file if you want to adjust animations or dynamic elements like background stars or interactive buttons.

3. Customizing the Links

Each template comes with a section to add your own links. Update the links to point to your personal pages, social media, or any other content you want to share:

<div class="links">
  <a href="https://twitter.com/yourprofile" class="button">Twitter</a>
  <a href="https://github.com/yourprofile" class="button">GitHub</a>
  <a href="https://portfolio.yourwebsite.com" class="button">Portfolio</a>
</div>

4. Upload Your Template to the Permaweb Using ArDrive

Once you have customized your template, you can upload it to the Permaweb for permanent hosting using ArDrive.

Here’s how:

  1. Sign up for ArDrive: If you don’t already have an Arweave wallet, you can create one via ArDrive.
  2. Upload Your Files: Use the ArDrive app to upload your template’s files, including the index.html, styles.css, script.js, and any images (like your profile picture or favicon).
  3. Publish: Once your files are uploaded, you will receive a URL pointing to your linktree page hosted on the Permaweb.

5. Get an ArNS Name for Your Linktree Page

To make your linktree easier to share, you can register an Arweave Name System (ArNS) name.

  1. Visit ArNS: Head to ArNS and register a name of your choice (e.g., yourname.ar).
  2. Point to Your Linktree Page: Once registered, you can point your ArNS name to the Arweave transaction ID of your linktree page. This will make your page accessible via https://yourname.ar.

6. Share Your Linktree Page

After registering your ArNS name and publishing your page, you can start sharing your personalized linktree page with the world! Whether it's for your social media, portfolio, or business, your page will live forever on the Permaweb.

Example Workflow

Here’s a simple example of how you might use this repository to create and publish your own linktree page:

  1. Clone the Repository: 
    git clone https://github.com/yourusername/linktree-templates.git
  2. Choose a Template: Navigate to the desired template folder. 
    cd linktree-templates/monochromatic-permahills
  3. Edit Your Info: Update the index.html file with your name, description, and social links.
  4. Customize Styling: Tweak the styles.css file to match your aesthetic preferences.
  5. Upload to ArDrive: Use ArDrive to upload the files.
  6. Register an ArNS Name: Get a custom ArNS name and point it to your Arweave transaction ID.
  7. Share: Your personalized linktree page is now live at yourname.ar.io.

Don't want to clone?

All files are permanently hosted via ArDrive. View, download or pin them from the Linktree Templates drive.

Contributing

Feel free to contribute to this repository by submitting a pull request! Whether it's a new template, a bug fix, or an enhancement, all contributions are welcome.

License

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

Additional Resources

Happy customizing and sharing! 🌐