Worked on the homepage

package.json

@@ -5,9 +5,13 @@
   "keywords": [],
   "main": "src/index.tsx",
   "dependencies": {
+    "antd": "^5.16.4",
+    "bootstrap": "^5.3.3",
     "leaflet": "^1.9.4",
     "react": "^18.2.0",
+    "react-bootstrap": "^2.10.2",
     "react-dom": "^18.0.0",
+    "react-icons": "^5.1.0",
     "react-leaflet": "^4.2.1",
     "react-scripts": "^5.0.0",
     "react-tabs": "^6.0.2"

src/components/AppEn.js

@@ -7,7 +7,6 @@ export default function AppEn() {
       <div className="maincontainer">
         <Header />
         <MyTabs />
-        <h1>Hello</h1>
       </div>
     </div>
   );

src/components/Footer.jsx

@@ -0,0 +1,7 @@
+export default function Footer() {
+    return (
+        <footer>
+        <p>© 2024 AlexProf | Oleksandr Lazurenko</p>
+        </footer>
+    );
+}

src/components/MyTabs.jsx

@@ -4,6 +4,9 @@ import Address from "./Address";
 import Certificates from "./certificates/Certificates";
 import Currentposition from "./Currentposition";
 import Social from "./Social";
+import Footer from "./Footer";
+import { Card } from 'antd';
+const { Meta } = Card;
 
 const MyTabs = () => {
   return (
@@ -17,7 +20,24 @@ const MyTabs = () => {
       </TabList>
 
       <TabPanel>
-        <h2>Welcome</h2>
+        <div className="homecontainer">
+          <Card hoverable className="homeimage" cover={<img alt="example" src="/Bewerbungsbild.jpg" />}>
+          <Meta title="Oleksandr Lazurenko" description="[email protected]" />
+        </Card>
+        <Card hoverable title="Welcome to AlexProf!" bordered={false} className="homecard" >
+          <p>Dear Ladies and Gentlemen,</p>
+          <p>welcome to the personal portfolio webpage of Oleksandr Lazurenko, a fullstack web developer. I can build a website for you from the scratch, starting with the design and ending with the backend. My main stack is MERN (MongoDB, Express, React, Node.js). Here are my strengths:</p>
+          <ol>
+            <li>Punctual</li>
+            <li>Responsible</li>
+            <li>Reliable</li>
+            <li>Diligent</li>
+          </ol>
+            <p>If you would like to learn more, please do not hesitate to contact me.</p>
+            <hr />
+            <Footer />
+          </Card>
+        </div>
       </TabPanel>
       <TabPanel>
         <Social />

src/styles.css

@@ -79,3 +79,40 @@ html {
     grid-template-columns: 1fr;
   }
 }
+
+
+.homecontainer {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  grid-gap: 20px;
+  margin-top: 20px;
+  margin-bottom: 20px;
+}
+
+.homecard {
+  width: 100%;
+  cursor: pointer!important;
+}
+
+.homeimage {
+  width: 100%;
+  height: 200px;
+  object-fit: cover;
+  cursor: pointer!important;;
+}
+
+@media screen and (max-width: 600px) {
+  .homecontainer {
+    grid-template-columns: 1fr;
+  }
+
+  .homecard {
+    width: 100%;
+  }
+}
+
+@media screen and (max-width: 1024px) {
+  .homecard {
+    width: 100%;
+  }
+}