A photo of Shane

Shane Chaffe

1 min read ⏳

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.

Technology used:

ReactNext.jsVercelContentfulTypeScriptTailwind