As a software developer, it's important to have a robust portfolio website that can display our abilities and experiences. To assist other developers, I have designed a portfolio website using Next, Tailwind CSS, and EmailJS. In this article, I will provide a step-by-step guide on the setup process, along with the GitHub link.
Here is the live preview:
Live preview url
STEP 01:
Clone the Repository using GitHub link and change the directory to the developer-portfolio.
git clone https://github.com/said7388/developer-portfolio.git
cd developer-portfolio
STEP 02:
Now install all packages using npm or yarn.
npm install
# or
yarn
After installation, all packages, Now change all data on utils/data/* according to you. For example:
export const personalData = {
name: "ABU SAID",
profile: "/profile.png",
designation: "Full-Stack Software Developer",
description: "My name is ABU SAID....",
email: "abusaid7388@gmail.com",
phone: "+8801608797655",
address: "Dhaka, Bangladesh",
github: "https://github.com/said7388",
facebook: "https://www.facebook.com/abusaid.riyaz/",
linkedIn: "https://www.linkedin.com/in/abu-said-bd/",
twitter: "https://twitter.com/said7388",
stackOverflow: "https://stackoverflow.com/users/16840768/abu-said",
leetcode: "https://leetcode.com/said3812/",
devUsername: "said7388",
resume: "...",
};
The devusername properties replace it with your dev.to username and it will fetch all blogs from your dev.to website.
STEP 03:
Now we will make a .env file and set up our Email.JS credential in a .env file. I am using EmailJs in this project for the user to send mail to me and It's free. The .env file will be the following:
NEXT_PUBLIC_EMAILJS_SERVICE_ID =
NEXT_PUBLIC_EMAILJS_TEMPLATE_ID =
NEXT_PUBLIC_EMAILJS_PUBLIC_KEY =
First of all, go to Emailjs.com and sign up for an account.
Make a email service using Gmail and take the Service ID and add it .env file as REACT_APP_YOUR_SERVICE_ID value.
Then make a Email template and take Template ID from the template setting and use it .env.
Then go to Account and take Public Key and use it in .env.
STEP 04:
Now the portfolio website is ready for the run. You can run it using npm or yarn.
npm run dev
# or
yarn dev
If you like the portfolio project Please give it a star on the GitHub Repository.
You can connect with me on Linkedin: https://www.linkedin.com/in/abu-said-bd/
Top comments (49)
Hey there!
It was pointed out to us that this design is really quite similar to that of codewithmosh.com/
If you're using that site as inspiration for your portfolio, would you please add mention of it to your post as a reference?
Hello Michael!
Inspiration for the only hero section on my portfolio website was taken from Code with Mosh. However, the remaining 6 sections are unique in concept.
Hey Abu!
Totally understand your point. That said, I still think you should probably give Code with Mosh credit for the partial inspiration though, you know? You could always point out that they just inspired the hero section and design colors.
For instance, the DEV Code of Conduct has an attribution section even though it doesn't directly copy these sources. It's just a good practice — it's a great way to show appreciation for the things that directly inspired you. No one will fault you for including attribution, but they might if you exclude it, so why not add it?
Hey man sorry but that is not right, there is a line between "inspiration" or just copy assets like github.com/said7388/developer-port...
The thing is you are even putting it on a repo when the original author didn't even open source it, so is not only Immoral but also illegal.
Is not only about code copyright but also design copyright. Mosh site have a branding an palette of colors based on it.
Unless you have Mosh direct permission to do it of course.
It really isn't. This is a total myth
It's not a myth at all. In particular, if you're a junior, the project is a big bonus for being invited to an interview. So, if your website doesn't work smoothly, it means you don't understand your profession well. For the company, it is better to look at other candidates.
Not true at all.
I've been a professional developer for approximately 30 years, and have been interviewing candidates for about 10.
The majority of the best developers I've interviewed or hired have not had portfolio websites.... and the majority of developers who have had portfolio websites turned out to be the weakest candidates. For some candidates, the main factor in rejecting them was actually their portfolio site itself (browser errors, over-engineering, inappropriate use of technology etc). Without the site, they would likely have gotten further in the interview process.
Much better to have an interesting, unvarnished, active GitHub (or similar) account. This tells a prospective employer way more about your skills and passion than a curated vanity project ever can.
Maybe another 30 years and you will find out that first, you need to pass the HR selection :)
Well, you see. It saved a lot of time and money for you and the company.
Hahaha, yeah.
The problem in a lot of companies is non-technical HR people being involved in the hiring of technical candidates. They're often blinded by sparkly nonsense, resulting in the rejection of a lot of the best candidates, and the wasting of time by the continued consideration of poor candidates.
When I'm sifting through potentials I look for a GitHub too because I'd rather see real code over a portfolio site.
But before candidates make it to me a non-technical person removes all candidates that don't mention certain keywords in their resume or don't have a GitHub or portfolio link.
My advice would be, making a good portfolio won't hurt your chance of getting shortlisted but making a bad one sure will.
Cool portfolio Said! what do you think of mine? wiscaksono.com/
Your portfolio also cool 😎
Hi,
I like the idea of the coding activity section, is it being filled automatically with some extension in your editor? Could be more helpful with one month and one year durations (I'm not an expert, just a suggestion)
The projects section also looks neat, though the sub sections seem to be empty, e.g. wiscaksono.com/projects?tag=next
This is showing me an empty list although you do have Next projects
Hi @lightning1377,
Thanks for the suggestion! about the coding activity section, yes it will fill automatically with the extension, am using WakaTime for it
Amazing site... Much better
can I ask how many years of experience you have?
3 years
Your Portfolio is amazing ⚡️
Awesome Portfolio how can i build one like that. I like the electron project and the sense of humor when you click the animated eyes
amazing job! however on mobile (ff) I see only blank pages on wiscaksono.com/projects?tag=next and the other sections.
fixed! thanks for letting me know
Good initiative, however I think that equal websites are not very good for both sides!
By the way, I like the design of your website! Its very simple to work, and gives a personal touch.
I made a Website Portfolio too! Its not finished, but the main things that I want to add are finished.
Your portfolio also cool 😎
I'm truly impressed by the professionalism and elegance of this portfolio! It's unlike any I've seen before, with a stunningly polished UI that truly sets it apart.
Thank you
Great colour choice especially the blurred borders are really good. I thought the project section wasn't rendered, but later on recognised that it was meant to be like that. Good creativity.
Btw, check out mine
Vera maari 🔥
Haha...nanri bro 😅🙏🏻
it is nice to see someone from BD . I loved your work brother.Btw if you dont mind , i have some question, you probably not studied csc in NSU but self taught.So how are u getting job right now, actually i am struggling with this situation of mine...it will be helpful if you provide info
I tried running it on my vscode
I guess there was an error
this is a good one
this is the error I encountered after running
npm run devcommand
I got inspiration/motivation from his repository and did my own with custom information and little modifications in the code. Also, I enhance the performance of the page: can check here if you need it: github.com/patrickcsk1/portfolio
hey, were you able to fix this error?
even i am getting the same error, please do share how to fix it.
It's a good-looking portfolio. Nice design. From a content perspective, consider including links to your projects in your portfolio. Seeing your work in action will be far more impressive to prospective employers.
Also, it would be helpful to include a description of each app's functionality. As is, descriptions like "Me and my team built an AI-powered financial mobile application" don't really explain anything further that isn't in the title ("AI Powered Financial App").