Codehal Watch on YouTube

Animated Portfolio Website Template in HTML CSS & JS | Personal Website with Text Typing Animation

3 min read 6 months ago
Published on Oct 24, 2024 This response is partially generated with the help of AI. It may contain inaccuracies.

Table of Contents

Introduction

This tutorial guides you through creating an animated portfolio website using HTML, CSS, and JavaScript. You'll learn how to implement a text typing animation and design a personal portfolio that showcases your skills and projects. This project is perfect for web developers looking to enhance their portfolio with engaging animations.

Step 1: Set Up Your Project Environment

  1. Create Project Folder

    • Create a new folder on your computer for the project.

  2. Create HTML, CSS, and JavaScript Files

    • Inside the folder, create the following files

      • index.html for the HTML structure
      • styles.css for the CSS styles
      • script.js for the JavaScript functionality

Step 2: Build the HTML Structure

  1. Basic HTML Layout
    • Open index.html and add the following basic structure:
    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="styles.css">
    <title>Portfolio</title>
</head>
<body>
    <div class="container">
        <h1 class="typing-animation">Hello, I'm Your Name</h1>
        <p>Welcome to my portfolio!</p>
    </div>
    <script src="script.js"></script>
</body>
</html>

Step 3: Style Your Portfolio with CSS

  1. Add Basic Styles

    • Open styles.css and include the following styles to set up the layout:
    body {
    font-family: Arial, sans-serif;
    background-color: #f4f4f4;
    margin: 0;
    padding: 0;
}
.container {
    text-align: center;
    margin-top: 100px;
}

  2. Add Typing Animation Style

    • To create the typing effect, add these styles:
    .typing-animation {
    display: inline-block;
    border-right: 4px solid black;
    white-space: nowrap;
    overflow: hidden;
    animation: typing 4s steps(30, end), blink 0.75s step-end infinite;
}
@keyframes typing {
    from { width: 0; }
    to { width: 100%; }
}
@keyframes blink {
    from, to { border-color: transparent; }
    50% { border-color: black; }
}

Step 4: Implement JavaScript for Dynamic Text

  1. Create Typing Effect Logic
    • Open script.js and add the following code to create the typing animation:
    const textElement = document.querySelector('.typing-animation');
const text = 'Hello, I am Your Name';
let index = 0;

function type() {
    if (index < text.length) {
        textElement.innerHTML += text.charAt(index);
        index++;
        setTimeout(type, 100);
    }
}

type();

Step 5: Test Your Portfolio Website

  1. Open in Browser

    • Open index.html in a web browser to see your animated portfolio in action.

  2. Check for Issues

    • Ensure that the text typing effect works smoothly and that the layout appears as intended.

Conclusion

In this tutorial, you learned how to create an animated portfolio website using HTML, CSS, and JavaScript. You set up the project structure, built the HTML layout, styled it, and implemented a typing animation using JavaScript.

Next Steps

  • Enhance your portfolio by adding more sections (projects, skills, contact).
  • Experiment with different animations and styles to make your website unique.
  • Consider hosting your portfolio online to showcase your work to potential employers.

Table of Contents

Recent