├── .github └── FUNDING.yml ├── README.md ├── assets ├── config.js ├── css │ └── style.css ├── img │ └── boy.png └── js │ ├── components.js │ └── index.js └── index.html /.github/FUNDING.yml: -------------------------------------------------------------------------------- 1 | # These are supported funding model platforms 2 | 3 | github: # Replace with up to 4 GitHub Sponsors-enabled usernames e.g., [user1, user2] 4 | ko_fi: Harindulk 5 | 6 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | ## Custom links page - [preview](https://harindulk.github.io/custom-links-page/) 2 | 3 | Click [**Use this template**](https://github.com/Harindulk/custom-linktree-page/generate) button above for the quickest method of getting started with the [custom-links-page](https://github.com/Harindulk/custom-links-page). 4 | 5 | Contains basic configuration to get you a links page with: 6 | 7 | - Sample Links. 8 | - Sample Meta Data. 9 | - Sample Profile name. 10 | - Sample Favicons . 11 | - Sample Profile picture. 12 | - Sample Profile about. 13 | - Sample Footer Links. 14 | - Sample Fontawesome icons. 15 | 16 | Replace sample content with your own. 17 | 18 | ## Quickstart for GitHub Pages 19 | >### Introduction 20 | GitHub Pages are public webpages hosted and published through GitHub. The quickest way to get up and running is by using the Jekyll Theme Chooser to load a pre-made theme. You can then modify your GitHub Pages' content and style. 21 | 22 | This guide will lead you through creating a user site at `username.github.io.` 23 | 24 | >### Creating your website 25 | 26 | Enter `username.github.io` as the repository name. Replace username with your GitHub `username`. For example, if your username is octocat, the repository name should be `octocat.github.io` 27 | 28 | ![image](https://user-images.githubusercontent.com/61319844/140549952-f367279d-1190-4c79-8a57-27a354f403fd.png) 29 | 30 | Under your repository name, click Settings. 31 | 32 | ![image](https://user-images.githubusercontent.com/61319844/140549190-7d719365-72bb-4563-beeb-e88c51cf9973.png) 33 | 34 | In the left sidebar, click Pages. 35 | 36 | ![image](https://user-images.githubusercontent.com/61319844/140549113-07273b9a-06f2-42ad-9416-b5fd18cb4852.png) 37 | 38 | choose your branch, select root & click save 39 | 40 | ![image](https://user-images.githubusercontent.com/61319844/140548993-2e83a688-2199-4455-968c-da2a60c1f49f.png) 41 | 42 | -------------------------------------------------------------------------------- /assets/config.js: -------------------------------------------------------------------------------- 1 | let config = { 2 | "Title": "Your Name - Links", 3 | "Name": "Your Name", 4 | "Description": "Your Description", 5 | "links": [ 6 | { 7 | "Title": "Website", 8 | "URL": "http://www.harindu.dev", 9 | "icon_classes": "fas fa-link", 10 | }, 11 | { 12 | "Title": "Github", 13 | "URL": "https://github.com/harindulk", 14 | "icon_classes": "fab fa-github", 15 | }, 16 | { 17 | "Title": "Play Store", 18 | "URL": "https://play.google.com/store/apps/dev?id=6729187126243636577", 19 | "icon_classes": "fab fa-google-play" 20 | }, 21 | { 22 | "Title": "PC Games", 23 | "URL": "https://harindulk.itch.io/", 24 | "icon_classes": "fab fa-itch-io" 25 | }, 26 | { 27 | "Title": "Blog", 28 | "URL": "blog-test", 29 | "icon_classes": "fas fa-blog" 30 | }, 31 | { 32 | "Title": "Twitter", 33 | "URL": "https://twitter.com/Harindu_Fonseka", 34 | "icon_classes": "fab fa-twitter" 35 | }, 36 | { 37 | "Title": "LinkedIn", 38 | "URL": "https://www.linkedin.com/in/harindulk/", 39 | "icon_classes": "fab fa-linkedin" 40 | }, 41 | { 42 | "Title": "Youtube", 43 | "URL": "https://www.youtube.com/channel/UCRyQGxzCgFb5wmsp1XAlWpQ", 44 | "icon_classes": "fab fa-youtube" 45 | }, 46 | ] 47 | } -------------------------------------------------------------------------------- /assets/css/style.css: -------------------------------------------------------------------------------- 1 | body { 2 | background: linear-gradient(-45deg, #d35ecd, #5aad45, #23a6d5, #3a0eb3); 3 | background-size: 400% 400%; 4 | animation: gradient 15s ease infinite; 5 | } 6 | 7 | @keyframes gradient { 8 | 0% { 9 | background-position: 0% 50%; 10 | } 11 | 12 | 50% { 13 | background-position: 100% 50%; 14 | } 15 | 16 | 100% { 17 | background-position: 0% 50%; 18 | } 19 | } 20 | 21 | img { 22 | border-radius: 50%; 23 | } 24 | 25 | .profile-picture { 26 | display: block; 27 | margin-left: auto; 28 | margin-right: auto; 29 | margin-top: 5%; 30 | height: auto; 31 | max-width: 100px; 32 | } 33 | 34 | .profile-name { 35 | text-align: center; 36 | padding: 10px; 37 | font-family: "Dosis", sans-serif; 38 | color: white; 39 | font-size: 22px; 40 | letter-spacing: 2px; 41 | } 42 | 43 | .profile-about { 44 | text-align: center; 45 | padding: 2px; 46 | font-family: "Dosis", sans-serif; 47 | color: white; 48 | font-size: 15px; 49 | letter-spacing: 2px; 50 | } 51 | 52 | .links { 53 | text-align: center; 54 | margin-top: 20px; 55 | padding: 20px; 56 | border: 0.5px solid rgb(255, 255, 255); 57 | border-width: 1px; 58 | width: 490px; 59 | display: block; 60 | margin-left: auto; 61 | margin-right: auto; 62 | border-radius: 40px; 63 | font-family: "Dosis", sans-serif; 64 | position: relative; 65 | font-size: 20px; 66 | letter-spacing: 3px; 67 | } 68 | 69 | .links-in { 70 | padding: 5px; 71 | border: 0.5px solid rgba(255, 255, 255, 0); 72 | border-width: 1px; 73 | width: 30px; 74 | display: block; 75 | border-radius: 40px; 76 | left: 20px; 77 | position: absolute; 78 | font-size: 20px; 79 | } 80 | 81 | .hover { 82 | text-decoration: none; 83 | color: rgb(255, 255, 255); 84 | transition: color 1s; 85 | } 86 | 87 | .hover:hover { 88 | color: rgb(0, 0, 0); 89 | background: rgb(255, 255, 255); 90 | text-decoration: none; 91 | } 92 | 93 | .bottom-text { 94 | text-decoration: none; 95 | text-align: center; 96 | margin-top: 30px; 97 | font-size: 20px; 98 | color: rgb(255, 255, 255); 99 | font-family: "Handlee", cursive; 100 | } 101 | 102 | .link-hide { 103 | text-decoration: none; 104 | } 105 | .link-hide:hover { 106 | text-decoration: none; 107 | } 108 | 109 | @media (max-width: 548px) { 110 | .links { 111 | text-align: center; 112 | margin-top: 20px; 113 | padding: 20px; 114 | border: 0.5px solid rgb(255, 255, 255); 115 | border-width: 1px; 116 | width: 290px; 117 | display: block; 118 | margin-left: auto; 119 | margin-right: auto; 120 | border-radius: 40px; 121 | font-family: "Dosis", sans-serif; 122 | position: relative; 123 | } 124 | .profile-about { 125 | text-align: center; 126 | padding: 2px; 127 | font-family: "Dosis", sans-serif; 128 | color: white; 129 | font-size: 15px; 130 | letter-spacing: 1px; 131 | } 132 | } 133 | 134 | .links-footer { 135 | padding: 4px; 136 | border: 0.5px solid rgb(255, 255, 255); 137 | border-width: 1px; 138 | width: 40px; 139 | display: inline-block; 140 | border-radius: 30px; 141 | font-size: 20px; 142 | text-align: center; 143 | margin: 10px; 144 | margin-top: 50px; 145 | } 146 | -------------------------------------------------------------------------------- /assets/img/boy.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Harindulk/custom-links-page/040e6bc6ac4c96a547bd7290dcc7b06b1bacceeb/assets/img/boy.png -------------------------------------------------------------------------------- /assets/js/components.js: -------------------------------------------------------------------------------- 1 | const linkComponent = (title, icon_classes, url) => { 2 | return ` 3 |
4 | 5 | 6 | ${title} 7 |
8 | ` 9 | } -------------------------------------------------------------------------------- /assets/js/index.js: -------------------------------------------------------------------------------- 1 | link_container = document.getElementById("link-container") 2 | 3 | name_component = document.getElementById("name_component") 4 | description_component = document.getElementById("description_component") 5 | 6 | description_meta = document.getElementById("description-meta") 7 | title_meta = document.getElementById("title-meta") 8 | 9 | 10 | name_component.innerText = config.Name 11 | description_component.innerText = config.Description 12 | document.title = config.Title 13 | description_meta = config.Description 14 | title_meta = config.Title 15 | 16 | 17 | for (let i = 0; i < config.links.length; i++) { 18 | link_container.innerHTML += linkComponent(config.links[i].Title, config.links[i].icon_classes, config.links[i].URL) 19 | } -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 15 | 16 | 17 | 19 | 20 | 21 | 22 | 24 | 25 | 26 | 27 | 28 | 30 | 31 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | 40 | 41 | 42 | 43 | 44 | 45 | 46 | 47 | profile picture 48 | 49 | 50 |
51 | 52 | 53 |
Your Description
54 | 55 | 56 | 59 | 60 | 61 | 90 | 91 | 92 | 93 | 94 | 95 | 98 | 101 | 104 | 105 | 106 | 107 | --------------------------------------------------------------------------------