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.
- 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.
- 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.
Para usar nuestra plantilla, tienes dos opciones:
- 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 - Descargar el ZIP: Descarga el archivo 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
-
Cambia la foto de perfil y la descripción en el archivo
header.astroque 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 y neumorphism.io o 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!