<!DOCTYPE html>

<html lang="en">

<head>

  <meta charset="UTF-8">

  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <title>My Portfolio</title>

  <link rel="stylesheet" href="style.css">

</head>

<body>

 

  <header>

    <h1>Jordan Lee</h1>

    <nav>

      <a href="#about">About</a>

      <a href="#projects">Projects</a>

      <a href="#contact">Contact</a>

    </nav>

  </header>

 

  <main>

    <section id="about">

      <h2>About Me</h2>

      <p>I am a <strong>front-end developer</strong> who loves building clean, simple websites.</p>

      <img src="profile.jpg" alt="Photo of Jordan Lee" width="150">

    </section>

 

    <section id="projects">

      <h2>Projects</h2>

      <ul>

        <li>Personal Blog</li>

        <li>Recipe Finder App</li>

        <li>Weather Dashboard</li>

      </ul>

    </section>

 

    <section id="contact">

      <h2>Contact Me</h2>

      <form action="/submit" method="post">

        <label for="name">Name</label>

        <input type="text" id="name" required>

 

        <label for="email">Email</label>

        <input type="email" id="email" required>

 

        <label for="message">Message</label>

        <textarea id="message" rows="4"></textarea>

 

        <button type="submit">Send</button>

      </form>

    </section>

  </main>

 

  <footer>

    <p>&copy; 2026 Jordan Lee. All rights reserved.</p>

  </footer>

 

  <script src="script.js"></script>

</body>

</html>

/* Reset some default spacing */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}

body {
font-family: 'Segoe UI', Arial, sans-serif;
line-height: 1.6;
color: #2b2b2b;
background-color: #f7f8fa;
}

/* Header */
header {
display: flex;
justify-content: space-between;
align-items: center;
padding: 20px 40px;
background-color: #1f2937;
color: white;
position: sticky;
top: 0;
z-index: 10;
}

header h1 {
font-size: 22px;
letter-spacing: 0.5px;
}

nav a {
color: #d1d5db;
text-decoration: none;
margin-left: 25px;
font-size: 15px;
transition: color 0.2s ease;
}

nav a:hover {
color: #ffffff;
}

/* Main content */
main {
max-width: 800px;
margin: 0 auto;
padding: 40px 20px;
}

section {
background: white;
padding: 30px;
margin-bottom: 30px;
border-radius: 10px;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.06);
}

section h2 {
font-size: 24px;
color: #1f2937;
margin-bottom: 15px;
border-bottom: 3px solid #3b82f6;
display: inline-block;
padding-bottom: 5px;
}

section p {
margin-bottom: 15px;
color: #4b5563;
}

/* About section image */
#about img {
border-radius: 50%;
border: 3px solid #3b82f6;
margin-top: 10px;
}

/* Projects list */
#projects ul {
list-style: none;
}

#projects li {
background-color: #f0f4f8;
padding: 12px 16px;
margin-bottom: 10px;
border-left: 4px solid #3b82f6;
border-radius: 4px;
font-weight: 500;
}

/* Form styling */
form {
display: flex;
flex-direction: column;
gap: 15px;
}

label {
font-weight: 600;
font-size: 14px;
color: #374151;
}

input,
textarea {
padding: 10px 12px;
border: 1px solid #d1d5db;
border-radius: 6px;
font-size: 14px;
font-family: inherit;
}

input:focus,
textarea:focus {
outline: none;
border-color: #3b82f6;
box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.15);
}

button {
background-color: #3b82f6;
color: white;
border: none;
padding: 12px;
border-radius: 6px;
font-size: 15px;
cursor: pointer;
transition: background-color 0.2s ease;
}

button:hover {
background-color: #2563eb;
}

/* Footer */
footer {
text-align: center;
padding: 20px;
color: #9ca3af;
font-size: 14px;
}

let visitorName = "friend";

function greetVisitor() {

    console.log("Welcome, " + visitorName + "!");

}

greetVisitor();

const button = document.querySelector("#contact button");

button.addEventListener("click", function (event) {

    event.preventDefault();

    alert("Thanks for reaching out! We will reply soon.");

});