fix the format

main.jsx

@@ -2,7 +2,8 @@ import React from 'react'
 import ReactDOM from 'react-dom/client'
 import "bootstrap/dist/css/bootstrap.css"
 import "bootstrap/dist/js/bootstrap.bundle.js"
-import 'bootstrap-icons/font/bootstrap-icons.css';
+import 'bootstrap-icons/font/bootstrap-icons.css'
+import './src/styles/App.css'
 import App from './src/component/App.jsx'
 
 ReactDOM.createRoot(document.getElementById('root')).render(

src/component/App.jsx

@@ -1,10 +1,10 @@
-import React, { useState } from 'react';
-import PersonalDetails from './GeneralInfo/PersonalDetails';
-import Education from '../component/Education/Education';
-import Experience from '../component/Experience';
-import DisplayPersonalDetail from './GeneralInfo/DisplayPeronalDetail';
-import  DisplayEducation from '../component/Education/DisplayEducation';
-
+import React, { useState } from 'react'
+import PersonalDetails from './GeneralInfo/PersonalDetails'
+import DisplayPersonalDetail from './GeneralInfo/DisplayPeronalDetail'
+import Education from '../component/Education/Education'
+import DisplayEducation from '../component/Education/DisplayEducation'
+import Experience from '../component/Experience/Experience'
+import DisplayExperience from './Experience/DisplayExperience'
 function App() {
   const [person, setPerson] = useState({
     fullname: "",
@@ -29,8 +29,12 @@ function App() {
   const updateEducation = (data) => {
     setEducationData(data);
   };
+  const [experience, setExperience] = useState([]);
+  const updateExperience = (data) => {
+    setExperience(data);
+  };
+
 
-
   return (
     <>
       <div className="container">
@@ -104,17 +108,19 @@ function App() {
                   data-bs-parent="#accordionExample"
                 >
                   <div className="accordion-body">
-                    <Experience />
+                    <Experience  updateExperience={updateExperience} />
                   </div>
                 </div>
               </div>
             </div>
           </div>
 
           <div className="col-md-6">
-
+             <div className='card'> 
             <DisplayPersonalDetail person={person} />
             <DisplayEducation education={educationData} />
+            <DisplayExperience experience={experience} />
+            </div>
           </div>
         </div>
       </div>

src/component/Experience/DisplayExperience.jsx

@@ -0,0 +1,30 @@
+function DisplayExperience({experience}) {
+    return (
+      <>
+        <div>
+          {experience.length > 0 ? (
+            <div>
+              <h4>Experience</h4>
+              <hr className="fw-bold"></hr>
+              {experience.map((exe, index) => (
+                <div key={index} className="row">
+                  <div className="col-md-3">
+                    <p className="fw-bolder">
+                    {exe.position} 
+                    </p>
+                  </div>
+                  <div className="col-md-9">
+                    <i className="fs-6">{exe.company} </i>  {exe.location} from {exe.start} to {exe.end} Main Responsibility {exe.responsibility}
+                  </div>
+                </div>
+              ))}
+            </div>
+          ) : (
+            <p></p>
+          )}
+        </div>
+      </>
+    );
+  }
+  export default DisplayExperience;
+