Rebuilding My Personal Site with Next.js and TailwindCSS

Background

After publishing the first iteration of my personal website around a year ago, I grew tired of the design and wanted to explore the new technologies I had been learning. My old site was written in plain HTML and CSS using the Bootstrap 4 framework. This was a great exercise at the time and it taught me some important lessons about CSS and design in general, but it was time for change.

Here is what my old site looked like: Old Website. And this is the new and improved version: New Website.

The New Stack

My new portfolio site is built using Next.js and TailwindCSS. I love both of these technologies and their developer experience is top notch. I definitely recommend checking out these frameworks if you're interested in React or CSS.

Using Next.js

Currently, my portfolio site is a single page, statically generated by Next. It reads in data at build time to create the HTML, allowing the server to respond with static HTML for fast rendering. Here's how easy it is to get data at build time:

    // index.js
    export async function getStaticProps() {
        const { skills } = JSON.parse(
            fs.readFileSync(path.join(process.cwd(), 'data/skills.json'))
        );
        const { projects } = JSON.parse(
            fs.readFileSync(path.join(process.cwd(), 'data/projects.json'))
        );
        return {
            props: {
                skills,
                projects,
            },
        };
    }

I can then access this data in my homepage like this:

    // index.js
    const Index = ({ skills, projects }) => (
        {
            skills.map((skill, index) => (
                <SkillCard
                    title={skill.title}
                    image={skill.imagePath}
                    alt={skill.alt}
                    key={index}
                />
            ))
        }
    )

In my case, I'm reading files to get my data, but you could do any kind of data fetching here: API calls, database queries, you name it. You can read more about SSG (static site generation) here.

Using Tailwind

I have been an huge fan of Tailwind ever since I discovered it. I find the utility-first workflow helps me move faster as a developer and the built-in classes allow me to produce more consistent, intentional designs. I was wary of Tailwind when I first read about it and it does come with trade-offs, but I was hooked after the first time I actually used it to build something. I would encourage anyone interested in Tailwind to give it a try before forming strong opinions.

Future Plans

While I am happy with how my new design turned out, I have some future additions I wish to make. I want to further my knowledge of Next.js by adding a blog, complete with a built-in Markdown editor for posts. I also need to transition the new website to my preferred domain: austincrim.me. The last thing on my backlog is a fan-favorite: dark mode.

The source for my portfolio site can be found here.

Thanks for reading and feel free to offer feedback or comments!