Creating a Personal Website

It's been a long time since I've written on this blog. But, today I want to write about my experiences with completely redesinging the website!

Motivation

Now that I'm a college student, I thought it very important that I have my own personal website, and my own personal domain. It helps with building a brand, as well as appearing much more professional.

Also, it just looks really cool, and making a personal website has been a goal of mine for a very long time, if you look at some old posts.

But, I've been putting it off because I just never felt like I was ready, and it was so overwhelming because I had so many big goals and expectations for a personal website. But, as I now realize, the hardest part is the first step. Just start somewhere, and iterate.

Design

I wanted to create a sleek, modern look for the website, similar to apple UI. The goal was to have both a light and dark theme, as well as being fully responsive on all screens. I researched what to put on my website by looking at some of my friends' personal websites, seeing that most portfolio websites included projects, a contact page, and maybe a blog.

Projects

I really like what I did with the projects page. Each project has its own unique "personality". For example, Europa Lang looks like vscode sinc its a programming language. The golf game looks like an ipad, since its a mobile game (not too happy with how that turned out still), and the Ray Tracer has… ray tracing vibes.

Tools

One of the best parts of the old Coder100 website were the tools. I would actually use the keyboard tool every time I had to do some JS with keyCode because I just can't remember e.which e.key etc.

But now I want to add more features. I plan to add a color picker, both an rgb color picker and an image color picker. However, in the current time constraint, I haven't been able to add those tools yet.

Tailwind.css

I randomly decided, on a whim to add tailwind css to my project. At first, it was so difficult. I didn't know any of the tailwind classes, and I was really questioning why I was doing this to myself (and I still don't know why I did that).

But, after a few days working on this website, it really grew on me. Not having to create css modules for each class, and essentially just using style={...} provides so much freedom for React development. And, it makes it so much easier to add dark theme and breakpoints. I would definitely recommend using tailwind, but of course, make sure to install the vscode extension as well.

For example, once you find yourself repeating a bunch of tailwind styles, it's a good indicator to create a new component. This is how I discovered I should create a base <Card> component.

The only thing I don't like is how the class names are really long, so I would split it into multiple lines, such as:

<div className="
    p-5 bg-red-400
    rounded text-lg
    border border-red-800" />

the actual compiled code would still include the whitespace, which wasn't ideal. And also, conditional classes were really difficult. So, I opted to use clsx, which made this all so much easier:

<div className={clsx(
    "p-5", focused && "shadow-lg",
    "rounded text-lg",
    "border border-red-500",
)}>

A cool pattern in React is (condition) && (expr). Based on short-circuiting, if (condition) is true, then it will return (expr), but otherwise, it will return false which React ignores. So you can do that instead of condition ? expr : null.

React Weirdness

I came across a very strange react bug when working on the dropdown nav. For some reason, the choice of keys would be the difference between a hydration error. The code in question:

 {moreItems.map(({ name, href }, i) =>
    <React.Fragment key={href}>
        {i > 0 && <hr />}
        <Link />
    </React.Fragment>
)}

If you chose key={i} instead of key={href} you would get a hydration error. My theory why is because there is a <hr /> element that won't show up for the first element, and since fragments aren't actually anything in the DOM, this confuses React. And maybe since the choice of key affects the value returned if you used i, then it wasn't a good key choice. But I'm still not sure, and ChatGPT can't explain it very well either.

Conclusion

This website rewrite has been something in the planning for almost 3 years now! I really procrastinated all that time because I never felt ready. Well, I didn't felt ready this time around either. And I still don't think the website is exactly ready either. There's still many features I haven't added, and tools isn't finished. But it looks a lot better and a lot more polished than just a few weeks ago. And that's what matters. For projects that you know you will be working on for a long time, you can't overthink it. Just start.