Installation
- Clone this repository.
- Navigate to the project directory.
- 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:
- Open the src/data.js file in your project.
- Locate the section containing the information of the user links userLinks.
- 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.
- Save the changes in the data.js file.
- 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 💜