How I Created a Minimal Linktree Page in Just 2 Hours

How I Created a Minimal Linktree Page in Just 2 Hours

dev.to dev.to3 months ago in #Dev Love23

The Plan I have observed a lot of folks the use of linktree and equivalent websites the place you’ll create your social hyperlinks web page, however I wanted one thing very minimum and blank, and thus I made up our minds to make my very own social hyperlinks web page! NOTE: I attempted to provide an explanation for the method as perfect as I can however I’m nonetheless a amateur to running a blog, so please don’t thoughts if it kind of feels bizarre at some puts and let me know the place I can toughen, I’d love to listen to from you. Design The design was once beautiful transparent to me, a small avatar, identify, bio and the entire social hyperlinks as icons with a cool hover impact. I sought after to make it simply customizable if I had to so I knew I needed to put into effect a config document with the entire colours, icon listing, identify, bio and avatar hyperlink. It seems like this: // config.js export const config = { avatar: ‘https://avatars.githubusercontent.com/u/68690233’, bgColor: ‘#18181b’, textColor: ‘#d4d4d8’, iconColor: ‘#d4d4d8’, identify: ‘ashish’, description: ‘solo developer by means of day, overthinker by means of evening.’, hyperlinks: [ { slug: ‘github’, type: ‘url’, link: ‘https://github.com/asheeeshh/’ }, { slug: ‘discord’, type: ‘hover’, text: ‘asheeshh#7727’ }, … ] } Enter fullscreen mode Exit fullscreen mode Note how I’m the use of kind: ‘hover’ for discord to differentiate it from different icons, stay studying to grasp the rationale. Tech Stack As it was once simply a unmarried web page app I made up our minds to make use of NextJS as I’m very pleased with it this present day. Here are the entire frameworks and libraries I used: NextJS Tailwind React-Tooltip React-Hot-Toast Simple-Icons Creating the App First, I briefly began a subsequent undertaking the use of the loved command create-next-app, initialized tailwind CSS in the undertaking and put in the entire different libraries I wanted. The subsequent step was once to create the entire elements I wanted, which might be Avatar.jsx, Icon.jsx and IconBar.jsx. Components Avatar.jsx – the avatar part in the app. Icon.jsx – person icon part. IconBar.jsx – the horizontal icon bar part in the app. Now, let’s talk about concerning the content material of those information. Here is the code for my Avatar.jsx document. It’s a Next Image Component with tailwind magnificence. // Avatar.jsx import Image from ‘subsequent/symbol’ export default serve as Avatar() { go back ( ) } Enter fullscreen mode Exit fullscreen mode For the Icons, I’m the use of Simple-Icons, as they have got a lot of brand name icons which was once precisely what I wanted. First, I created a document GetIcon.js to get the SVG Icon the use of the slug. It appears one thing like this. // GetIcon.js import SimpleIcons from ‘simple-icons’; export default serve as GetIcon(slug) { const icon = SimpleIcons.Get(slug).svg go back icon; } Enter fullscreen mode Exit fullscreen mode As you’ll see, it returns the tag of the icon as a string. The subsequent step was once changing the string to a jsx part which is what my Icon.jsx part does. // Icon.jsx import GetIcon from “../libs/GetIcon”; import { config } from “../config”; export default serve as Icon(props) { go back ( ) } Enter fullscreen mode Exit fullscreen mode You can see that I’m the use of config to set the icon colour.  » Read More

Like to keep reading?

This article first appeared on dev.to. If you'd like to keep reading, follow the white rabbit.

View Full Article

Leave a Reply