Back to Blog

Building My Personal Website with Next.js and Tailwind CSS

5 min read
by Yi-Ying Lin
Next.jsTailwind CSSWeb DesignPersonal

Building My Personal Website

After years of putting it off, I finally decided to build my personal website. Here's the story of how I brought it to life using Next.js, Tailwind CSS, and a lot of caffeine.

Choosing the Tech Stack

I wanted something that would be:

  • Fast and performant
  • Easy to maintain
  • Beautiful and modern
  • Simple to deploy

Next.js was the obvious choice for the framework. Its file-based routing, server components, and excellent developer experience made it perfect for this project.

Tailwind CSS allowed me to rapidly prototype and iterate on designs without writing custom CSS. The utility-first approach is incredibly productive once you get used to it.

Design Philosophy

I wanted the design to be:

  • Clean and minimal
  • Professional but personal
  • Easy to navigate
  • Accessible

Color Scheme

I chose a blue color palette that feels both professional and calming:

  • Navy blue for text and depth
  • Light blue for accents
  • Pale shades for backgrounds

The site also supports dark mode, which was easy to implement with next-themes.

Key Features

1. Responsive Design

The site looks great on all devices, from mobile phones to large desktop screens. Tailwind's responsive utilities made this straightforward:

<h1 className="text-4xl sm:text-6xl md:text-8xl">
  Yi-Ying Lin
</h1>

2. Dark Mode

Users can toggle between light and dark themes. The preference is saved in localStorage and respected on future visits.

3. Blog

The blog uses markdown files for content, processed with gray-matter and next-mdx-remote. This gives me the flexibility of writing in markdown while keeping the ability to embed React components if needed.

4. Animations

Subtle animations using Framer Motion add polish without being distracting. Elements fade in as they enter the viewport, creating a smooth user experience.

Deployment

I deployed the site to Vercel, which is the company behind Next.js. The deployment process is seamless:

  1. Push to GitHub
  2. Vercel automatically builds and deploys
  3. Done!

Every push to the main branch triggers a new deployment. Pull requests get preview deployments automatically.

Lessons Learned

1. Start Simple

I initially wanted to add so many features, but I learned to ship a minimal version first and iterate based on feedback.

2. Performance Matters

Using Next.js's Image component and being mindful of bundle size made a significant difference in loading times.

3. Accessibility is Non-Negotiable

I made sure to use semantic HTML, proper ARIA labels, and keyboard navigation throughout the site.

What's Next?

I have several features planned:

  • Add a projects showcase
  • Implement blog post search
  • Add an RSS feed
  • Create a newsletter subscription
  • Add view counts and reading time estimates

Conclusion

Building this site was a great learning experience. It gave me a platform to share my thoughts and showcase my work. If you're thinking about building your own site, I encourage you to do it—there's no better way to learn than by building something you care about.