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">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Your Name - Personal Branding</title>
<style>
    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; }
</style>
</head>
<body>
    <header>
        <div class="container">
            <h1>Your Name</h1>
        </div>
    </header>
    <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>
        </ul>
    </section>
</body>
</html>

Basic HTML structure with embedded CSS for a personal branding website. Contains a header, profile image section, and social links.

<script>
    // Toggle dark mode
    function toggleDarkMode() {
        document.body.classList.toggle('dark-mode');
    }
</script>

JavaScript function to toggle a 'dark-mode' class on the body element for a dark mode feature.

<style>
    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; }
</style>

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.