An Interest In:
Web News this Week
- March 21, 2024
- March 20, 2024
- March 19, 2024
- March 18, 2024
- March 17, 2024
- March 16, 2024
- March 15, 2024
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/linkscd links
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 theusername
variable to your internet username. - Edit the
links
JSON array inscript.js
, add/remove link elements as required. - Open up
index.html
and update thetitle
tag to make it your username. - You may also want to update the favicon, update the
link
tag inindex.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
.
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
inscript.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.
2KAbhishek / links
Present your links in style
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/linkscd links
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 theusername
variable to your internet username. - Edit the
links
JSON array inscript.js
, add/remove link elements as required. - Open up
index.html
and update thetitle
tag to make it your username. - You may also want to update the favicon, update the
To showcase all your GitHub projects see:
Original Link: https://dev.to/2kabhishek/i-made-a-web-app-to-showcase-all-your-internet-profiles-4m3e
Dev To
An online community for sharing and discovering great ideas, having debates, and making friendsMore About this Source Visit Dev To