A template for a simple portfolio website ["Custom Links"]

So, I have been working on something.

To me, having a website was always a source of anxiety because of how many options are available, but it is also the only way to “own” a little space on the internet that can be a hub for all your content.(Specially if you do more than one kind of work, like, photography and music.) That is why I do like https://linktr.ee/, whose service is nice, but also limited and paid.

If you wanted that to be your only website, for example, you could never have an “About” section, or something like that. You’d have to pay to upload pictures, and so on.

That is why I’m investing some time into a simple website template called “Custom Links” that should check all those boxes to be minimal & fast:

  • no menu or multiple pages;
  • mobile friendly
  • tweakable: easy as changing the config file;
  • open source &
  • fully commented: if you do want to mess with the code.

This is what I came up with so far:


(The gif capture just feels really slow, but right now it is running very tight.)

Since this is a small project, I cannot create a full app so that the user avoids dealing at all with html or css. But a fully commented project does make it a lot easier.

The template right now looks like this:

|     profile information     |
|   blocks of linked content  |
|             ...             |
|     social network icons    |
|    custom final block to    |
| have plaintext information, |
|    contact information &    |
|  other copy-paste friendly  |
|         information         |

Config file looks like this:

  ___  ____  ____ 
 / __)/ ___)/ ___)
( (__ \___ \\___ \

// full page color or image
$page-background: url(/img/bg/coisa.png);

// each linked content block
$content-background: whitesmoke;

// last content block
$ending-background: rgba(0, 0, 0, 0.3); // opacity is the last number

$link-height: 56px;
$max-page-width: 800px;
$general-border-radius: 8px;

$light-text: whitesmoke;
$ending-text: whitesmoke;
$profile-text: black;
$content-text: black;

//TODO: Change fonts here.

$socials-color-fill: whitesmoke;
$socials-button-size: 48px;

$blur: false;
$blur-amount: 100px;

$shadow: false;

// ... and more

Are you interested and what kind of feature and/or UI/UX decision you think can be improved? Since I code alone I’m already sorry if I cannot implement everything that is suggested! But I will be releasing soon since only minor fixings and code commenting is pending.



Wow, this is awesome! I was literally just setting up my site (currently just a directory Index of /audio) but I would love to have this as my homepage.

1 Like

“Custom Links” looks great! Will definitely be following here with interest. =D