Editable portfolio website

Code

<!DOCTYPE html>

<head>

<title>My Editable Portfolio</title>

<style>

body {

font-family: Arial, sans-serif;

margin: 0;

padding: 0;

background-color: #f4f4f4;

}

header {

background-color: #333;

color: white;

padding: 20px;

text-align: center;

}

.section {

padding: 20px;

margin: 20px;

background-color: white;

box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);

}

h2 {

color: #333;

}

.skills ul {

list-style-type: none;

padding: 0;

}

.skills li {

background-color: #eee;

margin: 5px;

padding: 5px;

border-radius: 4px;

}

.edit-btn {

margin-top: 10px;

padding: 10px 20px;

background-color: #4CAF50;

color: white;

border: none;

border-radius: 5px;

cursor: pointer;

}

.edit-btn:hover {

background-color: #45a049;

}

</style>

</head>

<body>

<h1 contenteditable="true">John Doe - Web Developer</h1>

</header>

<h2>About Me</h2>

<p contenteditable="true">Hello, I'm John, a passionate web developer with a love for building interactive and user-friendly websites.</p>

</div>

<h2>Skills</h2>

<li>JavaScript</li>

<li>React</li>

</ul>

</div>

<h2>Projects</h2>

<li>Project 1 - Portfolio Website</li>

<li>Project 2 - E-commerce Site</li>

<li>Project 3 - Blogging Platform</li>

</ul>

</div>

<button class="edit-btn" onclick="alert('Changes saved!')">Save Changes</button>

</footer>

</body>

</html>