This repository contains the code for my personal portfolio website, which showcases my academic, technical, and co-curricular achievements. It is built using React.js with React Router for navigation between multiple pages, and CSS for styling. The website is fully responsive and provides an engaging user experience.
- React.js: Utilized for building dynamic and reusable UI components.
- React Router: Implemented for seamless navigation across various pages such as "Academic," "Technical," "Co-curricular," "About," "Contact," and "Testimonials."
- CSS: Custom CSS is used for styling, ensuring a clean and professional design across all devices.
- Modular Components: Every section of the website, including the navigation bar, hero section, and project cards, is built as reusable React components.
- Responsive Design: The layout adapts smoothly to different screen sizes (desktop, tablet, and mobile) using flexible CSS grid and flexbox techniques.
- Academic Page: Lists my educational background and academic achievements.
- Technical Page: Highlights my technical skills and projects.
- Co-curricular Page: Showcases extracurricular activities, including awards and certifications.
- About Page: A brief introduction about me and my professional journey.
- Contact Page: Contains a form for users to get in touch, along with social media links.
- Testimonials Page: Displays testimonials from mentors, peers, or colleagues.
- Navigation Bar: A sticky header with links to different pages. This is dynamically rendered using React Router for smooth transitions.
- Hero Section: Features a welcome message with background image/text, engaging the user from the first interaction.
- Project Cards: A grid layout of clickable cards that lead to detailed project descriptions.
- Testimonials Carousel: A rotating display of testimonials using React state for managing transitions.
- React.js: Frontend framework for building interactive and reusable components.
- React Router: For page routing and navigation without full-page reloads.
- CSS: For styling components with a clean and minimalistic approach.
Before you begin, ensure you have met the following requirements:
- Node.js (version 12.x or higher) and npm are installed on your machine.
- A code editor like VS Code.
-
Clone the repository:
git clone https://github.com/THE-DEEPDAS/deepdas-portfolio.git
-
Navigate to the project directory:
cd deepdas-portfolio -
Install the necessary dependencies:
npm install
-
Start the development server:
npm start
The website will run locally on http://localhost:3000. You can view it in your browser.
The portfolio uses React Router to create a multi-page experience. Here’s a brief overview of the routing structure:
/– The homepage featuring an introduction and links to the different sections./academic– Contains details about education and qualifications./technical– Lists technical projects and proficiencies./co-curricular– Highlights co-curricular and extra-curricular activities./about– An about page detailing personal and professional background./contact– A contact page where visitors can reach out./testimonials– Displays feedback from colleagues and clients.
This portfolio is currently hosted on Vercel, making it fast and reliable. To deploy your own version:
- Create an account on Vercel.
- Link your GitHub repository to Vercel.
- Follow the prompts to deploy.
Vercel automatically rebuilds and redeploys your website whenever you push new changes to the repository.
There are no automated tests for this project, but it’s recommended to manually verify:
- Navigation works across all pages.
- Forms on the contact page are functioning properly.
- All links are directing to the correct pages.
If you wish to contribute to the project:
- Fork the repository.
- Create a new branch:
git checkout -b feature/your-feature
- Make your changes and commit:
git commit -m 'Add some feature' - Push to the branch:
git push origin feature/your-feature
- Open a pull request to discuss the changes.