EmilioBlacksmith / bioLink

A minimalistic responsive website to showcase main social media links or project links, to share to others online. It is based in Linktree and Linkin.bio.

Personal Bio Links

A Website Project for showing all of my main social links, to share in my social media

This project is a website to showcase my main links, and to help out strangers to know my current social media and personal projects that are currently in the making. It is based in Linktree and Linkin.bio. The main features of this projects are:

• A minimalistic web design for my main social media accounts and main links.
• A dark mode toggle button, that allows the user to have a better reading experience, based on their preference.
• A responsive design that changes depending if the user is in mobile or desktop.

Preview

How to tweak this project for your own uses

This project was meant for personal use to share my main links, so I'd encourage you to clone and rename this project to use your own purposes. It's a good starter template, I would, of course, suggest you delete my profile picture to put your own. by doing:

1. Click the <> Code Green button from the top right corner

2. in the Local Section, either click the Download ZIP, or Clone it with the terminal using the next:

       git clone [e-mail]:EmilioBlacksmith/bioLink.git

3. I would suggest changing the next:

   • src/components/Links.jsx
   • src/components/Profile.jsx
   • src/icons/ -> to put all your favicon files (I used https://realfavicongenerator.net/ to generate mine)
   • src/images/ -> add your profile picture here
   • index.html -> !! only to change the header with your own name
   • src/index.css -> If you want to change the colors for background, buttons and text, change their respective --body_example inside the :root(light) and [data-theme="dark"] (dark)

4. And commit to your own github repo, but before doing the next:

   • change the [ " base: "/your-repo-name/" ] ---> inside ./vite.config.js
   • and deploying in your terminal with (required to have nodejs installed):

       npm run build

5. Done, you will have your own personal bio link to share it to the world, let me know if everything works!

Find a Bug or anything that should be improved?

If you found an issue or would like to submit an improvement to this project, please submit an issue using the issues tab above.

Like this project?

Star it or share it to anyone that would find it useful for their own purpose and project. And feel free to follow my socials if you want to support more of this.

Tech Stack behind this Project

Lighthouse Performance

[ the only issue with accessibility is due to the dark mode toggle due to it "not having a label" ]