fix code after review

legogoUA · Apr 20, 2024 · 1f05e65 · 1f05e65
1 parent 95e8bca
commit 1f05e65
Show file tree

Hide file tree

Showing 4 changed files with 45 additions and 34 deletions.
diff --git a/src/assets/about .jpg b/src/assets/about .jpg
diff --git a/src/assets/about.png b/src/assets/about.png
diff --git a/src/components/about/AboutComponent.tsx b/src/components/about/AboutComponent.tsx
@@ -1,23 +1,28 @@
-import aboutImg from '@/assets/about.png';
+import aboutImg from '../../assets/about .jpg';
 
 import AboutCSS from './about.module.css';
 
 export const AboutComponent = () => (
-    <div className={AboutCSS.container}>
+    <div className={AboutCSS.about}>
         <img className={AboutCSS.img} src={aboutImg} alt="AboutIMG" />
         <div className={AboutCSS.text}>
             <h1 className={AboutCSS.title}>About me</h1>
-            <p className={AboutCSS.description}>
-                Hi! My name is Oleh, and I&apos;m a Junior Frontend Developer. I am already familiar with main Web Technologies like React,
-                HTML, CSS, JavaScript and Git version control system. <br /> <br />
-                This page was developed during the course &apos;
-                <a href="https://www.mastersacademy.education/frontend-react-it">Intro to React</a>&apos; from Masters Academy in 2024.{' '}
-                <br /> <br />
-                This is a social project from MOCG company where I got an opportunity to work with Frontend mentors and to create my own
-                small project for the portfolio. <br /> <br />
-                You can contact me via <a href="https://t.me/medushivskyi">Telegram</a> and check out my{' '}
-                <a href="https://github.com/legogoUA">GitHub</a>.
-            </p>
+            <div className={AboutCSS.description}>
+                <p>
+                    Hi! My name is Oleh, and I&apos;m a Junior Frontend Developer. I am already familiar with main Web Technologies like
+                    React, HTML, CSS, JavaScript and Git version control system.
+                </p>
+                <p>
+                    This page was developed during the course &apos;
+                    <a href="https://www.mastersacademy.education/frontend-react-it">Intro to React</a>&apos; from Masters Academy in 2024.
+                </p>
+                <p>
+                    This is a social project from MOCG company where I got an opportunity to work with Frontend mentors and to create my own
+                    small project for the portfolio. <br /> <br />
+                    You can contact me via <a href="https://t.me/medushivskyi">Telegram</a> and check out my
+                    <a href="https://github.com/legogoUA">GitHub</a>.
+                </p>
+            </div>
         </div>
     </div>
 );
diff --git a/src/components/about/about.module.css b/src/components/about/about.module.css
@@ -1,30 +1,36 @@
-.container {
-  display: flex;
-  flex-direction: column;
-  margin: 0 auto;
-  padding: 50px;
-}
 
-.img {
-  width: 330px;
-  height: 292px;
-  border-radius: 30px;
-  margin-bottom: 20px;
-}
+@media (min-width: 390px) {
 
-.title {
-  font-size: 2em;
-  margin-bottom: 10px;
-}
+  .about {
+    width: 390px;
+    display: flex;
+    flex-direction: column;
+    margin: 0 auto;
+    padding: 50px;
+  }
 
-.description {
-  line-height: 1.5;
-  width: 330px;
+  .img {
+    width: 330px;
+    height: 292px;
+    border-radius: 30px;
+    margin-bottom: 20px;
+  }
+
+  .title {
+    font-size: 2em;
+    margin-bottom: 10px;
+  }
+
+  .description {
+    line-height: 1.5;
+    width: 330px;
+  }
 }
 
-@media only screen and (min-width: 1280px) {
+@media (min-width: 1280px) {
 
-  .container {
+  .about {
+    width: 1280px;
     flex-direction: row-reverse;
     gap: 75px;
   }