Personal Branding Website Template

Using HTML, CSS, and JavaScript to create a personal branding website template that front-end developers can use to showcase their work and attract higher-paying clients or jobs.
<!DOCTYPE html>
<html lang="en">
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Your Name - Personal Branding</title>
    body { font-family: 'Arial', sans-serif; }
    .container { max-width: 1200px; margin: auto; }
    header { background: #333; color: white; padding: 10px 0; text-align: center; }
    .profile-section { padding: 50px 0; text-align: center; }
    .profile-image { width: 150px; height: 150px; border-radius: 50%; margin: auto; }
    h1 { color: #333; }
    .social-links { list-style: none; }
    .social-links li { display: inline; margin-right: 10px; }
        <div class="container">
            <h1>Your Name</h1>
    <section class="profile-section">
        <img class="profile-image" src="profile.jpg" alt="Your Profile Picture">
        <h2>Front End Developer</h2>
        <ul class="social-links">
            <li><a href="#" target="_blank">LinkedIn</a></li>
            <li><a href="#" target="_blank">GitHub</a></li>
            <li><a href="#" target="_blank">Twitter</a></li>
Basic HTML structure with embedded CSS for a personal branding website. Contains a header, profile image section, and social links.
    // Toggle dark mode
    function toggleDarkMode() {
JavaScript function to toggle a 'dark-mode' class on the body element for a dark mode feature.
    body.dark-mode { background: #121212; color: #f1f1f1; }
    body.dark-mode header { background: #222; }
    .dark-mode-btn { position: fixed; top: 10px; right: 10px; padding: 10px 20px; background: #333; color: #fff; cursor: pointer; }
CSS styles for the dark mode theme and the dark mode toggle button.
<button class="dark-mode-btn" onclick="toggleDarkMode()">Toggle Dark Mode</button>
Dark mode toggle button calling the 'toggleDarkMode()' JavaScript function on click.