diff --git a/src/_includes/base.njk b/src/_includes/base.njk index a596755..f89fe2f 100644 --- a/src/_includes/base.njk +++ b/src/_includes/base.njk @@ -8,6 +8,7 @@ {{title}} + @@ -22,6 +23,8 @@ {% include "footer.html" %} + + {% if pageScripts %} {% for script in pageScripts %} diff --git a/src/about.njk b/src/about.njk index b02700d..086bdfb 100644 --- a/src/about.njk +++ b/src/about.njk @@ -6,61 +6,88 @@ isLandingPage: false pageScripts: "/scripts/contact-form.js" --- -
+ + +

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

+

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

-

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

-

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.

+

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.

+
-
- -
+ +

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: -
- - + Contact Me - - -
+ + + + + + + + + Optional. Format: (123) 456-7890 + +
+ Preferred Contact Method: +
+ + + + + +
+
+ + + + +
- - - - - -
-
+ +
diff --git a/src/images/cloudy-4374619.jpg b/src/images/cloudy-4374619.jpg deleted file mode 100644 index e71adec..0000000 Binary files a/src/images/cloudy-4374619.jpg and /dev/null differ diff --git a/src/images/footer-background.svg b/src/images/footer-background.svg new file mode 100644 index 0000000..9867788 --- /dev/null +++ b/src/images/footer-background.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/images/pattern-randomized.svg b/src/images/pattern-randomized.svg new file mode 100644 index 0000000..2580732 --- /dev/null +++ b/src/images/pattern-randomized.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/images/subtle-prism.svg b/src/images/subtle-prism.svg new file mode 100644 index 0000000..2788ac2 --- /dev/null +++ b/src/images/subtle-prism.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/index.njk b/src/index.njk index 8587955..02f46b9 100644 --- a/src/index.njk +++ b/src/index.njk @@ -13,14 +13,15 @@ pageScripts: - +
-
+

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.

@@ -28,95 +29,102 @@ pageScripts:
-
-

Grow Your Business

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

Expand 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
    • -
+
+

Establish Brand 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
    • -
+
+

Streamline 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. This is where I come in.

+

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.

+
- -

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.

- - + +
+
+

The Ways I Can Help

+ -
-

The Ways I Can Help

+
+ +
+

Website Design

+
    +
  • Custom web design & user experience (UX) services
    • +
  • Discovery, planning, & wireframing
    • +
  • Website redesign & optimization
    • +
+
- + +
+

Website Development

+
    +
  • Full-stack web development (Front-End & Back-End)
    • +
  • Custom solutions (e.g., CMS, eCommerce, booking systems)
    • +
  • Ongoing maintenance & support
    • +
+
+ + +
+

Other Related Services

+
    +
  • Basic SEO setup & Google Analytics integration
    • +
  • Hosting services
    • +
  • Deployment
    • +
  • E-commerce
    • +
+
-
- -
-

Website Design

-
    -
  • Custom web design & user experience (UX) services
    • -
  • Discovery, planning, & wireframing
    • -
  • Website redesign & optimization
    • -
- -
-

Website Development

-
    -
  • Full-stack web development (Front-End & Back-End)
    • -
  • Custom solutions (e.g., CMS, eCommerce, booking systems)
    • -
  • Ongoing maintenance & support
    • -
-
- - -
-

Other Related Services

-
    -
  • Basic SEO setup & Google Analytics integration
    • -
  • Hosting services
    • -
  • Deployment
    • -
  • E-commerce
    • -
-
+
- - -
-
-

Perhaps you need inspiration... Explore My Work!

+ + +
+

Perhaps you need a little inspiration...

+

Explore My Work!

My Project Process

@@ -127,5 +135,6 @@ pageScripts:
-

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

