Portfolio Website using React.js

Table of Contents

• Tech Stack
• Libraries used
• Screenshot
• Installation and Setup Instructions
• Source Structure
• Steps to create a React Project
• Steps to perform before writing the code
• Deployment of Website

⚙️ Tech Stack

• Javascript
• Reactjs
• React Router

Libraries used

• react-burger-menu npm i react-burger-menu
• React Router Dom npm install react router dom
• Formspree for getting the email from the contact pages.

📷 Screenshot

🔨 Installation and Setup Instructions

1. Clone the repository to your local machine

   $ git clone https://github.com<YOUR-GITHUB-USERNAME>/jyoti-portfolio.git

2. Change the working directory

   cd portfolio-jyoti

3. Install dependencies

   npm install

4. Run the app

   npm start

You are all set ✅!

Source Structure

  .
├── ...
├── src
│   ├── ....
|   |── Components          # Create a different folder for each component
│   ├── assets              # assets for the website
|   ├── index.js            # starting point
│   └── ...
└── ...

Steps to create a React Project

1. Go to the project root directory and open terminal/cmd.
2. Run npx create-react-app myportfolio
3. Install the project dependencies: npm install
4. npm start
5. Visit App localhost:3000

Steps to perform before writing the code

1. Draw a rough sketch of the website.
2. Design the wireframes and architecture of the website.
3. Finalize the React Components for each Web page.

💻 Deployment of Website using Github pages

1. npm install gh-pages --save-dev

2. Pushed the code to Github.

3. Add the following in your package.json

     "homepage" : "http://jyoti-2.github.io/portfolio-jyoti"

   // Add in the script 
   "predeploy" : "npm run build"

    // Add in the script 
     "deploy" : "gh-pages -d build"

4. npm run build

🔉 Perform the deployment stage every time if you are making changes in the codebase.

5. npm run deploy

Credits

I have followed this 🔗 Tutorial to build the project.

License

🔗

Check it Live here 🔗 link

⬆ back to top