How I Built My Blogfolio With Next.JS

For many years, I have been fascinated with the idea of carving out my own digital space on the internet - a place where I could curate and share my interests, take notes on various programming topics, and experiment with new tools. It was this desire that led me to pursue a path in web development and ultimately create my own website.

In building this website, I had the opportunity to explore various design and development decisions, ranging from selecting the technology stack to crafting the content strategy. I wanted the website to reflect my personality, interests, and skills, while also providing a platform for me to showcase my portfolio and resume.

I started by selecting a technology stack that was both robust and scalable. I chose to work with Next.js (optionally Firebase as the backend) for its ease of use, powerful features, and impressive performance capabilities. I also took a minimalist approach to the website design, focusing on clean lines, simple typography, and a muted color palette that would allow the content to shine.

In terms of content strategy, I wanted the website to be a comprehensive resource for potential employers to learn about my skills, experience, and portfolio. I spent considerable time developing and refining the content, ensuring that it was informative, engaging, and reflective of my personal brand.

The development process was not without its challenges, of course. I encountered various technical hurdles along the way, but I was able to overcome them with the help of online resources and my own determination.

Now that the website is live and serving its intended purpose, I am thrilled to share an overview of how I built it. Through this overview, I hope to provide insights into the thought process and methodology behind the website, as well as highlight the resources and tools that I found particularly helpful. I also plan to continue iterating on the website, refining the design and content strategy to better reflect my evolving interests and skills.

If you're writing about code, your blog probably needs...

Tech stack

Picking the right tech stack for your personal website or side hustle can be a pretty big deal. I mean, you want to make sure you're using tools that are easy to use, fun to work with and let you try out new things. At least that's how I approached it.

For me, speed was a biggie. I didn't want to spend forever trying to learn a new framework or tool just to get my website up and running. I wanted to focus on creating content and sharing it with the world ASAP. So, I looked for tools that were quick to learn and use.

Next up, experience was key. I didn't want to use something that would make me want to pull my hair out. Instead, I went with tools I was already familiar with, like Next.js and Firebase. That way, I could enjoy working on my website and make it look the way I wanted.

And lastly, I wanted to use my website as a way to learn and grow. Once I had the basics down, I started playing around with new tools and experimenting with different approaches. It was a great way to push my limits and see what else was possible.

Nextjs

Next.js is a versatile React.js framework that simplifies the process of building modern websites by taking care of the setup and requirements. As someone who values efficiency and productivity, I have come to appreciate Next.js for several reasons.

• One of the primary reasons I enjoy using Next.js is its flexibility in handling current and future content and data requirements. With its file-based routing system and intuitive API Routes, I can easily manage my website's pages and components, making it easy to organize and modify as needed.
• In addition to its flexibility, Next.js also helps automate tedious tasks that are typically time-consuming to set up, such as Webpack, Babel, TypeScript, and ESLint. This allows me to focus on more important aspects of building my website, such as design and functionality.
• Moreover, Next.js offers in-built performance benefits that optimize my website's code-splitting, images, scripts, and data-fetching methods. This results in faster page load times, a better user experience, and improved SEO.
• Finally, the great developer experience offered by Next.js, such as fast refresh, allows me to work efficiently and effectively, making it easy to create, test, and deploy new features quickly.

In a nutshell, what I love about Next.js is how it helps solo developers (like me!) easily add cool features that would normally be too hard to build alone. Following its recommendations and best practices has allowed me to create better front-end applications with less hassle.

Tailwindcss

Tailwind CSS is a utility-first CSS framework that provides a set of pre-built, low-level classes for rapidly building custom user interfaces. Reasons to choose it:

• Rapid development: Tailwind provides a comprehensive set of pre-built UI components that make it easy to create beautiful and responsive user interfaces in less time.
• Customizable: Tailwind's modular architecture and low-level utility classes allow developers to create unique designs without the need for custom CSS.
• Consistency: Tailwind's utility classes enforce consistency throughout the project, ensuring that designs are cohesive and easily maintainable.
• Responsive: Tailwind's responsive design system makes it easy to create interfaces that adapt to various screen sizes.
• Integration & Support: Tailwind integrates seamlessly with popular front-end frameworks such as React, Vue, and Angular.

