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

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

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

shieldsio

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>
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('https://api.github.com/users/tmchuynh/repos', (data) => {
    console.log(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.classList.add("title");
title.innerHTML = name;
var hyperlink = document.createAttribute("href");
hyperlink.value = url;
title.setAttributeNode(hyperlink);
card.appendChild(title);
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.name, 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 :

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();
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 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"

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 Daily.dev 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)

Collapse
369gtech profile image
Steven Mcleod

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

Collapse
tmchuynh profile image
Tina Huynh Author

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

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

Collapse
tmchuynh profile image
Tina Huynh Author

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

Collapse
vulcanwm profile image
Medea

This is great!

Collapse
tmchuynh profile image
Tina Huynh Author

Thank you 😊