DEV Community ๐Ÿ‘ฉโ€๐Ÿ’ป๐Ÿ‘จโ€๐Ÿ’ป

Cover image for I Made a Web App to Showcase all your Profiles ๐Ÿ”ฎโœจ
Abhishek Keshri
Abhishek Keshri

Posted on

I Made a Web App to Showcase all your Profiles ๐Ÿ”ฎโœจ

Have you ever wanted a place that can make all your profiles and links nicely organized, easily searchable and with super customizability?

Well, now you can!

Introducing links

Present all your links in style with an easily accessible and highly customizable web app! โœจ

Inspiration

Needed a place to display all my profiles, used my project's repo as inspiration.

Getting links

To get links, follow these steps:

git clone https://github.com/2kabhishek/links
cd links
Enter fullscreen mode Exit fullscreen mode

Setup Your Own links

You can easily set up links to show your own profiles.

  • Fork the repo
  • Clone it
  • Open up script.js and update the username variable to your internet username.
  • Edit the links JSON array in script.js, add/remove link elements as required.
  • Open up index.html and update the title tag to make it your username.
  • You may also want to update the favicon, update the link tag in index.html
  • Push your changes
  • Go to repo settings on GitHub and enable GitHub Pages.

The site should be live on https://<your-username>.github.io/links

JSON Schema

Every link has the following properties:

  • name: The name of the link
  • description: Brief description about the link
  • url: The URL to open when clicked on the link
  • icon: The icon of the link, font awesome classes in use
  • color: The color of the link icon, hex code in use

Overriding URL Logic

If your username is different across sites, or you want to add a custom URL as a link just add the entire URL in the url field.
Presence of http in the URL string will override the URL building logic and present your link as is.

Order Of Links

The order of links presented will be the same as their order in the links array in scrip.js.

Themes

Comes with a light and dark theme, changes depending upon your system settings.

Brand Icons

This project uses Font Awesome Brand for adding icons, if the icon you are looking for is not available, try using the full version of Font Awesome.

Use Cases

Although, the original purpose of links is to create a web app for your profiles, it can also be used in some other scenarios.

  • Portfolio Replacement: Adding just a little bit of information about yourself to the index.htnl can convert links to your full fledged Portfolio.
  • Link.tree Replacement: Combined with some basic tracking and metrics, links can easily be used as an alternative to link.tree.
  • Custom Home Page: You can create a custom home page with your favourite links, just add the page's complete URL to links in script.js and set your live website's link as your browser homepage.
  • Sharing Resources: Links with overridden URLs can be easily used to share resources after talks and presentations.

Viewing links

Open index.html in your favorite browser or visit 2kabhishek.github.io/links.

How it was built

links was built using HTML CSS & JavaScript.
It was built on neovim and the node live-server.
Uses font awesome for icons.

What I learned

  • Learned new use cases for JSON Arrays

What's next

You tell me!

Hit the โญ button if you found this useful.

GitHub logo 2KAbhishek / links

Present your links in style ๐Ÿ”—๐Ÿ”ฎ

links

License People Stars Forks Watches Last Updated

Present your links in style ๐Ÿ”—๐Ÿ”ฎ

links screenshot
links screenshot

Have you ever wanted a place that can make all your profiles and links nicely organized, easily searchable and with super customizability?

Well, now you can!

Introducing links

Present all your links in style with an easily accessible and highly customizable web app! โœจ

Inspiration

Needed a place to display all my profiles, used my project's repo as inspiration.

Getting links

To get links, follow these steps:

git clone https://github.com/2kabhishek/links
cd links
Enter fullscreen mode Exit fullscreen mode

Setup Your Own links

You can easily set up links to show your own profiles.

  • Fork the repo
  • Clone it
  • Open up script.js and update the username variable to your internet username.
  • Edit the links JSON array in script.js, add/remove link elements as required.
  • Open up index.html and update the title tag to make it your username.
  • You may also want to update the favicon, update theโ€ฆ

To showcase all your GitHub projects see:

Top comments (16)

Collapse
 
wjplatformer profile image
Wj

I feel one way for this project to stand out from the others is to track every single account you have based on your emails (privacy notice needed!) as there are more GUI-friendly platforms such as bio.link

Collapse
 
2kabhishek profile image
Abhishek Keshri Author

I think it's better if we allowed users to show only the links they want, and hide the ones they don't

Collapse
 
wjplatformer profile image
Wj

okay then. Maybe allow users to put in their account link and derive the logo and name of platform. Then if logo's not available, they can upload them and if platform name not known, they can type in manually too.

Thread Thread
 
2kabhishek profile image
Abhishek Keshri Author

Yup, all that is very easily doable from the scripts.js file

Thread Thread
 
wjplatformer profile image
Wj

okie dokie :)

Thread Thread
 
2kabhishek profile image
Abhishek Keshri Author

:D

Collapse
 
patilganesh1010 profile image
Ganesh Patil

Going to use this and looking forward to contribute in repo!

Collapse
 
2kabhishek profile image
Abhishek Keshri Author

Awesome!

Collapse
 
manthanbhatt profile image
Manthan Bhatt

Great work๐Ÿ‘๐Ÿฝ
I will use the same for my site๐Ÿ˜

Collapse
 
2kabhishek profile image
Abhishek Keshri Author

Thanks, glad you liked it

Collapse
 
2kabhishek profile image
Abhishek Keshri Author

Let me know if you need any help setting this up :)

Collapse
 
jonrandy profile image
Jon Randy

Would possibly be better for SEO to have a build script that would generate the HTML, instead of building it dynamically using JS in the page.

Collapse
 
2kabhishek profile image
Abhishek Keshri Author

True, I may add something later

Collapse
 
wjplatformer profile image
Wj

Very good โœ…. Haha. Time to wreck another repo with PR's.

Collapse
 
2kabhishek profile image
Abhishek Keshri Author

your prs are welcome :)

Collapse
 
wjplatformer profile image
Wj

Jk lol

Hacktoberfest is happening now!



It is a month-long celebration of open source. For a lot of devs, its their introduction to open source.


Check out the Hacktoberfest tag on DEV to keep up with the latest!