chore: finalize about and contact pages, fix stylesheet path, add TODO comments for future improvements

src/about.njk

@@ -1,8 +1,66 @@
 ---
 layout: base.njk
-title: About Derek
-stylesheet: styles/about.css
+title: "About Derek"
+stylesheet: /styles/about.css
+isLandingPage: false
+pageScripts: "/scripts/contact-form.js"
 ---
 
-<h1>More About Derek</h1>
-<h2>Coming Soon!</h2>
+<section class="about-section" id="bio" role="region" aria-labelledby="about-heading">
+  <h1 id="about-heading">About Derek L. Seitz</h1>
+
+  <p>I’m a freelance developer dedicated to building clean, functional, and accessible web experiences. But beyond the code, I’m someone driven by a deep sense of purpose and a commitment to creating digital solutions that <strong>genuinely</strong> serve people.</p>
+
+  <p>My approach is simple: solve real problems and build with integrity. I believe great websites don’t just look good—they respect users’ time, adapt to diverse needs, and are built on a foundation of honesty and transparency. That’s why I communicate openly with clients, build trust through consistency, and deliver work that is both technically sound and thoughtfully designed.</p>
+
+  <h2>Accessibility is a Core Value</h2>
+
+  <p>Accessibility isn't just a buzzword for me—it’s a core value. From the start of any project, it’s built into my development process. I aim to align my work with the <a href="https://www.w3.org/WAI/WCAG21/quickref/" target="_blank" rel="noopener">Web Content Accessibility Guidelines (WCAG) 2.1 Level AA</a>, and I continuously review my practices to improve usability. By championing accessibility-first development, I ensure my work reflects my values of inclusivity and mutual respect.</p>
+
+  <h2>Driven by Curiosity and Empathy</h2>
+
+  <p>What truly drives me is an insatiable curiosity. I'm a critical thinker with a passion for understanding the world—whether through my work or my personal interests. From earning a recent Bachelor’s degree in Information Technology to conducting research for a master’s program, I’m always looking to grow. I believe this analytical mindset, paired with a strong sense of empathy, helps me not just understand a client’s vision, but also the people and purpose behind it.</p>
+
+  <h2>A Real Partner, Not an Agency</h2>
+
+  <p>I’m not a faceless agency—I’m a collaborative partner. My business is built on shared success and a belief that transparency, empathy, and high standards can coexist. When you work with me, you’re not just hiring a developer. You’re gaining a partner committed to bringing your unique vision to life—<strong>ethically</strong>, <strong>effectively</strong>, and <strong>accessibly</strong>.</p>
+</section>
+
+<hr>
+
+<section id="contact" class="contact-section" role="region" aria-labelledby="contact-heading">
+  <h2 id="contact-heading">Don't Hesitate to Reach Out!</h2>
+  <p>A website is often the most powerful marketing tool a business has, so it's normal to have questions. I'm here to answer those questions so you can have peace of mind in enhancing your web presence.</p>
+
+  <form id="contact-form" aria-labelledby="contact-form-heading">
+    <fieldset>
+      <legend id="contact-form-heading">Contact Me</legend>
+
+      <label for="name">Name:</label>
+      <input type="text" id="name" name="name" placeholder="Your Name" required>
+
+      <label for="email">Email:</label>
+      <input type="email" id="email" name="email" placeholder="you@example.com" required>
+
+      <label for="phone">Phone Number:</label>
+      <input type="tel" id="phone" name="phone" placeholder="(123) 456-7890" aria-describedby="phone-help">
+      <small id="phone-help">Optional. Format: (123) 456-7890</small>
+
+      <fieldset>
+        <legend>Preferred Contact Method:</legend>
+        <div>
+          <input type="radio" id="contact-email" name="contact-method" value="email" checked>
+          <label for="contact-email">Email</label>
+
+          <input type="radio" id="contact-phone" name="contact-method" value="phone">
+          <label for="contact-phone">Phone</label>
+        </div>
+      </fieldset>
+
+      <label for="message">Message:</label>
+      <textarea id="message" name="message" rows="5" placeholder="Your Message" required></textarea>
+
+      <button type="submit">Send Message</button>
+    </fieldset>
+  </form>
+</section>