From 145e5f0a3fb9d6b3eb3d264dcbd4d60a6e63f418 Mon Sep 17 00:00:00 2001 From: dereklseitz Date: Fri, 15 Aug 2025 21:47:21 -0500 Subject: [PATCH] feat: add contact form and about page accordion feature --- .vscode/settings.json | 3 + src/about.njk | 146 +++++++++++++----------- src/scripts/accordion.js | 14 +++ src/styles/about.css | 241 ++++++++++++++++++++++++--------------- 4 files changed, 249 insertions(+), 155 deletions(-) create mode 100644 src/scripts/accordion.js diff --git a/.vscode/settings.json b/.vscode/settings.json index c30fbcf..64bc236 100644 --- a/.vscode/settings.json +++ b/.vscode/settings.json @@ -1,5 +1,8 @@ { "cSpell.words": [ "wireframing" + ], + "cSpell.ignoreWords": [ + "Westfield" ] } \ No newline at end of file diff --git a/src/about.njk b/src/about.njk index 086bdfb..cbace84 100644 --- a/src/about.njk +++ b/src/about.njk @@ -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" --- - -
-

About Derek L. Seitz

- +

Who I Am

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 genuinely serve people.

-

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.

- -
-

Accessibility is a Core Value

- -

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 Web Content Accessibility Guidelines (WCAG) 2.1 Level AA, 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.

-
-
-

Driven by Curiosity and Empathy

- -

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.

-
-
-

A Real Partner, Not an Agency

- -

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: ethically, effectively, and accessibly.

+

Click on the cards below to learn more about what makes me who I am.

+
+
+

Accessibility is a Core Value

+
+

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 Web Content Accessibility Guidelines (WCAG) 2.1 Level AA, 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.

+
+
+
+

Driven by Curiosity and Empathy

+
+

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.

+
+
+
+

A Real Partner, Not an Agency

+
+

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: ethically, effectively, and accessibly.

+
+
@@ -56,38 +44,66 @@ pageScripts: "/scripts/contact-form.js" -->

Don't Hesitate to Reach Out!

-

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.

+

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.

-
- Contact Me + +
+
+
+ Contact Info +
+ + +
+ +
+ + +
+ +
+ + +
+ + + +
+ + +
- - +
+

Preferred Contact Method

+
+ +
+ + +
+
+
+
+
+ +
+
+ Message + + +
+ +
+
+

* Required fields

