Started working on the german page

package.json

@@ -7,6 +7,7 @@
   "dependencies": {
     "antd": "^5.16.4",
     "bootstrap": "^5.3.3",
+    "emailjs-com": "^3.2.0",
     "leaflet": "^1.9.4",
     "react": "^18.2.0",
     "react-bootstrap": "^2.10.2",

src/App.js

@@ -2,6 +2,7 @@ import React, { useState } from "react";
 import AppEn from "./components/AppEn";
 import AppDe from "./components/AppDe";
 import AppUkr from "./components/AppUkr";
+import 'bootstrap/dist/css/bootstrap.min.css';
 
 import "./styles.css";
 

src/components/Address.jsx

@@ -1,7 +1,7 @@
 export default function Address() {
   return (
     <div>
-      <h2>Postal adress</h2>
+      <h2 className="itemtitle">Postal adress</h2>
       <p>
         Oleksandr Lazurenko
         <br />

src/components/AppDe.js

@@ -1,13 +1,12 @@
-import MyTabs from "./MyTabs";
+import MyTabsDe from "./MyTabsDe"
 import Header from "./Header";
 
 export default function AppDe() {
   return (
     <div>
       <div className="maincontainer">
         <Header />
-        <MyTabs />
-        <h1>Hallo. WIe geht es?</h1>
+        <MyTabsDe />
       </div>
     </div>
   );

src/components/Footer.jsx

@@ -1,6 +1,6 @@
 export default function Footer() {
     return (
-        <footer>
+        <footer className="footer">
         <p>© 2024 AlexProf | Oleksandr Lazurenko</p>
         </footer>
     );

src/components/MyTabs.jsx

@@ -3,9 +3,10 @@ import "react-tabs/style/react-tabs.css";
 import Address from "./Address";
 import Certificates from "./certificates/Certificates";
 import Currentposition from "./Currentposition";
-import Social from "./Social";
+import Table from 'react-bootstrap/Table';
 import Footer from "./Footer";
 import { Card } from 'antd';
+import { IoLogoGithub } from "react-icons/io";
 const { Meta } = Card;
 
 const MyTabs = () => {
@@ -26,6 +27,7 @@ const MyTabs = () => {
         </Card>
         <Card hoverable title="Welcome to AlexProf!" bordered={false} className="homecard" >
           <p>Dear Ladies and Gentlemen,</p>
+          <br />
           <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>
@@ -34,20 +36,93 @@ const MyTabs = () => {
             <li>Diligent</li>
           </ol>
             <p>If you would like to learn more, please do not hesitate to contact me.</p>
+            <p>With the best wishes,</p>
+            <br />
+            <p>Oleksandr Lazurenko</p>
             <hr />
             <Footer />
           </Card>
         </div>
       </TabPanel>
       <TabPanel>
-        <Social />
+        <h1 className="itemtitle">Oleksandr Lazurenko</h1>
+        <h2 className="itemtitle">Fullstack Web Developer</h2>
+        <p>If you are interessted about my CV and other credentials, please feel free to contact me using the contact form or write directly to my email: <a href="mailto: [email protected]">[email protected]</a></p>
+        <h3 className="itemtitle">Languages spoken:</h3>
+        <Table striped responsive>
+          <thead>
+            <tr>
+              <th>#</th>
+              <th>Language</th>
+              <th>Level</th>
+              <th>European classification</th>
+            </tr>
+          </thead>
+          <tbody>
+            <tr>
+              <td>1</td>
+              <td>Ukrainian</td>
+              <td>Mothertongue</td>
+              <td>C2</td>
+            </tr>
+            <tr>
+              <td>2</td>
+              <td>Russian</td>
+              <td>Mothertongue</td>
+              <td>C2</td>
+            </tr>
+            <tr>
+              <td>3</td>
+              <td>English</td>
+              <td>Advanced</td>
+              <td>C1</td>
+            </tr>
+            <tr>
+              <td>4</td>
+              <td>German</td>
+              <td>Upper-intermediate</td>
+              <td>B2</td>
+            </tr>
+            <tr>
+              <td>5</td>
+              <td>Chinese</td>
+              <td>Beginner's level</td>
+              <td>A2</td>
+            </tr>
+          </tbody>
+        </Table>
+        <p> My main stack is MERN (MongoDB, Express, React, Node.js):</p>
+        <ul>
+          <li>MongoDB</li>
+          <li>ExpressJS</li>
+          <li>React</li>
+          <li>Node.js</li>
+          <li>Vercel</li>
+          <li>Netlify</li>
+        </ul>
+        <p>I am always eager to learn, and learning some new skills is always fascinating to me.</p>
+        <hr />
+        <Footer />
       </TabPanel>
       <TabPanel>
-        <h2>Our Location</h2>
+        <h2 className="itemtitle">Our Location</h2>
         <Currentposition />
         <Address />
+        <h2 className="itemtitle">Contact me:</h2>
+        <iframe src="https://docs.google.com/forms/d/e/1FAIpQLSfBsAmK4Yo2B6t73BOQstj1dcvFHVT586PCFjQf3zlRn7NE_A/viewform?embedded=true" width="100%" height="676" frameborder="0" marginheight="0" marginwidth="0">Loading...</iframe>
+      </TabPanel>
+      <TabPanel>
+        <h2 className="itemtitle"><a href="https://github.com/alex090890"><IoLogoGithub /></a>Portfolio Repositories</h2>
+        <div className="imagecontainer">
+          <img src="/Screenshot 2024-04-24 09.53.01.png" alt="portfolio sample 1" className="imagecard" />
+          <img src="/Screenshot 2024-04-24 09.55.52.png" ale="portfolio sample 2" className="imagecard" />
+          <img src="/Screenshot 2024-04-24 10.10.25.png" alt="portfolio sample 3" className="imagecard" />
+          <img src="/Screenshot 2024-04-24 10.14.29.png" alt="portfolio sample 4" className="imagecard" />
+          <img src="/Screenshot 2024-04-24 10.18.14.png" alt="portfolio sample 5" className="imagecard" />
+        </div>
+        <hr />
+        <Footer />
       </TabPanel>
-      <TabPanel></TabPanel>
       <TabPanel>
         <Certificates />
       </TabPanel>

src/components/MyTabsDe.jsx

@@ -0,0 +1,133 @@
+import { Tab, Tabs, TabList, TabPanel } from "react-tabs";
+import "react-tabs/style/react-tabs.css";
+import Address from "./Address";
+import Certificates from "./certificates/Certificates";
+import Currentposition from "./Currentposition";
+import Table from 'react-bootstrap/Table';
+import Footer from "./Footer";
+import { Card } from 'antd';
+import { IoLogoGithub } from "react-icons/io";
+const { Meta } = Card;
+
+const MyTabsDe = () => {
+  return (
+    <Tabs>
+      <TabList>
+        <Tab>Startseite</Tab>
+        <Tab>Über mich</Tab>
+        <Tab>Kontakt</Tab>
+        <Tab>Portfolio-Repositorys</Tab>
+        <Tab>Zeugnisse</Tab>
+      </TabList>
+
+      <TabPanel>
+        <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>Sehr geehrte Damen und Herren,</p>
+          <br />
+          <p>willkommen auf der persönlichen Portfolio-Webseite von Oleksandr Lazurenko, einem Fullstack-Webentwickler. Ich kann für Sie eine Website von Grund auf erstellen, angefangen beim Design bis hin zum Backend. Mein Hauptstack ist MERN (MongoDB, Express, React, Node.js). Hier sind meine Stärken:</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>
+            <p>With the best wishes,</p>
+            <br />
+            <p>Oleksandr Lazurenko</p>
+            <hr />
+            <Footer />
+          </Card>
+        </div>
+      </TabPanel>
+      <TabPanel>
+        <h1 className="itemtitle">Oleksandr Lazurenko</h1>
+        <h2 className="itemtitle">Fullstack Web Developer</h2>
+        <p>If you are interessted about my CV and other credentials, please feel free to contact me using the contact form or write directly to my email: <a href="mailto: [email protected]">[email protected]</a></p>
+        <h3 className="itemtitle">Languages spoken:</h3>
+        <Table striped responsive>
+          <thead>
+            <tr>
+              <th>#</th>
+              <th>Language</th>
+              <th>Level</th>
+              <th>European classification</th>
+            </tr>
+          </thead>
+          <tbody>
+            <tr>
+              <td>1</td>
+              <td>Ukrainian</td>
+              <td>Mothertongue</td>
+              <td>C2</td>
+            </tr>
+            <tr>
+              <td>2</td>
+              <td>Russian</td>
+              <td>Mothertongue</td>
+              <td>C2</td>
+            </tr>
+            <tr>
+              <td>3</td>
+              <td>English</td>
+              <td>Advanced</td>
+              <td>C1</td>
+            </tr>
+            <tr>
+              <td>4</td>
+              <td>German</td>
+              <td>Upper-intermediate</td>
+              <td>B2</td>
+            </tr>
+            <tr>
+              <td>5</td>
+              <td>Chinese</td>
+              <td>Beginner's level</td>
+              <td>A2</td>
+            </tr>
+          </tbody>
+        </Table>
+        <p> My main stack is MERN (MongoDB, Express, React, Node.js):</p>
+        <ul>
+          <li>MongoDB</li>
+          <li>ExpressJS</li>
+          <li>React</li>
+          <li>Node.js</li>
+          <li>Vercel</li>
+          <li>Netlify</li>
+        </ul>
+        <p>I am always eager to learn, and learning some new skills is always fascinating to me.</p>
+        <hr />
+        <Footer />
+      </TabPanel>
+      <TabPanel>
+        <h2 className="itemtitle">Our Location</h2>
+        <Currentposition />
+        <Address />
+        <h2 className="itemtitle">Contact me:</h2>
+        <iframe src="https://docs.google.com/forms/d/e/1FAIpQLSfBsAmK4Yo2B6t73BOQstj1dcvFHVT586PCFjQf3zlRn7NE_A/viewform?embedded=true" width="100%" height="676" frameborder="0" marginheight="0" marginwidth="0">Loading...</iframe>
+      </TabPanel>
+      <TabPanel>
+        <h2 className="itemtitle"><a href="https://github.com/alex090890"><IoLogoGithub /></a>Portfolio Repositories</h2>
+        <div className="imagecontainer">
+          <img src="/Screenshot 2024-04-24 09.53.01.png" alt="portfolio sample 1" className="imagecard" />
+          <img src="/Screenshot 2024-04-24 09.55.52.png" ale="portfolio sample 2" className="imagecard" />
+          <img src="/Screenshot 2024-04-24 10.10.25.png" alt="portfolio sample 3" className="imagecard" />
+          <img src="/Screenshot 2024-04-24 10.14.29.png" alt="portfolio sample 4" className="imagecard" />
+          <img src="/Screenshot 2024-04-24 10.18.14.png" alt="portfolio sample 5" className="imagecard" />
+        </div>
+        <hr />
+        <Footer />
+      </TabPanel>
+      <TabPanel>
+        <Certificates />
+      </TabPanel>
+    </Tabs>
+  );
+};
+
+export default MyTabsDe;

src/components/certificates/Certificates.jsx

@@ -1,12 +1,70 @@
 import React from "react";
 import englishscore from "./Englishscore.jpg";
+import goethe from "./Goethe.jpg";
+import chinese from "./Chinese HSK.jpg";
+import mongodb from "./Mongodb.png";
+import codecademy from "./Codecademy.png";
+import freecodecamp from "./Freecodecamp.png";
+import linkedin from "./Linkedin.png";
+import Carousel from 'react-bootstrap/Carousel';
 
 const Certificates = () => {
   return (
+    <>
     <div>
-      <h2>Language certificates</h2>
-      <img src={englishscore} alt="Englishscore" className="englishscore" />
+      <h2 className="itemtitle">Language certificates</h2>
+      <Carousel fade>
+        <Carousel.Item>
+          <img src={englishscore} alt="Englishscore" className="englishscore" />
+          <Carousel.Caption>
+            <h3>EnglischScore Certificate</h3>
+          </Carousel.Caption>
+        </Carousel.Item>
+        <Carousel.Item>
+          <img src={goethe} alt="Goethe" className="englishscore" />
+          <Carousel.Caption>
+            <h3>Goethe</h3>
+          </Carousel.Caption>
+        </Carousel.Item>
+        <Carousel.Item>
+          <img src={chinese} alt="Chinese" className="englishscore" />
+          <Carousel.Caption>
+            <h3>Chinese</h3>
+          </Carousel.Caption>
+        </Carousel.Item>
+      </Carousel>
     </div>
+    <div>
+        <h2 className="itemtitle">IT certificates</h2>
+        <Carousel>
+          <Carousel.Item>
+            <img src={codecademy} alt="Codecademy" className="englishscore" />
+            <Carousel.Caption>
+              <h3>Codecademy</h3>
+            </Carousel.Caption>
+          </Carousel.Item>
+          <Carousel.Item>
+            <img src={freecodecamp} alt="Freecodecamp" className="englishscore" />
+            <Carousel.Caption>
+              <h3>Freecodecamp</h3>
+            </Carousel.Caption>
+          </Carousel.Item>
+          <Carousel.Item>
+            <img src={mongodb} alt="Mongodb" className="englishscore" />
+            <Carousel.Caption>
+              <h3>Mongodb</h3>
+            </Carousel.Caption>
+          </Carousel.Item>
+          <Carousel.Item>
+            <img src={linkedin} alt="Linkedin" className="englishscore" />
+            <Carousel.Caption>
+              <h3>Linkedin</h3>
+            </Carousel.Caption>
+          </Carousel.Item>
+        </Carousel>
+      </div>
+
+    </>
   );
 };