+

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 index ffce026..e69de29 100644 --- a/src/scripts/benefits.js +++ b/src/scripts/benefits.js @@ -1,16 +0,0 @@ -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/styles/about.css b/src/styles/about.css index d42c918..e8de3c6 100644 --- a/src/styles/about.css +++ b/src/styles/about.css @@ -1,10 +1,13 @@ /* about.css */ +body { + background-image: url("/images/subtle-prism.svg"); +} /*? ↓ About Section Styles ↓ */ .about-section { max-width: 1000px; - margin: 60px auto; + margin: 30px auto; padding: 0 20px; color: #495057; line-height: 1.6; @@ -19,17 +22,17 @@ .about-section h1 { font-size: 2.5rem; text-align: center; - margin-bottom: 40px; + margin-bottom: 20px; } .about-section h2 { font-size: 1.8rem; - margin-top: 40px; } .about-section p { - margin-bottom: 20px; + margin-bottom: 5px; font-size: 1.05rem; + text-align: left; } .about-section a { @@ -44,15 +47,16 @@ /*? ↓ Contact Section Styles ↓ */ .contact-section { - max-width: 800px; + max-width: 1200px; margin: 80px auto; padding: 0 20px; color: #495057; + background-color: #d3e9f1; } .contact-section h2 { font-size: 2rem; - margin-bottom: 20px; + margin: 20px 0px; text-align: center; } @@ -135,7 +139,7 @@ #contact-form button[type="submit"] { margin-top: 30px; padding: 12px 25px; - background-color: #2e97be; + background-color: #ea7e0b; color: #fff; border: none; border-radius: 50px; diff --git a/src/styles/header-footer.css b/src/styles/header-footer.css index a4cce22..7d89e89 100644 --- a/src/styles/header-footer.css +++ b/src/styles/header-footer.css @@ -14,12 +14,13 @@ body { /*? ↓  Start Header ↓ */ .main-header { - background: linear-gradient(to right, #1E2A38 0%, #E8F3FF 10%, #E8F3FF 40%, #1E2A38 100%); - color: #495057; - padding: 20px 40px; + background: linear-gradient(to right, #cff1ff 0%, #ffffff 10%, #ffffff 40%, #cff1ff 100%); + color: #cff1ff; + padding: 10px ; border-bottom: 1px solid #dee2e6; } + .main-nav { display: flex; justify-content: space-between; @@ -28,18 +29,11 @@ body { margin: 0 auto; } -.nav-logo a { - 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; + align-items: center; } .nav-item a { @@ -55,9 +49,17 @@ body { z-index: 1; } +.nav-logo a { + font-size: 1.8em; + font-weight: 700; + color: #495057; + text-decoration: none; + transition: color 0.3s ease; +} + .nav-item a:hover { color: #ffffff; - background-color: #2E97BE; + background-color: #ea7e0b; transform: none; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); } @@ -69,9 +71,8 @@ body { left: 0; width: 100%; height: 100%; - background: linear-gradient(45deg, #2E97BE, #3498db); - border-radius: 10px; + border-radius: 10px; transform: scaleX(0); transform-origin: left; transition: transform 0.4s cubic-bezier(0.86, 0, 0.07, 1); @@ -86,15 +87,20 @@ body { margin: 0; } +.nav-logo a:hover { + color: #ea7e0b; /* This will now be applied */ + background-color: transparent; /* Override the background change */ + box-shadow: none; /* Remove the shadow */ +} + /*? ↓  Start Footer ↓ */ footer { - background: linear-gradient(to right, #1E2A38 0%, #E8F3FF 33%, #E8F3FF 66%, #1E2A38 100%); - color: #495057; + background: url("/images/footer-background.svg"); border-top: 1px solid #dee2e6; - margin-top: 30px; - padding: 30px 40px; + margin-top: 20px; + padding: 10px 20px; } .footer-content { @@ -122,7 +128,7 @@ footer ul { display: flex; justify-content: center; gap: 30px; - margin-top: 20px; + margin-top: 10px; } .social-links a, diff --git a/src/styles/index.css b/src/styles/index.css index 2d1ec7e..0f71fab 100644 --- a/src/styles/index.css +++ b/src/styles/index.css @@ -1,5 +1,20 @@ /* index.css */ +body { + background-image: url("/images/pattern-randomized.svg"); + background-attachment: fixed; + background-size: cover; +} +.intro.module { + width: 70%; + max-width: 900px; + min-width: 300px; + line-height: 1.6em; +} + +.module h2 { + font-size: 1.8rem; +} /*? ↓  Start Intro  ↓ */ .intro { @@ -8,10 +23,16 @@ .intro h1 { color: #495057; + margin-bottom: 20px; } .intro h1 .accent-name { - color: #2e97be; + color: #ea7e0b; +} + +.intro p { + font-size: 1.1em; + font-weight: 600; } /*? ↓  Start Benefits Section  ↓ */ @@ -32,42 +53,83 @@ margin-bottom: 20px; } +.benefits-container p, .transition p { + font-size: 1.2em; + font-weight: 600; +} + .benefits-visual { position: relative; display: grid; gap: 20px; width: 100%; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); + min-height: 150px; } .benefits-card { - background-color: #ffffff; + display: flex; + flex-direction: column; + justify-content: center; + max-height: 150px; + background-color: rgba(234, 126, 11, .4); border: 1px solid #dee2e6; border-radius: 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; + transition: all 0.3s ease-in-out; + overflow: hidden; } .benefits-card:hover { transform: translateY(-5px); + background: linear-gradient(to right, #DDF0FF 0%, #fff 40%, #fff 60%, #DDF0FF 100%); 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; - padding: 0; +.benefits-card h3 { + font-size: 1.8em; + color: #495057; + transition: font-size 0.4s ease-in-out; } -.benefits-card:hover ul { - max-height: var(--ul-height); - margin-top: 10px; +.benefits-card ul { + list-style: inside; + padding-top: 10px; } +.hover-list { + transition: max-height 0.4s ease-in-out, opacity 0.4s ease-in-out; + max-height: 0; + opacity: 0; + overflow: hidden; +} + +.benefits-card:hover .hover-list { + max-height: 300px; + opacity: 1; +} + +.benefits-card:hover h3 { + font-size: 1.2em; + text-decoration: underline; +} + +.transition { + margin-top: 30px; + font-weight: 600; +} + +.transition p:first-child { + font-size: 1.3em; +} + +.transition p:last-child { + font-size: 1.4rem; +} + + /*? ↓  Start Services Container  ↓ */ @@ -75,7 +137,7 @@ position: relative; width: 100%; max-width: 800px; - margin: 50px auto; + margin: 10px auto; overflow: hidden; min-height: 400px; } @@ -144,7 +206,7 @@ } .carousel-button:hover { - background-color: rgba(46, 151, 190, 1); + background-color: #ea7e0b; } .prev-button { @@ -156,6 +218,9 @@ } /*? ↓  Start CTA Section  ↓ */ +.inspiration { + padding-top: 20px; +} .cta-section { max-width: 1200px; @@ -173,9 +238,9 @@ .demos-link, .cta-button { display: inline-block; - padding: 12px 25px; - margin-top: 20px; - background-color: #2e97be; + padding: 8px 25px; + margin: 20px 0px 20px 0px; + background-color: #ea7e0b; color: #fff; text-decoration: none; font-weight: 600; @@ -185,7 +250,12 @@ .demos-link:hover, .cta-button:hover { - background-color: #2781a5; + background-color: #2e97be; + box-shadow: 0 4px 8px rgba(46, 151, 190, 0.2); +} + +.demos-link:active, .cta-button:active { + background-color: #ea7e0b; box-shadow: 0 4px 8px rgba(46, 151, 190, 0.2); } diff --git a/src/styles/modules.css b/src/styles/modules.css new file mode 100644 index 0000000..236a218 --- /dev/null +++ b/src/styles/modules.css @@ -0,0 +1,13 @@ +body { + background: linear-gradient(to bottom, #9FB8CC 0%, #DAE4F0 30%, #ffffff 50%, #DAE4F0 70%, #9FB8CC 100%); +} + +.module { + margin: 25px auto; + padding: 1.5rem; + max-width: 1200px ; + box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3); + background-color: #ffffff ; + border-radius: 15px; + border: 1px #7B8899 solid; +} \ No newline at end of file