Skip to content

✨ Developed a responsive tailwind portfolio using Tailwind CSS, Framer Motion and React showcasing a clean and modern design with optimized layouts for all devices. πŸŒŸπŸ’»

License

Notifications You must be signed in to change notification settings

MirzaAbdullahBaig/Virtual-R

Folders and files

NameName
Last commit message
Last commit date

Latest commit

Β 

History

18 Commits
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 

Repository files navigation

🌟 Tailwind Portfolio Using React With Framer Motion

A beautifully designed and fully responsive portfolio website created using React and Tailwind CSS. This project demonstrates a modern and clean design approach, optimized for various devices and screen sizes. πŸš€


πŸ”— Live Demo

Check out the live demo of this portfolio: View Portfolio


πŸ“– Features

  • React Integration: Built using React for a dynamic and component-based architecture.
  • Responsive Design: Works seamlessly on desktops, tablets, and mobile devices.
  • Modern UI: Minimalistic and professional design to leave a lasting impression.
  • Tailwind CSS: Leveraging the utility-first CSS framework for fast and efficient styling.
  • Framer Motion Animations: Added smooth and engaging animations using Framer Motion.
  • Reusable Components: Organized React components for easy scalability and maintenance.
  • Customizable: Easily adaptable to showcase your personal or professional projects.

πŸ› οΈ Technologies Used

  • React
  • Tailwind CSS
  • Framer Motion
  • HTML5
  • JavaScript (ES6+)

πŸ“‚ Folder Structure

Virtual-R/
β”œβ”€β”€ public/
β”‚   └── vite.svg      # Vite Image
β”œβ”€β”€ src/
β”‚   β”œβ”€β”€ assets/       # Reusable React components
β”‚   β”œβ”€β”€ components/   # Reusable React components
β”‚   β”œβ”€β”€ constants/    # Reusable React components
β”‚   β”œβ”€β”€ App.jsx       # Main React app file
β”‚   β”œβ”€β”€ index.css     # Tailwind CSS file
β”‚   └── main.jsx      # JavaScript functionality
β”œβ”€β”€ .gitignore
β”œβ”€β”€ LICENSE
β”œβ”€β”€ README.md         # Project documentation
β”œβ”€β”€ eslint.config.js
β”œβ”€β”€ index.html
β”œβ”€β”€ package-lock.json
β”œβ”€β”€ package.json      # Node.js dependencies
β”œβ”€β”€ postcss.config.js
β”œβ”€β”€ tailwind.config.js
└── vite.config.js

πŸš€ How to Use

  1. Clone the repository:

    git clone https://github.com/MirzaAbdullahBaig/Virtual-R
  2. Navigate to the project directory:

    cd Virtual-R
  3. Install dependencies:

    npm i
  4. Start the development server:

    npm run dev
  5. Open your browser and navigate to http://localhost:5173 to view the portfolio.


🀝 Contributing

Contributions, issues, and feature requests are welcome! Feel free to check the issues page if you have any suggestions.


πŸ“ƒ License

This project is licensed under the MIT License. Feel free to use it for your own portfolio.


Thank you for checking out this project! If you liked it,
Show some ❀️ by this repository

Email Badge Β  GitHub Badge Β  LinkedIn Badge

About

✨ Developed a responsive tailwind portfolio using Tailwind CSS, Framer Motion and React showcasing a clean and modern design with optimized layouts for all devices. πŸŒŸπŸ’»

Topics

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published