https://github.com/devjhonluna/linkbio-neumorphic
una plantilla de un linktree para astro themes diseñada usando el estilo de neumorfismo
https://github.com/devjhonluna/linkbio-neumorphic
astrojs linktree-alternative linktree-clone linktree-custom neumorphism scss
Last synced: about 1 month ago
JSON representation
una plantilla de un linktree para astro themes diseñada usando el estilo de neumorfismo
- Host: GitHub
- URL: https://github.com/devjhonluna/linkbio-neumorphic
- Owner: devjhonluna
- Created: 2024-06-11T22:49:28.000Z (over 1 year ago)
- Default Branch: master
- Last Pushed: 2024-06-14T16:24:58.000Z (over 1 year ago)
- Last Synced: 2024-11-11T06:40:22.805Z (11 months ago)
- Topics: astrojs, linktree-alternative, linktree-clone, linktree-custom, neumorphism, scss
- Language: SCSS
- Homepage: https://linkbio-neumorfico.netlify.app/
- Size: 81.1 KB
- Stars: 2
- Watchers: 2
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Linktree Neumorfico
## Descripción
Esta es una plantilla gratuita de Linktree creada con Astro.js y SCSS. Se ha utilizado la metodología BEM para las clases y el estilo de diseño Neumorfismo. Esta plantilla es perfecta para aquellos que buscan una solución personalizable y fácil de usar para compartir múltiples enlaces a través de un solo enlace en su biografía de redes sociales.
## Características
- **Astro.js**: Esta plantilla está construida con Astro.js, un marco de trabajo moderno de front-end que te permite construir sitios web más rápidos con menos código.
- **SCSS**: Con SCSS, puedes usar características que no están disponibles en CSS, como variables, anidamiento, mixins, herencia y otros.
- **Metodología BEM**: Esta plantilla utiliza la metodología BEM para las clases, lo que hace que tu CSS sea más escalable y mantenible.
- **Diseño Neumorfismo**: El diseño Neumorfismo es un estilo de diseño moderno que combina el realismo de skeuomorfismo y la simplicidad del diseño plano. Este estilo de diseño da a tu Linktree un aspecto suave y realista.
## Beneficios
- **Personalizable**: Puedes personalizar fácilmente esta plantilla para que se ajuste a tu marca y estilo personal.
- **Fácil de usar**: Esta plantilla es fácil de usar, incluso si no tienes experiencia en codificación.
- **Gratuita**: Esta plantilla es completamente gratuita para usar.
- **Soporte para múltiples enlaces**: Al igual que Linktree, puedes compartir múltiples enlaces a través de un solo enlace en tu biografía de redes sociales.
- **Sin limitaciones**: A diferencia de la versión gratuita de Linktree, esta plantilla no tiene limitaciones. Tienes acceso a todas las características sin tener que pagar.
## Uso de la plantilla
Para usar nuestra plantilla, tienes dos opciones:
1. **Clonar el repositorio**: Si tienes instalado Git, puedes clonar el código en tu PC ejecutando el siguiente comando:
```
git clone https://github.com/johnggli/linktree.git
```
2. Descargar el ZIP: Descarga el archivo [ZIP](https://github.com/devjhonluna/linkbio-neumorphic/archive/refs/heads/master.zip) con todos los archivos.
Una vez que los archivos estén en tu máquina, abre el proyecto en Visual Studio Code.
Con los archivos abiertos en Visual Studio Code, ejecuta el siguiente comando (debes tener Node instalado para que funcione el proyecto):
```
npm run dev
```
### Personalizacion
* Cambia la foto de perfil y la descripción en el archivo ```header.astro``` que está ubicado en la carpeta de componentes y subcarpeta header.
* Cambia los colores y las sombras en el archivo ```_variables.scss```, ubicado en la carpeta de styles, dentro de la subcarpeta de linktree y la subcarpeta abstracts. PD: Es recomendable usar las herramientas online de [uicolors](https://uicolors.app/create) y [neumorphism.io](https://neumorphism.io/) o [neumorphic design](https://neumorphic.design/) para tener un mejor resultado.
* Para personalizar los enlaces de tus redes sociales, debes modificar el archivo socialmedialinks.js que se encuentra en la carpeta de utils. Dentro de este archivo, encontrarás un array llamado socialmedia.
* Puedes cambiar los enlaces existentes o agregar nuevos enlaces según tus necesidades. Cada enlace debe ser un objeto dentro del array socialmedia.
Recuerda guardar tus cambios y probar tu sitio para asegurarte de que los enlaces funcionan correctamente.
Esperamos que disfrutes usando esta plantilla y que te ayude a mejorar tu presencia en las redes sociales. Si tienes alguna pregunta o necesitas ayuda, no dudes en ponerte en contacto con nosotros. ¡Disfruta!