9 Redesigning my portfolio app

9 Redesigning my portfolio app

Upgrading tioye.dev from HTML, CSS, JS to Next.JS and GraphQL

Demo Project links are live

Today I made a minor change to the portfolio website by adding a button linking to the live projects. I should have done this ages ago, but I was waiting to migrate my projects away from Heroku beforehand to avoid broken links...

My Django, Angular and Spring boot projects which were initially deployed to the Heroku platform were moved to Railway. None of them is currently working because I have provisioned some empty MySQL and Postgres databases which remained empty as a result of my failed connection attempts. Heroku used to automatically provision and connect the databases for us.. Despite being empty, these databases were up and running 24h/7, they used up all my free credits and all my other Railway deployments were paused eventually.

In short, I waited longer to avoid broken links, and I still have broken links!

Next.JS is a little particular about links. I tried using the built-in @next/link for the demo websites, but there was no simple way to open the links on a new tab. I add to create a custom wrapper to make it work.

  1. Create a custom OpenNewTab function
  const openNewTab = (url) => {
    window.open(url, "_blank", "noopener,noreferrer");
  };

2. Use it as a callback to the button

<button onClick={() => openNewTab(demoLink)}>
  Visit the Live Project
</button>

Updated developer resume

A few of the Railway apps were featured on my resume. I replaced them today with other apps which are live on the Vercel platform.