Back to themes

ShareYourLinks

Welcome to Share Your Links! This project is powered by Astro and CSS magic. If you're looking to create a sleek and customizable page to showcase all your important links, you're in the right place!


Cost

Free


Created by
SofiDev

Vercel logo Deploy to Vercel

Installation

  1. Clone this repository.
  2. Navigate to the project directory.
  3. Install dependencies using  `npm install`.


Usage

Get started in no time:

  • Development: Run  npm run dev or npm start to start the development server.
  • npm run build to generate a production build.
  • Preview: Run  npm run preview to preview the production build.
  • Astro CLI: Explore additional Astro CLI commands using  npm run astro


Updating User Links

To customize the links displayed in your application, follow these steps:

  1. Open the src/data.js file in your project.
  2. Locate the section containing the information of the user links userLinks.
  3. Modify each object within the  userLinks array with the information you want to display. You can change the link title, the link itself, and the associated icon.
  4. Save the changes in the  data.js file.
  5. Once you have updated the information of the links in the  userData.js file, the changes will be automatically reflected in your application when you rebuild or run it.

Including Icons


To import icons into your project, we use the Iconify CDN and utilize the  icon attribute of each Iconify icon in the  userLinks. For example, to use an icon of React:

<iconify-icon icon="logos:react" width="27" height="27"></iconify-icon>


In our  data.js, we only need to specify the icon identifier, like this:

{
    title: "React",
    link: "https://reactjs.org/",
    icon: "logos:react"
}


Here's how you can add the Iconify script to the <head> section of your project:

<head>
    <script src="https://code.iconify.design/iconify-icon/2.1.0/iconify-icon.min.js"></script>
</head>


Once you include this script, you can use any Iconify icon by specifying its identifier in the  icon attribute. Make sure to replace  " "logos:react" with the appropriate icon identifier for the icons you want to use. You can find a variety of icons available on the Iconify logos page.


Customization

Feel free to modify this project to suit your needs! Whether it's changing the layout, adding new features, or tweaking the styles, let your creativity flow.



Author


  • SofiDev


License


This project is licensed under the MIT License - see the LICENSE file for details. Feel free to explore, modify, and make it your own!


SUPPORT ME on ko-fi πŸ’œ

If this theme was useful for you, you can support my work by buying me a coffe πŸ’œ

https://ko-fi.com/sofidev