Skip to content

Formation #1

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
salioudizallo wants to merge 2 commits into
base: main
Choose a base branch
from
Open

Formation #1

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
136af52
Last commit
moustaphaotf Oct 15, 2023
c3068fe
ma contribution
salioudizallo Dec 4, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
46 changes: 46 additions & 0 deletions README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,46 @@
# Découvrez l'Open Source
# C'est quoi l'Open Source
# Comment faire ?
Vous êtes intéressés ? Suivez ce guide pour faire vos premiers pas vers l'open source. Et en bonus, on construira ensemble une gallerie de tous les participants
## Installations et configuration
### Télécharger Git et installer
Le lien de téléchagement est le suivant: https://git-scm.com/downloads

L'installation de Git ressemble à l'installation de n'importe quel logiciel.
Seulement prêtez attention à ajouter Git aux variables d'environnement pour permettre de l'exécuter depuis la console de commandes.

### Télécharger un éditeur de code
Pour faire nos premiers pas dans la collaboration, nous aurons besoin d'un éditeur de texte qui va nous permettre de travailler efficacement

Téléchargez **Visual Studio Code** ici: https://code.visualstudio.com/Download

### Faites vos premiers tests pour vérifier l'installation
1. Ouvrir une console de commande avec `Windows + R` et vous tapez `CMD` puis `Enter`.
2. Tapez la commande `git --version`, vous devriez avoir le même résultat que ceci:
![Check the git version](git-version.png)

### Configuration
On va faire quelques configurations essentielles
1. Le nom d'utilisateur
```powershell
git config --global user.name "<Votre nom complet>"
```

2. L'adresse email
```powershell
git config --global user.email <Votre adresse email>
```

Comme ça, toutes les modifications faites seront enregistrées en votre nom, ce qui facilite la traçabilité des changements!

