Since 2024, I have experienced significant changes both personally and professionally. In light of these changes, I decided to overhaul my website and confront a stigma that has followed me for as long as I can remember; this stigma is the driving force behind this redesign. I will also discuss the approach, technologies, and choices I made to create a site that I am pleased with and of which I am not ashamed. ## The perpetual struggle At the heart of my journey in the world of programming lies a silent but consuming struggle: shame and _imposter syndrome_. For me, these emotions are not simply abstract concepts, but constant companions that have shaped every line of code I have written. With every quick alt-tab when someone approaches my screen, with every evasive answer when I am questioned about my work, these feelings are there. Even though I am convinced that these emotions are universal, I am also convinced that the way they manifest is unique to each individual. For me, they manifest in my relationship with my code. I am constantly rewriting, refactoring, reorganizing; and I am always dissatisfied; I am always haunted by the feeling that my code is not good enough, mediocre, and that I am not good enough to produce it. ## Breaking the cycle A few years ago, when I considered creating my own personal website, I aimed to design an immersive experience for visitors using Three.js to create a 3D universe. However, I quickly realized that I didn't have the necessary skills to bring this vision to life. Faced with this realization, I had to lower my ambitions. Nevertheless, the idea of creating something dynamic and interactive never left me. Despite my efforts, the website I eventually managed to create didn't evoke the pride I had hoped for. Every time someone asked to see it, I felt a certain embarrassment and was not truly satisfied with the result. It remained online for a few years, but I never took the time to update it, and it became obsolete. A few years later, I decided to start the project from scratch. Observing the work of other creators, especially that of [Paco Coursey](https://paco.sh/) and [Emil Kowalski](https://emilkowal.ski/), I realized that I didn't necessarily need to design a complex site with animations everywhere to create a pleasant user experience. I found a certain beauty in simplicity, and it was this approach that I adopted this time around. Thus, after many adjustments and reflections, I finally managed to create a website that I am proud of. ## Next.js — All-round simplicity I wanted to create a website that prioritized simplicity, focusing on content and ease of maintenance, that's why I chose to use [Next.js](https://nextjs.org/), a framework I've been familiar with for several years now and find highly enjoyable to work with. Next provides a lot of features out of the box, such as server-side rendering, static site generation, and API routes, which makes it a great choice for a blog, but not only, as it also offers a bunch of components for every use case, like [SEO](https://nextjs.org/docs/app/building-your-application/optimizing/metadata), [Image](https://nextjs.org/docs/app/building-your-application/optimizing/images), [Font](https://nextjs.org/docs/app/building-your-application/optimizing/fonts) and so much more — _Really, take a look at the [docs](https://nextjs.org/docs)_ ### OG image generation One of the features I wanted to implement was the automatic generation of Open Graph images for each article. Using [`@vercel/og`](https://www.npmjs.com/package/@vercel/og), this was a breeze to implement, with a simple opengraph-image.tsx file in the pages directory, I can generate an image with the title, publication date, reading time, and number of views of the article. ![Open Graph image](/writings/something-i-can-be-proud-of/og.png "quality=100") ```tsx title="app/writings/[slug]/opengraph-image.tsx" caption="I use the tw prop to style the components with Tailwind CSS" export const runtime = "edge" export const size = { width : 1200, height: 630 } export default async function Image({ params }: { params: { slug: string } }) { return new ImageResponse( (

