{"id":22323606,"url":"https://github.com/dev01d/jasn-link","last_synced_at":"2025-03-26T05:22:52.361Z","repository":{"id":37834305,"uuid":"278257282","full_name":"dev01d/jasn-link","owner":"dev01d","description":null,"archived":false,"fork":false,"pushed_at":"2024-10-30T00:28:57.000Z","size":1744,"stargazers_count":0,"open_issues_count":1,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2024-10-30T02:50:30.057Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"jasn-link-dev01d.vercel.app","language":"CSS","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/dev01d.png","metadata":{"files":{"readme":".github/readme.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2020-07-09T03:52:01.000Z","updated_at":"2024-10-30T00:29:00.000Z","dependencies_parsed_at":"2024-03-21T01:31:07.761Z","dependency_job_id":"1b9c9712-1484-4f8c-8fe0-b59b4e32f4f9","html_url":"https://github.com/dev01d/jasn-link","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dev01d%2Fjasn-link","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dev01d%2Fjasn-link/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dev01d%2Fjasn-link/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dev01d%2Fjasn-link/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/dev01d","download_url":"https://codeload.github.com/dev01d/jasn-link/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":245593080,"owners_count":20640962,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-12-04T01:11:19.466Z","updated_at":"2025-03-26T05:22:52.300Z","avatar_url":"https://github.com/dev01d.png","language":"CSS","funding_links":[],"categories":[],"sub_categories":[],"readme":"# jasn-link\n\nSource code for the blog posted [here](https://dev.to/dev01d/diy-linktr-ee-with-next-js-2fdh).\n\n\u003cdetails\u003e\n\u003csummary\u003eOriginal blog\u003c/summary\u003e\n\n\u003c!-- title: DIY linktree with Next.js\npublished: true\ndescription: How to build a linktree site with React\ntags: Reactjs, Beginner, JavaScript\ncover_image: ![](https://images.unsplash.com/photo-1536859355448-76f92ebdc33d?ixlib=rb-1.2.1\u0026ixid=eyJhcHBfaWQiOjEyMDd9\u0026auto=format\u0026fit=crop\u0026w=1950\u0026q=80) --\u003e\n\n## Introduction\n\nRecently, I've been noticing the use of link aggregation services like linktr.ee, ContactInBio, Campsite, etc. become more prevalent so I thought I'd try my hand a replicating it.\n\nFor this project, I'm going to use [Next.js](https://nextjs.org) (which is 100% overkill) because I've been looking for an excuse to check it out. This is going to be a quick and fairly dirty build, so there is tons of room for improvement.\n\n## Getting started\n\nFirst, we need to create a new project. I used yarn, but you can use NPM if you like and if you'd like to read up on Next.js check out [these docs](https://nextjs.org/docs/getting-started).\n\n```bash\nyarn create next-app\n```\n\nSelect default and name it something, then `cd` into that directory.\n\nNow we'll conjure up the dev server and the boilerplate site with this command.\n\n```bash\nyarn dev\n```\n\nOpen up `http://localhost:3000` and make sure you have something that looks like this.\n\n\u003c!-- [![welcome default page](images/welcome.png)](#) --\u003e\n\n\u003cp align=\"center\"\u003e\n  \u003cimg src=\"images/welcome.png\" width=\"480” max-width=\"90%\" alt=\"welcome default page\" /\u003e\n\u003c/p\u003e\n\n### Head section\n\nIn the `index.js` file located in the `pages` directory go ahead and change the `\u003cHead\u003e` section to whatever you want it to be. I changed it to what the pseudo username would be.\n\n```jsx\n\u003cHead\u003e\n  \u003ctitle\u003edev01d\u003c/title\u003e\n  \u003clink rel=\"icon\" href=\"favicon.ico\" /\u003e\n\u003c/Head\u003e\n```\n\n### Profile section\n\nNext, we'll clear out the `\u003cmain\u003e` section and replace it with the first element which is the profile picture and \"username\". We'll leave the default CSS alone because it has most of the stuff we need.\n\nYou should now have something like this. (CSS replaced with \"...\" so the code block is readable)\n\n```jsx\nimport Head from 'next/head'\n\nexport default function Home() {\n  return (\n    \u003cdiv className=\"container\"\u003e\n      \u003cHead\u003e\n        \u003ctitle\u003edev01d\u003c/title\u003e\n        \u003clink rel=\"icon\" href=\"favicon.ico\" /\u003e\n      \u003c/Head\u003e\n\n      \u003cmain\u003e\n        \u003cimg className=\"image\" src=\"IG profile image\" /\u003e\n        \u003ch3 className=\"description\"\u003e@dev01d\u003c/h3\u003e\n      \u003c/main\u003e\n\n      \u003cstyle jsx\u003e{`\n       ...\n     `}\u003c/style\u003e\n    \u003c/div\u003e\n  )\n}\n```\n\nFor the profile image, I just opened the browser dev tools and grabbed my Instagram profile pic URL.\n\nGreat! We now have the profile section but your image probably isn't a circle so let's add some CSS for that. Add this anywhere in the `\u003cstyle jsx\u003e` section.\n\n```css\n.image {\n  border-radius: 50%;\n}\n```\n\n### Link section\n\nOk cool, that looks nice. For the links, we're going to use a grid class and utilize the default CSS with some changes but before we get to the CSS let's get build some link elements.\n\nThey're going to be `\u003ca\u003e` tags and we're going to style them with the existing `card` class. This is the general structure I landed on.\n\n```jsx\n\u003cdiv className=\"grid\"\u003e\n  \u003ca href=\"https://fake.address\" className=\"card\"\u003e\n    \u003ch3\u003eBuy Prints\u003c/h3\u003e\n  \u003c/a\u003e\n\u003c/div\u003e\n```\n\nNow your index.js should look something like this, but with your info of course.\n\n```jsx\nimport Head from 'next/head'\n\nexport default function Home() {\n  return (\n    \u003cdiv className=\"container\"\u003e\n      \u003cHead\u003e\n        \u003ctitle\u003edev01d\u003c/title\u003e\n        \u003clink rel=\"icon\" href=\"favicon.ico\" /\u003e\n      \u003c/Head\u003e\n\n      \u003cmain\u003e\n        \u003cimg className=\"image\" src=\"URL of your IG profile image\" /\u003e\n        \u003ch3 className=\"description\"\u003e@dev01d\u003c/h3\u003e\n\n        \u003cdiv className=\"grid\"\u003e\n          \u003ca href=\"https://fakewebsite.com\" className=\"card\"\u003e\n            \u003ch3\u003eMy Website\u003c/h3\u003e\n          \u003c/a\u003e\n          \u003ca href=\"https://github.com/dev01d\" className=\"card\"\u003e\n            \u003ch3\u003eGithub\u003c/h3\u003e\n          \u003c/a\u003e\n          \u003ca href=\"https://medium.com\" className=\"card\"\u003e\n            \u003ch3\u003eMedium\u003c/h3\u003e\n          \u003c/a\u003e\n          \u003ca href=\"https://www.twitch.tv\" className=\"card\"\u003e\n            \u003ch3\u003eTwitch\u003c/h3\u003e\n          \u003c/a\u003e\n        \u003c/div\u003e\n      \u003c/main\u003e\n\n      \u003cstyle jsx\u003e{`\n       ...\n     `}\u003c/style\u003e\n    \u003c/div\u003e\n  )\n}\n```\n\n### Let's pause and talk about CSS\n\nEveryone has their own way that they like to approach CSS, and this is just the way I decided to do it. If you find a different way to accomplish this or improvements, please drop it in the comments.\n\n### Resume tutorial\n\nThe changes and additions I made to are pretty minor. Let’s start with the `.grid` class, all we need to do is reduce the `margin-top` attribute to `1rem`\n\n```css\n.grid {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  flex-wrap: wrap;\n\n  max-width: 800px;\n  margin-top: 1rem;\n}\n```\n\nnext is the `.card` we'll change `margin` to `0.5rem`, `text-align` to `center`, and background to `#fafafa` to keep it a light color\n\n```css\n.card {\n  margin: 0.5rem;\n  flex-basis: 45%;\n  padding: 1.5rem;\n  text-align: center;\n  background: #fafafa;\n\n  color: inherit;\n  text-decoration: none;\n  border: 1px solid #eaeaea;\n  border-radius: 10px;\n  transition: color 0.15s ease, border-color 0.15s ease;\n  min-width: 350px;\n}\n```\n\nThen for the link's label `h3` tag, we need to change the default margin in `.card h3` from `margin: 0 0 1rem 0;`to `margin: 0 3rem 0 3rem;`\n\nNext, for our friends using smaller screens, we want to make sure the links aren't clipping over the edge. We'll add a media query to accommodate them, which should be in the ballpark.\n\n```css\n@media (max-width: 350px) {\n  .card {\n    min-width: 275px;\n  }\n  .card h3 {\n    margin: 0 3rem 0 3rem;\n    font-size: 1.25rem;\n  }\n}\n```\n\n### Done!\n\nThere we go, we've got our own DIY link aggregator. Now all you need to do is buy a cleverly short domain name, host it somewhere like [vercel.com](https://vercel.com) for free, and throw it up on your Instagram profile.\n\n\u003c!-- [![finished screenshot](images/finished.png)](#) --\u003e\n\u003cbr\u003e\n\u003cp align=\"center\"\u003e\n  \u003cimg src=\"images/finished.png\" width=\"320” max-width=\"90%\" alt=\"finished screenshot\" /\u003e\n\u003c/p\u003e\n\n#### Ideas for further improvement\n\nThe CSS could use a bit of a tweak, a tree shake, and could probably use an a11y audit, but I'll leave that up to you since this is sort of a quick and dirty tutorial.\n\nThe code for this project can be found [here](https://github.com/dev01d/devto-link-site).\n\n\u003c/details\u003e\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdev01d%2Fjasn-link","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fdev01d%2Fjasn-link","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdev01d%2Fjasn-link/lists"}