From 4f9299e8b248988afbcee780578eef22a50f3f36 Mon Sep 17 00:00:00 2001 From: dereklseitz Date: Fri, 15 Aug 2025 00:18:50 -0500 Subject: [PATCH] chore: finalize about and contact pages, fix stylesheet path, add TODO comments for future improvements --- .eleventy.js | 10 +- src/_includes/base.njk | 6 + src/_includes/footer.html | 14 +- src/_includes/header.html | 8 +- src/about.njk | 66 +++++- src/contact.njk | 34 +++- src/index.njk | 120 +++++------ src/scripts/benefits.js | 16 ++ src/scripts/{scripts.js => carousel.js} | 0 src/styles/about.css | 152 +++++++++++++- src/styles/header-footer.css | 156 ++++++++++---- src/styles/index.css | 257 +++++++++++++++++++----- 12 files changed, 664 insertions(+), 175 deletions(-) create mode 100644 src/scripts/benefits.js rename src/scripts/{scripts.js => carousel.js} (100%) diff --git a/.eleventy.js b/.eleventy.js index 44a4fcb..79197dd 100644 --- a/.eleventy.js +++ b/.eleventy.js @@ -1,8 +1,8 @@ module.exports = function (eleventyConfig) { - // Pass through static assets without processing - eleventyConfig.addPassthroughCopy("src/images"); - eleventyConfig.addPassthroughCopy("src/styles"); - eleventyConfig.addPassthroughCopy("src/scripts"); + // ✅ Pass through static assets to the root of output + eleventyConfig.addPassthroughCopy({ "src/images": "images" }); + eleventyConfig.addPassthroughCopy({ "src/styles": "styles" }); + eleventyConfig.addPassthroughCopy({ "src/scripts": "scripts" }); return { dir: { @@ -11,4 +11,4 @@ module.exports = function (eleventyConfig) { includes: "_includes", }, }; -}; \ No newline at end of file +}; diff --git a/src/_includes/base.njk b/src/_includes/base.njk index 41938cb..a596755 100644 --- a/src/_includes/base.njk +++ b/src/_includes/base.njk @@ -22,6 +22,12 @@ {% include "footer.html" %} + {% if pageScripts %} + {% for script in pageScripts %} + + {% endfor %} + {% endif %} + diff --git a/src/_includes/footer.html b/src/_includes/footer.html index 011ecf3..961ba83 100644 --- a/src/_includes/footer.html +++ b/src/_includes/footer.html @@ -1,20 +1,20 @@ \ No newline at end of file diff --git a/src/_includes/header.html b/src/_includes/header.html index 8fb91b6..64187ac 100644 --- a/src/_includes/header.html +++ b/src/_includes/header.html @@ -3,10 +3,10 @@ diff --git a/src/about.njk b/src/about.njk index 048c8be..b02700d 100644 --- a/src/about.njk +++ b/src/about.njk @@ -1,8 +1,66 @@ --- layout: base.njk -title: About Derek -stylesheet: styles/about.css +title: "About Derek" +stylesheet: /styles/about.css +isLandingPage: false +pageScripts: "/scripts/contact-form.js" --- -

More About Derek

-

Coming Soon!

\ No newline at end of file +
+

About Derek L. Seitz

+ +

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

+
+ +
+ +
+

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.

+ +
+
+ Contact Me + + + + + + + + + + Optional. Format: (123) 456-7890 + +
+ Preferred Contact Method: +
+ + + + + +
+
+ + + + + +
+
+
diff --git a/src/contact.njk b/src/contact.njk index 6c1d299..9aafb8f 100644 --- a/src/contact.njk +++ b/src/contact.njk @@ -2,6 +2,38 @@ layout: base.njk title: Contact Derek stylesheet: styles/contact.css +isLandingPage: false +pageScript: "/scripts/contact-form.js" --- -

Contact Form Coming Soon!

\ No newline at end of file +

Contact Me

+

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..

+ +
+
+ Contact Me + + + + + + + + + + + +
+ + + + + +
+ + + + + +
+
\ No newline at end of file diff --git a/src/index.njk b/src/index.njk index ba2262b..8587955 100644 --- a/src/index.njk +++ b/src/index.njk @@ -2,6 +2,10 @@ layout: base.njk title: "Derek L. Seitz - Portfolio" stylesheet: styles/index.css +isLandingPage: true +pageScripts: + - "/scripts/benefits.js" + - "/scripts/carousel.js" --- @@ -11,52 +15,54 @@ stylesheet: styles/index.css
-

Grow Your Online Presence with Me, Derek L. Seitz

-

A great website is often your most powerful sales tool. It's the first impression you make and the cornerstone of your online presence.

- - - -

What a Well-Designed Website Can Do

-

There are countless benefits to having a professionally developed website. Some of the most impactful may be in areas where your business struggles the most.

- - - -
- -
-

Grow Your Business

- -
    -
  • Attract more visitors
    • -
  • Expand your availability
    • -
  • Convert visitors into customers
    • -
  • Engage with your audience
    • -
-
- -
-

Establish Your Brand's Authority

- -
    -
  • Share your expertise
    • -
  • Build trust and credibility
    • -
  • Showcase your products and services
    • -
  • Communicate your vision
    • -
-
- -
-

Streamline Your Business Operations

- -
    -
  • Transform your workflow
    • -
  • Provide cost-effective marketing
    • -
  • Enhance customer service
    • -
  • Improve data analytics
    • -
-
- +
+

Grow Your Online Presence with Me, Derek L. Seitz

+

A great website is often your most powerful sales tool. It's the first impression you make and the cornerstone of your online presence.

+
+ +

What a Well-Designed Website Can Do

+

There are countless benefits to having a professionally developed website. Some of the most impactful may be in areas where your business struggles the most.

+ + + + +
+
+

Grow Your Business

+ +
    +
  • Attract more visitors
    • +
  • Expand your availability
    • +
  • Convert visitors into customers
    • +
  • Engage with your audience
    • +
+
+ +
+

Establish Your Brand's Authority

+ +
    +
  • Share your expertise
    • +
  • Build trust and credibility
    • +
  • Showcase your products and services
    • +
  • Communicate your vision
    • +
+
+ +
+

Streamline Your Business Operations

+ +
    +
  • Transform your workflow
    • +
  • Provide cost-effective marketing
    • +
  • Enhance customer service
    • +
  • Improve data analytics
    • +
+
+
+
+

Tackling these areas yourself can demand a huge amount of your time.

Trusting me to focus on getting your website noticed, you can instead focus on what makes your business thrive: the people and communities you serve.

@@ -66,7 +72,7 @@ stylesheet: styles/index.css -
+

The Ways I Can Help

@@ -109,15 +115,17 @@ stylesheet: styles/index.css
-

Perhaps you need inspiration... Explore My Work!

+
+

Perhaps you need inspiration... Explore My Work!

-
-

My Project Process

-
    -
  1. Discovery: We'll begin with a conversation to understand your business, your goals, and your unique challenges. This is where we lay the groundwork for your project.
    2. -
  2. Planning: I will create a custom project plan and proposal that outlines the scope, timeline, and investment required to achieve your objectives.
    3. -
  3. Execution: Once we're aligned on the plan, I'll build and launch your website, ensuring it delivers on our shared vision.
    4. -
-
+
+

My Project Process

+
    +

  1. Discovery

    We'll begin with a conversation to understand your business, your goals, and your unique challenges. This is where we lay the groundwork for your project.
    2. +

  2. Planning

    I will create a custom project plan and proposal that outlines the scope, timeline, and investment required to achieve your objectives.
    3. +

  3. Execution

    Once we're aligned on the plan, I'll build and launch your website, ensuring it delivers on our shared vision.
    4. +
+
-

Interested in working together? Let's Get Started on a Plan!

\ No newline at end of file +

Ready to get started - or just have a few questions first? Let's Talk About How to Grow Your Business Online!

+
\ No newline at end of file diff --git a/src/scripts/benefits.js b/src/scripts/benefits.js new file mode 100644 index 0000000..ffce026 --- /dev/null +++ b/src/scripts/benefits.js @@ -0,0 +1,16 @@ +document.addEventListener('DOMContentLoaded', () => { + const benefitsCards = document.querySelectorAll('.benefits-card'); + + benefitsCards.forEach(card => { + card.addEventListener('mouseenter', () => { + const ulElement = card.querySelector('ul'); + card.style.setProperty('--ul-height', `${ulElement.scrollHeight}px`); + card.classList.add('is-expanded'); + }); + + card.addEventListener('mouseleave', () => { + card.classList.remove('is-expanded'); + card.style.removeProperty('--ul-height'); + }); + }); +}); \ No newline at end of file diff --git a/src/scripts/scripts.js b/src/scripts/carousel.js similarity index 100% rename from src/scripts/scripts.js rename to src/scripts/carousel.js diff --git a/src/styles/about.css b/src/styles/about.css index eb81647..d42c918 100644 --- a/src/styles/about.css +++ b/src/styles/about.css @@ -1,5 +1,151 @@ /* about.css */ -h1 { - text-align: center; -} \ No newline at end of file +/*? ↓ About Section Styles ↓ */ + +.about-section { + max-width: 1000px; + margin: 60px auto; + padding: 0 20px; + color: #495057; + line-height: 1.6; +} + +.about-section h1, +.about-section h2 { + color: #495057; + margin-bottom: 20px; +} + +.about-section h1 { + font-size: 2.5rem; + text-align: center; + margin-bottom: 40px; +} + +.about-section h2 { + font-size: 1.8rem; + margin-top: 40px; +} + +.about-section p { + margin-bottom: 20px; + font-size: 1.05rem; +} + +.about-section a { + color: #2e97be; + text-decoration: underline; +} + +.about-section a:hover { + text-decoration: none; +} + +/*? ↓ Contact Section Styles ↓ */ + +.contact-section { + max-width: 800px; + margin: 80px auto; + padding: 0 20px; + color: #495057; +} + +.contact-section h2 { + font-size: 2rem; + margin-bottom: 20px; + 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; + margin-top: 20px; + font-weight: 500; +} + +#contact-form input, +#contact-form 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; +} + +#contact-form input:focus, +#contact-form textarea:focus { + border-color: #2e97be; + 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; +} + +#contact-form .radio-group { + display: flex; + gap: 20px; + margin-top: 10px; +} + +#contact-form .radio-group label { + display: inline-block; + margin-top: 0; + font-weight: normal; +} + +#contact-form button[type="submit"] { + margin-top: 30px; + padding: 12px 25px; + background-color: #2e97be; + color: #fff; + border: none; + border-radius: 50px; + font-weight: 600; + cursor: pointer; + transition: background-color 0.3s ease, box-shadow 0.3s ease; + font-size: 1rem; +} + +#contact-form button[type="submit"]:hover { + background-color: #2781a5; + box-shadow: 0 4px 8px rgba(46, 151, 190, 0.2); +} diff --git a/src/styles/header-footer.css b/src/styles/header-footer.css index 25b401b..a4cce22 100644 --- a/src/styles/header-footer.css +++ b/src/styles/header-footer.css @@ -12,63 +12,137 @@ body { text-align: center; } -/*? ↓ Start Header ↓ */ +/*? ↓  Start Header ↓ */ .main-header { - background-color: #333; /* Dark background for the header */ - color: #fff; /* White text color */ - padding: 10px 20px; /* Add some padding for spacing */ + background: linear-gradient(to right, #1E2A38 0%, #E8F3FF 10%, #E8F3FF 40%, #1E2A38 100%); + color: #495057; + padding: 20px 40px; + border-bottom: 1px solid #dee2e6; } .main-nav { - display: flex; /* Use flexbox to align items in a row */ - justify-content: space-between; /* Space items evenly */ - align-items: center; /* Vertically center items */ -} - -.nav-list { - list-style: none; /* Remove default list styling */ - display: flex; /* Use flexbox to align list items in a row */ - gap: 20px; /* Add some space between list items */ -} - -.nav-item a { - background-color: #2e97be; - color: #fff; /* White text color for links */ - text-decoration: none; /* Remove underline from links */ - font-weight: bold; /* Make text bold */ - transition: color 0.3s; /* Smooth color transition on hover */ - padding: 5px 10px; border-radius: 10px; -} - -.nav-item a:hover { - color: #2e97be; - background-color: #fff /* Change link color on hover */ + display: flex; + justify-content: space-between; + align-items: center; + max-width: 1200px; + margin: 0 auto; } .nav-logo a { - font-size: 1.5em; /* Make the logo text larger */ + font-size: 1.8em; + font-weight: 700; + color: #2E97BE; + text-decoration: none; + transition: color 0.3s ease; +} + +.nav-list { + list-style: none; + display: flex; + gap: 30px; +} + +.nav-item a { + background-color: transparent; + color: #495057; + text-decoration: none; + font-weight: 500; + transition: all 0.3s ease; + padding: 8px 15px; + border-radius: 5px; + position: relative; + overflow: hidden; + z-index: 1; +} + +.nav-item a:hover { + color: #ffffff; + background-color: #2E97BE; + transform: none; + box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); +} + +.nav-item a:hover::before { + content: ''; + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + background: linear-gradient(45deg, #2E97BE, #3498db); + border-radius: 10px; + + transform: scaleX(0); + transform-origin: left; + transition: transform 0.4s cubic-bezier(0.86, 0, 0.07, 1); + z-index: -1; +} + +.nav-item a:hover::before { + transform: scaleX(1); } .nav-logo { - margin-right: 20vw; + margin: 0; } -/*? ↓ Start Footer ↓ */ + +/*? ↓  Start Footer ↓ */ +footer { + background: linear-gradient(to right, #1E2A38 0%, #E8F3FF 33%, #E8F3FF 66%, #1E2A38 100%); + color: #495057; + border-top: 1px solid #dee2e6; + margin-top: 30px; + padding: 30px 40px; +} + +.footer-content { + display: flex; + flex-direction: column; + align-items: center; + max-width: 1200px; + margin: 0 auto; + text-align: center; +} + +footer ul { + list-style: none; +} .footer-links { - display: flex; /* Use flexbox to align items in a row */ - align-items: center; - justify-content: space-between; /* Center the footer links */ - gap: 20px; /* Add some space between links */ - margin-top: 20px; /* Add some space above the footer links */ - width: 75vw; - margin-left: auto; - margin-right: auto; + display: flex; + justify-content: center; + gap: 30px; + padding: 0; + margin: 20px 0; } -.external-links { +.social-links { display: flex; - justify-content: center; /* Center the external links */ - gap: 50px; /* Add some space between links */ + justify-content: center; + gap: 30px; + margin-top: 20px; +} + +.social-links a, +.footer-links a { + font-size: 1.1em; + display: inline-block; + color: #495057; + text-decoration: none; + font-size: 1.1em; + transition: color 0.3s ease; +} + +.social-links a:hover, +.footer-links a:hover { + color: #2e97be; + transform: scale(1.1) translateY(-2px); +} + +.copyright { + margin: 20px 0 0; + font-size: 0.9em; + color: #6c757d; } \ No newline at end of file diff --git a/src/styles/index.css b/src/styles/index.css index a330115..2d1ec7e 100644 --- a/src/styles/index.css +++ b/src/styles/index.css @@ -1,99 +1,150 @@ /* index.css */ +/*? ↓  Start Intro  ↓ */ -/*? ↓ Start Benefits Section ↓ */ +.intro { + margin-top: 50px; +} + +.intro h1 { + color: #495057; +} + +.intro h1 .accent-name { + color: #2e97be; +} + +/*? ↓  Start Benefits Section  ↓ */ .benefits-container { display: flex; + flex-direction: column; align-items: center; - justify-content: space-between; - width: 60vw; + width: 100%; + max-width: 1200px; padding: 20px; - margin-top: 50px; - margin-left: auto; - margin-right: auto; + margin: 50px auto; } -.benefits-container div { - border: 2px solid darkslategray; +.benefits-container h2, +.benefits-container p { + color: #495057; + margin-bottom: 20px; +} + +.benefits-visual { + position: relative; + display: grid; + gap: 20px; + width: 100%; + grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); +} + +.benefits-card { + background-color: #ffffff; + border: 1px solid #dee2e6; border-radius: 10px; - padding: 10px; + padding: 15px 10px 15px 10px; + text-align: center; + box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05); + transition: all 0.3s ease; +} + +.benefits-card:hover { + transform: translateY(-5px); + box-shadow: 0 6px 12px rgba(0, 0, 0, 0.1); } .benefits-card ul { - list-style: none; - max-height: 0; - overflow: hidden; - transition: max-height 0.5s ease-in-out; -} - -.benefits-card.hover ul { - max-height: var(--ul-height); -} - - - -/*? ↓ Start Services Container ↓ */ - -.service-cards { - display: flex; - align-items: center; - justify-content: center;; -} - -.service card { - width: 100px; - height: 150px; - background-color: #f0f0f0; - border: 1px solid darkslategray; - border-radius: 10px; - margin: 10px; - padding: 20px; - text-align: center; -} - -.service-card ul { list-style: none; - + max-height: 0; + overflow: hidden; + transition: max-height 0.5s ease-in-out; + padding: 0; } +.benefits-card:hover ul { + max-height: var(--ul-height); + margin-top: 10px; +} + + +/*? ↓  Start Services Container  ↓ */ + .carousel-container { position: relative; width: 100%; max-width: 800px; - margin: 0 auto; + margin: 50px auto; overflow: hidden; - display: flex; - align-items: center; /* Center the carousel vertically */ + min-height: 400px; } .carousel { display: flex; transition: transform 0.5s ease-in-out; + height: 100%; +} + +.service-cards { + display: flex; + flex-wrap: wrap; + justify-content: center; + gap: 20px; + width: 100%; + max-width: 1200px; + margin: 50px auto; } .service-card { - min-width: 100%; - box-sizing: border-box; + width: 300px; + background-color: #ffffff; + border: 1px solid #dee2e6; + border-radius: 10px; padding: 20px; - background-color: #f9f9f9; - border: 1px solid #ddd; - border-radius: 8px; - margin: 0 10px; text-align: center; + box-sizing: border-box; + box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05); +} + +.service-card h3 { + font-size: 1.3em; + color: #495057; + background-color: #f8f9fa; + border: 1px solid #dee2e6; + border-radius: 8px; + padding: 10px; + box-shadow: none; + margin-bottom: 15px; +} + +.service-card li { + padding: 10px; + color: #495057; +} + +.service-card ul { + list-style: none; + padding: 0; } .carousel-button { position: absolute; top: 50%; transform: translateY(-50%); - background-color: rgba(0, 0, 0, 0.5); + background-color: rgba(46, 151, 190, 0.8); color: #fff; border: none; - padding: 10px; + padding: 10px 15px; + border-radius: 5px; cursor: pointer; - font-size: 24px; + font-size: 20px; z-index: 1; + transition: background-color 0.3s ease; +} + +.carousel-button:hover { + background-color: rgba(46, 151, 190, 1); } .prev-button { @@ -102,4 +153,102 @@ .next-button { right: 10px; +} + +/*? ↓  Start CTA Section  ↓ */ + +.cta-section { + max-width: 1200px; + margin: 80px auto; + padding: 0 20px; + text-align: center; + color: #495057; +} + +.cta-section p { + font-size: 1.2rem; + line-height: 1.5; +} + +.demos-link, +.cta-button { + display: inline-block; + padding: 12px 25px; + margin-top: 20px; + background-color: #2e97be; + color: #fff; + text-decoration: none; + font-weight: 600; + border-radius: 50px; + transition: background-color 0.3s ease, box-shadow 0.3s ease; +} + +.demos-link:hover, +.cta-button:hover { + background-color: #2781a5; + box-shadow: 0 4px 8px rgba(46, 151, 190, 0.2); +} + +.project-steps { + margin-top: 60px; + margin-bottom: 40px; +} + +.project-steps h2 { + font-size: 2em; + margin-bottom: 30px; +} + +.steps-list { + display: grid; + gap: 30px; + list-style: none; + padding: 0; + grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); +} + +.steps-list li { + background-color: #fff; + border: 1px solid #dee2e6; + border-radius: 10px; + padding: 30px; + text-align: left; + position: relative; + box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05); + transition: transform 0.3s ease, box-shadow 0.3s ease; +} + +.steps-list li:hover { + transform: translateY(-5px); + box-shadow: 0 6px 12px rgba(0, 0, 0, 0.1); +} + +.steps-list li h3 { + margin-top: 0; + margin-bottom: 10px; + color: #2e97be; + font-weight: 600; +} + +.steps-list { + counter-reset: step-counter; +} + +.steps-list li::before { + counter-increment: step-counter; + content: counter(step-counter); + position: absolute; + top: -15px; + left: 20px; + display: flex; + justify-content: center; + align-items: center; + width: 40px; + height: 40px; + border-radius: 50%; + background-color: #2e97be; + color: #fff; + font-size: 1.5rem; + font-weight: bold; + box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2); } \ No newline at end of file