Welcome to Hassaan Portfolio 👋
The primary goal of this project is to convert the existing portfolio into a Vite + React website using Tailwind CSS for utility-based styling and Daisy UI for pre-built, responsive UI components. This will modernize the portfolio by improving both its performance and design. Below are the extended goals of the project:
-
Improved UI Interactivity:
- Build a more interactive user interface, providing an engaging and seamless user experience.
- Implement smooth animations and transitions using React and Tailwind CSS.
- Develop dynamic components like modals, carousels, and galleries with Daisy UI, making the site more interactive and user-friendly.
- Ensure the UI is fully responsive, providing optimal viewing across all devices, from mobile to desktop.
-
Visually Stunning Design:
- Use Tailwind CSS and Daisy UI to create a modern, aesthetic design.
- Incorporate custom themes and color schemes to create a unique look and feel for the portfolio.
- Ensure the UI components maintain a consistent design language, promoting a clean and professional look across the website.
-
Enhanced User Experience (UX):
- Improve the navigation flow with intuitive page transitions and well-structured menus.
- Implement interactive feedback like hover effects, button animations, and form validations for a responsive feel.
- Optimize performance and loading speeds using Vite's fast build and development tools, ensuring a smooth user experience.
-
Scalability and Maintainability:
- Leverage React’s component-based architecture to make the project easily scalable and modular.
- Ensure the code remains clean and maintainable, making it easier for future contributors and adding new features without hassle.
By focusing on these goals, the Hassaan Portfolio will provide a high-quality, professional, and interactive user experience that will stand out and demonstrate modern web development techniques.
Contributions are always welcome!
We’re particularly looking for help with:
- React component refactoring: Converting static HTML to modular React components.
- Tailwind CSS integration: Replacing traditional CSS with Tailwind utility classes.
- Daisy UI: Adding responsive and interactive elements using Daisy UI components.
- UI/UX improvements: Contributions that enhance interactivity and design.
- Bug fixes and design enhancements.
This project is also part of Hacktoberfest 2024 🎉, and we encourage contributions of any size—whether you're fixing a bug or implementing a new feature.
- Fork this repository: Clone it to your own GitHub account.
- Create an issue: If you find a bug or want to suggest a feature.
- Pick an issue: Work on any of the open issues or create your own.
- Submit a pull request (PR): Once you're done, submit your changes as a PR.
- Follow the contribution rules: Ensure your PR follows our guidelines and adds value to the project.
- Meaningful contributions: Ensure your PR brings value to the project (e.g., refactoring components, UI improvements).
- Contributions should be well-documented.
- Ensure your PR adheres to our Code of Conduct.
- Stick to our project goals (React, Tailwind CSS, Daisy UI) when making updates.
We have a list of open issues ready for contribution. Feel free to check out our issues here and choose one that matches your skill set.
To contribute to this project, follow these steps to install and run it locally:
npm i
npm run devExplore the codebase and help us transition the project to Vite + React + Tailwind CSS + Daisy UI.
| Languages | NPM Packages |
|---|---|
| HTML | Vite |
| CSS | React |
| Javascript | Tailwind CSS |
| React | Daisy UI |
| ... | gh-pages |
Please adhere to our [Code of Conduct](link to your code of conduct file). We expect everyone to be respectful, collaborative, and follow community guidelines.