NextJS websites

Tech Stack: NextJS, Typescript, Tailwind, Vercel, Visual Studio Code

The Project

One of the websites I‘ve made in NextJS is the website you‘re a looking at right now! I made this website in around a week. Prior to making this I‘ve had experience using React so this was a minor switch for me. Before this website I used another website written in plain HTML, CSS and a little bit of Javascript. But I thought it was time for an upgrade!

Start Of Development

I started development by taking a base template from Vercel and modifying all the settings to my desire, think about fonts, font sizes, page navigation and more. Then I started designing my desired layout in Figma. When that was all done I started with hosting this website, I chose to host on Vercel because I could quickly deploy while developing and the easy of use when talking about building. Then I spent around 5 days on development and finally released this website (Hopefully you like it!).

Hosting

I chose Vercel because of it‘s ease of use and because I was already familiar with it from a couple of projects. Furthermore I really like the features Vercel has surrounding domain coupling. I also really like the fact that Vercel created NextJS my favorite Framework so far. So the integration was seamless!

Code Highlights

Social Contact Component

const isEmailLink = (href: string): boolean => {
  return href.startsWith('mailto:');
};

export const SocialLink = ({ className, href, children, icon: Icon }: Props) => {  
  if (isEmailLink(href))
    return (
    <li className={clsx(className, 'flex')}>
      <Link
        href={href}
        className="group flex text-sm font-medium text-zinc-800 transition hover:text-primary dark:text-zinc-200">
        <Icon className="h-6 w-6 flex-none fill-zinc-500 transition group-hover:fill-primary" />
        {children && <span className="ml-4">{children}</span>}
      </Link>
    </li>);
  else
    return (
      <li className={clsx(className, 'flex')}>
        <ExternalLink
          href={href}
          className="group flex text-sm font-medium text-zinc-800 transition hover:text-primary dark:text-zinc-200">
          <Icon className="h-6 w-6 flex-none fill-zinc-500 transition group-hover:fill-primary" />
          {children && <span className="ml-4">{children}</span>}
        </ExternalLink>
      </li>
    );
};

Explanation:
This code is part of the Contact box you see on the left bottom corner of this website. I thought I‘d be nice to include my socials everywhere instead of you having to search for them. Each button links to an external website except the email button. Which SHOULD open your email. This code specifically checks if the link provided is a ‘mailto:‘ link or not. In the case that it‘s not you get sent to an external website otherwise you get sent to an internal page.

Project card component video


<div className="absolute w-full overflow-hidden" style={{ paddingTop: '56.25%' }}>
  <div className="absolute top-0 left-0 w-full h-full group frame-container">
    {project.video && (
      <iframe
        loading='lazy'
        className={clsx(
          'absolute top-0 left-0 w-full h-full object-cover opacity-0 transition-opacity duration-500 group-hover:opacity-40 blur-sm',
          isHovered && 'opacity-40'
        )}
        onMouseEnter={() => setIsHovered(true)}
        onMouseLeave={() => setIsHovered(false)}
        src={project.video}
      ></iframe>
    )}
  </div>
</div>

Explanation:
I wrote this code for the background videos on the projects page. I thought it would look much better to make a more interactive projects page instead it just being a static wasteland. So I added a couple project videos in the background, I also blurred the videos for a cleaner look and more readable text on top. I made it so the video never get black bars around it because at the end of the day it is a youtube embed. I‘m not really a fan of the way youtube has implemented their embeds but what are you gonna do...

Reflection On The Project

I‘ve learned that I really like using Typescript and that I prefer it over Javascript any day of the week. It‘s still lacking in support a little bit sometimes and I don‘t like the way error messages are formatted. But apart from that it‘s awesome! I‘ve also learned that I might switch back to react in my next project. NextJS is great but it has much less of an eco-system compared to React. And last but not least, I had to really get used to tailwind in the beginning but it‘s really grown on me the more I use it. Overall, awesome project!