How To Easily Keep Your Web Developer Portfolio Up To Date
By: Aman Bhimani
Tags: JavaScript, Web Design, Github, Programming, Coding

It’s always hard to keep your own website up to date when you are busy with the 100 different projects that you are working on. This is my way to make that process easier to always have an up to date presence on the web.

This by no means is a perfect solution to your website, or even mine. Maybe next year it will change, and evolve. This is just for me to put my thoughts down and help you automate your workflow as I have done with mine!

What’s the Architecture?

For the hosting solution, I went with Netlify. It’s an affordable, modern, and developer-friendly solution to host your website. They have free and paid plans that you can use for personal and professional hosting. A lot of their services actually help me achieve this goal of keeping my website up to date without much effort on my side (aside from creating the website of course).

What to use to make a website?

I went with a static website generator, Nuxt.js to be specific. It uses vue.js (2.0) as a template, and creates a bunch of .html files that are served. Static websites have a special character, because they are extremely fast, since most of the content is already created.

N ote: static website generators may not work for your use case if you have a lot of dynamic content which updates every few minutes. The only way to update a static website is to re-build the entire website with new content.

Because of this fact, the web page that are served can easily be cached and have amazing SEO for search engines across the internet. Some other popular static site generators include:

Next.js (React templates)

Hugo (Go lang templates)

Gatsby (React templates)

Can You Still Have Dynamic Content?

Yes, of course! There are several dynamic pieces on my website. The first one being the quotes on the home page. Each time you refresh, you get a new quote! These are some of my favourite quotes that I live by, so I wanted to have them dynamically shown on the home page.

The second place I have dynamic content is the published media, like this article. Every time I build the website, the most recent 9 articles or videos are placed as cards on the home page. This is accomplished by calling RSS feeds of YouTube and Medium before building the website. You can see this in action in the following function:

async function getMediaFeed() {

// get RSS feeds from Medium and YouTube

const responses = await Promise.all([

getMediumFeed(),

getYoutubeFeed()

]);



// combine two lists of media

const media = [...responses[0], ...responses[1]];



// sort list based on date

media.sort((a, b) => b.date - a.date); // Write to JSON file which can be read later when building the website

FilesWorker.WriteJSONToFile(

"./../content/media.json",

media.slice(0, 15),

print.bind(this, "published media.")

);

}

Since the build of the website needs to already have all the content required, we need to gather all the information from YouTube and Medium and save it to a JSON file. When the site is built, it reads from the same JSON file. The result is:

Recently published media automatically placed on the website homepage

What about Projects?

Projects are sometimes cumbersome to put automatically into code, because usually they are updated manually. It’s like writing a blog post, you can’t automatically generate a new blog post — you actually have to write it. So for this reason, I decided to go with a CMS system. Fortunately, Netlify also comes with their own CMS system, which can be easily configured to have your own data structures.

You can add your own structures by editing a file in your root of the repository, static/admin/config.yml . This file contains all the collections that you want to have, for example in this case, a Project has a title and start_date which can be updated for each project in the Netlify CMS.

collections:

- name: project

label: Project

folder: content/projects

create: true

slug: "{{slug}}"

fields:

- label: Title

name: title

widget: string

- label: Start Date

name: start_date

widget: date

After setting up the admin page, you can update using the UI below. As you can see, Netlify offers features like drafts, saving, and publishing. Since your content is all static, these turn in to Pull Requests and branches in your Git repository, which is where all the content lives.

I also have fields on the projects for which ones are “Featured” on my home page. Ones not featured only show on the “Show More” page of the projects.

Reach Out

The reach out (Contact) form is also another dynamic element of my website, where Netlify takes in the form submissions and puts them on a nice list on their Dashboard. It also has spam filters built in without a captcha. So you only ever see real submissions on the website. This works with any simple HTML Form Element, or with JavaScript AJAX submissions; so you can also code it up in plain HTML if you like.

Why Go Through All This?

As a web developer, you love to create websites. But more often than not, you are busy with websites for other people. In fact, that’s the only reason that you are a web developer, right? So, if you can make the process of updating your website just so much easier, then it will always be up to date. You could go with website builders that are out there, but then you wouldn’t be a web developer.

As a web developer, I put hard work into my own website, so it can also be part of my portfolio. My portfolio website is just another project that I work on, to show case my skills or market myself on the internet.

Source Code

My website is completely open source, and you can take a look at it if you so please. If you have any suggestions, please let me know as well, I am always working on improving it! You can find the website source on GitHub. (Source of https://amanbhimani.com)