Next.js // TypeScript // TailwindCSS // Personal Portfolio.
Lets briefly look at what Next.js is, before walking through how I developed a Next.js, TypeScript & Tailwind CSS Personal Portfolio, and Why.
What is Next.js?
Next.js is essentially a React framework; its primary goal is to expand the use of React to static sites. It's a server-side rendering framework in React. It has great features that make development more streamlined and improves performance.
Initial Setup
Before any line of code was done, I sketched out what I wanted my portfolio to look like. Consisting of necessary components for both desktop and mobile. Roughly, nothing too Picasso or going into massive amounts of detail.
From there moved that idea into a variety of digital sketches which you will see throughout this article. Again these do not have massive amounts of detail on them. Why? So not to get bogged down in the nuisance and move forward to developing, not dawdling.
The initial sketch done, time to code. Creating the Next.js app and installing the relevant dependencies for the project including TypeScript. Not forgetting the ol’e faithful that is TailwindCSS.
Going through the initial folder structure that Next.js includes when initialising a project and cutting away any unnecessary files. I am always trying to think from the perspective of, if I've never seen the code before, but I get tasked with solving a bug. Cleaner code and file structure help make bugs easier to find if required.
Form there set up a series of folders containing component files. Ensuring they are all linked up to the styling file and the root file for the project. Selected and uploaded project pictures for the project section of the portfolio.
The main components folder contains:
The sketch below, shows each component which has its own respective file in the components folder.
Starting with the Navbar for both desktop and mobile, each contains a logo, home & projects component. The logo function's as a link that navigates you back to the top of the portfolio. The mobile version of the Navbar is a hamburger menu. When closed the hamburger icon (three lines stacked) will appear to the right of the logo.
When opening the Navbar on mobile the menu opens vertically and down. The hamburger icon (three lines) then turn's into an X for closing the hamburger menu. See sketch.
Accessibility is an ever-growing thing we must be aware of. Therefore within both the desktop and mobile menu, there is a light & dark theme option. In the form of a toggle. My preference is a dark theme with the option to toggle to a light theme(see sketch below).
Hero Section
Moving on to the hero section. This is where I had several head-scratching moments. If you are new to Next.js then you may not know that uploading an image can be done in several ways and can flare up some bugs. Maybe I will write more in-depth on Next.js and Images soon.
Recommended by LinkedIn
The hero section contains an image and information area. Stating exactly what I do on the tin. One of the reasons I wanted to develop a new portfolio with Next.js, simplify, and more on that later. As you’ll see from the sketch below I have tech icons highlighting the tech skills I currently have.
Project Section
The pearl de resistance project section is laid out with a large image to give the user a snapshot of what each project looks like. It has an information area that describes the tech used and what each application does. Below the description are two icons, GitHub and a live version of the application. These are both links and on click will open a new tab displaying their respective content.
Footer
The footer section is a simple layout made up of copyright and logo, which acts as a link back to the hero section. It has a back-to-top button doing exactly the same. Along with icons for GitHub and LinkedIn which are both links and open up separate tabs displaying respective content.
Final Phase
Why build a new portfolio?
Previous portfolios I developed in HTML, CSS, Vanilla JavaScript and as second in ReactJS. Styling the ReactJS portfolio, with Tailwind CSS.
So why develop a third portfolio? Firstly I wanted a simpler UI that does what it says on the tin and nothing more. Secondly, I have developed other projects with Next.js and found it to be a great framework to use.
The third and final reason to use Next.js is its apparent SEO and performance capabilities. Unlike my previous portfolio, I am using analytics to track its performance and see with my own eyes how well it does actually perform.
Now, I'm not expecting a huge number of eyes on my portfolio. However, compared to previous portfolio pieces, I will have metrics to track. I guess they call this SEO type “business”. Any SEO ninjas out there please let me know if I'm barking up the right tree?
CHECK OUT FINAL LOOK
What was the outcome?
Understood on deeper level how Next.js can be a dream when working on projects. Provides the ability to track metrics on how productive SEO-wise my portfolio is. Next.js has cool capabilities like automatic code splitting and pre-fetching data, to name but a few.
Key Takeaways
Hasta Pronto Amigos!