How I Built My Personal Website from Scratch

February 13, 2025

Introduction

Hi, I'm Krutarth Dhaduk, and I recently built my personal website, krutarthdhaduk.com, to showcase my work, experience, and thoughts. In this post, I'll walk you through my journey of building this site from scratch, covering everything from the tech stack to SEO and hosting.

1. Why I Built This Website

Having a personal website is a great way to establish an online presence, share my work, and make it easier for people to find me. While platforms like LinkedIn and GitHub are useful, a personal website gives me complete control over my branding and content.

I wanted a simple, clean, and professional website that:

  • ✅ Introduces who I am and what I do.
  • ✅ Showcases my projects and experience.
  • ✅ Helps with personal branding by ranking on Google.

2. Choosing the Tech Stack

I wanted my website to be lightweight, fast, and easy to maintain. After some research, I decided on the following stack:

  • ✅ Frontend: HTML, CSS, and JavaScript (with Next.js for better performance)
  • ✅ Styling: Tailwind CSS for quick and modern UI design
  • ✅ Hosting: GitHub Pages / Vercel (easy deployment)
  • ✅ SEO & Analytics: Google Search Console, Google Analytics

This stack ensures my site is fast, responsive, and SEO-friendly while being easy to update in the future.

3. Building the Website

Step 1: Setting Up the Project

I started by initializing a Next.js project:

npx create-next-app@latest my-website
cd my-website
npm install

Then, I set up the basic folder structure:

/public   - Static assets (profile picture, favicon)
/pages    - Main pages (index.js, about.js, etc.)
/styles   - Custom styles
/components - Reusable UI components

Step 2: Designing the Layout

I wanted a clean and minimal design, so I used Tailwind CSS to style the site:

h1 {
  font-size: 2rem;
  font-weight: bold;
}

I kept the homepage simple, with sections for:

  • ✅ Introduction – Who I am and what I do.
  • ✅ Projects – A section to showcase my work (coming soon!).
  • ✅ Social Links – GitHub, LinkedIn, and Twitter for easy networking.

Step 3: Adding SEO Best Practices

To ensure my website ranks well on Google, I added:

  • Meta tags in the <head> for better search visibility.
  • A sitemap (sitemap.xml) to help Google index my pages.
  • Schema Markup (JSON-LD) to define my profile for search engines.

4. Hosting & Deployment

Once my site was ready, I deployed it using Vercel (which works seamlessly with Next.js).

npm run build
vercel deploy

Alternatively, I also set up GitHub Pages as a backup hosting option.

5. Improving SEO & Performance

After deploying, I took extra steps to boost my website's ranking on Google:

  • ✅ Submitted my website to Google Search Console to track indexing.
  • ✅ Integrated Google Analytics to monitor traffic.
  • ✅ Ran Lighthouse audits to optimize page speed and performance.
  • ✅ Got backlinks by adding my website to my LinkedIn and GitHub profiles.

6. What’s Next?

The site is live, but I plan to keep improving it! My next steps include:

  • ✅ Adding a blog section to share insights and experiences.
  • ✅ Showcasing projects to highlight my work.
  • ✅ Implementing a dark mode toggle for better UX.

Final Thoughts

Building this website was a fun and rewarding experience. It allowed me to apply web development skills, optimize SEO, and create a professional online presence.

If you're thinking about creating your own website, I highly recommend it! Feel free to check out krutarthdhaduk.com and let me know your thoughts. 🚀