- - - - - - Optional. Format: (123) 456-7890 - -
- Preferred Contact Method: -
- - - - - -
-
- - - - - -
-
+ \ No newline at end of file diff --git a/src/scripts/accordion.js b/src/scripts/accordion.js new file mode 100644 index 0000000..5929f31 --- /dev/null +++ b/src/scripts/accordion.js @@ -0,0 +1,14 @@ +document.addEventListener('DOMContentLoaded', (event) => { + const accordionHeaders = document.querySelectorAll('.accordion-header'); + + accordionHeaders.forEach(header => { + header.addEventListener('click', () => { + const content = header.nextElementSibling; + if (content.style.display === 'block') { + content.style.display = 'none'; + } else { + content.style.display = 'block'; + } + }); + }); +}); \ No newline at end of file diff --git a/src/styles/about.css b/src/styles/about.css index e8de3c6..35ec16b 100644 --- a/src/styles/about.css +++ b/src/styles/about.css @@ -9,20 +9,25 @@ body { max-width: 1000px; margin: 30px auto; padding: 0 20px; - color: #495057; + color: var(--text-color); line-height: 1.6; } .about-section h1, .about-section h2 { - color: #495057; - margin-bottom: 20px; + color: var(--text-color); + margin-bottom: var(--margin-medium); +} + +.i-am { + color: #ea7e0b; + font-weight: bold; } .about-section h1 { font-size: 2.5rem; text-align: center; - margin-bottom: 20px; + margin-bottom: var(--margin-medium); } .about-section h2 { @@ -32,11 +37,18 @@ body { .about-section p { margin-bottom: 5px; font-size: 1.05rem; - text-align: left; + text-align: center; +} + +.click { + font-weight: bold; + color:#ea7e0b; + margin-top: 20px; + text-align: center; } .about-section a { - color: #2e97be; + color: var(--primary-color); text-decoration: underline; } @@ -44,112 +56,161 @@ body { text-decoration: none; } -/*? ↓ Contact Section Styles ↓ */ - -.contact-section { - max-width: 1200px; - margin: 80px auto; - padding: 0 20px; - color: #495057; - background-color: #d3e9f1; -} - -.contact-section h2 { - font-size: 2rem; - margin: 20px 0px; - text-align: center; -} - -.contact-section p { - text-align: center; - margin-bottom: 40px; - font-size: 1.1rem; - line-height: 1.5; -} - -/*? ↓ Contact Form Styles ↓ */ - -#contact-form { - background-color: #ffffff; - border: 1px solid #dee2e6; - border-radius: 10px; - padding: 30px; - box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05); -} - -#contact-form fieldset { - border: none; - padding: 0; -} - -#contact-form legend { - font-size: 1.5rem; - font-weight: 600; - margin-bottom: 25px; - color: #2e97be; - text-align: center; -} - -#contact-form label { - display: block; - margin-bottom: 8px; +.accordion { margin-top: 20px; +} + +.accordion-item { + border: 1px solid #ddd; + border-radius: 5px; + margin-bottom: 10px; + overflow: hidden; +} + +.accordion-header { + background-color: #f7f7f7; + padding: 15px; + cursor: pointer; + border-bottom: 1px solid #ddd; +} + +.accordion-content { + display: none; /* Hide content by default */ + padding: 15px; + background-color: #fff; +} + +.w3-acag21 { + color: #ea7e0b; +} + +/*? ↓ Contact Section Styles ↓ */ +/* Base styles */ +.contact-module { + max-width: 1000px; + margin: 2rem auto; + padding: 2rem; + background-color: #f9f9f9; + border-radius: 8px; + box-shadow: 0 2px 10px rgba(0,0,0,0.05); + font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; + color: #333; +} + +form { + display: flex; + flex-direction: column; +} + +/* Flex layout for side-by-side fields */ +.form-sections { + display: flex; + gap: 2rem; + flex-wrap: wrap; + align-items: flex-start; +} + +.contact-fields, +.message-submit { + flex: 1; + min-width: 320px; +} + +/* Fieldset styling */ +fieldset { + border: 1px solid #ccc; + border-radius: 6px; + padding: 1.5rem; + margin-bottom: 1.5rem; +} + +legend { + padding: 0 0.5rem; + font-weight: bold; + font-size: 1.1rem; +} + +/* Input groups */ +.contact-fields > div, +.message-field { + margin-bottom: 1rem; +} + +label { + display: block; + margin-bottom: 0.4rem; font-weight: 500; } -#contact-form input, -#contact-form textarea { +input[type="text"], +input[type="email"], +input[type="tel"], +textarea { width: 100%; - padding: 12px; - margin-top: 5px; - border: 1px solid #dee2e6; - border-radius: 8px; - box-sizing: border-box; - font-size: 1rem; - background-color: #f8f9fa; + padding: 0.6rem; + border: 1px solid #ccc; + border-radius: 4px; + font-size: 0.95rem; + transition: border-color 0.3s ease; } -#contact-form input:focus, -#contact-form textarea:focus { - border-color: #2e97be; +input:focus, +textarea:focus { + border-color: #007acc; outline: none; - background-color: #fff; - box-shadow: 0 0 0 3px rgba(46, 151, 190, 0.2); } -#contact-form small { - display: block; - margin-top: 5px; - color: #868e96; - font-size: 0.875rem; +/* Required asterisk */ +.req-ask { + color: red; + margin-left: 0.2rem; } -#contact-form .radio-group { +/* Preferred method section */ +.preferred-method { + margin-top: 1rem; + text-align: center; +} + +.radio-group { display: flex; - gap: 20px; - margin-top: 10px; + justify-content: center; + gap: 1.5rem; + margin-top: 0.5rem; } -#contact-form .radio-group label { - display: inline-block; - margin-top: 0; +.radio-group label { font-weight: normal; } -#contact-form button[type="submit"] { - margin-top: 30px; - padding: 12px 25px; +/* Button */ +button[type="submit"] { + margin:20px 0px 20px 0px; + padding: 8px 25px; background-color: #ea7e0b; - color: #fff; + color: white; border: none; border-radius: 50px; - font-weight: 600; - cursor: pointer; - transition: background-color 0.3s ease, box-shadow 0.3s ease; font-size: 1rem; + cursor: pointer; + transition: background-color 0.3s ease; } -#contact-form button[type="submit"]:hover { - background-color: #2781a5; - box-shadow: 0 4px 8px rgba(46, 151, 190, 0.2); +button[type="submit"]:hover { + background-color: #2e97be; } + +/* Responsive tweaks */ +@media (max-width: 768px) { + .form-sections { + flex-direction: column; + margin-left: auto; + margin-right: auto; + } +} + +.form-note { + color: red; + font-size: 0.9rem; + text-align: left; +} \ No newline at end of file