Welcome to my personal portfolio website! This site showcases my skills, projects, and experience as a web developer. It's built with modern web technologies to provide a seamless, interactive, and visually appealing experience for users.
Feel free to explore and learn more about my work. If you have any questions or feedback, feel free to get in touch!
This portfolio site is built using the following technologies:
- React: A JavaScript library for building user interfaces. React powers the dynamic components and page routing in this portfolio.
- pnpm: A fast, disk space-efficient package manager. I use pnpm for managing project dependencies, ensuring faster installs and efficient management of packages.
- Tailwind CSS: A utility-first CSS framework that allows for highly customizable, responsive designs with minimal custom CSS.
- React Icons: A collection of SVG icons for use in React projects, allowing me to add scalable icons quickly and easily.
- Ibelick.com: (Include a short description of how this service or tool is used in your project—such as if it’s a custom font or image service integrated into the website).
- Google Fonts: I use Google Fonts to integrate custom fonts into the design, enhancing typography and overall user experience.
- Framer Motion: A powerful library for creating animations in React. I use Framer Motion for smooth transitions and interactive animations to enhance the site's look and feel.
- Firebase: Firebase is used for backend services including authentication, real-time database, and hosting. It provides a reliable platform for managing and storing data, as well as hosting the portfolio site.
- Fully Responsive: The portfolio is designed to work on all screen sizes, from mobile phones to large desktop displays. It adapts using Tailwind CSS breakpoints and custom styles.
- Smooth Animations: Utilizing Framer Motion, elements on the page animate in and out with smooth transitions, creating a more engaging experience.
- Interactive Components: Interactive elements such as project carousels, modals, and hover effects that make the site more engaging and visually appealing.
- Real-Time Database (Optional): Firebase is used for any real-time data requirements (e.g., blog or contact form submissions), enabling a dynamic and scalable solution.
- Authentication (Optional): Firebase authentication enables user login, allowing for personalized experiences or secure sections of the portfolio.
- SEO Optimized: Optimized for search engines to ensure the portfolio ranks well for relevant terms and helps others discover your work.
To run this project locally, follow these steps:
-
Clone the repository:
git clone https://github.com/yourusername/your-portfolio.git
-
Navigate to the project directory:
cd your-portfolio -
Install dependencies using pnpm: If you don't have pnpm installed, you can install it by running:
npm install -g pnpm
Then, install the project dependencies:
pnpm install
-
Run the development server: Start the development server with the following command:
pnpm dev
-
Open the website: Open your browser and go to
http://localhost:3000to view your portfolio locally.
- Customize Content: You can easily update the content in the
srcdirectory, including sections such asAbout Me,Projects, andContact. These components are customizable to fit your personal information. - Change Styling: Tailwind CSS classes are used throughout the site, making it easy to tweak and change the layout, colors, fonts, and more without having to write a lot of custom CSS.
- Add New Projects: You can easily add new projects to the portfolio by creating new components for each project in the
src/components/Projectsfolder.
- Make sure to set up Firebase if you want to use its authentication or database features. Create a Firebase project in the Firebase Console and add your Firebase config details to
src/firebase/config.js.
Here are some planned features and improvements for the future:
- Blog Section: Implement a personal blog where I can share articles, tutorials, and other thoughts on web development, technology, and related topics.
- Education Section: Details about my past and current education.
- Dark Mode Toggle: A toggle switch to allow users to switch between light and dark themes for improved accessibility.
- Project Filter: A feature that allows users to filter projects by technology used (e.g., React, Firebase, etc.), making it easier to browse through various projects.
- Performance Optimization: Further optimization of loading times and performance, including lazy loading of images and components.
- Personalized Experience: Implement a user profile section where users can save their favorite projects or create a custom dashboard based on their preferences.
I welcome contributions! If you have suggestions for improving this portfolio, feel free to fork the repository, make changes, and submit a pull request. Here are some ways you can contribute:
- Fix Bugs: Help identify and fix any bugs you come across.
- Improve Documentation: Suggest or submit better documentation or code comments.
- Feature Requests: If you have ideas for new features or improvements, feel free to open an issue to discuss them.
Please make sure to follow the code of conduct and submit issues or pull requests according to the project’s guidelines.
Feel free to reach out if you have any questions or feedback. I’m always open to new ideas and collaboration!
Built by Saksham Jaiswal