contribution cards

Tarjetas de contribución

Las tarjetas de contribución son un proyecto divertido e interactivo en el que puedes diseñar y personalizar tarjetas HTML. Este proyecto es una forma fantástica de aprender sobre contribuciones de código abierto, mejorar su HTML, CSS, JS, habilidades GIT y mostrar su creatividad. Ya sea que sea un desarrollador o un desarrollador experimentado, ¡hay algo para usted aquí! ?

Tabla de contenido

• Empezando
• Cómo contribuir
  • Bifurca el repositorio
  • Clonar el repositorio
  • Crear una rama
  • Haz tus cambios
  • Comprende tus cambios
  • Empujar a Github
  • Crear una solicitud de extracción
• Estructura de proyectos
• Colaboradores
• Licencia

Empezando

Para comenzar con las tarjetas de contribución, siga estos pasos:

1. Bifurca este repositorio : haga clic en el botón 'Bifurque' en la parte superior derecha de esta página.

2. Clone su repositorio bifurcado :

   git clone https://github.com/your-username/contribution-cards.git

3. Navegue al directorio del proyecto :

    cd contribution-cards

4. Abra index.html en su navegador para ver el proyecto en acción y agregue los datos al final del index.html en el directorio raíz (cambie el código al final de cada tarjeta para una mejor comprensión de la estructura de la base de código)
   Aquí hay un ejemplo (editar con sus datos)

    <!--John Doe's Card Start-->
     < div class =" cards john-doe " >
         < div class =" card-head " >
             < h5 class =" card-title " > John Doe </ h5 >
             < ul class =" card-social-links " >
                 < li > < a href =" https://www.linkedin.com/in/johndoe " class =" card-link " data-toggle =" tooltip " title =" LinkedIn " > < i class =" bi bi-linkedin " > </ i > </ a > </ li >
                 < li > < a href =" https://github.com/johndoe " class =" card-link " data-toggle =" tooltip " title =" GitHub " > < i class =" bi bi-github " > </ i > </ a > </ li >
                 < li > < a href =" https://johndoe.com " class =" card-link " data-toggle =" tooltip " title =" Portfolio " > < i class =" bi bi-globe " > </ i > </ a > </ li >
             </ ul >
         </ div >
         < p class =" card-text " > John is a software developer with a passion for open-source projects and community engagement. </ p >
         < ul class =" card-study-links " >
             < li > < a href =" https://www.freecodecamp.org " target =" _blank " class =" study-link " data-toggle =" tooltip " title =" FreeCodeCamp " > < i class =" bi bi-book " > </ i > </ a > </ li >
             < li > < a href =" https://www.w3schools.com " target =" _blank " class =" study-link " data-toggle =" tooltip " title =" W3Schools " > < i class =" bi bi-mortarboard " > </ i > </ a > </ li >
             < li > < a href =" https://docs.github.com " target =" _blank " class =" study-link " data-toggle =" tooltip " title =" GitHub Docs " > < i class =" bi bi-file-code " > </ i > </ a > </ li >
         </ ul >
         < h6 class =" card-subtitle mb-2 text-muted card-date " > Updated on: July 22, 2024 </ h6 >
     </ div >
   <!--John Doe's Card End-->

5. Abra users.css en el directorio css para actualizar el color y el color de fondo de su tarjeta (agregue al final para una mejor estructura de codificación)
   

. john-doe {
  background-color : # ff6b6b ;
  color : white;
}

6. Abra users.json en el directorio data para actualizar los detalles de su tarjeta para auto-merge.yml Actualation (agregue al final para una mejor estructura de codificación)

  {
    "name" : " John Doe " ,
    "title" : " Software Developer " ,
    "socialLinks" : {
      "linkedin" : " https://www.linkedin.com/in/johndoe " ,
      "github" : " https://github.com/johndoe " ,
      "portfolio" : " https://johndoe.com "
    },
    "description" : " John is a software developer with a passion for open-source projects and community engagement. " ,
    "studyLinks" : {
      "freeCodeCamp" : " https://www.freecodecamp.org " ,
      "w3Schools" : " https://www.w3schools.com " ,
      "githubDocs" : " https://docs.github.com "
    },
    "updatedOn" : " July 22, 2024 "
  },

Cómo contribuir

Agradecemos las contribuciones de todos. Estos son los pasos para contribuir:

Bifurca el repositorio

1. Haga clic en el botón 'Bifurque' en la esquina superior derecha de la página del repositorio.

Clonar el repositorio

2. Clone su repositorio bifurcado a su máquina local:

   git clone https://github.com/your-username/contribution-cards.git

Crear una rama

3. Cree una nueva rama para sus cambios:

   git switch -c " your-branch-name "

Haz tus cambios

4. Haga sus cambios en el proyecto. Esto puede incluir editar archivos HTML, CSS o JavaScript.

Comprende tus cambios

5. Agregue y confirme sus cambios con un mensaje de confirmación significativo:

   git add .
   git commit -m " Add a meaningful commit message "

Empujar a Github

6. Empuje sus cambios a su repositorio bifurcado:

   git push origin your-branch-name

Crear una solicitud de extracción

7. Cree una solicitud de extracción de su repositorio bifurcado al repositorio original. Haga clic en el botón 'nueva solicitud de extracción' en la página del repositorio original y siga las instrucciones.

Estructura de proyectos

Aquí hay una breve descripción de la estructura del proyecto:

 ├── assets
├── CODE_OF_CONDUCT.md
├── Contributors.md
├── css
│   ├── styles.css
│   └── users.css
├── data
│   └── users.json
├── index.html
├── js
│   └── main.js
├── MIT-LICENSE.txt
└── README.md

Colaboradores

Apreciamos las contribuciones de las siguientes personas: contribuyentes

¡Este es solo el comienzo! Espero hacer contribuciones más significativas y colaborar con esta increíble comunidad. ¡Construyamos algo grandioso y hagamos que Sticky-Memo sea lo mejor que pueda ser! ❤️?

Licencia

Este proyecto tiene licencia bajo la licencia MIT. Consulte el archivo de licencia para obtener más detalles.