https://github.com/ada890/personal-portfolio
The portfolio website built using React.js, Tailwind CSS, and Framer Motion features a sleek and dynamic design. It uses React.js for the core structure, Tailwind CSS for responsive and minimalist styling, and Framer Motion to create engaging animations throughout the user interface.
https://github.com/ada890/personal-portfolio
emailjs framer-motion reacthottoast reactjs tailwindcss
Last synced: about 2 months ago
JSON representation
The portfolio website built using React.js, Tailwind CSS, and Framer Motion features a sleek and dynamic design. It uses React.js for the core structure, Tailwind CSS for responsive and minimalist styling, and Framer Motion to create engaging animations throughout the user interface.
- Host: GitHub
- URL: https://github.com/ada890/personal-portfolio
- Owner: Ada890
- Created: 2024-10-19T16:06:48.000Z (over 1 year ago)
- Default Branch: main
- Last Pushed: 2025-11-22T05:38:28.000Z (7 months ago)
- Last Synced: 2025-11-22T07:13:01.327Z (7 months ago)
- Topics: emailjs, framer-motion, reacthottoast, reactjs, tailwindcss
- Language: JavaScript
- Homepage: https://adarsh-dino.netlify.app/
- Size: 32.9 MB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Personal Portfolio
Welcome to my personal portfolio! This website showcases my projects, skillsets, and experience in web development, designed to create an interactive user experience.
## Description
This personal portfolio website was built using **React.js**, **Tailwind CSS**, and **Framer Motion**. It provides a smooth user experience while highlighting my skills, projects, and technical expertise. A portfolio is essential for showcasing your development journey, creative skills, and project achievements to potential employers and collaborators.
### Why is a Portfolio Necessary?
In today's competitive job market, having a portfolio is not just beneficial but crucial as it is a modern resume. It helps:
1. **Demonstrate Skills**: A well-designed portfolio showcases your technical and creative skills. It highlights your competencies in coding, design, and problem-solving, beyond what a resume can offer.
2. **Stand Out**: A portfolio sets you apart by showing practical examples of your work, real-world projects, and innovations.
3. **Visibility**: A personal website acts as a platform to highlight your presence, allowing others to contact you for opportunities or collaborations.
4. **Interactive Experience**: It provides a live, interactive space for showcasing projects, adding personality to your online presence, and reflecting your attention to detail.
## Tech Stack Used
### 1. **React.js**
React is a powerful library for building modern web applications with a component-based architecture. It was used to structure the portfolio and manage state efficiently, ensuring the website is responsive and fast.
### 2. **Tailwind CSS**
Tailwind CSS is a utility-first CSS framework. It was chosen because it simplifies styling, allowing rapid development with predefined classes. The minimalist and responsive design was easy to achieve with Tailwind's flexibility.
### 3. **Framer Motion**
Framer Motion is an animation library for React. It was utilized to enhance the website’s interactivity and give it a dynamic feel. Smooth transitions and subtle animations improve user engagement and create a polished user experience.
### 4. **JavaScript**
JavaScript was used for writing the functionality and logic behind the React components, handling events, and ensuring a seamless user experience.
### 5. **Git & GitHub**
Version control is essential for any development project. I used Git for version control, and GitHub to host and showcase the project’s source code.
## Steps to Run Locally
To run this project on your local machine, follow these steps:
1. **Clone the repository**:
```bash
git clone https://github.com/Ada890/Personal-Portfolio.git
cd Personal-Portfolio
2. **Install dependencies**: Install the necessary dependencies using npm:
```bash
npm install
3. **Run the project**: Start the development server:
```bash
npm run dev
4. **Build the project**: To create an optimized production build:
```bash
npm run build
5.**Deployment**: You can deploy the build files to any static hosting service (like GitHub Pages, Vercel, or Netlify). For GitHub Pages:
npm run deploy
## Conclusion
This portfolio website serves as a reflection of my skills, projects, and experiences in web development and design. It is not only a showcase but also a continuously evolving platform where I implement the latest technologies and improve upon my personal branding.
Feel free to explore the project, contribute, or reach out if you have any suggestions or feedback. A personal portfolio is an essential tool for any developer, allowing us to demonstrate our capabilities, stay competitive in the field, and network with potential employers or collaborators.
Thank you for visiting!
---
### Contact Me
- **Email**: adarshchoudhary890@gmail.com
- **LinkedIn**: [Profile](https://www.linkedin.com/in/adarshkumar-choudhary-04380829a/)