A Personal Website w/ EVERYTHING

Table of Contents

1. The Elements, Ideas, and Concept
2. DevCard
3. Shields.io
4. GitHub Repositories
5. DEV.to Articles
6. 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:

What is a DevCard?

Tina Huynh ・ Apr 3 '22

#devcard #dailydev #reading #beginners

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 :

Github Profile Data Fetch Using Github User Api

Technical Vandar ・ Sep 24 '21

#html #css #github #api

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 :

How to use the dev.to API?

Jatin Sharma ・ Oct 19 '21

#javascript #webdev #tutorial #beginners

Add blog posts to personal site using DEV.to API, React and React hooks.

Carl-W ・ Apr 23 '20

#portfolio #api #react #hooks

Publishing your dev.to blog posts to diff.blog

Vishnu Ks ・ Jul 9 '19

#productivity #beginners #webdev #writing

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

#github #opensource

...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!