Major Update

Min-Thway-Htut · Dec 22, 2024 · f24125c · f24125c
1 parent d01a2ce
commit f24125c
Show file tree

Hide file tree

Showing 3 changed files with 88 additions and 11 deletions.
diff --git a/images/min-thway-htut-profile-picture.jpg b/images/min-thway-htut-profile-picture.jpg
diff --git a/index.html b/index.html
@@ -31,22 +31,34 @@
                 <li class="hideOnMobile"><a href="#mySkills">Skills</a></li>
                 <li class="hideOnMobile"><a href="#myProjects">Projects</a></li>
                 <li class="hideOnMobile"><a href="#contact">Contact</a></li>
-                <li onclick="showSidebar()"><a href="#"><svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="#f5f5f5"><path d="M120-240v-80h720v80H120Zm0-200v-80h720v80H120Zm0-200v-80h720v80H120Z"/></svg></a></li>
+                <li onclick="showSidebar()"><a href="#"><svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="#fff"><path d="M120-240v-80h720v80H120Zm0-200v-80h720v80H120Zm0-200v-80h720v80H120Z"/></svg></a></li>
             </ul>
         </nav>
 
-        <h1 class="title-description slide-in-left">Hi, I am Min Thway Htut.</h1>
-        <div class="about-me" id="about-me">
-            <p id="description" class="description slide-in-bottom">A final-year Computer Science student with a strong interest in app and web development. I am currently working as a student in web development at the Fraunhofer Institute.
-                I have experiences in front-end development and have already developed a couple of real-life projects as a freelance developer.
-                <br>
-                <br>
-                I am currently learning Node.js, Express.js, MongoDb, and front-end libraries such as jQuery and React.js while working on my own projects as I believe in project-based learning.
-                In addition, I am eager to participate in Hackathon events and also find it interesting to solve LeetCode problems.
-            </p>
+      <div class="newIntroSection">
+        <div class="intro-profile">
+            <img src="images/min-thway-htut-profile-picture.jpg" alt="Profile Picture of Min Thway Htut"/>
         </div>
+        <div class="intro-bio">
+            <p id="first-line">Hello, I am</p>
+            <br />
+            <p id="my-name">Min Thway Htut</p>
+            <br />
+            <p id="who-am-i"> Software Developer</p>
+        </div>
+      </div>
 
-
+      <div class="about-me-section">  
+        <h2>About Me</h2>
+        <p id="description">I am a final-year Computer Science student with a strong interest in app and web development. 
+            I came from Myanmar (Burma) and am currently living in Germany to pursue my studies.
+            I study Computer Science at GISMA University of Applied Sciences and work as a part-time app and web developer 
+            for the Fraunhofer IOSB. My main task at Fraunhofer IOSB mainly involves designing and developing user interface for
+            the web-application using React.js, as well as for tablet software using React Native. Additionally, I am currently
+            focusing on backend development to become a full-stack developer. 
+
+        </p>
+      </div>
 
         <h2 id="university">Education</h2>
             <div class="university">GISMA University of Applied Sciences (Potsdam, Germany)</div>

diff --git a/styles.css b/styles.css
@@ -32,8 +32,73 @@ h2{
     font-optical-sizing: auto;
     font-size: 40px;
     color: #121212;
+    font-weight: 500;
 }
 
+.newIntroSection{
+    display: flex;
+    align-items: center;
+    margin: 30px;
+
+    @media (max-width: 800px) {
+        display: block;
+    }
+
+}
+#first-line{
+    text-align: center;
+    font-weight: 300;
+    font-size: 30px;
+}
+#my-name{
+    font-size: 60px;
+    font-weight: 600;
+    @media(max-width: 800px){
+        font-size: 40px;
+        text-align: center;
+    }
+}
+#who-am-i{
+    text-align: center;
+    font-size: 45px;
+    @media(max-width: 800px){
+        font-size: 35px;
+    }
+}
+.intro-profile{
+    margin-top: 20px;
+    margin-bottom: 20px;
+    margin-left: 150px;
+    margin-right: 100px;
+    @media(max-width: 900px){
+        margin: auto;
+    }
+}
+.intro-profile img{
+    width: 400px;
+    border-radius: 50%;
+    border-style: double;
+    border-width: 4px;
+    border-color: #e89211;
+    @media (max-width: 900px){
+        display: block;
+        margin-left: auto;
+        margin-right: auto;
+        width: 200px;
+        margin-bottom: 10px;
+    }
+}
+.intro-bio{
+    margin-left: 100px;
+    @media (max-width: 900px){
+        margin: auto;
+    }
+}
+#description{
+    font-size: 15px;
+    font-weight: 400;
+    text-align: center;
+}
 div.university{
     font-size: 25px;
     margin-top: 10px;