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:
STEP 01:
Clone the Repository using GitHub link and change the directory to the developer-portfolio.
git clone https://github.com/ambrishgoswami80/github-portfolio.git
cd github-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 userData = {
githubUser: 'ambrishgoswami',
devUsername: "ambrishgoswami80",
github: 'https://github.com/ambrishgoswami',
instagram: 'https://www.instagram.com/divine.ambrish/',
linkedIn: 'https://www.linkedin.com/in/goswamiambrish/',
twitter: 'https://twitter.com/AmbrishGos76042',
stackOverflow: 'https://stackoverflow.com/users/16840768/ambrish-goswami',
leetcode: "https://leetcode.com/Ambrishgoswami/",
resume: "https://drive.google.com/file/d/1-e5tfmd6SO48jAEaSOp1P1uMZAMEyeiB/view?usp=drive_link",
skills: ['React', 'NodeJS', 'React', 'Express', 'NextJS', 'MySql', 'MongoDB', 'AWS'],
timezone: '+6'
};
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_GTM = ""
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
Disclaimer: In this repository, I have used some open-source APIs. All credits go to the owners of those repositories.
Top comments (8)
Hi, @ambrishgoswami80 the live URL link doesn't seem to work. You can use the Link (CMD + K or CTRL + K) feature in dev.to to insert your URL.
Thanks give right suggestion
This hardly looks good, let alone professional. Readability is the first priority of a professional portfolio.
If you want a modern attractive one, you need to create a design style keeping in view the standard approaches. Too flashy or unreadable portfolios are not recommended if you're looking for a job. For creative works, sky is the limit for graphics and animations but readability should not be compromised.
If the approach is creative, then you need to emphasize on what you are capable of creating or advertising to create. Just putting in a bunch of neon animated GIFs or gradient borders isn't going to cut it.
And another thing, do not use
vw
andvh
to scale texts and relative objects. Use percentage andrem
orem
. You'll notice your current website doesn't respect desktop mode on mobile devices.Cool! You can add it here - Awesome-Dev-Portfolios
Cool repo!
How can I tell if my portfolio is awesome enough 🥲
bestcodes.dev
Beautiful portfolio... Love the project section animation ❤️
Points to improve (personal view):
Thanks for share your project with us. Good work!
Nice portfolio check mine out
Are you aware that your link that the repo you are telling people to clone doesn't exist
Some comments may only be visible to logged-in visitors. Sign in to view all comments.