DEV Community

Cover image for A Personal Website w/ EVERYTHING
Tina Huynh
Tina Huynh

Posted on

A Personal Website w/ EVERYTHING

Table of Contents

  1. The Elements, Ideas, and Concept
  2. DevCard
  4. GitHub Repositories
  5. 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 and started populating my personal 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 API Docs not that far apart, I had wanted to work on them and started taking notes.


Having already had implemented my DevCard into my GitHub, 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=""><img align=center src="" width="500" alt="Tina Huynh's Dev Card" /></a>
Enter fullscreen mode Exit fullscreen mode

I went ahead and created some custom badges to add with my introduction with - 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.<LABEL>&message=<MESSAGE>&color=<COLOR>
Enter fullscreen mode Exit fullscreen mode


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">

Enter fullscreen mode Exit fullscreen mode

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);
Enter fullscreen mode Exit fullscreen mode

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('', (data) => {
Enter fullscreen mode Exit fullscreen mode

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.innerHTML = name;
var hyperlink = document.createAttribute("href");
hyperlink.value = url;
Enter fullscreen mode Exit fullscreen mode

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.html_url, element.pushed_at, index);
Enter fullscreen mode Exit fullscreen mode

There are other articles specifically on GitHub's User API if you are interested such as @technicalvandar885 : Articles

The API provides a lot of information regarding using their API.

const response = await fetch(`${id}`);
const data = await response.json();
Enter fullscreen mode Exit fullscreen mode

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 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
[ ] "Skyline"

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

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

dailydev green boxes

github contributions

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!

Discussion (6)

369gtech profile image
Steven Mcleod

Thank you, this was a good little work out :)

tmchuynh profile image
Tina Huynh Author

Thanks 😀 I'm glad it helped you out in whagever way it could

xarop_pa_toss profile image
Ricardo Giro

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

tmchuynh profile image
Tina Huynh Author

Thanks 😊 Im glad it's found its way to you

vulcanwm profile image

This is great!

tmchuynh profile image
Tina Huynh Author

Thank you 😊