{ title }

), { ...size, } ) } ```` ## Content management — MDX By combining Markdown and JSX, [MDX](https://mdxjs.com/) is a powerful tool that allows me to write content in a familiar format while also providing the flexibility to create custom components for more complex content. I had heard about [Contentlayer](https://contentlayer.dev/), a tool that allows you to manage content in a structured way using MDX, so I tried it out, and I must say that I was pleasantly surprised. I particularly appreciated the ease with which the schema can be modified, as well as the robustness of its type-safe configuration. Unfortunately, the project seems to have been abandoned. After reading [Lee Robinson's article](https://leerob.io/blog/2023) on the redesign of his blog in 2023, I was inspired by his desire to unify and simplify his content management approach. So, I decided to follow this path and manage the content of my site myself. I created a simple structure for my articles, which I store in the `content` directory, and I use the `next-mdx-remote` package to render them on the client side. ```tsx title="src/lib/writings.ts" import fs from "fs"; import path from "path"; function getMDXFiles( dir: string ): string[] { return fs.readdirSync( dir ).filter( ( file ) => path.extname( file ) === ".mdx" ); } function readMDXFile( filePath: string ) { return parseFrontmatter( fs.readFileSync( filePath, "utf-8" ) ); } export function getWritings() { return getMDXData( path.join( process.cwd(), "content" ) ); } function getMDXData( dir: string ) { return getMDXFiles( dir ).map( ( file ) => ({ slug: path.basename( file, path.extname( file ) ), ...readMDXFile( path.join( dir, file ) ); }) as Writing[] ) } ```` Now, we can easily retrieve the content of an article and display it on the page using the `getWritings( ){:ts}` function. While we don't have all possible features, I prefer the freedom to do what I want and to adopt specific solutions for each point and need. If you'd like to take a look, my site is open source on [GitHub](https://github.com/Asgarrrr/wf) ```tsx title="app/writings/[slug]/page.tsx" export default function Writing({ params }: { params: { slug: string }}) { const writing = getWritings( ).find(( writing ) => writing.slug === params.slug ); if ( !writing ) notFound( ); return (

{ writing.metadata.title }

