Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/sarthak-0-sach/reactjs-portfolio-website
Nothing much just a personal portfolio website built using React.js. The portfolio highlights your education, experience, projects, and skills in a modern, visually appealing format. It includes responsive design, reusable components, and efficient code architecture.
https://github.com/sarthak-0-sach/reactjs-portfolio-website
beginner-friendly-frontend-project emailjs-react interactive-visualizations javascript-react portfolio-website reactjs responsive-web-design sleek-animations
Last synced: 28 days ago
JSON representation
Nothing much just a personal portfolio website built using React.js. The portfolio highlights your education, experience, projects, and skills in a modern, visually appealing format. It includes responsive design, reusable components, and efficient code architecture.
- Host: GitHub
- URL: https://github.com/sarthak-0-sach/reactjs-portfolio-website
- Owner: SartHak-0-Sach
- License: mit
- Created: 2024-10-30T05:55:07.000Z (about 2 months ago)
- Default Branch: main
- Last Pushed: 2024-11-17T08:01:10.000Z (about 1 month ago)
- Last Synced: 2024-11-17T09:17:19.980Z (about 1 month ago)
- Topics: beginner-friendly-frontend-project, emailjs-react, interactive-visualizations, javascript-react, portfolio-website, reactjs, responsive-web-design, sleek-animations
- Language: JavaScript
- Homepage: https://itsmesarthak.netlify.app/
- Size: 2.15 MB
- Stars: 1
- Watchers: 1
- Forks: 0
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# Personal Portfolio Website 🌐
## 📋 Table of Contents
1. [🤖 Introduction](#-introduction)
2. [⚙️ Tech Stack](#%EF%B8%8F-tech-stack)
3. [📂 Project Structure](#-project-structure)
4. [🔋 Features](#-features)
5. [🤸 Quick Start](#-quick-start)
- [Prerequisites](#prerequisites)
- [Cloning the Repository](#cloning-the-repository)
- [Installation](#installation)
- [Running the Project](#running-the-project)
7. [🔗 Links](#-links)
8. [🚀 More](#-more)
## 🤖 Introduction
This project is a **personal portfolio website** built using **React.js**. The portfolio highlights your education, experience, projects, and skills in a modern, visually appealing format. It includes responsive design, reusable components, and efficient code architecture.
## ⚙️ Tech Stack
| Technology | Purpose |
|--------------------|----------------------------------------------|
| **React.js** | Frontend framework for building UI |
| **Vite** | Modern development server for React projects |
| **CSS** | Styling the website |
| **ESLint** | Code quality and linting |
## 📂 Project Structure
The project follows an organized file structure:
```
src
├── components
│ ├── Card
│ │ ├── EducationCard.jsx
│ │ ├── ExperienceCard.jsx
│ │ └── ProjectCard.jsx
│ ├── Contact
│ │ └── index.jsx
│ ├── Education
│ │ └── index.jsx
│ ├── Experience
│ │ └── index.jsx
│ ├── Footer
│ │ └── index.jsx
│ ├── HeroBgAnimation
│ │ ├── HeroBgAnimationStyle.jsx
│ │ └── index.jsx
│ ├── HeroSection
│ │ └── index.jsx
│ ├── Navbar
│ │ └── index.jsx
│ ├── ProjectDetails
│ │ └── index.jsx
│ ├── Projects
│ │ └── index.jsx
│ └── Skills
│ └── index.jsx
├── data
│ └── constants.js
├── images
│ ├── favicon.jpeg
│ ├── heroImage.jpg
│ ├── heroImage2.jpg
│ └── heroImage3.jpg
├── utils
│ └── Themes.js
├── App.css
├── App.jsx
├── main.jsx
├── .eslintrc.cjs
├── .gitignore
├── LICENSE
├── README.md
├── index.html
├── package-lock.json
├── package.json
└── vite.config.js
```
## 🔋 Features
- **💻 Responsive Design**: Ensures optimal viewing on all devices.
- **🔄 Reusable Components**: Modular and maintainable code for scalability.
- **🖼️ Animated Backgrounds**: Engaging hero section animation using `HeroBgAnimation`.
- **📝 Detailed Sections**: Separate sections for education, experience, projects, and skills.
- **📇 Interactive Cards**: Custom `Card` components for better data presentation.
- **🎨 Theme Support**: Easily adjustable themes using `Themes.js`.
## 🤸 Quick Start
Get your portfolio up and running on your local environment by following these steps:
### Prerequisites
Ensure you have the following installed:
- **Git**
- **Node.js**
- **npm (Node Package Manager)**
### Cloning the Repository
Clone the repository with:
```bash
git clone https://github.com/yourusername/your-portfolio-repo.git
cd your-portfolio-repo
```
### Installation
Install the dependencies using npm:
```bash
npm install
```
### Running the Project
Start the development server:
```bash
npm run dev
```
Navigate to [http://localhost:5173](http://localhost:5173) to view your portfolio.
## 🔗 Links
- **Live Demo**: [Link](https://itsmesarthak.netlify.app/)
- **GitHub Repository**: [Portfolio Repo](https://github.com/SartHak-0-Sach/ReactJS-portfolio-website)
**Author**
Sarthak Sachdev
- Website - [Sarthak Sachdev](https://itsmesarthak.netlify.app/)
- LinkedIn - [Sarthak Sachdev](https://www.linkedin.com/in/sarthak2004/)
- Twitter - [@sarthak_sach69](https://www.twitter.com/sarthak_sach69)
## 🚀 More
Feel free to explore and contribute! Future updates may include new sections and more advanced animations.
**Happy coding!!** 😇👍🏻