A Personal Website w/ EVERYTHING
Tags: javascript, career
Published: 2022-04-15 10:08:54

## Table of Contents
1. [The Elements, Ideas, and Concept](#the-elements-ideas-and-concept)
2. [DevCard](#devcard)
3. [Shields.io](#shieldsio)
4. [GitHub Repositories](#github-repositories)
5. [DEV.to Articles](#devto-articles)
6. [Future Updates](#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](http://tmchuynh.me/) 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](https://dev.page/tmchuynh) 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](http://tmchuynh.me/) while I was doing all of this. With having stumbled upon the [GitHub API Docs](https://docs.github.com/en/rest) as well as the [DEV.to API Docs](https://developers.forem.com/api) 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](https://github.com/tmchuynh), 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:

{% embed https://dev.to/tmchuynh/what-is-a-devcard-4g10 %}

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](https://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](https://simpleicons.org/) 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>
```

![shieldsio](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/rzhijg6q7h7rvdxg4187.png)
 

### 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 :

{% embed https://dev.to/technicalvandar885/github-profile-data-fetch-using-github-user-api-512i %}

### DEV.to Articles
The [DEV.to API](https://developers.forem.com/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 : 

{% embed https://dev.to/j471n/how-to-use-the-devto-api-4la %}

{% embed https://dev.to/ugglr/coding-a-personal-blog-using-dev-to-api-react-and-react-hooks-33ei %}

{% embed https://dev.to/hackerkid/publishing-your-dev-to-blog-posts-to-diff-blog-4n07 %}

If you want to see how I implemented this section, check out the [full code to my project here](https://github.com/tmchuynh/tinamchuynh).

### 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](https://skyline.github.com/)
[ ] Daily.dev "Skyline"

![github skyline](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/1ofgknpzmg3aps8bmf8f.png)
 
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!

{% embed https://dev.to/github/view-your-github-contribution-graph-as-an-animated-skyline-3d-print-it-2dpl %}

...and a Daily.dev skyline would look as it sounds.

![dailydev green boxes](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/0krtk7h25a33vd18a66q.png)

![github contributions](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/gcj7qplgbgoqww0jwktc.png) 

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!