Add "intro-text" to Hero section

Author: amirallami-code

src/index.html

@@ -205,11 +205,18 @@
       </nav>
     </header>
     <main class="main">
-      <section id="home" class="section container gap-8 mt-12">
-        <div class="home-info flex flex-col w-full max-w-[38rem] gap-3">
-          <h1 class="title min-h-[3.7em] md:min-h-[2.5em]">
-            Hi, My name is Amir. I'm a Web developer
-          </h1>
+      <section id="home" class="section container gap-8 sm:mt-12">
+        <div class="home-info flex flex-col w-full max-w-[38rem] gap-4">
+          <div class="flex flex-col justify-end min-h-36 m:min-h-0">
+            <h1 class="title h-full">
+              Hi, My name is Amir. I'm a Web developer
+            </h1>
+          </div>
+          <p class="intro-text text-justify opacity-70">
+            Building modern, responsive websites with clean code and
+            user-friendly design. Passionate about JavaScript, React, and the
+            endless possibilities of the web.
+          </p>
           <div class="buttons-wrapper flex flex-row flex-wrap gap-4">
             <a href="#about"><button class="button">Who am I?!</button></a>
             <a href="#touch"><button class="button">Connect</button></a>
@@ -275,6 +282,7 @@ <h1 class="title min-h-[3.7em] md:min-h-[2.5em]">
                 <div>146</div>
                 <div>147</div>
                 <div>148</div>
+                <div>149</div>
               </div>
               <pre
                 class="code-content"
@@ -284,6 +292,10 @@ <h1 class="title min-h-[3.7em] md:min-h-[2.5em]">
     &lt;<span class="tag">h1</span> <span class="attr">class</span>=<span class="string">"title min-h-28 md:min-h-36"</span>&gt;
         Hi, My name is Amir. I'm a <span id="role-code-text"></span>
     &lt;/<span class="tag">h1</span>&gt;
+    &lt;<span class="tag">p</span> <span class="attr">class</span>=<span class="string">"intro-text text-justify opacity-70"</span>&gt;
+      Building modern, responsive websites with clean code and user-friendly design. 
+      Passionate about JavaScript, React, and theendless possibilities of the web.
+    &lt;/<span class="tag">p</span>&gt;
     &lt;<span class="tag">div</span> <span class="attr">class</span>=<span class="string">"buttons-wrapper flex flex-row flex-wrap gap-4"</span>&gt;
       &lt;<span class="tag">button</span> <span class="attr">class</span>=<span class="string">"button"</span>&gt;&lt;<span class="tag">a</span> <span class="attr">href</span>=<span class="string">"#about"</span>&gt;Who am I?!&lt;/<span class="tag">a</span>&gt;&lt;/<span class="tag">button</span>&gt;
       &lt;<span class="tag">button</span> <span class="attr">class</span>=<span class="string">"button"</span>&gt;&lt;<span class="tag">a</span> <span class="attr">href</span>=<span class="string">"#touch"</span>&gt;Connect&lt;/<span class="tag">a</span>&gt;&lt;/<span class="tag">button</span>&gt;

src/input.css

@@ -83,7 +83,7 @@
     @apply font-mont-bold;
   }
 
-  /* Scroll-bar */
+  /* Main scroll-bar */
   body::-webkit-scrollbar {
     @apply w-3;
   }

src/js/app.js

@@ -105,7 +105,7 @@ document.addEventListener('DOMContentLoaded', function () {
     const initialText = titleElement.textContent.trim();
     const rolePart = initialText.split("I'm a ")[1] || "Front-end developer";
 
-    const roles = [rolePart, "Graphic Designer"];
+    const roles = [rolePart, "Graphic Designer", "UI/UX Designer"];
 
     // Create span for title
     const titleSpan = document.createElement('span');

src/output.css

@@ -632,7 +632,7 @@ b {
   font-family: montserrat-bold, sans-sarif;
 }
 
-/* Scroll-bar */
+/* Main scroll-bar */
 
 body::-webkit-scrollbar {
   width: 0.75rem;
@@ -1757,6 +1757,30 @@ body::-webkit-scrollbar-thumb {
   height: 100%;
 }
 
+.h-28 {
+  height: 7rem;
+}
+
+.h-\[2em\] {
+  height: 2em;
+}
+
+.h-\[2\.5em\] {
+  height: 2.5em;
+}
+
+.max-h-\[3\.7em\] {
+  max-height: 3.7em;
+}
+
+.max-h-\[2\.5em\] {
+  max-height: 2.5em;
+}
+
+.max-h-36 {
+  max-height: 9rem;
+}
+
 .min-h-28 {
   min-height: 7rem;
 }
@@ -1765,6 +1789,30 @@ body::-webkit-scrollbar-thumb {
   min-height: 3.7em;
 }
 
+.min-h-24 {
+  min-height: 6rem;
+}
+
+.min-h-10 {
+  min-height: 2.5rem;
+}
+
+.min-h-40 {
+  min-height: 10rem;
+}
+
+.min-h-36 {
+  min-height: 9rem;
+}
+
+.min-h-\[3\.7rem\] {
+  min-height: 3.7rem;
+}
+
+.min-h-3 {
+  min-height: 0.75rem;
+}
+
 .w-12 {
   width: 3rem;
 }
@@ -1875,6 +1923,10 @@ body::-webkit-scrollbar-thumb {
   align-items: center;
 }
 
+.justify-end {
+  justify-content: flex-end;
+}
+
 .justify-center {
   justify-content: center;
 }
@@ -1903,6 +1955,10 @@ body::-webkit-scrollbar-thumb {
   gap: 2rem;
 }
 
+.gap-5 {
+  gap: 1.25rem;
+}
+
 .space-x-2 > :not([hidden]) ~ :not([hidden]) {
   --tw-space-x-reverse: 0;
   margin-right: calc(0.5rem * var(--tw-space-x-reverse));
@@ -2142,6 +2198,18 @@ body::-webkit-scrollbar-thumb {
   opacity: 1;
 }
 
+.opacity-80 {
+  opacity: 0.8;
+}
+
+.opacity-60 {
+  opacity: 0.6;
+}
+
+.opacity-70 {
+  opacity: 0.7;
+}
+
 .shadow-btn {
   --tw-shadow: -5px 4px 0px 0px #241c15;
   --tw-shadow-colored: -5px 4px 0px 0px var(--tw-shadow-color);
@@ -2178,6 +2246,12 @@ body::-webkit-scrollbar-thumb {
   transition-duration: 150ms;
 }
 
+.transition-all {
+  transition-property: all;
+  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+  transition-duration: 150ms;
+}
+
 .duration-1000 {
   transition-duration: 1000ms;
 }
@@ -2286,6 +2360,14 @@ body::-webkit-scrollbar-thumb {
 }
 
 @media (min-width: 640px) {
+  .sm\:mt-12 {
+    margin-top: 3rem;
+  }
+
+  .sm\:min-h-0 {
+    min-height: 0px;
+  }
+
   .sm\:grid-cols-2 {
     grid-template-columns: repeat(2, minmax(0, 1fr));
   }
@@ -2304,6 +2386,10 @@ body::-webkit-scrollbar-thumb {
     min-height: 2.5em;
   }
 
+  .md\:min-h-0 {
+    min-height: 0px;
+  }
+
   .md\:w-44 {
     width: 11rem;
   }

tailwind.config.js

@@ -14,7 +14,7 @@ module.exports = {
         priBlack: '#0f172a',
         priGray: '#241c15',
 
-        // Github section's color
+        // Github section color
         gitBlack: '#0d1116',
         gitWhite: '#fff',
         gitGray: '#3d444d',