I’ve been keen to get my teeth into another project recently, but was struggling with motivation to do any coding outside of work. This is obviously completely fine! I’ve learned my lesson on trying to do everything at once (although I do need reminders sometimes…)
Whilst Matt and I were on one of our daily walks recently, we got talking about Next.js and React (as you do as #techcouples 😂) our conversation inspired me to do this – rebuild my portfolio website, PaulineNarvas.com on Next.js.
I’ve had “clean up portfolio” on my todo list for a while, but I never actually got round to doing it. My recent craving to do some coding project and learning led me to just start!
So here we are.
PaulineNarvas.com in 2017
For a bit of background, my website was initially built in 2017 as I was trying to get it off the ground in time for my job search after university.
I had been teaching the “Introduction to Web Development” course with Code First: Girls for years so I decided to just go ahead with a simple HTML website, using CSS, a little bit of Javascript and good ‘ol Bootstrap. That’s all it really needed to be anyway!
As someone who did not do a Computer Science degree and ended up in tech, one of my key values is keep it as simple as possible. This is super important to me.
My site has gone through iterations since then. For example, I built a speaking page as my speaking “portfolio” started to grow and updated the site over time as I got involved in new projects.
Thanks for all the feedback everyone 😊 I made a few changes based on them – they’ve been super useful! (Especially from @jaredallard!) pic.twitter.com/4UzZFbem2d
— Pauline P. Narvas (@paulienuh) September 6, 2017
I’m not sure if it’s just me though – eventually I started to find scrolling through my large HTML file and CSS file quite exhausting whenever I wanted to change things. It felt bloated with Bootstrap and not to mention my code was just so messy.
I’ve been learning React and Next.js since last year (rebuilding Pawlean 2.0 and creating food-list at a hackathon) and I’m still amazed by how nice it is. So for this project, I decided to make the most out of my learning and re-develop my site with Next.js. With features like Static Generation for pre-rendering, I was hooked.
It was time for a rewrite… which brings me to the beauty that is Next.js!
Initial steps: the set-up
GitHub – setting up a repo
I started where all great projects start… by creating a new repo – full of hope and promise! The next few weeks of development was going to be fun. If you’re interested, you can find the code to this project on my GitHub profile here.
Setting up Next.js
When I first discovered the create-react-app one line command, I was blown away. It’s all well and great going through tutorials, but sometimes getting your hands dirty by playing around with the code is the best way to learn! It’s what helped me when I started learning.
Next.js also has a one line command that allows you to get started with your project straight away! As the documentation states, run npx create-next-app on your command line. This is the fastest way to get started but you can also go through the manual setup if you’d prefer. https://nextjs.org/docs/getting-started
For my project, I’m using npm. So when I want to get a development build on my local machine, I run npm run dev. I head over to http://localhost:3000 and my fresh Next.js app is ready to go!
Editing the first page: index.js
When you first create your Next.js app, if you head over to your index.js file you’ll see some “welcome to Next.js” content which you can go ahead and remove and replace with your own stuff.
How about start with a simple heading that says “Hello World”? I recommend having your browser and code editor side by side as you’re developing, seeing the changes in real time without refreshing your browser is probably the coolest thing ever.
Creating _app.jsx
This _app.jsx file wasn’t in my folder initially, so I had to create it under /pages. What is the _app.jsx file, you ask?
As stated in the Next.js documentation:
“Next.js uses the App component to initialise pages. You can override it and control the page initialisation. Which allows you to do amazing things like:
- Persisting layout between page changes
- Keeping state when navigating pages
- Custom error handling using componentDidCatch
- Inject additional data into pages
- Add global CSS”
The bit I was interested in was the persistent layout between pages. In my original design, I didn’t have a footer but I was warming up to having one with some social media icons.
Rebuilding process
My key objective in this whole rebuild was to use what I had learned about React and Next.js over the year or so and apply it!
I planned on transforming each section into components and anything is reusable making the most of the .map method that I picked up from different projects.
In terms of design, wanted to keep as much of the original design as possible.
Floating header
- I had this idea from my current blog design. I liked how when you scrolled, it was always there! In this case, I’ve made my social media accounts and email easily accessible to the user so if they’re interested in learning more then they can do that.
- The icons are from Font Awesome as usual, but this time I just used the SVG file and put it into a component rather than importing the font awesome package. I thought it was much easier to do it this way!
Recent Projects under “Dev” section
- I wanted to change this up a bit, so decided to create this “cards” for each of my recent projects.
- I also added a new “view more” button that leads to my GitHub profile rather than list all of the projects I’ve ever done – I thought that it was much of a cleaner look. This view more button is a reusable component that I use but just change the link in each section.
Projects under all the other columns
- Added more images for my graduate scheme projects. But this space is also a lot more structured – using flexbox that helps keep everything in place regardless of the screen size.
- Unlike the original code, I’ve made use of the .map method for the list of projects and features. You can read more about this method here but it essentially just made adding the content much easier. I didn’t have to re-write each heading 3, image, p tags!
Key Contributions
- I wanted this to stand out a bit more for each section, so I put it into a box to really pop out of the page.
Speaker section – pop out
- Unlike my previous site, I decided to have a drop down pop out table that shows all my talks. So much cleaner!
Features
- I didn’t like how the features section looked before, I found that especially on Desktop it looked quite cluttered.
- So this time round, I used images where on-click it lists out the different features to organise this section. Yes, I could’ve developed the title with code but I just threw it on Photoshop instead 😆 I didn’t want to faff about!
Other
- I used this component by dirtyredz for a snazzy “Back to Top” button. Again, this was something I could’ve built myself, but when I saw this one that someone had already done, I thought – why not? 😝
- I actually struggled a lot with making the website responsive, I have a mix of CSS grid and Flexbox at the moment and it works. CSS is difficult, yo. 🤣
- To improve accessibility, performance, SEO and best practices , I went through my Lighthouse score and web accessibility test. I reached out to Tech Twitter for some advice to help with my performance score. I used react-lazy-load-image-component and next-optimized-images!
Ok, I’ll take a break now 😂
— Pauline P. Narvas (@paulienuh) June 21, 2020
Optimising my images to webp format, cleaning up unused Javascript and CSS did the trick ✨ pic.twitter.com/f6r0kDV8DL
Deploying on Vercel
Using Vercel
For those who don’t know:
“Vercel is a cloud platform for static sites and Serverless Functions that fits perfectly with your workflow. It enables developers to host Jamstack websites and web services that deploy instantly, scale automatically, and requires no supervision, all with no configuration.”
If you’ve ever played around with Heroku, that’s basically what Vercel is but better. The whole process of importing my “nextpn” repo from GitHub and “linking it up” was as smooth as my favourite peanut butter.
Every time I deployed new changes to master, it just worked. 👏 No headaches, no faffing around trying to fix configs…it just worked. As a developer, this is a dream!
The switch
I followed this well-written document on Vercel (gotta love good documentation) which clearly explained how I would add my Namecheap domain onto Vercel and what to do with my DNS records to point PaulineNarvas.com to my new and improved Next.js website.
I did experience a bit of delay getting the whole thing to switch (mostly because I’m impatient 😆) Clearing my cache and flushing my DNS helped speed up the process!
Overall, I had so much fun doing this rebuild project. There’s always no better feeling than building and shipping your own projects, it’s a rush that I can’t get over. Anyone else feel the same? 🙋🏻♀️
Especially when using modern tools that just work. Next.js and vercel did that for me and I can’t advocate giving this combo a go, it’s been a fantastic experience. 🔥
Let me know if you have any questions about anything I covered today, and have fun building 🛠
Leave a Reply