Update: Intro section layout

Set: Image position and size
Set: Font size and text position

css/about.css

@@ -21,7 +21,7 @@ main {
   flex-direction: column;
   justify-content: center;
   align-items: center;
-  padding: 2rem;
+  padding: 1rem;
   box-sizing: border-box;
   position: relative;
 }
@@ -80,7 +80,92 @@ footer {
 .section1::before {
   background-image: url("https://static.vecteezy.com/system/resources/thumbnails/013/384/142/small_2x/fabric-texture-abstract-pattern-black-and-white-textiles-backgrounds-photo.jpg");
 }
+.section1 .portrait {
+  text-align: right;
+  margin-top: 0;
+  margin-right: -25rem;
+}
+.section1 .portrait img {
+  width: 350px;
+  height: 350px;
+  object-fit: cover;
+  border-radius: 50%;
+  box-shadow: 0 0 12px rgba(0, 0, 0, 0.6);
+}
+.section1 .content {
+  text-align: left;
+  margin-left: -30rem;
+}
+.section1 .content h1 {
+  font-size: 4rem;
+  margin-bottom: 1rem;
+  margin-top: -5rem;
+  color: #5488bf;
+  text-shadow: 0 0 9px #373737;
+}
+.section1 .content h1 .myname {
+  font-style: normal;
+  color: #fff;
+}
+.section1 .content .tagline {
+  font-size: 1.7rem;
+  text-align: left;
+}
+.section1 .content .tagline .tagline-item {
+  display: inline;
+  margin-right: 0.7ch;
+}
+.section1 .content .tagline .cursor {
+  display: inline-block;
+  animation: blink 1s steps(2, start) infinite;
+  margin-left: 0.2ch;
+}
+@media (max-width: 600px) {
+  .section1 .content {
+    margin: 0;
+  }
+  .section1 .content .portrait {
+    text-align: center;
+    margin: 0;
+  }
+  .section1 .content .portrait img {
+    width: 200px;
+    height: 200px;
+    object-fit: cover;
+    border-radius: 50%;
+    margin: 0;
+  }
+  .section1 .content h1 {
+    text-align: left;
+    margin-top: 0;
+    margin-bottom: 1ch;
+    margin-left: 1.5rem;
+    font-size: 2.7rem;
+  }
+  .section1 .content .tagline {
+    display: block;
+    margin-left: 1.5rem;
+  }
+  .section1 .content .tagline .tagline-item {
+    display: block;
+    margin-bottom: 0.3rem;
+  }
+  .section1 .content .tagline .tagline-item:last-child {
+    margin-bottom: 0;
+  }
+  .section1 .content .tagline .cursor {
+    margin-left: 0.4ch;
+  }
+}
 
+@keyframes blink {
+  0%, 100% {
+    color: rgba(255, 255, 255, 0);
+  }
+  50% {
+    color: #fff;
+  }
+}
 .section2::before {
   background-image: url("https://wallpapers.com/images/hd/integral-project-management-cover-erpo8ef1af3wuquu.jpg");
 }

html/about.html

@@ -10,8 +10,17 @@
   <main>
     <section class="section intro section1" id="intro">
       <div class="content">
-        <h1>Hello, I'm <i class="myname">[My Name]</i></h1>
+        <div class="portrait">
-        <p>Code Wizard | Linux Fanatic | Amateur Artist</p>
+          <img src="../img/me.jpg" alt="A stylized portrait" />
+        </div>
+        <h1>
+          Hello, I'm <span class="myname">[My Name]</span>
+        </h1>
+        <p>
+          <span class="tagline">Code Wizard. </span>
+          <span class="tagline">Terminal Fanatic. </span>
+          <span class="tagline">Amateur Artist. <span class="cursor">_</span></span>
+        </p>
       </div>
     </section>
 

scss/about.scss

@@ -27,7 +27,7 @@ main {
   flex-direction: column;
   justify-content: center;
   align-items: center;
-  padding: 2rem;
+  padding: 1rem;
   box-sizing: border-box;
   position: relative;
 
@@ -85,11 +85,113 @@ footer {
 
 // Example background images per section
 .section1 {
-    &::before {
+  &::before {
-      background-image: url('https://static.vecteezy.com/system/resources/thumbnails/013/384/142/small_2x/fabric-texture-abstract-pattern-black-and-white-textiles-backgrounds-photo.jpg');
+    background-image: url('https://static.vecteezy.com/system/resources/thumbnails/013/384/142/small_2x/fabric-texture-abstract-pattern-black-and-white-textiles-backgrounds-photo.jpg');
+  }
+
+  .portrait {
+    text-align: right;
+    margin-top: 0;
+    margin-right: -25rem;
+
+    img {
+      width: 350px;
+      height: 350px;
+      object-fit: cover;
+      border-radius: 50%;
+      //border: 3px solid rgba(255, 255, 255, 0.3);
+      box-shadow: 0 0 12px rgba(0, 0, 0, 0.6);
     }
+  }
+
+  .content {
+    text-align: left;
+    margin-left: -30rem;
+    h1 {
+      font-size: 4rem;
+      margin-bottom: 1rem;
+      margin-top: -5rem;
+      color: #5488bf;
+      text-shadow: 0 0 9px #373737;
+
+      .myname {
+        font-style: normal;
+        color: $text-color;
+      }
+    }
+
+    .tagline {
+      font-size: 1.7rem;
+      //color: #ccc;
+      text-align: left;
+
+      .tagline-item {
+        display: inline;
+        margin-right: 0.7ch;
+      }
+
+      .cursor {
+        display: inline-block;
+        animation: blink 1s steps(2, start) infinite;
+        margin-left: 0.2ch;
+      }
+    }
+  }
+
+  @media (max-width: 600px) {
+    .content {
+      margin: 0;
+      .portrait {
+        text-align: center;
+        margin: 0;
+
+        img {
+          width: 200px;
+          height: 200px;
+          object-fit: cover;
+          border-radius: 50%;
+          margin: 0;
+          //border: 3px solid rgba(255, 255, 255, 0.3);
+          //box-shadow: 0 0 12px rgba(0, 0, 0, 0.6);
+        }
+      }
+
+      h1 {
+        text-align: left;
+        margin-top: 0;
+        margin-bottom: 1ch;
+        margin-left: 1.5rem;
+      font-size: 2.7rem;
+      }
+
+      .tagline {
+      display: block;
+        margin-left: 1.5rem;
+
+      .tagline-item {
+        display: block;
+        margin-bottom: 0.3rem;
+      }
+
+      .tagline-item:last-child {
+        margin-bottom: 0; // remove extra space after last line
+      }
+
+      .cursor {
+        margin-left: 0.4ch; // keep close to text
+      }
+    }
+    }
+  }
 }
 
+// Blinking cursor animation
+@keyframes blink {
+  0%, 100% { color: #fff0; }
+  50% { color: #fff; }
+}
+
+
 .section2 {
     &::before {
       background-image: url('https://wallpapers.com/images/hd/integral-project-management-cover-erpo8ef1af3wuquu.jpg');