imdaniel

This portfolio: imdaniel.dev

View the live project
Background

Used tech

Ofcourse this portfolio is a project I built using a cool, modern technology stack. For this portfolio, I chose NextJS 15 (with the app router), Contentful, GraphQL, and SCSS modules for styling. Additionally, I implemented multilingual functionality so that the website is available in both Dutch and English.

After working with Contentful for a while, I can confidently say that this CMS suits me very well—especially once you master the nuances of GraphQL. In fact, I even went the extra mile and developed my own "Fragment Generator." With this tool, whenever I create a new content model in Contentful, I simply enter the ID and immediately receive the corresponding TypeScript types and GraphQL fragments. This saves me a lot of time and makes working with Contentful even more efficient.

Here’s how the system works: NextJS offers Server Side Rendering (SSR), which means that your pages are pre-built into HTML and served to the client. At the same time, you can switch parts of that static HTML to dynamic React components whenever needed. During the build phase, I fetch all "Page" content types from Contentful and gather all the slugs. These slugs are then passed to NextJS’s generateStaticParams function, which creates static pages based on them. Later, in the page function, the specific components and SEO data for that page are fetched. And voilà, it's done!

This approach makes it possible to create a website that loads incredibly fast: essentially, you send an HTML file with content, which means that very little JavaScript needs to be executed on the client. At the same time, you still enjoy the benefits of dynamic content through React. Because the bundles sent to the user's computer are significantly smaller, the website achieves excellent performance.

Other projects