Personal Website Template

Welcome to the Personal Website Template! This web app is designed to help you create a personalized website easily. It's particularly useful for computer science students, freshers, software professionals, data professionals, and anyone else looking to showcase their work and profile. The template is built using React.js, HTML, CSS, and JavaScript.

Table of Contents

1. Key Features
2. Technologies Used
3. Getting Started
   • Prerequisites
   • Installation
   • Running the Project
4. Personalizing the Project
   • Changes in the ./public Folder
   • Changes in the ./src Folder
5. Hosting on GitHub
6. Helpful Websites
7. Contributing
8. License
9. Contact

Key Features

• Customizable Home Section: Personalize your name, introduction, and animation.
• Skills Showcase: Display your skills with customizable icons and animations.
• Education and Experience: List your educational background and professional experience.
• Projects Section: Highlight your projects with screenshots and links.
• Contact Form: Simple contact form with Formspree integration.
• Responsive Design: Optimized for desktop and mobile devices.

Technologies Used

• React.js: For building the user interface.
• HTML: For the structure of the web pages.
• CSS: For styling the application.
• JavaScript: For interactivity and functionality.
• Node.js: Required to run the development server for the frontend application.

Getting Started

Prerequisites

• Node.js (v12.x or later)

Installation

1. Clone the repository:

   git clone https://github.com/NJITCDS/Personal-Website-Template.git

2. Navigate to the project directory:

   cd Personal-Website-Template

3. Install the dependencies:

   npm install

Running the Project

1. Start the application:

   npm start

2. Open your browser and navigate to http://localhost:3000.

Personalizing the Project

Changes in the ./public Folder

• Website Icon and Title (./public/index.html)
  • Change the profile photo or logo by replacing avatar.png in the ./public folder and update the reference in line 6 of index.html.
  • Update the website title in index.html at line 9.

Changes in the ./src Folder

• Home Section Name and Introduction (./src/App.js)

  • Update your name at line 31 and introduction at line 34 in App.js.

• Home Section Animation (./src/App.js)

  • Find and customize an animation from LottieFiles and save the .json file in ./src/components/animations. Reference the file at line 42 in App.js.

• Home Section Connection Links (./src/components/Connect.js)

  • Update your LinkedIn, GitHub, and resume links in Connect.js.

• Nav Bar Profile Image/Logo (./src/components/Navbar.js)

  • Replace avatar.png in the ./src/components/images folder and update the reference at line 17 in Navbar.js.

• Skills Section (./src/components/Skills.js)

  • Edit the skillsSection constant at line 8 in Skills.js to update your skills and their icons.

• Education and Experience (./src/components/Education.js, ./src/components/Experience.js)

  • Update your education details in the education constant at line 3 in Education.js.
  • Update your experience details in the experience constant at line 3 in Experience.js.

• Projects (./src/components/Projects.js)

  • Add your projects to the projects constant in Projects.js.
  • Recommended Image Ratio: For best results, use images with a 16:9 ratio for project screenshots.

• Contact Section (./src/components/Contact.js)

  • Update your email, Formspree endpoint, and Google Maps iframe code in Contact.js.

Hosting on GitHub

1. Add homepage to package.json:

   "homepage": "https://myusername.github.io/my-app",

   Replace myusername with your GitHub username and my-app with your repository name.

2. Install gh-pages:

   npm install --save gh-pages

3. Deploy the site:

   npm run deploy

4. Configure GitHub Pages:

   • Go to your repository settings on GitHub.
   • Select Pages from the menu.
   • Ensure the branch is set to gh-pages.

Helpful Websites

• LottieFiles: Customize and download animations.
• SVGRepo: Source for SVG icons.
• ChatGPT: AI tool for explanations, debugging, and content enhancement.
• CodePen: Experiment with HTML, CSS, and JS elements.
• CodeSandbox: Create and run React apps.
• Formspree: Handle form submissions and get email notifications.
• Crop Circle: Crop images into circles.

Contributing

Contributions are welcome! Please follow these steps to contribute:

1. Fork the repository.
2. Create your feature branch:

   git checkout -b feature/AmazingFeature

3. Commit your changes:

   git commit -m 'Add some AmazingFeature'

4. Push to the branch:

   git push origin feature/AmazingFeature

5. Open a pull request.

License

This project is licensed under the MIT License. See the LICENSE file for details.

Contact

For inquiries regarding this project, please contact:

• GitHub: Koustubh Sahu

---

Thank you for using the Personal Website Template! We hope it helps you create a stunning personal website.