Table of Contents
- The Elements, Ideas, and Concept
- DevCard
- Shields.io
- GitHub Repositories
- DEV.to Articles
- Future Updates
The Elements, Ideas, and Concept
As I looked at my website, it had being my first website, I wasn't very pleased with the work I was putting out there. It was a very fun project and a wonderful learning opportunity as my first dive into web development. But it was still not a site I was proud enough to post and share as much as I would like. And my website should be an entity I am proud of in order to showcase the best parts of me to the industry.
Then I stumbled upon dev.page and started populating my personal dev.page will all my social media links, resume, and a beautifully updated introduction. I thought....why not redo my website while I was doing all of this. With having stumbled upon the GitHub API Docs as well as the DEV.to API Docs not that far apart, I had wanted to work on them and started taking notes.
DevCard
Having already had implemented my DevCard into my GitHub README.md, getting the code to bring this section into my website wasn't hard. If you're interested to reading more about DevCards, I wrote an article specifically about them here:
From my DevCard page, I grabbed the a tag and put it into a div like so:
<div class="devcard d-flex">
<a href="https://app.daily.dev/tmchuynh"><img align=center src="https://api.daily.dev/devcards/9b4d6fa7ff784d3297e67d1edf73fc06.png?r=mg3" width="500" alt="Tina Huynh's Dev Card" /></a>
</div>
Shields.io
I went ahead and created some custom badges to add with my introduction with Shields.io - a very simple and easy-to-use site. I went ahead and looked at their icons that they use through Simple Icons and used my custom color in order to match my logo and the rest of the page.
https://img.shields.io/static/v1?label=<LABEL>&message=<MESSAGE>&color=<COLOR>
GitHub Repositories
When I went to populate my GitHub repos into my website, I went ahead and set up a section in my HTML file like so:
<div class="section-title">
<h2 id="project-tiles">Projects</h2>
<ul id="project-list">
</ul>
</div>
I added some styling in my css files:
#project-list .cards {
color: var(--eerie-black);
display: flex;
flex-direction: column;
height: 150px;
position: relative;
justify-content: center;
align-items: center;
text-align: center;
border-radius: 15px;
border: 1px solid var(--eerie-black);
box-shadow: 3px 10px 25px rgb(180,180,180, 0.4);
}
And then started implementing the projects in my JavaScript files.
First I needed to grab the repositories from my GitHub profile. I did this with $.getJSON:
$.getJSON('https://api.github.com/users/tmchuynh/repos', (data) => {
console.log(data);
.
.
After this, I was able to dynamically create document elements for the information I wanted to display and add it into the section on my html file. For example:
var title = document.createElement("a");
title.classList.add("title");
title.innerHTML = name;
var hyperlink = document.createAttribute("href");
hyperlink.value = url;
title.setAttributeNode(hyperlink);
card.appendChild(title);
I personally included the last time I pushed to a repo and wanted to have the projects be displayed in order of last updated. I did this by first sorting the data right after I retrieved the array from the API with .sort():
data.sort((a,b) => (b.pushed_at > a.pushed_at) ? 1 : ((a.pushed_at > b.pushed_at) ? -1 : 0))
data.forEach((element, index) => {
populate(element.name, element.html_url, element.pushed_at, index);
})
There are other articles specifically on GitHub's User API if you are interested such as @technicalvandar885 :
DEV.to Articles
The DEV.to API provides a lot of information regarding using their API.
const response = await fetch(`https://dev.to/api/articles/${id}`);
const data = await response.json();
fetch can be used to retrieve the articles and from there, it is quite simple to display the information you need is blog form.
There are many articles on DEV.to itself explaining the process of how to use the API such as but not limited to @j471n @ugglr @hackerkid :
If you want to see how I implemented this section, check out the full code to my project here.
Future Updates
Next up, I have a few ideas where I want the site to head and what new "features" I want to add:
[ ] GitHub Skyline
[ ] Daily.dev "Skyline"
My GitHub skyline from 2021 looks nothing but horrible! BUT I am here to change that for 2022. From people like Scott have their skyline printed to just how many project ideas I want to get started on, I am here to make this year count!
01:04
View your GitHub Contribution Graph as an animated skyline + 3D print it
Michelle Duke for GitHub ・ Feb 18 '21
...and a Daily.dev skyline would look as it sounds.
The "articles read in the last year" is already inspired by the "contributions in the last year". Why not add a skyline feature too? Each day, week, or month could have a tooltip of the most read topic when a user hovers over it! @dailydevtips1 It'd be another beautifully visual way to show everyone what you're reading. What does everyone think?
I might start working on this myself, if I can figure it out or if someone else doesn't first.
Happy coding!
Top comments (6)
Thank you, this was a good little work out :)
Thanks 😀 I'm glad it helped you out in whagever way it could
This is amazing. I'm gonna start from the first guide in the series and work my way down. This obviously took a while to put together, but it's honestly such a great resource :)
Thanks 😊 Im glad it's found its way to you
This is great!
Thank you 😊