My Personal Website

My Personal Website: Project Esd.MPW

Welcome to my second blog post, where I delve into the development process of my personal website. A project where I've utilised the integration of Notion as a CMS (Content Management System) with Next.js for my blog posts and GitHub API for showcasing my projects.

Starting Point: The Next.js Notion Starter Kit

I began this journey by choosing the Next.js Notion Starter Kit as my launchpad. This starter kit is a perfect blend of efficiency and robustness, featuring Notion as a CMS, react-notion-x, and Next.js. The fact that it only takes a few minutes to set up, and has full support for dark mode, automatic social images, quick search, and that I use notion for my studies and personal projects, made it an obvious choice.

Molding the Starter Kit to My Vision

The starter kit was just the beginning. I wanted my website to reflect my style and vision, so I completely overhauled the layout to exude a more retro aesthetic. This revamp wasn't just about the visuals; it was about aligning the user experience with my unique perspective.

Project Showcase

One of the major additions was a separate projects section. This is not just a mere list of my projects; it's a dynamic showcase that automatically gathers all my public GitHub projects using the GitHub API. Each project is neatly displayed in a rectangular box, complete with the repository description, the last edited date, and a download button for the source code. Hovering over a box reveals these details, and clicking on it takes you directly to the repository in a new tab. This makes it super easy for visitors to explore my work and even dive into the code if they wish to.

Here's a snippet of the code from the Projects.tsx file that renders each repository into a neat interactive box:


// Code snippet from Projects.tsx
export const Projects = () => {
  //...
  const renderRepository = (repo) => {
    //...
    return (
      <div
        key={repo.id}
        className="projects-repo"
        onClick={openRepository}
        onMouseEnter={() => setIsHovered(true)}
        onMouseLeave={() => setIsHovered(false)}
      >
        <div className="projects-repoTop">
          {repo.imageUrl && <img src={repo.imageUrl} alt="Repository Image" className="projects-repoImage" />}
          <div className="projects-repoDetails">
            <h2 className="projects-repoName">{repo.name}</h2>
          </div>
        </div>
        {isHovered && <RepoInformationBox repo={repo} />}
      </div>
    );
  };
  //...
};

About Page and Software Resume

The About page is simple and straightforward, providing information about me and a link to my software resume. The resume is a detailed overview of my qualifications, skills, and experiences, providing a quick way for potential employers or collaborators to gauge my capabilities.

Simplicity and Retro Aesthetic

In order to achieve the desired retro aesthetic, I made a number of changes to the starter kit's design. I removed a lot of animations and cover pictures to make the website more simplistic. I changed the font to Courier Prime (or something similar) to give it that classic typewriter look. I also rearranged the social links from a vertical layout to a horizontal one and placed them at the top center of the screen below my name. To make navigation easier, I made my name a clickable link that takes you back to the main page.

These changes were not just about making the website look good. They were about creating a user-friendly space where visitors can easily find the information they're looking for and engage with my content.

The Power of Next.js and Notion

Using Next.js in conjunction with Notion for my CMS was a game-changer. With Notion's easy-to-use interface, I was able to manage my blog content seamlessly. Next.js, on the other hand, provided the performance and developer experience I needed.

I tested the website with Speed Insights using Vercel and the results showcased an expected value considering the low initial traffic.

Hosting and Version Control

I hosted the website on Vercel. Vercel's efficient build and deploy process, coupled with its excellent performance, made it the perfect choice for hosting my Next.js application. And, of course, GitHub was my go-to for version control.

Conclusion

Creating my personal website has been a rewarding journey of blending aesthetics with functionality. With the integration of Next.js and Notion, I have a platform that is efficient, uniquely mine, and ready to grow along with my future endeavors.

Emil S.D

Personal blog & portfolio

My Personal Website