Added Animations to all Headers

index.html

@@ -21,7 +21,7 @@
             <a href="https://twitter.com/Codecologist"><i class="fa-brands fa-square-twitter"></i></a>
             <a href="https://www.youtube.com/channel/UCqr3HoBvla1s9hK5CCKI_Kg"><i class="fa-brands fa-youtube"></i></a>
 
-            <a href="Resume.txt" download="Resume.txt">
+            <a href="Resume.pdf">
                 <button class="resumeDownload">
                     <i class="fa-solid fa-file-arrow-down"></i>
                     Resume</button></a>
@@ -32,19 +32,23 @@
         <h1>Bryan Ramos</h1>
             <div class="typewriterArea">
                 <h2 class="code">&lt;</h2>
-                <h2 class="element">h2</h2>
+               <!-- <h2 class="element">h2</h2>
                 <h2 class="class">class=</h2>
                 <h2 class="className">"title"</h2>
-                <h2 class="code">&gt;</h2>
+                <h2 class="code">&gt;</h2> -->
-                <h2 class="plaintext">Fullstack Developer</h2>
+                <h2 class="class">Fullstack Developer</h2>
-                <h2 class="code">&lt;/</h2>
+                <!-- <h2 class="code">&lt;</h2>
-                <h2 class="element">h2</h2>
+                <h2 class="element">h2</h2> -->
-                <h2 class="code">&gt;</h2>
+                <h2 class="code">/&gt;</h2>
             </div>
     </section>
 
     <section class="portfolio">
-        <h3>Portfolio</h3>
+        <div class="typewriterArea2">
+            <h3 class="code">{:</h3>
+            <h3 class="className">Portfolio</h3>
+            <h3 class="code">};</h3>
+        </div>
         <div class="projectsGalleryGrid">
             <a><img class="project project1" src="https://media.istockphoto.com/vectors/thumbnail-image-vector-graphic-vector-id1147544807?k=20&m=1147544807&s=612x612&w=0&h=pBhz1dkwsCMq37Udtp9sfxbjaMl27JUapoyYpQm0anc="></a>
             <a><img class="project project2" src="https://media.istockphoto.com/vectors/thumbnail-image-vector-graphic-vector-id1147544807?k=20&m=1147544807&s=612x612&w=0&h=pBhz1dkwsCMq37Udtp9sfxbjaMl27JUapoyYpQm0anc="></a>
@@ -56,7 +60,11 @@
     </section>
 
     <section class="technologies">
-        <h3>Technologies</h3>
+        <div class="typewriterArea3">
+            <h3 class="code">(--</h3>
+            <h3 class="variableName">Technologies</h3>
+            <h3 class="code">);</h3>
+        </div>
         <div class="technologiesIconsGrid">
             <i class="fa-brands fa-html5 fa-3x"></i>
             <i class="fa-brands fa-css3 fa-3x"></i>
@@ -81,14 +89,14 @@
 
     <section class="contact">
         <h3 class="contactMe">[contactme@ContactForm]$</h3>
-        <div class="contactForm">
+    <!--<div class="contactForm">
             <form id="contact" method="post" action="">
                 <input class="formField" name="name" type="text" placeholder="Your Name" required>
                 <input class="formField" name="email" type="email" placeholder="Your Email" required>
                 <textarea class="formField" name="message" style="resize:none" placeholder="Your Message..." rows="4" required></textarea>
                 <input class="formField" type="submit" value="Send Message!">
             </form>
-        </div>
+        </div>-->
     </section>
 
 </body>

styles.css

@@ -9,6 +9,7 @@
     --tertiaryTextColor: #A9DC76;
     --codeColor: #d3d3d3;
     --elementColor: #bc0457;
+    --variableColor: #d152f7;
 }
 
 /* Document Styling */
@@ -47,6 +48,7 @@ h3 {
     color: var(--primaryTextColor);
     margin-bottom: 10px;
     text-align: center;
+    display: inline-block;
 }
 
 /* Animation Source */