Typescript

I chose to use TypeScript in my projects because it has numerous benefits that make my development workflow smoother and more efficient. One of the main reasons I prefer TypeScript is because it allows for stronger type checking, which helps catch errors early on in the development process. This means I can be more confident in my code and spend less time debugging.

Another reason I enjoy using TypeScript is the enhanced developer experience it provides. With improved IDE support and better code readability, TypeScript allows me to write cleaner, more concise code. This not only makes development faster but also makes it easier to maintain and understand code over time.

Scalability is also a major factor that led me to choose TypeScript. With larger codebases, it can be difficult to maintain consistency and prevent bugs from creeping in. TypeScript's static typing helps me write more robust code, which is especially important in complex applications.

Lastly, I appreciate that TypeScript encourages good documentation practices. By providing better type annotations, I can more easily communicate how different parts of the code interact with one another. This leads to more comprehensive documentation that can be easily understood by other developers, resulting in better collaboration and less time spent explaining how everything works.

Overall, TypeScript allows me to write code more efficiently and with fewer bugs, providing a smoother development experience that ultimately leads to better results.

MDX

I chose to use MDX for my blog posts because it allows me to easily incorporate React components directly into my Markdown content. This means I can create dynamic and interactive content, such as embedding code snippets or interactive diagrams, without having to manually write HTML. MDX also supports importing and using npm packages directly in my content, giving me access to a wide range of tools and libraries. Additionally, MDX has great support for syntax highlighting and other Markdown features, making it a versatile and powerful tool for creating rich content. Overall, using MDX has streamlined my blogging process and allowed me to create more engaging and dynamic content for my readers.

Vercel

So, here's the thing: Vercel is pretty amazing. It's basically a platform that helps front-end developers like me to deploy and collaborate on projects with ease. I mean, seriously, whenever I make any changes to my code and push them to my main GitHub branch, Vercel automatically deploys them to my website. It's like magic, I tell you. And the best part? I don't have to worry about all the hosting and performance stuff because Vercel takes care of all that for me. So, yeah, Vercel is pretty much my go-to for website deployment.

Framer Motion

Sure thing! So, when it came to choosing an animation library for my blog site, I went with Framer Motion because it's super easy to use and creates some seriously cool effects. I'm not an animation expert by any means, so I needed something that I could quickly implement without too much hassle and not to mention without compromising my bundle size. Plus, Framer Motion has a ton of great documentation and resources available online, so I knew I could get the help I needed if I ran into any issues. Overall, I'm really happy with my decision to use Framer Motion and I think it adds a lot of visual interest and engagement to my site.

Design

When it came to designing my blog site, I didn't want it to be too complex or unappealing. While I wouldn't consider myself a design expert, I firmly believe that good design is all about effective communication and evoking emotions in people. That's why I focused on creating a minimalist yet visually appealing site that emphasized the content and made visitors feel welcome. To achieve this, I opted for a clean layout with a clear hierarchy that put the essential information front and center. But at the same time, I didn't want it to be too plain or boring, so I added some subtle design elements that captured my personality and delighted visitors. As per the feedback, I am pretty happy with how things turned out.

The Future

As I continue on my journey of learning and growth, I hope to use my blog as a space where I can share my experiences, insights, and knowledge with others. While I don't have all the answers yet and I know there will be many iterations along the way, I'm excited to have this starting point and see where it takes me. I want to create a platform that grows with me, both in terms of the content I produce and the skills I develop as a developer. Ultimately, my goal is to build a community of like-minded individuals who can learn from each other and support one another on this journey of self-improvement and discovery. So stay tuned for more updates, insights, and hopefully, some valuable takeaways that you can apply to your own work and life!

If you have any thoughts, comments, or feedback about the site, please feel free to reach out to me on Twitter or GitHub. I'm always happy to connect with new people and hear your ideas!