Skip to content

Commit

Permalink
added js to get github repos using github api and list them on portif…
Browse files Browse the repository at this point in the history
…olio session
  • Loading branch information
IgorCoraine committed Mar 4, 2024
1 parent b055415 commit 86fa01e
Show file tree
Hide file tree
Showing 3 changed files with 91 additions and 29 deletions.
42 changes: 42 additions & 0 deletions css/main-green.css
Original file line number Diff line number Diff line change
Expand Up @@ -1426,6 +1426,48 @@ body > footer .copyrights {
/* =======================================
7.4. Portfolio subpage
======================================= */
/* Style for repository list */
#my_repos {
list-style: none;
padding: 0;
}

/* Style for each repository item */
#my_repos li {
background-color: #f0f0f0;
border-radius: 8px;
margin-bottom: 10px;
padding: 20px;
transition: background-color 0.3s ease;
}

/* Hover effect */
#my_repos li:hover {
background-color: #e0e0e0;
}

/* Style for repository name */
#my_repos li h3 {
margin: 0;
font-size: 18px;
margin-bottom: 5px;
}

/* Style for repository description */
#my_repos li p {
margin: 0;
font-size: 14px;
color: #666;
}

/* Style for repository languages */
#my_repos li p.languages {
margin-top: 10px;
font-size: 14px;
color: #333;
}

/**/
.portfolio-grid {
margin-left: -0.5em;
margin-right: -0.5em;
Expand Down
33 changes: 4 additions & 29 deletions index.html
Original file line number Diff line number Diff line change
Expand Up @@ -151,39 +151,13 @@ <h2>Portfolio</h2>
<div class="portfolio-content">

<!-- Portfolio filter -->
<ul id="portfolio_filters" class="portfolio-filters">
<li class="active">
<a class="filter btn btn-sm btn-link active" data-group="all">All</a>
</li>
<li>
<a class="filter btn btn-sm btn-link" data-group="TIA">Portal TIA</a>
</li>
<li>
<a class="filter btn btn-sm btn-link" data-group="python">Python</a>
</li>
<li>
<a class="filter btn btn-sm btn-link" data-group="Csharp">C#</a>
</li>
</ul>
<h5>Click to check details about the projects</h5>
<!-- End of Portfolio filter -->

<!-- Portfolio Grid -->
<div id="portfolio_grid" class="portfolio-grid portfolio-masonry masonry-grid-3">

<!-- Portfolio Item 1 -->
<figure class="item" data-groups='["all", "TIA", "Csharp"]'>
<a href="https://github.com/IgorCoraine/TIA_Add-In_VCI_Git_Connector" title="TIA Add-In VCI Git Connector" target="_blank">
<img src="images/portfolio/gitTiaConnector.jpg" alt="TIA Add-In VCI Git Connector">
<div>
<h5 class="name">TIA Add-In VCI and Git Connector</h5>
<small>Click to see more about the project</small>
<i class="fa fa-github"></i>
</div>
</a>
<h5 class="name">TIA Add-In VCI and Git Connector</h5>
</figure>
<!-- /Portfolio Item 1 -->
<div id="my_repos" class="portfolio-grid portfolio-masonry masonry-grid-3">

<!--Filled by js-->

</div>
<!-- /Portfolio Grid -->
Expand Down Expand Up @@ -215,5 +189,6 @@ <h5 class="name">TIA Add-In VCI and Git Connector</h5>
<script type="text/javascript" src="js/jquery.hoverdir.js"></script>
<script type="text/javascript" src="js/jquery.googlemap.js"></script>
<script type="text/javascript" src="js/main.js"></script>
<script type="text/javascript" src="js/getGithubRepos.js"></script>
</body>
</html>
45 changes: 45 additions & 0 deletions js/getGithubRepos.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,45 @@
document.addEventListener('DOMContentLoaded', function () {
fetch('https://api.github.com/users/igorcoraine/repos') //github api
.then(response => response.json())
.then(data => {
const repoList = document.getElementById('my_repos'); //portifolio div on html
data.forEach(repo => {
const listItem = document.createElement('li');
const repoLink = document.createElement('a'); // Anchor tag for the whole box
repoLink.href = repo.html_url;
repoLink.target = '_blank'; // Open link in a new tab

const repoName = document.createElement('h3');
const repoDescription = document.createElement('p');
const repoLanguages = document.createElement('p');
const ghIcon = document.createElement('icon');

repoName.textContent = repo.name;
repoDescription.textContent = repo.description;
ghIcon.classList.add('fa');
ghIcon.classList.add('fa-github');

// Fetch detailed repository information to get languages
fetch(repo.languages_url)
.then(response => response.json())
.then(languagesData => {
const languages = Object.keys(languagesData);
repoLanguages.textContent = `Languages: ${languages.join(', ')}`;
})
.catch(error => console.error('Error fetching languages:', error));

// Append content to the anchor tag
repoLink.appendChild(repoName);
repoLink.appendChild(repoDescription);
repoLink.appendChild(repoLanguages);
repoLink.appendChild(ghIcon);

// Append the anchor tag to the list item
listItem.appendChild(repoLink);

// Append the list item to the repository list
repoList.appendChild(listItem);
});
})
.catch(error => console.error('Error fetching repositories:', error));
});

0 comments on commit 86fa01e

Please sign in to comment.