Personal Website v1

Why?

I thought it would be really cool to have a personal website— a place with complete freedom where I can unleash all my creativity.

I tried that before with an Elementor website, but I quickly felt quite restricted in the process, which made me less motivated to continue working on it. It wasn't very pretty, but it got the job done.

For specifically building a Next.js personal website, I got inspired by Lee Rob's personal website and Koen van Gilst's personal website, as well as some other websites I can't find anymore, but that were really cool portfolios of people's work. Coding a website myself felt like opening up so many more creative possibilities and not feeling limited within a website builder framework.

Also, there just aren't enough tech girlies on the internet, so there's that.

Building in public

I wanted to do this thing called "Build in Public," which I first saw on TikTok's @engineergirlfriend, a software engineer who creates apps and shows the real-life process online. She says this about it: "I share behind the scenes, my progress, my ideas, and even my metrics on my account. I just think it's way more fun than being secretive. Sharing my journey and helping others is also a great way to get users."

Basically, "Build in Public" means intentionally showing your way of creating whatever you're creating. This means being vulnerable about your progress, even if it has mistakes or isn't that good yet.

I want to push myself to do this anyway because I get too scared of not being skilled enough (yet), and doing this feels like an invitation to others to help me out along the way. So yes, you (yes, you reading this!), if you have any remarks or tips along this journey, please share them with me!

The current status of the website

It's (maybe) what you're looking at now. Maybe it has already evolved into something even better, depending on when you're reading this.

Learning Next.js

What is Next.js, anyway? According to the official documentation, Next.js is a flexible React framework that gives you the building blocks to create fast, full-stack "web applications." In turn, React is a JavaScript library for building interactive user interfaces.

Simply put, Next.js provides features to easily build interactive and cool web applications. It also sets up the structure of your website, ensuring that the routing works smoothly, for example.

What I liked most about Next.js was the popularity of the framework, which comes with a large number of resources and documentation I could use if I got stuck. I wanted more customization instead of using website CMS platforms like WordPress with Elementor or drag-and-drop platforms like Webflow. It was also a nice challenge for me to experiment with a new coding language. It felt cool to say that I really coded the website myself.

My technical coding knowledge was mostly based around Python and Scala programming, with no front-end or back-end website experience. So learning JavaScript meant starting from scratch.

The nice part about coding is that the learning curve gets easier and easier the more coding experience you have. You can grasp technical concepts quicker since they might be (slightly) familiar from other programming languages.

That doesn't mean I didn't struggle—because I did. I still don’t feel like I am experienced. However, that didn't stop me from creating a working website! Baby steps.

The first steps

I created my Next.js project bootstrapped with create-next-app, because that made sure I had a general setup with zero dependencies for a Next.js project in seconds. I did this by using the following command: npx create-next-app@latest.

I chose to use TypeScript and Tailwind CSS because these were recommended by a lot of people on the internet.

From there, I started with a pretty simple format—no cool design yet. I chose two typefaces and mostly focused on making everything work together. The dynamic pages were more complex, as I had to link the content to them. Also, the fact that my website has a dark and light mode is pretty cool to me.

What now?

I want to keep sharing updates about my website and what I'm learning. Also, my website is far from being what I envision it to be. I want to add more features and have some really cool ideas. So here's to version 1!