{ writing.metadata.publishedAt }

); } ``` Each article is stored in a separate file in the `content` directory, and the metadata is defined at the beginning of the file using a YAML front matter block. ```mdx title="content/something-i-can-be-proud-of.mdx" --- title: Something I can be proud of ? publishedAt: "2024-02-02" --- Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. ## A heading Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. console.log( "Hello, World!" ) ``` ## Monochrome — A timeless choice I wanted to create a design that would stand the test of time, so I chose a monochrome palette with a touch of color for the accent. I find that this choice allows the content to take center stage while providing a pleasant reading experience. For the typography, I chose [Geist](https://vercel.com/font), a modern and elegant font that is easy to read and provides a touch of sophistication to the design. Syntax highlighting is provided by [Rehype Pretty Code](https://rehype-pretty.pages.dev/), a unstyled syntax highlighter that uses [Shiki](https://shiki.style/) under the hood, and [Vesper](https://github.com/raunofreiberg/vesper), a beautiful theme created by [Rauno Freiberg](https://rauno.me/) that I find particularly pleasant to read. Code blocks are displayed in a simple and unobtrusive way, with a light gray background and a subtle border to separate them from the rest of the content. I added a small logic to the code block with a custom component `{:tsx}` that allows me to display something before or after the code block, like a custom component. I only use CSS selectors to create the junction between the code block and the `{:tsx}` component. ```mdx ```tsx title="We can add a title to the code block" function Maze({ width, height }) { [...] } ``` A Fragment can be used to display a component before or after the code block. ``` The code block is displayed as follows: ┌─┬─────┬─────────┬───────┐ │ └─┐ ╷ └─╴ ┌───┐ ├─╴ ┌─╴ │ ├─┐ ╵ ├─────┴─┐ │ │ ╶─┤ ┌─┤ │ └───┤ ╷ ┌─╴ │ │ └─╴ │ ╵ │ │ ┌─╴ │ │ │ ┌─┘ └───┬─┴─╴ │ │ ├───┤ │ │ │ ┌───┐ │ ┌───┤ │ ╵ ╷ ╵ │ │ ├─┘ ╷ ╵ │ │ ╶─┤ ├───┴───┘ │ ╵ ┌─┴─╴ │ │ ╷ │ │ ╶─┬───┬─┴───┤ ╶───┤ └─┤ │ ├─╴ │ ╷ │ ╶─┐ └───╴ ├─╴ │ │ │ ┌─┘ └─┘ ┌─┴─────┐ │ ╶─┤ │ │ └─┬───┐ │ ┌───╴ │ └─┐ ╵ │ │ ╷ ╵ ╷ └─┘ │ ╶───┴───┴─╴ │ └─┴───┴─────┴─────────────┘ ```tsx title="We can also add a title to the code block" function Maze({ width, height }) { [...] } ``` A Fragment can be used to display a component before or after the code block. ## Some other little things 1. **Light / Dark Mode** — Initially, I was inclined towards a dark theme for my website, purely based on personal preference. However, upon deeper reflection, I recognized the importance of ensuring optimal readability and a clear interface. The implementation is indeed very simple with `next-themes`; just two lines are needed. However, I was looking for something more sophisticated and gradual. This is where the `View Transitions API` comes in, allowing me to create a smooth and elegant transition between themes. Unfortunately, this API is still relatively new and is not supported by all browsers. ```ts title="useThemeSwitcher.ts" "use client" import { flushSync } from "react-dom"; import { useTheme } from "next-themes"; import { useState } from "react"; export function useThemeSwitcher( ) { const { theme, setTheme } = useTheme( ); const [ isThumbnail, setIsThumbnail ] = useState( true ); const handleViewTransition = ( ) => { if ( !document.startViewTransition ) return setTheme( theme === "dark" ? "light" : "dark" ); document.startViewTransition( ( ) => { setTheme( theme === "dark" ? "light" : "dark" ); flushSync( ( ) => setIsThumbnail( ( prev ) => !prev ) ); }); } return { theme, isThumbnail, handleViewTransition }; } ``` ```css title="styles.css" ::view-transition-group(root) { animation-duration: 1.25s; } ::view-transition-new(root), ::view-transition-old(root) { mix-blend-mode: normal; } ::view-transition-new(root) { animation-name: themeSwitch; } ::view-transition-old(root), .dark::view-transition-old(root) { animation: none; } .dark::view-transition-new(root) { animation-name: themeSwitch; } @keyframes themeSwitch { from { clip-path: circle(0% at 50% 150%); } to { clip-path: circle(150% at 50% 50%); } } ``` 2. **Partial Pre-Rendering** — 99% of the content on my site is static, and can be pre-rendered at build time. However, I wanted to keep the ability to update the view count of each article in real time. ```tsx

[...] 0000 views }>

[...]

``` PPR is the perfect blend of static and dynamic content, allowing me to maintain the performance benefits of static site generation while also providing real-time updates for specific elements. When a user visits a page, the static content is displayed immediately, and the dynamic content is streamed in as soon as it is available. ```js title="next.config.mjs" caption="Enable Partial Pre-Rendering" const nextConfig = { experimental: { ppr: true }, }; ``` However, as indicated, this is an experimental feature. I'll provide you with some resources, the [Vercel blog post](https://vercel.com/blog/partial-prerendering-with-next-js-creating-a-new-default-rendering-model) on this topic and a very good [example](https://www.partialprerendering.com/). ## What's next ? One of the things I absolutely must avoid to not fall into this kind of disgust towards what I've done is to spend too much time on it and to pursue perfection at all costs. So, I will stick with this version and publish it. However, there are still some elements I would like to add, such as... - A navigation bar within the articles: I had started working on an initial design, but I'm not sure I really like it. - The use of [Sandpack](https://sandpack.codesandbox.io/) to allow readers to edit and test the code directly in the browser. - Adding a reading mode that blurs all the elements of the page except the hovered element, to focus on the content. - A comment system: I'm not sure if I want to add one, but it could be interesting to have feedback from readers. - Finally, I'd like to improve the code blocks, be able to fold the content, use tabs to display multiple related codes without taking up too much space, etc. But for now, I'm happy with what I've done, and I'm proud to share it with you — _Thank you for reading._