Personal Portfolio Website

A clean, beautiful and responsive portfolio website!

Just change src/portfolio.js to get your personal portfolio. Customize portfolio theme by using your own color scheme globally in the src/styles/index.scss file (change root for light theme and data-theme="dark" for dark theme). Feel free to use it as-is or personalize it as much as you want.

If you'd like to contribute and make this much better for other users, have a look at Issues.

Created something awesome for your fork of the portfolio and want to share it? Feel free to open a pull request.

Table of Contents

• Todo
• Getting Started
• How to Use
• Customize
• Deployment
• Technologies Used
• Icons
• For the Future

Todo

complete:
✔️ Summary and About me
✔️ Projects
✔️ Contact
✔️ Theme toggle
✔️ Background Particles
in work:
❌ Education

To view a live example, click here.

Getting Started

These instructions will get you a copy of the project up and running on your local machine for development and testing purposes.

You'll need Git and Node.js (which comes with npm) installed on your computer.

How To Use

From your command line, clone and run developerFolio:

# Clone this repository
git clone https://github.com/NishantJS/portfolio2.git

# Go into the repository
cd portfolio2

# Install dependencies
npm install

# Start a local dev server
npm start

Customize

- portfolio2
    - node_modules
    - public
        - CNAME  <-- edit if you are using your own domain or remove it.
        also remove all the files here except index html. go to any favicon generator online and paste your own icons here

    - src
        - assets  <-- change png images to your project screenshots
        - styles
            - index.scss <-- change theme colors
        -comonents
            - About.tsx <-- change about information and cv link
            - ContactData.tsx <-- change your social links
            - ProjectData.tsx <-- change project data
    - .gitignore
    - package-lock.json
    - package.json
    - README.md
    - tsconfig.json

> ProjectData.tsx
export const ProjectData = [
  {
    title: "Buddy FrontEnd", //<-- project title
    imgd: BuddyDark, //<-- image for dark mode
    imgl: Buddy, //<-- image for light mode
    repo: "https://github.com/NishantJS/Buddy-Frontend", //<-- github repository url
    desc: "Buddy is an E-Commerce site for pet care products.", //<-- project description
    live: "https://www.buddyshop.in" //<-- project live version url if hosted anywhere
  }
];

> ContactData.tsx
export const ContactData = [
  {
    title: "E-mail", //<-- social media name
    icon: <Email />, //<-- image icon for the same
    handle: "nishantchorge79@gmail.com", //<-- handle for the same
    link: "mailto:nishantchorge79@gmail.com" //<-- html link prefix if not url i.e. mailto: if email, tel: if number
  }
];

> main.scss
&::after {
  content: "N"; <-- change the big N displayed on body to your initial
  left: 0;
  top: 0;
  position: absolute;
  font-size: 20vw;
  opacity: 0.02;
  z-index: 0;
}

Router

I have used HashRouter but u can use BrowserRrouter with basename property if u prefer or feels the generated url is not user friendly. i.e sitename.domain/#/route instead sitename.domain/route

Deployment

When you are done with the setup, you should host your website online. I highly recommend to read through the Deployment docs for React.

Deploying to GitHub Pages

This section guides you to deploy your portfolio on GitHub pages.

• Navigate to package.json and enter your domain name instead of https://nishant.social in homepage variable. For example, if you want your site to be https://<your-username>.github.io/portfolio2, add the same to the homepage section of package.json.

• In short you can also add /portfolio2 to package.json as both are exactly same. Upon doing so, you tell create-react-app to add the path assets accordingly.

• If you do add /portfolio2/ and using BrowserRouter instead HashRouter set the basename as /portfolio2. for HashRouter u don't have to do anything.

• Optionally, configure the domain. You can configure a custom domain with GitHub Pages by adding a CNAME file to the public/ folder.

• Follow through the guide to setup GitHub pages from the official CRA docs here.

Deploying to Github pages

For more information, read hosting react app.

• If all steps are complete u can run npm run deploy command to create a product code and push it to github pages for deployment.

Technologies Used

• react
• sass
• react-router-dom v5
• react-tsparticles
• typescript

Icons

• Iconscout

For the Future

If you can help me with these. Please don't hesitate to open a pull request.