I've always loved the idea of having my own little corner on the internet—a place to share my thoughts, showcase my projects, and experiment with new technologies. Over the years, I've dabbled in various web projects, but this time, I decided to go and build a personal website that reflects who I am. And of course, I wanted to keep it (stupid) simple.
In this post, I'll walk you through how I built my personal website using Next.js, TailwindCSS, TypeScript, and Vercel. I'll also share some thoughts on the design choices I made and how I brought it all together with a unique visual twist.
The Tech Stack
When it came to choosing the tech stack for my website, I focused on simplicity, speed, and personal enjoyment. I wanted to use tools that I was familiar with, yet powerful enough to deliver a seamless experience both for me as a developer and for visitors to the site.
Next.js
Next.js was an easy choice for me. As a React-based framework, it provides a great foundation for building modern web applications. I particularly appreciate its flexibility and the way it simplifies complex tasks like routing, server-side rendering, and static site generation. Plus, Next.js comes with built-in support for TypeScript, which made the setup process smooth and straightforward.
Another reason I love Next.js is the developer experience. Fast refresh, zero-config setup, and performance optimizations like code-splitting and image optimization are just a few of the features that make working with Next.js a joy.
TailwindCSS
For styling, I went with TailwindCSS. I've always been a fan of utility-first CSS frameworks because they let me focus on building components without getting bogged down in custom stylesheets. Tailwind's predefined classes made it easy to rapidly prototype and iterate on the design without sacrificing flexibility.
One of the biggest advantages of TailwindCSS is how it keeps your styles consistent and organized. I don't have to worry about naming conventions or redundant CSS—everything is right where I need it, in the component itself. This approach significantly sped up my workflow and allowed me to focus on the overall look and feel of the site.
TypeScript
TypeScript is a must-have for me when working on any serious project. It adds a layer of safety and predictability to my code, catching errors at compile time rather than in the browser. With TypeScript, I can define the shape of my data, making the development process more efficient and less prone to bugs.
Using TypeScript with Next.js was a breeze, thanks to the seamless integration and excellent support from both the framework and the TypeScript community. It helped me maintain a clean and robust codebase, especially as the project grew in complexity.
Vercel
Once the site was ready, deploying it to the web was as simple as pushing to my main GitHub branch. Vercel, the platform behind Next.js, took care of the rest. Continuous deployment, global CDN, and automatic SSL are just a few of the perks that come with hosting on Vercel. It allows me to focus on building and refining my site without worrying about the complexities of deployment.
The Design
While I'm not a professional designer, I wanted my website to be visually appealing and reflective of my personal style. My approach to design has always been minimalist—clean, focused, and content-driven. But I also wanted to add a unique touch that would make the site stand out.
Fractal Noise and the Ripple Effect
One of the most distinctive elements of my website is the background effect on the homepage. I stumbled upon a cool SVG effect called fractal noise, which I thought would add a subtle yet interesting texture to the site. To enhance this effect, I overlaid it with an image from Unsplash—a stunning 3D render of a drop and ripple effect. The combination of the fractal noise and the image created a dynamic background that catches the eye without being overwhelming.
This visual approach aligned perfectly with my goal of keeping things simple while still making a statement. The background adds depth and intrigue to the design, inviting visitors to explore further.
Final Thoughts
Building this website was a labor of love, combining my passion for coding with a desire to create something personal and meaningful. By using a tech stack that I enjoy and keeping the design straightforward, I was able to build a site that I'm proud of—and that truly represents me.
Whether you're here to check out my projects, read my blog posts, or just explore, I hope you enjoy your time on my site. And if you're thinking about building your own personal website, I encourage you to dive in! Keep it simple, stay true to your style, and most importantly, have fun with it.