Final updates: table, icons

alex090890 · Apr 24, 2024 · 4c19af2 · 4c19af2
1 parent b341665
commit 4c19af2
Show file tree

Hide file tree

Showing 18 changed files with 102 additions and 294 deletions.
diff --git a/public/china (1).png b/public/china (1).png
diff --git a/public/facebook.png b/public/facebook.png
diff --git a/public/germany (2).png b/public/germany (2).png
diff --git a/public/github.png b/public/github.png
diff --git a/public/gmail.png b/public/gmail.png
diff --git a/public/instagram (1).png b/public/instagram (1).png
diff --git a/public/linkedin-icon.png b/public/linkedin-icon.png
diff --git a/public/russia.png b/public/russia.png
diff --git a/public/twitter.png b/public/twitter.png
diff --git a/public/ukraine (1).png b/public/ukraine (1).png
diff --git a/public/united-states-of-america (1).png b/public/united-states-of-america (1).png
diff --git a/src/components/Currentposition.jsx b/src/components/Currentposition.jsx
diff --git a/src/components/MyTabs.jsx b/src/components/MyTabs.jsx
@@ -29,12 +29,13 @@ const MyTabs = () => {
           <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>
+          <ul>
             <li>Punctual</li>
             <li>Responsible</li>
             <li>Reliable</li>
             <li>Diligent</li>
-          </ol>
+          </ul>
+          <p>As I have lived in and worked in China for more than nine years, I got a very good experience in communicating with clients, which is a very important skill nowadays.</p>
             <p>If you would like to learn more, please do not hesitate to contact me.</p>
             <p>With the best wishes,</p>
             <br />
@@ -45,75 +46,71 @@ const MyTabs = () => {
         </div>
       </TabPanel>
       <TabPanel>
-        <h1 className="itemtitle whitetext">Oleksandr Lazurenko</h1>
-        <h2 className="itemtitle whitetext">Fullstack Web Developer</h2>
-        <p className="whitetext">If you are interested 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]" className="email">[email protected]</a></p>
-        <h3 className="itemtitle whitetext">Languages spoken:</h3>
+        <h1 className="itemtitle">Oleksandr Lazurenko</h1>
+        <h2 className="itemtitle">Fullstack Web Developer</h2>
+        <p>If you are interested 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]" className="email">[email protected]</a></p>
+        <h3 className="itemtitle">Languages spoken:</h3>
         <Table striped responsive>
           <thead>
             <tr>
-              <th>#</th>
+              <th></th>
               <th>Language</th>
               <th>Level</th>
               <th>European classification</th>
             </tr>
           </thead>
           <tbody>
             <tr>
-              <td>1</td>
+              <td><img src="/ukraine (1).png" className="langicon" /></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><img src="/united-states-of-america (1).png" className="langicon" /></td>
               <td>English</td>
               <td>Advanced</td>
               <td>C1</td>
             </tr>
             <tr>
-              <td>4</td>
+              <td><img src="/germany (2).png" className="langicon" /></td>
               <td>German</td>
               <td>Upper-intermediate</td>
               <td>B2</td>
             </tr>
             <tr>
-              <td>5</td>
+              <td><img src="/china (1).png" className="langicon" /></td>
               <td>Chinese</td>
               <td>Beginner's level</td>
               <td>A2</td>
             </tr>
           </tbody>
         </Table>
-        <p className="whitetext"> My main stack is MERN (MongoDB, Express, React, Node.js):</p>
-        <ul className="whitetext">
+        <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 className="whitetext">I am always eager to learn, and learning some new skills is always fascinating to me.</p>
+        <p>I am always eager to learn, and learning some new skills is always fascinating to me.</p>
         <hr />
         <Footer />
       </TabPanel>
       <TabPanel>
-        <h1 className="itemtitle whitetext">Our Location</h1>
-        <h2 className="itemtitle whitetext">Postal adress</h2>
+        <h1 className="itemtitle">Our Location</h1>
+        <h2 className="itemtitle">Postal adress</h2>
         <Address />
         <MyMapComponent />
