[Task-01] - Project setup and About block

src/App.tsx

@@ -1,19 +1,13 @@
-import reactLogo from '@/assets/react.svg';
-
+import { AboutComponent } from './components/about/AboutComponent.tsx';
 import { HeaderComponent } from './components/header/Header.component.tsx';
 
-import './App.css';
+import './App.module.css';
 
 function App() {
     return (
         <>
             <HeaderComponent />
-            <main className="home">
-                <h1>
-                    <img src={reactLogo} alt="React logo" />
-                    Home page
-                </h1>
-            </main>
+            <AboutComponent />
         </>
     );
 }

src/components/about/AboutComponent.tsx

@@ -0,0 +1,23 @@
+import aboutImg from '@/assets/about.png';
+
+import AboutCSS from './about.module.css';
+
+export const AboutComponent = () => (
+    <div className={AboutCSS.container}>
+        <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>
+    </div>
+);

src/components/about/about.module.css

@@ -0,0 +1,41 @@
+.container {
+  display: flex;
+  flex-direction: column;
+  margin: 0 auto;
+  padding: 50px;
+}
+
+.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) {
+
+  .container {
+    flex-direction: row-reverse;
+    gap: 75px;
+  }
+
+  .img {
+    width: 500px;
+    height: 489px;
+    margin-top: 70px;
+  }
+
+  .description {
+    width: 575px;
+  }
+}