My Link Page

Categories: blog
Tags: projects personal front-end

Everyone seems to have a Linktree…I want one…but I wanna make it; so, I did and here it is!

The Setup

I’ve been wanting to get better at front-end development and, therefore, paid for a subscription to CodePen.io. The thought process being that this act would spur me into doing more front-end tinkering and learning. Now that we’re into the second subscription year, I figured it’s time we put it to use. I’ve noticed that most music artists I follow have Linktrees and thought I’d give that a go as it is: small, achievable, and useful.

The Confrontation

There is no real structure for this but there is precedence. However, I didn’t simply want to “rip-off” Linktree. So, I figured I’d “free-hand” this with some specific objectives/parameters in mind:

  • Create an organized page for all my media outlets
  • Accommodate desktop and mobile browsers
  • Incorporate icons
  • No frameworks - only “vanilla” HTML, CSS, and JavaScript

The resolution

TLDR, The current page may be viewed on CodePen.io and also at JustKyles.World with code also on GitHub.

Prototyping with CodePen.io

Not having an idea of how I was actually going to lay out the page, I was grateful to have to have the flexibility of CodePen to start with. Not that writing a “vanilla” web page in any other IDE or text editor would be more or less complicated/better - it was simply nice to have the layout and tools provided by CodePen. The page itself is laid out with a grid display; I’ve decided to use grid instead of flexbox because it makes more sense to me. The link list itself was first an unordered list, then two unordered lists in parallel containers, and (finally) a table. The table allowed for easier alignment, placement, and organization.

Once I had established how I was going to organize, I needed to find some symbols to put into the page. I didn’t want to use Font Awesome because…I didn’t, I mean, everyone is using it, so I don’t wanna. So, I went looking for “open source icon packs” and came across css.gg which I have found to be a very interesting and useful project. Lastly, I revisited a previous tutorial (https://youtu.be/biOMz4puGt8) for some inspiration regarding making my site mobile friendly - used some css to detect screen size and hide a column of the table - nothing too fancy.

Launching the Site

CodePen is cool but I want to serve the site; GitHub allows me (as a Pro subscriber) to have my project served by Pages (you get one site for free, JFYI). I created a new directory in GitHub, uploaded my site code, and configured the Pages section of the project to use the custom domain. Using the DNS configuration features provided by my domain name provider (NameCheap) I was able to complete the configuration and make JustKyles.World live!

Credits and resources

Special thanks to all the entities listed below as they’ve, in some way, contributed to or inspired this work. Thanks to everyone that has read these words - please, be kind and visit the links below to positively patronize those that help make the internet a little bit better!

Written on June 27, 2022