### Créer un compte Github
Rendez-vous sur [https://github.com](https://github.com) et créez votre compte personnel ! N'oubliez pas de choisir un nom d'utilisateur original et un mot de passe pas facile à déviner.

Si vous avez déjà un compte github, c'est parfait, connectez-vous et rendez-vous à l'étape suivante.

### Liaison Git et Github
Afin de publier vos collaborations, vos projets sur github, cette partie est essentielle.

Mais nous on va utiliser le protocole `https://` pour plus de facilité (mais ce n'est point le moyen le plus sécurisé !).

Donc on va donc attendre notre premier push pour nous authentifier à ce moment-là !
Binary file added assets/git-version.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
79 changes: 13 additions & 66 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -80,77 +80,19 @@ <h3 data-aos="fade-up">Pourquoi contribuer à l'Open-Source ?</h3>

</div>
<div id="gallery">
<h2>Participants Git & GitHub For Open Source By GDSC ISTM</h2>
<h2 data-aos="zoom-in" data-aos-duration="50000">Participants Git & GitHub For Open Source By GDSC ISTM</h2>
<div class="gallery">

<!-- Copiez de là -->
<div data-aos="zoom-in" class="card">
<div id="card1" class="image"></div>
<div class="line"></div>
<div class="infos">
<h3>Mamadou Moustapha Diallo</h3>
<div>Web Developer</div>
<div class="links">
<a href="https://github.com/moustaphaotf" target="_blank"> <svg xmlns="http://www.w3.org/2000/svg"
width="24" height="24" viewBox="0 0 24 24">
<mask id="lineMdGithubLoop0" width="24" height="24" x="0" y="0">
<g fill="#fff">
<ellipse cx="9.5" cy="9" rx="1.5" ry="1" />
<ellipse cx="14.5" cy="9" rx="1.5" ry="1" />
</g>
</mask>
<g fill="none" stroke="black" stroke-linecap="round" stroke-linejoin="round" stroke-width="2">
<path stroke-dasharray="30" stroke-dashoffset="30"
d="M12 4C13.6683 4 14.6122 4.39991 15 4.5C15.5255 4.07463 16.9375 3 18.5 3C18.8438 4 18.7863 5.21921 18.5 6C19.25 7 19.5 8 19.5 9.5C19.5 11.6875 19.017 13.0822 18 14C16.983 14.9178 15.8887 15.3749 14.5 15.5C15.1506 16.038 15 17.3743 15 18C15 18.7256 15 21 15 21M12 4C10.3317 4 9.38784 4.39991 9 4.5C8.47455 4.07463 7.0625 3 5.5 3C5.15625 4 5.21371 5.21921 5.5 6C4.75 7 4.5 8 4.5 9.5C4.5 11.6875 4.98301 13.0822 6 14C7.01699 14.9178 8.1113 15.3749 9.5 15.5C8.84944 16.038 9 17.3743 9 18C9 18.7256 9 21 9 21">
<animate fill="freeze" attributeName="stroke-dashoffset" dur="0.6s" values="30;0" />
</path>
<path stroke-dasharray="10" stroke-dashoffset="10" d="M9 19">
<animate fill="freeze" attributeName="stroke-dashoffset" begin="0.7s" dur="0.2s" values="10;0" />
<animate attributeName="d" dur="3s" repeatCount="indefinite"
values="M9 19c-1.406 0-2.844-.563-3.688-1.188C4.47 17.188 4.22 16.157 3 15.5;M9 19c-1.406 0-3-.5-4-.5-.532 0-1 0-2-.5;M9 19c-1.406 0-2.844-.563-3.688-1.188C4.47 17.188 4.22 16.157 3 15.5" />
</path>
</g>
<rect width="8" height="4" x="8" y="11" fill="black" mask="url(#lineMdGithubLoop0)">
<animate attributeName="y" dur="10s" keyTimes="0;0.45;0.46;0.54;0.55;1" repeatCount="indefinite"
values="11;11;7;7;11;11" />
</rect>
</svg>
</a>

<!-- Upload your linkedIn profile below in href="https://www.linkedin.com/in/profile..." -->
<a href="https://www.linkedin.com/in/moustaphaotf/" target="_blank"><svg
xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
<circle cx="4" cy="4" r="2" fill="#0a66c2" fill-opacity="0">
<animate fill="freeze" attributeName="fill-opacity" dur="0.4s" values="0;1" />
</circle>
<g fill="none" stroke="#0a66c2" stroke-linecap="round" stroke-width="4">
<path stroke-dasharray="12" stroke-dashoffset="12" d="M4 10V20">
<animate fill="freeze" attributeName="stroke-dashoffset" begin="0.2s" dur="0.2s" values="12;0" />
</path>
<path stroke-dasharray="12" stroke-dashoffset="12" d="M10 10V20">
<animate fill="freeze" attributeName="stroke-dashoffset" begin="0.5s" dur="0.2s" values="12;0" />
</path>
<path stroke-dasharray="24" stroke-dashoffset="24"
d="M10 15C10 12.2386 12.2386 10 15 10C17.7614 10 20 12.2386 20 15V20">
<animate fill="freeze" attributeName="stroke-dashoffset" begin="0.7s" dur="0.5s" values="24;0" />
</path>
</g>
</svg></a>
</div>
</div>
</div>

<!-- Jusqu'ici -->

<!-- Copiez de là -->
<div data-aos="zoom-in" class="card">
<div id="card2" class="image"></div>
<!-- Remplacez le numéro de la card dans l'attribut id -->
<div id="card1" class="image"></div>
<div class="line"></div>
<div class="infos">
<h3 class="fullname">Mamadou Moustapha Diallo</h3>
<div>Designer</div>
<div class="links">

<!-- Mettez votre lien github ci-dessous dans l'attribut href="https://github.com/<GITHUB_USERNAME>" -->
<a href="https://github.com/moustaphaotf" target="_blank"> <svg xmlns="http://www.w3.org/2000/svg"
width="24" height="24" viewBox="0 0 24 24">
<mask id="lineMdGithubLoop0" width="24" height="24" x="0" y="0">
Expand All @@ -177,7 +119,7 @@ <h3 class="fullname">Mamadou Moustapha Diallo</h3>
</svg>
</a>

<!-- Upload your linkedIn profile below in href="https://www.linkedin.com/in/profile..." -->
<!-- Mettez votre lien linkedin ci-dessous dans l'attribut href="https://www.linkedin.com/in/<LINKEDIN_USERNAME>" -->
<a href="https://www.linkedin.com/in/moustaphaotf/" target="_blank"><svg
xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
<circle cx="4" cy="4" r="2" fill="#0a66c2" fill-opacity="0">
Expand All @@ -203,15 +145,20 @@ <h3 class="fullname">Mamadou Moustapha Diallo</h3>
<!-- Jusqu'ici -->


<!-- Collez en bas -->
</div>
</div>
</div>
</div>
<button class="top-button" onclick="topFunction()">Go to Top</button>

<!-- To top button -->
<button class="top-button" onclick="topFunction()">
<svg xmlns="http://www.w3.org/2000/svg" height="1em" viewBox="0 0 448 512"><!--! Font Awesome Free 6.4.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2023 Fonticons, Inc. --><path d="M246.6 41.4c-12.5-12.5-32.8-12.5-45.3 0l-160 160c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0L224 109.3 361.4 246.6c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3l-160-160zm160 352l-160-160c-12.5-12.5-32.8-12.5-45.3 0l-160 160c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0L224 301.3 361.4 438.6c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3z"/></svg>
</button>
<script src="https://unpkg.com/aos@2.3.1/dist/aos.js"></script>
<script>
AOS.init();
AOS.init({
offset: 300
});
/* Show the button when the user scrolls down 20px from the top of the document */
window.onscroll = function() {
scrollFunction();
Expand Down
8 changes: 4 additions & 4 deletions participants/_sample.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
---
Nom: <VOTRE NOM DE FAMILLE>
Prenom: <VOTRE PRENOM>
username: <VOTRE NOM D'UTILISATEUR GITHUB>
github: <VOTRE LIEN GITHUB>
Nom: <DIALLO>
Prenom: <Mamadou Saliou>
username: <salioudizallo>
github: <Github/salioudizallo>
---
32 changes: 25 additions & 7 deletions styles.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,10 +2,22 @@
@import url('https://fonts.googleapis.com/css?family=JetBrains+Mono');
@import url("https://unpkg.com/aos@2.3.1/dist/aos.css");

/**
* Card images
* Copiez-collez une règle et remplacer par votre identifiant
* Exemple
-------------------------------------------------------------------
#cardn {
background: url("./assets/images/<GITHUB_USERNAME>");
}
-------------------------------------------------------------------
*/

#card1 {
background: url("./assets/images/moustaphaotf.jpg");
}

/* BODY */
body{
margin: 0;
background-color: #0F0913;
Expand All @@ -23,6 +35,7 @@ body{
text-align: center;
}
}

.header {
position: relative;
}
Expand All @@ -43,11 +56,13 @@ body{
.title{
text-align: center;
}

.navbar ul{
padding: 0;
display: flex;
justify-content: center;
}

.navbar li{
list-style-type: none;
margin: 0 20px;
Expand Down Expand Up @@ -96,7 +111,7 @@ a{
grid-gap: 70px 10px; /* Optional gap between cards */
}


/* responsive gallery */
@media screen and (max-width: 1200px){
.gallery{
grid-template-columns: 1fr;
Expand Down Expand Up @@ -125,7 +140,7 @@ a{
box-shadow: 10px 10px 15px rgba(0,0,0,0.3);
}


/* responsive card */
@media screen and (max-width: 1200px){
.card{
width:30%;
Expand Down Expand Up @@ -159,18 +174,21 @@ a{
-webkit-transition:1s;
}

/* top button styles */
.top-button {
display: none;
position: fixed;
bottom: 20px;
right: 30px;
z-index: 99;
font-size: 18px;
/* font-size: 18px; */
text-align: center;
vertical-align: middle;
padding: 8px 10px;
font-size: 16px;
border: none;
outline: none;
background-color: #333;
color: white;
cursor: pointer;
padding: 15px;
border-radius: 4px;
}
background-color: #EFEDEF !important;
}