dereklseitz/dlseitz.dev-frontend
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat: add contact form and about page accordion feature

Browse Source
This commit is contained in:
Derek L. Seitz
2025-08-15 21:47:21 -05:00
parent ec151db8aa
commit 145e5f0a3f
4 changed files with 249 additions and 155 deletions
Download Patch File Download Diff File Expand all files Collapse all files

146
src/about.njk
View File

@@ -3,47 +3,35 @@ layout: base.njk
title: "About Derek"
stylesheet: /styles/about.css
isLandingPage: false
pageScripts: "/scripts/contact-form.js"
pageScripts:
- "/scripts/contact-form.js"
- "/scripts/accordion.js"
---
<!-- TODO
FUTURE IMPROVEMENT: Convert the three headered paragraphs in this About section
into interactive accordion-style cards.
- Only the headers of each card will be visible initially.
- When a user clicks or taps a header (supporting both desktop and mobile),
the corresponding paragraph content will expand below that header.
- This interaction will align with the style established on the landing page,
where similar cards reveal content on hover (desktop) or tap (mobile).
- Add an introductory line at the end of the main paragraphs that says something
like: "Click on the cards below to learn more about what makes me who I am."
- This approach enhances consistency across the site, demonstrating the value of
interactive UI components and accessibility-focused design.
- Additionally, it subtly showcases a feature potential clients might want for
their own sites, reinforcing my development approach and attention to detail.
-->
<section class="about-section module" id="bio" role="region" aria-labelledby="about-heading">
<h1 id="about-heading">About Derek L. Seitz</h1>
<h1 id="about-heading">Who <span class="i-am">I</span> Am</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>
<div class="accessibility-value module">
<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>
</div>
<div class="drive module">
<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>
</div>
<div class="partner module">
<h2>A Real Partner, Not an Agency</h2>
<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>
<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>
@@ -56,38 +44,66 @@ pageScripts: "/scripts/contact-form.js"
-->
<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. I'm here to answer those questions so you can have peace of mind in enhancing your web presence.</p>
<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>
<div class="contact-module module">
<form id="contact-form" aria-labelledby="contact-form-heading">
<fieldset>
<legend id="contact-form-heading">Contact Me</legend>
<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>
</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>
</div>
<div class="organization">
<label for="organization">Organization:</label>
<input type="text" id="organization" name="organization" placeholder="Optional">
</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>
</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="[0-9]{3}-[0-9]{3}-[0-9]{4}" required>
</div>
<label for="name">Name:</label>
<input type="text" id="name" name="name" placeholder="Your Name" required>
<div class="preferred-method">
<h3>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></textarea>
</fieldset>
<button type="submit">Send Message</button>
</div>
</div>
<p class="form-note">* Required fields</p>
<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>
</div>
</section>
</section>