Build a Stunning & Responsive "About Us" Page with Typing Animation (HTML, CSS, JS)
A full tutorial by MCA Waala
👋 Hello and welcome to **MCA Waala**!
In today's tutorial, we're diving deep into front-end development to create an absolutely stunning and fully **responsive "About Us" or Portfolio Hero Section**. This isn't just any static page; we're adding a cool, modern **dynamic typing animation** using pure JavaScript to make your profile stand out!
Whether you're building a portfolio, a company's about page, or just practicing your skills, this sleek design featuring a profile image with a glowing border and clean layout is exactly what you need. Let's start coding!
1. The HTML Structure: The Foundation
The HTML provides the basic layout for our "About Us" page. We'll include a `container`, a `hero-section`, and two main divs: `hero-content` for the text and buttons, and `hero-image-container` for the profile picture. Crucially, we link Font Awesome for the icons and include the CSS and JavaScript (though we'll keep them in separate files for best practice later).
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Responsive About us Page Using HTML CSS and JavaScript</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css"> <!-- For this tutorial, we'll keep the <style> and <script> tags here --> </head> <body> <div class="container"> <main class="hero-section"> <div class="hero-content"> <div class="intro-text"> <span class="highlight-name">John Doe</span> <h1>I'm <span id="dynamic-text"></span></h1> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit...</p> </div> <div class="hero-actions"> <button class="btn hire-me-btn">Hire Me</button> <button class="btn download-cv-btn secondary-btn">Download CV <i class="fas fa-download"></i></button> </div> <div class="social-links"> <a href="#"><i class="fab fa-facebook-f"></i></a> <a href="#"><i class="fab fa-twitter"></i></a> <a href="#"><i class="fab fa-linkedin-in"></i></a> <a href="#"><i class="fab fa-instagram"></i></a> <a href="#"><i class="fab fa-github"></i></a> </div> </div> <div class="hero-image-container"> <img src="profile.jpg" alt="John Doe Profile" class="hero-image"> </div> </main> </div> <script> // JavaScript Code will go here </script> </body> </html>
***Remember to replace `profile.jpg` with the path to your actual profile image!***
2. The CSS Magic: Styling and Responsiveness
The CSS is where the magic happens. We use **Flexbox** for the layout, a subtle **linear-gradient** for the background, and a beautiful, complex **box-shadow** on the profile image to create that popular "glowing" effect. Don't forget the **`@media` queries** at the end for full responsiveness on mobile devices!
/* Basic Reset and Global Styles */ * { margin: 0; padding: 0; box-sizing: border-box; } body { font-family: sans-serif; background: linear-gradient(135deg, #e0f7fa, #4dd0e1); display: flex; justify-content: center; align-items: center; min-height: 100vh; overflow-x: hidden; } .container { width: 70%; max-width: 1200px; background-color: white; border-radius: 20px; padding: 50px; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1); transition: all 0.3s ease; } /* --- Hero Section & Image Glow --- */ .hero-section { display: flex; align-items: center; padding-top: 0; } .hero-image { width: 300px; height: 300px; border-radius: 50%; object-fit: cover; border: 5px solid transparent; /* The beautiful glowing effect */ box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.8), /* Inner white ring */ 0 0 0 12px rgba(0, 123, 255, 0.2), /* Light blue glow 1 */ 0 0 0 20px rgba(0, 123, 255, 0.1), /* Light blue glow 2 */ 0 8px 25px rgba(0, 0, 0, 0.2); /* Soft drop shadow */ transition: all 0.5s ease-in-out; transform: scale(1); } .hero-image:hover { transform: scale(1.05); /* Zoom in on hover */ box-shadow: 0 0 0 4px rgba(255, 255, 255, 1), 0 0 0 16px rgba(0, 123, 255, 0.3), 0 0 0 28px rgba(0, 123, 255, 0.15), 0 12px 35px rgba(0, 0, 0, 0.3); } /* Style for the Dynamic Text Cursor/Caret */ #dynamic-text::after { content: '|'; display: inline-block; animation: blink-caret 0.75s step-end infinite; margin-left: 5px; font-weight: 300; } @keyframes blink-caret { from, to { opacity: 0; } 50% { opacity: 1; } } /* --- Responsiveness for Mobile (900px breakpoint) --- */ @media (max-width: 900px) { .hero-section { flex-direction: column; /* Stack items vertically */ text-align: center; } .hero-image-container { order: -1; /* Move image to the top on mobile */ margin-bottom: 30px; } .hero-image { width: 150px; height: 150px; } .hero-content { max-width: 100%; padding-right: 0; } }
3. The JavaScript: Dynamic Typing Animation
The JavaScript is responsible for the cool typewriter effect. It cycles through an array of words (`Designer`, `Developer`, etc.), types them out character by character, and then deletes them before moving to the next one. This effect is achieved using `setTimeout` to control the typing and deleting speed.
<script> document.addEventListener('DOMContentLoaded', () => { const dynamicTextElement = document.getElementById('dynamic-text'); const words = ["Designer", "Developer", "Freelancer", "Creator"]; let wordIndex = 0; let charIndex = 0; let isDeleting = false; let typingSpeed = 150; let deletingSpeed = 75; let delay = 1500; // Pause before starting deletion function typeWriter() { const currentWord = words[wordIndex]; if (isDeleting) { dynamicTextElement.textContent = currentWord.substring(0, charIndex - 1); charIndex--; } else { dynamicTextElement.textContent = currentWord.substring(0, charIndex + 1); charIndex++; } let speed = isDeleting ? deletingSpeed : typingSpeed; if (!isDeleting && charIndex === currentWord.length) { isDeleting = true; speed = delay; } else if (isDeleting && charIndex === 0) { isDeleting = false; wordIndex = (wordIndex + 1) % words.length; speed = typingSpeed; } setTimeout(typeWriter, speed); } typeWriter(); }); </script>
🚀 Next Steps and Final Thoughts from MCA Waala
And there you have it! A professional, highly responsive, and dynamic "About Me" hero section ready for any portfolio. This combination of Flexbox for layout, advanced CSS for styling (especially that hover glow!), and pure JavaScript for the typing effect shows off all your essential front-end skills.
Stay Connected....
Happy Coding!
comment 0 comments
more_vert