This project was bootstrapped with Create React App.
This project is my personal portfolio designed to showcase my projects and skills. It is built using create-react-app, a powerful tool that enables me to create efficient and scalable React applications.
React.js is the heart of this portfolio, providing a robust and dynamic user interface. It allows me to build reusable components, resulting in a seamless and smooth user experience.
To get started with React.js, I used create-react-app, a convenient way to scaffold a new React project. Here are the steps to install and set up React.js:
- Install Node.js and npm (Node Package Manager) on your machine if you haven't already.
- Open your terminal and run the following command to create a new React project: npx create-react-app my-portfolio
npx create-react-app my-portfolio npm start
Tailwind CSS is the styling framework of choice for this project. Its utility-first approach makes designing responsive and visually appealing layouts a breeze.
To set up Tailwind CSS in my React project, I followed these steps:
Install Tailwind CSS and its dependencies using npm: npm install -D tailwindcss npx tailwindcss init
Add the paths to all of your template files in your tailwind.config.js file.
/** @type {import('tailwindcss').Config} / module.exports = { content: [ "./src/**/.{js,jsx,ts,tsx}", ], theme: { extend: {}, }, plugins: [], }
Add the @tailwind directives for each of Tailwind’s layers to your ./src/index.css file. @tailwind base; @tailwind components; @tailwind utilities;
To enhance the aesthetics of my portfolio, I integrated React Icons, which offers a wide selection of beautiful and customizable icons.
To use React Icons in my React project, I installed the required package: npm install react-icons --save After installation, I imported the desired icons and used them in my components.
The AOS (Animate On Scroll) library adds captivating animations to elements as users scroll down the page, making the portfolio more engaging and interactive.
To use AOS library in my React project, I installed the required package: npm install aos --save Then, I initialized the AOS library in my React components: import AOS from 'aos'; import 'aos/dist/aos.css';
And initialize aos using: AOS.init();
For efficient form handling, I integrated Getform, a user-friendly form service, allowing users to reach out to me effortlessly.
To use Getform in my portfolio, I followed these steps:
Created an account on Getform (https://getform.io/) and set up a form to collect user inquiries. Copied the provided form endpoint URL. Implemented form submission logic in my React component using Axios or Fetch API to send form data to the Getform endpoint.
Ant Design provided additional UI components that blend seamlessly with the overall design, enhancing the overall user experience.
To use Ant Design components in my React project, I installed the necessary package: npm install antd --save
React Scroll assists in creating smooth scrolling effects, ensuring a fluid navigation experience for visitors.
To use React Scroll in my React project, I installed the required package: npm install react-scroll --save
After installation, I imported the Link component from react-scroll and used it to create smooth scrolling links within my components.
With the combination of React.js, Tailwind CSS, React Icons, AOS Library, Getform, Ant Design, and React Scroll, I have crafted a stunning portfolio that showcases my projects and skills in an engaging and user-friendly manner. This portfolio represents my dedication to continuous learning and growth as a developer.
Feel free to explore my portfolio and get in touch through the contact form if you have any inquiries or collaboration opportunities. Thank you for visiting! 🚀