Creating a personal website is an iterative process of aligning expectations with inspirations.
This blog post will give you a glimpse behind the scenes of creating my personal website. I'll walk you through the concept and planning, design and development, content creation, deployment and launch, and share some insights and lessons learned along the way.
Introduction
This website is the result of months of hard work, dedication, and passion for web development and design. I wanted to create a platform where I could showcase my work, share my thoughts, and connect with others who share my interests.I also wanted to challenge myself and learn new things along the way.
Of course this website went through several iterations and changes, but I guarantee you, this version will stay longer than the previous ones :).
Concept and Planning
The idea of creating a personal website had been on my mind for quite some time. I wanted a platform where I could showcase my work, share my thoughts, and connect with others who share my interests as well as to try out all new technologies that come in my mind to create a central space for my passion. It was important to me that the website reflected my personality and style, so I spent some time brainstorming ideas and trying to implement different things to see if it matches my expectations. I also considered the features and functionality that I wanted to include, such as
- a place to showcase my projects, so that people can see what I've been working and get to know how I solve problems
- a blog to write about some interesting topics and inspire others
- an easily accessible resume for potential employers or collaborators
Design and Development
History lesson
Back then I already used Next.js, with Tailwind and Shadcn/ui for one of my first iterations. Was it a good choice? Yes, definitely was! It helped me a lot to get started and to get a feeling for these technologies, helping me to understand many core concepts of web development.
Deep diving into new things is always a good idea!
I started by creating a basic layout and structure for the website, focusing on a very simple homepage and a project showcase. I wanted the design to be clean, minimalistic, and easy to navigate, so I used a lot of white space, simple typography, and a monochromatic color palette, better known as one of the default palettes of shadcn/ui.
The new version
After some time I decided to give the website a new look and feel, as I wanted to have a larger web presence and make the project capable of more complex features. I wanted the new design to be more visually appealing, interactive, and user-friendly, so I spent a lot of time researching and experimenting with different styles and layouts. I liked the monochrome theme from before and decided to keep it, but I made use of the new Geist font from Vercel to give the website a more modern and sophisticated look. I also added some subtle animations and transitions to make the website more engaging and interactive.
Content Creation
With the website structure and design in place, I figured out about how to easily manage the content. I decided to use MDX for the blog and project pages as well as for the about page, as it allowed me to write content in Markdown and include React components where needed. The default Markdown styling comes with @tailwind/typography, which made it easy to create beautiful and readable content without much effort.
I also wanted to have typesafe frontmatter for all of my pages, so I used TypeScript to define the types and validate the data before it gets rendered. This could have been done by some external libraries, but I wanted to keep the dependencies to a minimum and have full control over the data. So I implemented my own MDX compile solution as part of my turborepo and I really like it!
Blog post example
This file automatically generates a blog post with the title, summary, and published date. The blog content here is placed beneath the frontmatter in easily understandable Markdown with the benefit of using React Components. This way I can easily manage the content and metadata in a single file and don't have to worry about keeping them in sync.
Deployment and Launch
During development, I already set up a CI/CD pipeline with GitHub Actions for automatic linting, type- and format-checking as well as preview and production deployments via Vercel. This allowed me to focus on the development and content creation without worrying about the deployment process. Once everything was ready, I pushed the changes to the main branch and watched the magic happen. This got me to the point where I had to decide on a domain name and set up the DNS records. I chose to go with Cloudflare for the DNS management and SSL certificates, as it provided a free tier that was more than enough for my needs. After setting up the domain and SSL, I was ready to launch the website and share it with the world.
Conclusion
Creating my personal website was a challenging but rewarding experience. I learned a lot about web development, design, and content creation along the way, and I'm proud of the final result. I hope that this post gives you some insight into the process of creating a website from scratch and inspires you to embark on your own web development journey.