Re-building my portfolio

I've realised that once I decided to rebuild this, I had actually done so many things wrong in my original one which I was so proud of. I guess that's what happens with time.

So what was wrong?

It wasn't responsive
It didn't reflect the polished work which I wanted
It didn't have max-width classes so it just stretched until it looked horrible
There was a feature that wasn't relevant
The blog section didn't reflect me

The list goes on but rebuilding it thankfully will help me address those issues. I had also noticed it wasn't up to date. Being a Software Engineer should be about being proud of putting your hands on software. My previous portfolio did not reflect that.

This change is also taking me from the pages router of Next.js over to the app router, now my portfolio will be server rendered hopefully resulting in a better user experience.

While building out the articles page, I started to notice that I was doing a lot of prop drilling in my previous set-up, could that be because of the nature of the pages router? You have to return your data as props in that version whereas here in the app router, you can just call a function for an API call where you want.

const BlogDetailPage = async ({ slug }: SlugProps) => {
  const blogPost = await getSingleBlogPost(slug);

  const { content, author, tags, dateOfEntry } = blogPost[0].fields;

  const date = formatDate(dateOfEntry as string)

  return (
    <section>
      <Author author={author} />
      <time className="mb-8 block text-zinc-400">{date}</time>
      {content && documentToReactComponents(content, richTextOptions)}
    </section>
  );
};

export default BlogDetailPage;

This time around, I've made it a lot better and a lot neater by using the right packages to consume code snippets, and icons, and make the site more dynamic in general.

Another thing that was lacking was the mobile nav bar which I have just added today, finally I have added a hamburger menu which is a much better UI experience and added the toggle to switch between dark and light modes, this was something that wasn't included in a mobile view previously.

Another thing I noticed is that I don't handle a case for when an entry is republished in Contentful, the newly published entry will go to the top of the response array from Contentful meaning an older entry will by default appear at the top making it look like the most recent entry, while this is true, this isn't what we would want to show to end users.

Here is the solution to that problem:

const sortedBlogPosts = data.items.sort((a, b) => new Date(b.sys.createdAt) - new Date(a.sys.createdAt));

Using the sort method will allow us to make sure we are sorting the dates in our response so we can also show the newest created date at the top of the response array.

Technology used:

ReactNext.jsVercelContentfulTypeScriptTailwind