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

.

Browse Source
This commit is contained in:
Derek L. Seitz
2025-08-15 16:02:20 -05:00
parent 4f9299e8b2
commit 3a9e0c89a6
12 changed files with 294 additions and 175 deletions
Download Patch File Download Diff File Expand all files Collapse all files

109
src/about.njk
View File

@@ -6,61 +6,88 @@ isLandingPage: false
pageScripts: "/scripts/contact-form.js"
---
<section class="about-section" id="bio" role="region" aria-labelledby="about-heading">
<!-- 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>
<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>
<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>
<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>
<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>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>
<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>
</section>
<hr>
<section id="contact" class="contact-section" role="region" aria-labelledby="contact-heading">
<!-- TODO
- horizontally align radios
- fix aria comment after phone input
- style input labels
- make text inputs shorter
- better "message" placeholder
-->
<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>
<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>
<div class="contact-module module">
<form id="contact-form" aria-labelledby="contact-form-heading">
<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>
<legend id="contact-form-heading">Contact Me</legend>
<input type="radio" id="contact-phone" name="contact-method" value="phone">
<label for="contact-phone">Phone</label>
</div>
<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>
<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>
</form>
</div>
</section>