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.
- Key Features
- Technologies Used
- Getting Started
- Personalizing the Project
- Hosting on GitHub
- Helpful Websites
- Contributing
- License
- Contact
- 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.
- 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.
- Node.js (v12.x or later)
- Clone the repository:
git clone https://github.com/NJITCDS/Personal-Website-Template.git
- Navigate to the project directory:
cd Personal-Website-Template
- Install the dependencies:
npm install
- Start the application:
npm start
- Open your browser and navigate to
http://localhost:3000
.
- 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 ofindex.html
. - Update the website title in
index.html
at line 9.
- Change the profile photo or logo by replacing
-
Home Section Name and Introduction (
./src/App.js
)- Update your name at line 31 and introduction at line 34 in
App.js
.
- Update your name at line 31 and introduction at line 34 in
-
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 inApp.js
.
- Find and customize an animation from LottieFiles and save the
-
Home Section Connection Links (
./src/components/Connect.js
)- Update your LinkedIn, GitHub, and resume links in
Connect.js
.
- Update your LinkedIn, GitHub, and resume links in
-
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 inNavbar.js
.
- Replace
-
Skills Section (
./src/components/Skills.js
)- Edit the
skillsSection
constant at line 8 inSkills.js
to update your skills and their icons.
- Edit the
-
Education and Experience (
./src/components/Education.js
,./src/components/Experience.js
)- Update your education details in the
education
constant at line 3 inEducation.js
. - Update your experience details in the
experience
constant at line 3 inExperience.js
.
- Update your education details in the
-
Projects (
./src/components/Projects.js
)- Add your projects to the
projects
constant inProjects.js
. - Recommended Image Ratio: For best results, use images with a 16:9 ratio for project screenshots.
- Add your projects to the
-
Contact Section (
./src/components/Contact.js
)- Update your email, Formspree endpoint, and Google Maps iframe code in
Contact.js
.
- Update your email, Formspree endpoint, and Google Maps iframe code in
-
Add homepage to
package.json
:"homepage": "https://myusername.github.io/my-app",
Replace
myusername
with your GitHub username andmy-app
with your repository name. -
Install
gh-pages
:npm install --save gh-pages
-
Deploy the site:
npm run deploy
-
Configure GitHub Pages:
- Go to your repository settings on GitHub.
- Select
Pages
from the menu. - Ensure the branch is set to
gh-pages
.
- 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.
Contributions are welcome! Please follow these steps to contribute:
- Fork the repository.
- Create your feature branch:
git checkout -b feature/AmazingFeature
- Commit your changes:
git commit -m 'Add some AmazingFeature'
- Push to the branch:
git push origin feature/AmazingFeature
- Open a pull request.
This project is licensed under the MIT License. See the LICENSE file for details.
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.