DEV Community

Guilherme Moraes
Guilherme Moraes

Posted on

How to have your portfolio up-to-date with your published articles

Let's use the public API to query the last articles. Take a look at how it looks: link.

TL;DR: Using public API endpoint${your_username} will give you a JSON array with enough information to integrate it into your website. This article demonstrates the step-by-step process of ensuring your portfolio remains dynamic and up-to-date with your most recent content and a fancy card to show your links. You can check the code in this link

The Scenario

You have a portfolio website showcasing your work, but manually updating it with your latest articles becomes tedious and time-consuming. Enter the public API to automate this process and keep your portfolio fresh with minimal effort and it's reactions and comments always up-to-date.

Getting Started

Of course, I'll not only throw a concept to you, and let you find out how to use it, let's create a card to show the articles into a website using vanilla HTML, CSS and JS.

The structure

To make things easier, I'll put the HTML and CSS right below, using the pretty plum color, same I had used in my own portfolio.

<!-- HTML -->
<html lang="en">
    <ul id="wrapper"></ul>
Enter fullscreen mode Exit fullscreen mode
/* CSS */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;

#wrapper {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 8px;
  justify-content: center;
  max-width: 600px;
  margin: auto;

.item {
  list-style: none;

.item a {
  display: inline-flex;
  flex-direction: column;
  gap: 12px;
  width: 100%;
  padding: 16px;
  color: white;
  background-color: rgba(73, 33, 59, 0.9);
  transition: background-color;
  border-radius: 4px;

.item a:hover {
  background-color: rgba(73, 33, 59, 0.95);
Enter fullscreen mode Exit fullscreen mode

Good, now let's add some magic into it.

/* JavaScript */
const wrapperEle = document.querySelector("#wrapper");

  .then((res) => res.json())
  .then((articles) => {
    articles.forEach((article) => {
      const itemEle = document.createElement("li");

      const anchorEle = document.createElement("a");

      anchorEle.innerText = article.title;
      anchorEle.href = article.url;

Enter fullscreen mode Exit fullscreen mode

Ok, but what's this code doing?
The step-by-step process is the following.

First, we save the ul tag in a variable to reuse it in the future to attach the items inside of it;

Second, the reason for all of it fetch the articles from API endpoint. While this returns a JS Promise, we need to use the method then to work with asynchronous code, so let's first parse JSON response into native JavaScript objects, and we are ready to work with the articles already.

At this stage, we have an array of objects with useful values like "title, "URL", etc. Let's use these values to create a link card that sends the user to the article itself from our portfolio.

Third, we will use the array method forEach to create an element for each article in that array. Using document.createElement method will allow us to create a new element inside the loop, so we will create two elements, first a li element, because we are creating an unordered list (ul) to wrap the content up, so the children of a list should be a list item, and an anchor element with a hyperlink to the article.

Last, but not least, let's use the method appendChild to append the anchor inside the list item, and the list item inside the unordered list.

And our result is

two square elements one the article "Why { ...defaultValues, ...newValues } can hide a bug", and the second the article "O guia de estudos que eu usei e sempre passo pra frente (javascript)"

Great, so that's it, right? No, please, copy a link and a title is too simple

Next step, add metadata to the card.

Each article has some really important metadata that's great to show more about your article and the people interacting with it.

Let's select some data to add to the card.

For this tutorial, I'll pick only two keys of the article object, the reading_time_minutes, and positive_reactions_count to add to the card.

Let's change the CSS a bit.

  • Remove the underline from the wrapper
  • Add a title element.
  • add a metadata wrapper to change the flex-direction of its children to row.
/* CSS */
.item a {
  text-decoration: none;

.item a .title {
  text-decoration: underline;

.item a .metadata-wrapper {
  display: flex;
  gap: 12px;
Enter fullscreen mode Exit fullscreen mode

Now the javascript.
It's basically the same structure from the initial.

const titleEle = document.createElement("p");
titleEle.innerText = article.title;

const metadataWrapperEle = document.createElement("section");

const thumbsUpEle = document.createElement("p");
thumbsUpEle.innerText = "thumbs up: " + article.positive_reactions_count;
const clockEle = document.createElement("p");
clockEle.innerText = "time to read: " + article.reading_time_minutes;


anchorEle.href = article.url;

Enter fullscreen mode Exit fullscreen mode


Same image as before, but with the metadata for positive_reactions_count and reading_time_minutes

** Final code:**


By using the public API, you can automate the process of keeping your portfolio up-to-date with your latest articles, and their last metadata. This not only saves time but also ensures that your portfolio remains dynamic and reflective of your current work.

Let's keep our portfolios fresh and engaging together! 👨‍💻✨

Check out my links


If you find any error or just want to say hi, leave a comment below.
See ya! 👋

Top comments (0)