@@ -54,7 +56,17 @@ h3 {
 /* Typewriter Animation */
     @keyframes typing {
         from { width:0 }
-        to { width: 60% }
+        to { width: 35% }
+    }
+
+    @keyframes typing2 {
+        from { width: 0 }
+        to { width: 30% }
+    }
+
+    @keyframes typing3 {
+        from { width: 0 }
+        to { width: 40% }
     }
 
     @keyframes blink {
@@ -62,6 +74,11 @@ h3 {
         50% { border-color: var(--elementColor);}
     }
 
+    @keyframes appear {
+        from { opacity: 0 }
+        to { opacity: 1 }
+    }
+
 /* Fade-In Animation */
     @keyframes fadeIn {
         from { opacity: 0 }
@@ -71,22 +88,34 @@ h3 {
 /* Code-Like Syntax Highlighting Styling */
     .code {
         color: var(--codeColor);
+        white-space: nowrap;
     }
 
     .element {
         color: var(--elementColor);
+        white-space: nowrap;
+
     }
 
     .class {
         color: var(--secondaryTextColor);
         font-style: italic;
+        white-space: nowrap;
+
     }
 
     .className {
-        color: var(--tertiaryTextColor)
+        color: var(--tertiaryTextColor);
+        white-space: nowrap;
     }
+
     .plaintext {
         color: var(--primaryTextColor);
+        white-space: nowrap;
+    }
+
+    .variableName {
+        color: var(--variableColor);
     }
 
 
@@ -212,13 +241,13 @@ h3 {
 .typewriterArea {
     display: inline-block;
     text-align: center;
-    border-right: .15em solid var(--elementColor);
+    border-right: .10em solid var(--elementColor);
     border-color: var(--elementColor);
     overflow: hidden;
     white-space: nowrap;
     letter-spacing: 3px;
     animation:
-        typing 2s steps(40, end),
+        typing 2s steps(30, end),
         blink 0.9s step-end infinite;
 }
 
@@ -231,20 +260,29 @@ h3 {
     margin: 0;
 }
 
+.typewriterArea2 {
+    display: inline-block;
+    text-align: center;
+    border-right: .10em solid var(--elementColor);
+    border-color: var(--elementColor);
+    overflow: hidden;
+    white-space: nowrap;
+    letter-spacing: 3px;
+    animation:
+        typing2 2s steps(30, end),
+        blink 0.9s step-end infinite;
+}
+
 .projectsGalleryGrid {
-    display: flex;
     justify-content: center;
-    align-items: center;
     color: var(--primaryTextColor);
     font-family: 'Ubuntu', sans-serif;
     display: grid;
     gap: 10px;
-    grid-template-columns: repeat(3, 33.3vw);
+    grid-template-columns: repeat(2, 40vw);
     opacity: 0;
-    animation-name: fadeIn;
+    animation:
-    animation-duration: 5s;
+        fadeIn 5s 3s forwards;
-    animation-delay: 3s;
-    animation-fill-mode: forwards;
 }
 
 .project {
@@ -260,6 +298,19 @@ h3 {
     padding-bottom: 10px;
 }
 
+.typewriterArea3 {
+    display: inline-block;
+    text-align: center;
+    border-right: .10em solid var(--elementColor);
+    border-color: var(--elementColor);
+    overflow: hidden;
+    white-space: nowrap;
+    letter-spacing: 3px;
+    animation:
+        typing3 2s steps(30, end),
+        blink 0.9s step-end infinite;
+}
+
 .technologiesIconsGrid {
     display: flex;
     justify-content: center;
@@ -268,15 +319,13 @@ h3 {
     font-family: 'Ubuntu', sans-serif;
     display: grid;
     gap: 20px;
+    opacity: 0;
     grid-template-columns: repeat(3, 20vw);
+    animation:
+        fadeIn 3s 5s forwards;
 }
 
 
-
-.fa-brands {
-    font-family: 'Righteous', cursive;
-}
-
 /* Brand Colors */
     .fa-html5 {
         color: #f06529;