This website is a simple personal page that includes a landing page and a blog. Blog posts are stored in Markdown files, which are processed at build time to generate JavaScript/HTML.
I am a front-end web developer currently working on React-based projects. I am self-taught. Before learning web development I studied Accounting and worked on the business-side. In tech, I also hold interests in GNU/Linux and PC hardware.
- React.js: React is very flexible, has great support and is one of the prime libraries used to build user interfaces.
- Next.js: Next is a framework that works with React to enable functionalities such as Server Side Rendering (SSR) and Static Site Generation (SSG). Due to the nature of this site, where data is only updated when a new post is created, all pages are generated using SSG.
- ChakraUI: Chakra is one of the main component libraries for React and allows fast development.
- TypeScript: provides static typing to JavaScript.
- next-mdx-remote: efficiently loads MarkdownX content through getStaticProps in Next.js.
- MarkdownX: allows injecting of JSX in Markdown files.
- rehype-highlight with custom highlight.js stylesheet with support for light/dark theme.
- Figma for prototyping. Link to Figma design
I was inspired by blogs made by other developers and how useful they were in my journey. I too wanted to share my knowledge with others.
- Light and dark theme support, with system color theme detection.
- Full Static Site Generation for performance and SEO.
- Full responsive design.
- MarkdownX support.
- Search/Filter function for posts, that appropiately waits until the user stops writing to start searching.
- Posts ordered by date (located in post metadata). Latest post section that shows the 6 latest posts.
- Syntax highlighting for code blocks, with custom stylesheet for dark/light mode.
- Use of React
useMemo()anduseEffect()where appropiate to avoid executing code on every re-render if not necessary.
The project follows Next.js guidelines and is structured as follows:
/pagesfolder holds the main pages of the site./pages/blogholds the blog index and each blog post. Next.js creates routes automatically based on the folder structure inside the/pagesfolder./componentsfolder holds reusable React components, both components that are imported directly to/pagesand components imported by other components. The folder/components/custom-iconsholds various SVG files that are used throughout the site. Some of these SVGs are configured programatically./publicfolder holds static assets (images). In Next.js static assets should be placed in this folder./src/themeholds ChakraUI Theme configuration./stylesholds a dark and light modifyed CSS stylesheet fromhighlight.jsfor use withrehype-highlight/libholds helper functions that are imported throughout the project./dataholds the posts in MarkdownX format.
- Server Side Rendering vs Static Site Generation vs Client Side Rendering: https://www.hackingnote.com/en/versus/ssg-vs-ssr-vs-csr
- Dan Abramov blog: https://overreacted.io/