This is a modern, responsive portfolio template built with React, Tailwind CSS, and Framer Motion. It's designed for software engineers to showcase their skills, projects, and professional information in an engaging and interactive way.
- Responsive design that looks great on both desktop and mobile devices
- Smooth scrolling and animations powered by Framer Motion
- Project showcase with detailed project pages
- Skills section to highlight your technical expertise
- About Me section for a personal touch
- Easy to customize and extend
- Node.js (v14 or later recommended)
- npm or yarn
-
Clone the repository:
-
Install dependencies
-
start the server npm start
It should be running on a local server http://localhost:3000'
- Open http://localhost:3000 to view it in the browser.
- Edit
src/components/Hero.js
to update the landing page content. - Modify
src/components/AboutMe.js
to add your personal bio and information.
- Navigate to
src/components/ProjectDetails/projects/Projects.js
. - Add a new project object to the
projectsData
array. - Ensure each project has the following properties:
id
: A unique identifier for the projecttitle
: The name of your projectshortDescription
: A brief overview of the projectlongDescription
: A detailed description of the projectimage
: Path to the project's image (store images in thepublic
folder)technologies
: An array of technologies used in the projectfeatures
: An array of key features (optional)githubLink
: Link to the project's GitHub repositoryliveDemo
: Link to a live demo of the project (if available)
- This template uses Tailwind CSS. You can customize the design by modifying the Tailwind classes in the component files.
- For more extensive style changes, edit the
tailwind.config.js
file.
This template can be easily deployed to platforms like GitHub Pages, Netlify, or Vercel. Refer to their respective documentation for deployment instructions.
Contributions are welcome! Please feel free to submit a Pull Request.
This project is open source and available under the MIT License.
- React
- Tailwind CSS
- Framer Motion
- React Router
Feel free to reach out if you have any questions or need further customization tips!