Developer Portfolio 🔥

A clean, modern and responsive dev portfolio using Tailwind CSS & Next JS

BUILT BY MR JUICE

Best WebTemplete

This is official repository maintained by Mr Juice

INSTAGRAM ❤️

SUBSCRIBE YOUTUBE❤️

---

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 🚀

don't click here

Technologies Used 🖥️

• Next.js
• Tailwind CSS
• React
• Email JS
• Framer Motion
• Iconify

Getting Started

# Clone this repository
git clone https://github.com/mrjuice01/portfolioweb.git

# Go into the repository
cd portfolioweb

# 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

Customize according to your need.

Personalize page content in src/mock/profile.js & modify it as per your need.

export const SOCIAL_LINKS = [
  {
    link: 'https://instagram.com/mr_juice7',         // <--- Social handle Link
    icon: 'akar-icons:instagram-fill',          // <--- Iconify Icon name
  },
  {
    link: 'https://github.com/mrjuice01',
    icon: 'akar-icons:github-fill',
  },
  {
    link: 'https://youtube.com/in/mrjuiceofc',
    icon: 'akar-icons:youtube-fill',
  },
];

export const HERO_TITLES = ['Mr Juice', '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 = 'mrjuice017|@gmail.com';

export const documentTitle = 'Hello I am Mr Juice | Full Stack Developer | Software dev'

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.

For the Future

If you want to add more, Please don't hesitate to open a pull request.

---

Support

Mr Juice
Author