done

src/App.css

@@ -0,0 +1,25 @@
+.t-center{
+    text-align: center;
+}
+.card{
+    background-color: aliceblue;
+    width: 500px;
+   display: grid;
+   justify-content: center;
+   align-items: center;
+   justify-items: center;
+}
+
+.bio{
+    text-align: center;
+}
+
+.card-header{
+    background-color: white;
+    display: inline-block;
+}
+
+.p-0{
+    padding: 0px;
+    margin: 0px;
+}

src/App.js

@@ -1,9 +1,15 @@
 import React from 'react';
+import './App.css';
+import MyInfo from './Components/MyInfo.jsx'
 
 function App() {
+ const placesToVisit = ["Antalya", "Parague", "Berlin", "goal"]
+ const name = "Haval "
+const bio = " I am an IT gradute from the American univerisy of Iraq Sulaimani, I have studied several different topics about IT at uni.  One of the most intersting classes was Robotics in whcih we were coding robots and we could see the output of our code phyically running." 
+
   return (
-    <div>
-      <h1>Hello World!!</h1>
+    <div >
+     <MyInfo placesToVisit={placesToVisit} name = {name} bio ={bio} />
     </div>
   );
 }

src/Components/MyInfo.jsx

@@ -0,0 +1,22 @@
+import React from 'react'
+
+
+export default function MyInfo({placesToVisit, name, bio}) {
+
+    const listItems = placesToVisit.map((item) =>
+    <li className="nav" key={item}>{item}</li>
+    );
+    return (
+        <div className="card">
+            <h1 className="card-header">{name}</h1>
+            <p className="bio"> 
+            {bio}
+            </p>
+
+            <h3 className="p-0">Placeses I would Want to visit:</h3>
+            <ul>
+              {listItems}
+            </ul>
+        </div>
+    )
+}