-        <h2 className="itemtitle whitetext" >Contact me:</h2>
+        <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>
+        <hr />
+        <Footer />
       </TabPanel>
       <TabPanel>
-        <h2 className="itemtitle whitetext"><a href="https://github.com/alex090890"><IoLogoGithub /></a>Portfolio Repositories</h2>
+        <h2 className="itemtitle"><a href="https://github.com/alex090890" target="_blank"><img src="/github.png" className="social" /></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" />
@@ -127,7 +124,7 @@ const MyTabs = () => {
       <TabPanel>
                 <div>
           <div>
-      <h2 className="itemtitle whitetext">Language certificates</h2>
+      <h2 className="itemtitle">Language certificates</h2>
       <Carousel fade>
         <Carousel.Item>
           <img src="/Englishscore.jpg" alt="Englishscore" className="englishscore" />
@@ -150,7 +147,7 @@ const MyTabs = () => {
       </Carousel>
     </div>
     <div>
-        <h2 className="itemtitle whitetext">IT certificates</h2>
+        <h2 className="itemtitle">IT certificates</h2>
         <Carousel>
           <Carousel.Item>
             <img src="/Codecademy.png" alt="Codecademy" className="englishscore" />
@@ -177,7 +174,9 @@ const MyTabs = () => {
             </Carousel.Caption>
           </Carousel.Item>
         </Carousel>
-      </div>
+          </div>
+          <hr />
+          <Footer />
         </div>
       </TabPanel>
     </Tabs>

diff --git a/src/components/MyTabsCn.jsx b/src/components/MyTabsCn.jsx
@@ -5,7 +5,6 @@ import MyMapComponent from "./MyMapComponent";
 import Table from 'react-bootstrap/Table';
 import Footer from "./Footer";
 import { Card } from 'antd';
-import { IoLogoGithub } from "react-icons/io";
 import Carousel from 'react-bootstrap/Carousel';
 const { Meta } = Card;
 
@@ -25,16 +24,17 @@ return (
           <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" >
+        <Card hoverable title="欢迎来 AlexProf!" bordered={false} className="homecard" >
           <p>尊敬的女士们、先生们，</p>
           <br />
           <p>欢迎来到全栈 Web 开发人员 Oleksandr Lazurenko 的个人作品集网页。竭诚为您从头开始构建网站，源于设计，始于后端。专注于 MERN (MongoDB、Express、React、Node.js)。以下是我的优势: </p>
-          <ol>
+          <ul>
             <li>准时</li>
             <li>负责</li>
             <li>可靠</li>
             <li>勤奋</li>
-          </ol>
+          </ul>
+          <p>由于我在中国生活和工作了九年多，我在与客户沟通方面获得了非常好的经验，这是当今非常重要的技能。</p>
             <p>如需了解详情，请随时与我联系。</p>
             <p>祝一切顺利，</p>
             <br />
@@ -45,76 +45,72 @@ return (
         </div>
       </TabPanel>
       <TabPanel>
-        <h1 className="itemtitle whitetext">Oleksandr Lazurenko</h1>
-        <h2 className="itemtitle whitetext">Fullstack Web Developer</h2>
-        <p className="whitetext">如果您对我的简历和其他资历感兴趣，请随时联系，或致电邮件：<a href="mailto: [email protected]" className="email">[email protected]</a></p>
-        <h3 className="itemtitle whitetext">使用语言</h3>
+        <h1 className="itemtitle">Oleksandr Lazurenko</h1>
+        <h2 className="itemtitle">Fullstack Web Developer</h2>
+        <p>如果您对我的简历和其他资历感兴趣，请随时联系，或致电邮件：<a href="mailto: [email protected]" className="email">[email protected]</a></p>
+        <h3 className="itemtitle">使用语言</h3>
         <Table striped responsive>
           <thead>
             <tr>
-              <th>#</th>
+              <th></th>
               <th>语言</th>
               <th>等级</th>
               <th>欧洲分类</th>
             </tr>
           </thead>
           <tbody>
             <tr>
-              <td>1</td>
+              <td><img src="/ukraine (1).png" className="langicon" /></td>
               <td>乌克兰语</td>
               <td>母语</td>
               <td>C2</td>
             </tr>
             <tr>
-              <td>2</td>
-              <td>俄语</td>
-              <td>母语</td>
-              <td>C2</td>
-            </tr>
-            <tr>
-              <td>3</td>
+              <td><img src="/united-states-of-america (1).png" className="langicon" /></td>
               <td>英语</td>
               <td>先进水平</td>
               <td>C1</td>
             </tr>
             <tr>
-              <td>4</td>
+              <td><img src="/germany (2).png" className="langicon" /></td>
               <td>德语</td>
               <td>上级水平</td>
               <td>B2</td>
             </tr>
             <tr>
-              <td>5</td>
+              <td><img src="/china (1).png" className="langicon" /></td>
               <td>中文</td>
               <td>初学者的水平</td>
               <td>A2</td>
             </tr>
           </tbody>
         </Table>
-        <p className="whitetext">专注于： MERN (MongoDB、Express、React、Node.js): </p>
-        <ul className="whitetext">
+        <p>专注于： 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 className="whitetext">孜孜以求，精益求精，学习新技能，总是极具吸引力。</p>
+        <p>孜孜以求，精益求精，学习新技能，总是极具吸引力。</p>
         <hr />
         <Footer />
       </TabPanel>
       <TabPanel>
-        <h1 className="itemtitle whitetext">我们的位置</h1>
-        <h2 className="itemtitle whitetext">邮寄地址</h2>
+        <h1 className="itemtitle">我们的位置</h1>
+        <h2 className="itemtitle">邮寄地址</h2>
         <Address />
       <MyMapComponent />
-      <p className="whitetext"><span className="notice"><b>! 注意: </b></span>中国大陆的领土上没有地图和Google表格, 请通过电子邮件与我联系: <a href="mailto: [email protected]" className="email">[email protected]</a></p>
-        <h2 className="itemtitle whitetext" >联系表</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>
+      <p><span className="notice"><b>! 注意: </b></span>中国大陆的领土上没有地图和Google表格, 请通过电子邮件与我联系: <a href="mailto: [email protected]" className="email">[email protected]</a></p>
+        <h2 className="itemtitle" >联系表</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>
+      <hr />
+      <Footer />
       </TabPanel>
       <TabPanel>
-        <h2 className="itemtitle whitetext"><a href="https://github.com/alex090890"><IoLogoGithub /></a>投资组合库</h2>
+        <h2 className="itemtitle"><a href="https://github.com/alex090890" target="_blank"><img src="/github.png" className="social" /></a>投资组合库</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" />
@@ -128,7 +124,7 @@ return (
       <TabPanel>
                 <div>
           <div>
-      <h2 className="itemtitle whitetext">语言证书</h2>
+      <h2 className="itemtitle">语言证书</h2>
       <Carousel fade>
         <Carousel.Item>
           <img src="/Englishscore.jpg" alt="Englishscore" className="englishscore" />
@@ -151,7 +147,7 @@ return (
       </Carousel>
     </div>
     <div>
-        <h2 className="itemtitle whitetext">IT证书</h2>
+        <h2 className="itemtitle">IT证书</h2>
         <Carousel>
           <Carousel.Item>
             <img src="/Codecademy.png" alt="Codecademy" className="englishscore" />
@@ -178,7 +174,9 @@ return (
             </Carousel.Caption>
           </Carousel.Item>
         </Carousel>
-      </div>
+        </div>
+        <hr />
+        <Footer />
         </div>
       </TabPanel>
     </Tabs>