133 lines
7.8 KiB
Plaintext
133 lines
7.8 KiB
Plaintext
---
|
||
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" pattern="^(\(?\d{3}\)?[-.\s]?\d{3}[-.\s]?\d{4})$" 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="15" 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="h-captcha" data-sitekey="b63e5b64-c6f2-4154-b5a6-77169a924022"></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> |