---
layout: base.njk
metaDesc: "Learn about Derek L. Seitz's values as a freelance developer, his commitment to accessible design, and his collaborative approach to web development."
title: "About Derek"
stylesheet: /styles/about.css
isLandingPage: false
hCAPTCHA: "https://hcaptcha.com/1/api.js"
pageScripts: 
  - "/scripts/contact-form.js"
  - "/scripts/accordion.js"
---

<!-- ↓  Start About Module ↓ -->
<section class="about-section module" id="bio" role="region" aria-labelledby="about-heading">
  <h2 id="about-heading">Who <span class="i-am">I</span> Am</h2>
  <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>
  <p class="click">Click on the cards below to learn more about what makes me who I am.</p>
  <div class="accordion">
    <div class="accordion-item">
      <h2 class="accordion-header">Accessibility is a Core Value</h2>
      <div class="accordion-content">
        <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 class="w3-acag21" 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>
      </div>
    </div>
    <div class="accordion-item">
      <h2 class="accordion-header">Driven by Curiosity and Empathy</h2>
      <div class="accordion-content">
        <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>
      </div>
    </div>
    <div class="accordion-item">
      <h2 class="accordion-header">A Real Partner, Not an Agency</h2>
      <div class="accordion-content">
        <p>I’m not a faceless agency. Instead, think of me as a collaborative partner. My work is built on shared success and the 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>
      </div>
    </div>
  </div>
</section>

<!-- ↓  Start Contact Section ↓ -->
<section id="contact" class="contact-section module" 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 about the next steps! I'm here to answer those questions so you can have peace of mind in enhancing your web presence.</p>
  
  <!-- ↓  Start Contact Form ↓ -->
  <div class="contact-module module">
    <form id="contact-form" aria-labelledby="contact-form-heading">
      
      <div class="form-sections">
        <div class="contact-fields">
        
          <fieldset class="name-field">
            <legend>Contact Info</legend>
        
            <div class="first-name">
              <label for="first-name">First Name:<span class="req-ask">*</span></label>
              <input type="text" id="first-name" name="first-name" placeholder="Ex. Sally" required aria-describedby="first-name-error">
              <span class="error-message" id="first-name-error" aria-live="polite"></span>
            </div>
        
            <div class="last-name">
              <label for="last-name">Last Name:<span class="req-ask">*</span></label>
              <input type="text" id="last-name" name="last-name" placeholder="Ex. Westfield" required aria-describedby="last-name-error">
              <span class="error-message" id="last-name-error" aria-live="polite"></span>

            </div>
        
            <div class="organization">
              <label for="organization">Organization:</label>
              <input type="text" id="organization" name="organization" placeholder="Optional" aria-describedby="organization-error">
              <span class="error-message" id="organization-error" aria-live="polite"></span>
            </div>
          
            <div class="email">
              <label for="email">Email:<span class="req-ask">*</span></label>
              <input type="email" id="email" name="email" placeholder="Ex. user@domain.com" required aria-describedby="email-error">
              <span class="error-message" id="email-error" aria-live="polite"></span>
            </div>
    
            <div class="phone">
              <label for="phone">Phone:<span class="req-ask">*</span></label>
              <input type="tel" id="phone" name="phone" placeholder="Ex. (111) 333-4444" required aria-describedby="phone-error">
              <span class="error-message" id="phone-error" aria-live="polite"></span>
            </div>

            <div class="preferred-method" role="radiogroup" aria-labelledby="contact-method-label">
              <h3 id="contact-method-label">Preferred Contact Method</h3>
              <div class="radio-group">
        
                <div class="email-radio">
                  <input type="radio" id="contact-email" name="contact-method" value="email" checked required>
                  <label for="contact-email">Email</label>
                </div>
        
                <div class="phone-radio">
                  <input type="radio" id="contact-phone" name="contact-method" value="phone" required>
                  <label for="contact-phone">Phone</label>
                </div>
        
              </div>
            </div>
          </fieldset>
        </div>
      
        <div class="message-submit">
          
          <fieldset class="message-field">
            <legend>Message</legend>
            <label for="message">Questions or Feedback</label>
            <textarea id="message" name="message" rows="10" placeholder="What questions or feedback do you have for me?" required aria-describedby="message-error"></textarea>
            <span class="error-message" id="message-error" aria-live="polite"></span>
          </fieldset>

          <div class="checks">
            <div class="h-captcha" data-sitekey="b63e5b64-c6f2-4154-b5a6-77169a924022"></div>

            <div id="privacy" class="consent-statement">
              <p>By clicking "Send Message" below, you <strong>accept and agree to</strong> this site's <a href="../privacy-policy/" target="_blank" rel="noopener noreferrer">Privacy Policy</a>.</p>  
            </div>
            
          </div>

          <div class="submit-reset">
            <button type="submit">Send Message</button>
            <button type="reset">Reset Form</button>
          </div>


          <div class="honeypot-field" aria-hidden="true">
            <label for="url">Website URL</label>
            <input type="text" name="url" id="url" autocomplete="off" tabindex="-1">
          </div>
        
        </div>
      </div>
      <p class="form-note">* Required fields</p>

    </form>
  </div>
</section>