Developer Portfolio 🔥
A clean, modern and responsive dev portfolio using Tailwind CSS & Next JS
Just Simple and well design portfolio to showcase works and skills
- Useful for the freelancing journey 🚀. You can showcase your skills and the works you have done.
- Highly customizable portfolio. You can easily customize it as you want.
Live Demo 🚀
Technologies Used 🖥️
Getting Started
# Clone this repository
git clone https://github.com/dhavalCode/dev-portfolio.git
# Go into the repository
cd dev-portfolio
# Setup default environment variables
# For Linux
cp env.example .env.local
# For Windows
copy env.example .env.local
# Install dependencies
npm install
# Start a local dev server
npm start
Setup
- Create ENV File
- dev-portfolio
- node_modules
- public
- src
- .env <-- create it here
- env.example <-- this is the base file
- .gitignore
- package-lock.json
- package.json
// .env
EMAIL_SERVICE_ID= "YOUR SERVICE ID"
EMAIL_TEMPLATE_ID= "YOUR TEMPLATE ID"
PUBLIC_KEY= "YOUR PUBLIC KEY"
- Email JS - Sign Up
- Quick Tutorial : https://youtu.be/I4DKr1JLC50
Customize according to your need.
src/mock/profile.js
& modify it as per your need.
Personalize page content in export const SOCIAL_LINKS = [
{
link: 'https://twitter.com/dhavalCode', // <--- Social handle Link
icon: 'akar-icons:twitter-fill', // <--- Iconify Icon name
},
{
link: 'https://github.com/dhavalcode',
icon: 'akar-icons:github-fill',
},
{
link: 'https://linkedin.com/in/dhavalcode',
icon: 'akar-icons:linkedin-fill',
},
];
export const HERO_TITLES = ['Dhaval Patel', 'Full-stack Developer', 'Javascript Enthusiast'];
export const aboutParagraph =
'Highly motivated and enthusiastic Full Stack Developer with experience in designing, developing and maintaining web applications using technologies such as JavaScript, React, Node.js. ';
export const contactEmail = 'works.dhaval@gmail.com';
export const documentTitle = 'Hello I am Dhaval Patel | Full Stack Developer | Javascript Enthusiast'
Customize Project Section
/src/mock/projects.js
- change projects with yours.
Customize Skill Section
/src/mock/tech-skills.js
- change skills with yours.
- You can easily add new skill, new icon by providing iconify icon name.
- example as below:
{
label: 'Your Skill',
proficiency: '90%',
icon: 'icon', // <-- find icon from iconnify
iconClasses: 'text-3xl', // <-- add classes
}
Add more Lottie
- checkout this directory
src/mock/lottie
- You can add more lottie in
.json
format and use it.
Deploy on Vercel
The easiest way to deploy your Next.js app is to use the Vercel Platform from the creators of Next.js.
Check out Next.js deployment documentation for more details.
For the Future
If you want to add more, Please don't hesitate to open a pull request.