I have always wanted to create a personal website where I can share my favorite things, take notes on different programming topics, and try out new tools. The idea of creating a space where I can share my experiences and connect with like-minded individuals has always excited me.
I decided to bring this website to life to help people who are new to software development or those who need a source of inspiration. I hope it will be a place where they can spend their time and share their great ideas with me.
This site has been very beneficial for me, so I wanted to share an overview of how I built it – how I chose the stack, made design and content decisions, the resources I found helpful, and my future plans for the site.
Tech Stack
When choosing the stack, I made decisions based on three things:
- Cutting-Edge Technologies - I wanted to use the latest and most advanced tools to ensure my site stays relevant and up-to-date.
- Developer Experience - It was important to me that the tools I chose provided a smooth and enjoyable development process.
- Scalability and Flexibility - I needed a stack that could grow with my site and adapt to future needs and expansions.
In the end, I settled for Next.js, MDX, Tailwind CSS, Pocketbase, and TypeScript.
Next.js
Next.js is a React framework that handles the requirements and setup for building modern websites.
I love using Next.js for several reasons:
- It is flexible enough to meet my current and future content and data needs.
- It handles configurations for Webpack, Babel, TypeScript, and ESLint, which are usually tedious to set up.
- It comes with built-in performance advantages like code splitting, image and script optimizations, flexible data fetching methods, and API Routes.
- It offers an excellent developer experience with features like fast refresh, requiring almost no configuration.
Over the years, I have appreciated how Next.js has allowed me to implement advanced features that can be challenging for a solo developer and how following its recommendations naturally led me to build better front-end applications.
TypeScript
TypeScript is a language built on top of JavaScript that helps you validate the correctness of your code before it runs.
TypeScript has significantly increased my speed and accuracy. I catch more errors during editing (instead of breaking at runtime) and don’t have to look up documentation as often since I can see a function or component's requirements directly in the editor.
Tailwind CSS
Tailwind is a utility-first CSS framework that allows us to style components using predefined class names. Tailwind was easy to get started with for several reasons:
- Easily navigable documentation, not just structurally but also in terms of searchability and the care taken in examples.
- Guides on setting up Tailwind with CRA or Next.js.
- VS Code extensions: Tailwind CSS IntelliSense offers excellent auto-completion, reducing the need to reference class names in the documentation. Headwind (third-party) rearranges class names when saving.
clsx- A package that makes it easy to use conditional class names.
Keeping the structure and style of my component in the same file provided:
- Making stylistic changes didn’t require constantly switching between files to sync class names with CSS declarations.
- I didn’t have to create my own class names for each component. For example,
.component-wrapper .component-header .component-body-image. - Unused CSS rules didn’t stick around when I deleted a component I no longer used.
Contentlayer
Contentlayer is a content management solution that works seamlessly with Next.js. It simplifies managing Markdown files and static content. It streamlines the process of integrating content into the site, providing data fetching and content management.
MDX
MDX allows us to use JSX components within Markdown files. This capability makes MDX an excellent solution for blogging since I want to create highly interactive articles and demos in the future.
I think of each post as a unique project, and MDX allows me to include interactive components necessary to best explain the post's topic.
Pocketbase
Pocketbase is a backend solution that simplifies authentication and data management. It provides a lightweight, open-source backend perfect for small to medium-sized projects.
rehype-pretty-code
rehype-pretty-code is a syntax highlighting tool that enhances the readability and appearance of code snippets in Markdown files. It integrates well with MDX and helps showcase code examples visually appealingly.
Vercel
Vercel is a deployment and collaboration platform for front-end developers.
Whenever I push a change to my main GitHub branch, my website is automatically deployed using Vercel’s GitHub Integration. This allows me to focus on coding while Vercel handles all the complexities of continuous deployment and hosting a performant, globally distributed website.
Design
When designing this site, my main focus was hierarchy – highlighting the information and calls to action that people need to see first.
I don’t consider myself a strong designer and am naturally drawn to minimalist websites that emphasize content. However, a simple design doesn’t mean plain. Design is an extension of a company’s or individual’s identity. It is a form of communication, and as a colleague recently shared with me, it makes people feel something.
I wanted people to feel happy when they visited my website, so I added a series of animated annotations to the hero text on the homepage using a library called RoughNotation. This allowed me to show keywords to a user visiting the site with animation. Since I love taking notes, it was a way to incorporate a part of my personality.
While adding the feature wasn’t technically challenging, some of the most positive feedback I received came from this. One thing I noticed in this project is that someone might make a quick judgment based on how things look before examining your technical skills. This is especially true for recruiters who don’t have much time. Therefore, adding visual elements that capture the emotion you’re trying to convey can make all the difference.
Content
Knowing what to include and, most importantly, what to leave out is one of the challenging parts of creating a personal website. I thought about what I wanted to highlight on each of my pages and cut out other content.
For example, I thought of including my technical writings on how Next.js works in this project. I decided to include these writings on the site because they reflect my knowledge and experience.
Future
I will continually update this site and add new content. I will also keep improving the design to provide visitors with a better user experience.
Thank You for Reading!...