Lorenze Jay
Building a LinkTree on your personal website
August 3, 2022

It is likely that we have multiple links that point to our socials, previous work and other networking channels. There are tools like https://linktr.ee/ that let you list out all your social links. While this tool is great, it is still third party service that watermarks your link page unless you drop some cash on another subscription model. So how about we save some money and leverage our website and some of the coding skills we know to add this feature to our own website.

This guide will be a simple guide to getting a simple LinkTree like view from your own website. My personal site is built with Next.js and TailwindCss so this mini tutorial will cover that.

This is what we will make

Screen Shot 2022-08-01 at 4.45.18 PM.png

Ok lets start

Create a new page

Step 1 -

Create a new page, you can call it whatever you want. I called it links. So I assume you know how to do that so I won't go over that.

Step 2 - Setup your page

So with this we setup the page called links which is www.yoururl.com/links. This first portion will create our profile picture and a caption text underneath. Just change your Image src reference to your picture.

code -

import React from "react";
import Image from "next/image";

import Layout from "../components/layout";


const Links = () => {
  return (
    <Layout>
      <div className="flex flex-col items-center justify-center py-12">
        <div className="max-w-xs">
          <Image
            src={"/ljaph-5.jpg"}
            alt={"Portrait of Lorenze"}
            width={100}
            height={100}
            className="rounded-full object-cover"
          />
        </div>
        <p className="font-medium text-lg tracking-[0.03em] text-gray-600 my-6 w-3/4 text-center">
          Check out some of my work and personal projects.
        </p>
      </div>
    </Layout>
  );
};

export default Links;

This is what you should have:

Screen Shot 2022-08-01 at 5.06.02 PM.png

Step 3 - Create our array of links

Let's apply some of the JavaScript skills we have. We don't want to repeat ourselves / manually write every instance of a link so let's create an array that contains our links. Here is how I did it. I created an array called socialLinks and created objects inside it with keys of name and href that will be used once we iterate through this array of links.

const socialLinks = [
  {
    name: "personal website",
    href: "lorenzejay.dev",
  },
  {
    name: "github",
    href: "https://github.com/lorenzejay",
  },
  {
    name: "twitter",
    href: "https://twitter.com/lorenzejayTech",
  },
  {
    name: "youtube",
    href: "https://www.youtube.com/channel/UCJYobKvhV4dmnUeWgHcmf7w",
  },
  {
    name: "linkedin",
    href: "https://www.linkedin.com/in/lorenzehernandez/",
  },
  {
    name: "kallo - kanban board app",
    href: "https://github.com/lorenzejay/kallo",
  },
];

Step 4 - Loop through the array and render out all our links.

As for placement, we will render our socialLinks under our image caption / subheader. Use the array method .map to iterate through our array and return it back to us (in case alterations needed to be made with the array we used)/ though a .forEach would work too.

{socialLinks.map((links, i) => (
            <Link href={links.href} rel="noreferrer" key={i}>
              <a className="uppercase font-medium py-4 rounded-md shadow-xl w-full sm:w-3/4 max-w-2xl 3xl:max-w-3xl text-center bg-white border hover:scale-105 transition-transform ease-in-out duration-300 tracking-[0.03em]">
                {links.name}
              </a>
            </Link>
          ))}

We pretty much make the link item component once and use our array method to loop through all our links and render it out with the same component. This follows the programming concept of keeping things DRY(Don't Repeat Yourself).

And that's a wrap! Now you can go ahead and customize your link page to however you want. Add some cool background images and or gradients. Good luck and I hope this mini tutorial helped you.

Final Code

import React from "react";
import Image from "next/image";

import Layout from "../components/layout";
import Link from "next/link";

const socialLinks = [
  {
    name: "personal website",
    href: "lorenzejay.dev",
  },
  {
    name: "github",
    href: "https://github.com/lorenzejay",
  },
  {
    name: "twitter",
    href: "https://twitter.com/lorenzejayTech",
  },
  {
    name: "youtube",
    href: "https://www.youtube.com/channel/UCJYobKvhV4dmnUeWgHcmf7w",
  },
  {
    name: "linkedin",
    href: "https://www.linkedin.com/in/lorenzehernandez/",
  },
  {
    name: "kallo - kanban board app",
    href: "https://github.com/lorenzejay/kallo",
  },
];

const Links = () => {
  return (
    <Layout>
      <div className="flex flex-col items-center justify-center py-12">
        <div className="max-w-xs">
          <Image
            src={"/ljaph-5.jpg"}
            alt={"Portrait of Lorenze"}
            width={100}
            height={100}
            className="rounded-full object-cover"
          />
        </div>
        <p className="font-medium text-lg tracking-[0.03em] text-gray-600 my-6 w-3/4 text-center">
          Check out some of my work and personal projects.
        </p>
        <div className="flex flex-col space-y-6 w-full justify-center items-center">
          {socialLinks.map((links, i) => (
            <Link href={links.href} rel="noreferrer" key={i}>
              <a className="uppercase font-medium py-4 rounded-md shadow-xl w-full sm:w-3/4 max-w-2xl 3xl:max-w-3xl text-center bg-white border hover:scale-105 transition-transform ease-in-out duration-300 tracking-[0.03em]">
                {links.name}
              </a>
            </Link>
          ))}
        </div>
      </div>
    </Layout>
  );
};
export default Links;