DEV Community πŸ‘©β€πŸ’»πŸ‘¨β€πŸ’»

DEV Community πŸ‘©β€πŸ’»πŸ‘¨β€πŸ’» is a community of 963,673 amazing developers

We're a place where coders share, stay up-to-date and grow their careers.

Create account Log in
Cover image for Free Next.js Portfolio Template
Lasha Kakabadze
Lasha Kakabadze

Posted on • Updated on

Free Next.js Portfolio Template

Introduction

If you're a developer, it's important for you to have a personal portfolio website – especially when you're applying for jobs.

After a few months of development, I have finally put together a multi-themed website that will greatly increase your chances of getting attention from recruiters.

Here is a link to my portfolio - https://www.adrinlol.com/

You can download the source code for free- https://adrinlol.gumroad.com/l/cHsGL

You will find a detailed documentation inside the README fille on how to setup, make changes and run this website.

About the project

This template has several API calls, that is handled by the SWR (stale-while-revalidate), the list includes:

  • Medium's API to display my personal articles in this project.

  • Spotify's API to show the current track as well as display my top 20 songs of the week.

  • GitHub's API to highlight most popular of my open-source projects.

Technology stack

As for the technologies, here is a full list of libraries I'm using for this project:

  • Next.js

  • styled-components

  • swr

  • react-transition-group

Lighthouse results

It should come with no surprise that Next.js coupled with SWR is blazing fast, and the results are no surprise.
Image description

Top comments (17)

Collapse
 
Sloan, the sloth mascot
Comment deleted
Collapse
 
adrinlol profile image
Lasha Kakabadze Author • Edited on

Hey Savio, I didn't copy his template. My portfolio is using completely different stack , the only thing it has common with Leerob's website is the design of main page, which isn't a direct copy either.

But thank for the feedback.

P.S. This template is also free? That's the whole point of me posting it here.

Collapse
 
saviomartin profile image
Savio Martin

You can atleast give a shoutout to him as inspiration.

Thread Thread
 
adrinlol profile image
Lasha Kakabadze Author

It's included both in the source code as well as in the gumroad link.

Thread Thread
 
theindianappguy profile image
Sanskar Tiwari

this is paid now

Collapse
 
rychillie profile image
RychillieπŸ¦„βš›

@saviomartin you're right! He copied it hard!

Collapse
 
zvirinz profile image
Dzmitry Sviryn • Edited on

never mind

Collapse
 
maulanarifai114 profile image
Raden Maulana Rifa'i Abdullah

lol

Collapse
 
jessycormier profile image
Jessy

Thank you so much for sharing. I'm taking a couse for UX Design and one of the things we have to do is create a portfolio website. I'm a front-end dev so naturally I want to build one rather than using a website builder. I love the transitions you've added for navigation and some other general design feel you got so again, thanks for sharing!

Collapse
 
adrinlol profile image
Lasha Kakabadze Author • Edited on

Thank you so much Jessy,

I plan on sharing the snippet of the code that handles the navigation between pages.

If you want to see my inspiration for building this portfolio, check out these websites:

leerob.io/

overreacted.io/

sebastienlorber.com/

Collapse
 
hajhosein profile image
Hosein Pouyanmehr

This is a nice minimal template.

By the way, you can check out my new nextjs template if you wanna create a larger portfolio or personal blog in this post.

Collapse
 
_dragos profile image
Dragos Stancu

Of course your site scores high with Lighthouse. You have ONE image! :)

What I'm looking to build is a Wordpress Theme that uses Next.js.
For an eCommerce website like this ellevetsciences.com.

Cheers!

Collapse
 
suleman1220 profile image
Suleman Tariq

is it me or this isn't free anymore?

Collapse
 
insidiousthedev profile image
Insidious

it's still free m8, just enter 0 in the box above I want this!

Collapse
 
adrinlol profile image
Lasha Kakabadze Author

The Template was, is and will always be free.

Collapse
 
jenniekibiri profile image
jenny

Thanks, Lasha! definitely got my portfolio inspiration

This post blew up on DEV in 2020:

js visualized

πŸš€βš™οΈ JavaScript Visualized: the JavaScript Engine

As JavaScript devs, we usually don't have to deal with compilers ourselves. However, it's definitely good to know the basics of the JavaScript engine and see how it handles our human-friendly JS code, and turns it into something machines understand! πŸ₯³

Happy coding!