This commit is contained in:
parent
4f9299e8b2
commit
3a9e0c89a6
|
|
@ -8,6 +8,7 @@
|
|||
<title>{{title}}</title>
|
||||
|
||||
<link rel="stylesheet" href="/styles/header-footer.css">
|
||||
<link rel="stylesheet" href="/styles/modules.css">
|
||||
<link rel="stylesheet" href="{{ stylesheet }}">
|
||||
</head>
|
||||
<body>
|
||||
|
|
@ -22,6 +23,8 @@
|
|||
|
||||
{% include "footer.html" %}
|
||||
|
||||
<!-- <a href="https://www.svgbackgrounds.com/set/free-svg-backgrounds-and-patterns/">Free SVG Backgrounds and Patterns by SVGBackgrounds.com</a> -->
|
||||
|
||||
{% if pageScripts %}
|
||||
{% for script in pageScripts %}
|
||||
<script src="{{ script }}"></script>
|
||||
|
|
|
|||
|
|
@ -6,32 +6,58 @@ 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>
|
||||
|
||||
<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—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>
|
||||
|
||||
<div class="contact-module module">
|
||||
<form id="contact-form" aria-labelledby="contact-form-heading">
|
||||
<fieldset>
|
||||
<legend id="contact-form-heading">Contact Me</legend>
|
||||
|
|
@ -63,4 +89,5 @@ pageScripts: "/scripts/contact-form.js"
|
|||
<button type="submit">Send Message</button>
|
||||
</fieldset>
|
||||
</form>
|
||||
</div>
|
||||
</section>
|
||||
|
|
|
|||
Binary file not shown.
|
Before Width: | Height: | Size: 4.0 MiB |
|
|
@ -0,0 +1 @@
|
|||
<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 2000 1500'><rect fill='#F5F5F5' width='2000' height='1500'/><defs><rect stroke='#F5F5F5' stroke-width='0.2' width='1' height='1' id='s'/><pattern id='a' width='3' height='3' patternUnits='userSpaceOnUse' patternTransform='scale(43.7) translate(-977.12 -732.84)'><use fill='#f3f3f3' href='#s' y='2'/><use fill='#f3f3f3' href='#s' x='1' y='2'/><use fill='#f0f0f0' href='#s' x='2' y='2'/><use fill='#f0f0f0' href='#s'/><use fill='#eeeeee' href='#s' x='2'/><use fill='#eeeeee' href='#s' x='1' y='1'/></pattern><pattern id='b' width='7' height='11' patternUnits='userSpaceOnUse' patternTransform='scale(43.7) translate(-977.12 -732.84)'><g fill='#ebebeb'><use href='#s'/><use href='#s' y='5' /><use href='#s' x='1' y='10'/><use href='#s' x='2' y='1'/><use href='#s' x='2' y='4'/><use href='#s' x='3' y='8'/><use href='#s' x='4' y='3'/><use href='#s' x='4' y='7'/><use href='#s' x='5' y='2'/><use href='#s' x='5' y='6'/><use href='#s' x='6' y='9'/></g></pattern><pattern id='h' width='5' height='13' patternUnits='userSpaceOnUse' patternTransform='scale(43.7) translate(-977.12 -732.84)'><g fill='#ebebeb'><use href='#s' y='5'/><use href='#s' y='8'/><use href='#s' x='1' y='1'/><use href='#s' x='1' y='9'/><use href='#s' x='1' y='12'/><use href='#s' x='2'/><use href='#s' x='2' y='4'/><use href='#s' x='3' y='2'/><use href='#s' x='3' y='6'/><use href='#s' x='3' y='11'/><use href='#s' x='4' y='3'/><use href='#s' x='4' y='7'/><use href='#s' x='4' y='10'/></g></pattern><pattern id='c' width='17' height='13' patternUnits='userSpaceOnUse' patternTransform='scale(43.7) translate(-977.12 -732.84)'><g fill='#e8e8e8'><use href='#s' y='11'/><use href='#s' x='2' y='9'/><use href='#s' x='5' y='12'/><use href='#s' x='9' y='4'/><use href='#s' x='12' y='1'/><use href='#s' x='16' y='6'/></g></pattern><pattern id='d' width='19' height='17' patternUnits='userSpaceOnUse' patternTransform='scale(43.7) translate(-977.12 -732.84)'><g fill='#F5F5F5'><use href='#s' y='9'/><use href='#s' x='16' y='5'/><use href='#s' x='14' y='2'/><use href='#s' x='11' y='11'/><use href='#s' x='6' y='14'/></g><g fill='#e6e6e6'><use href='#s' x='3' y='13'/><use href='#s' x='9' y='7'/><use href='#s' x='13' y='10'/><use href='#s' x='15' y='4'/><use href='#s' x='18' y='1'/></g></pattern><pattern id='e' width='47' height='53' patternUnits='userSpaceOnUse' patternTransform='scale(43.7) translate(-977.12 -732.84)'><g fill='#CFF1FF'><use href='#s' x='2' y='5'/><use href='#s' x='16' y='38'/><use href='#s' x='46' y='42'/><use href='#s' x='29' y='20'/></g></pattern><pattern id='f' width='59' height='71' patternUnits='userSpaceOnUse' patternTransform='scale(43.7) translate(-977.12 -732.84)'><g fill='#CFF1FF'><use href='#s' x='33' y='13'/><use href='#s' x='27' y='54'/><use href='#s' x='55' y='55'/></g></pattern><pattern id='g' width='139' height='97' patternUnits='userSpaceOnUse' patternTransform='scale(43.7) translate(-977.12 -732.84)'><g fill='#CFF1FF'><use href='#s' x='11' y='8'/><use href='#s' x='51' y='13'/><use href='#s' x='17' y='73'/><use href='#s' x='99' y='57'/></g></pattern></defs><rect fill='url(#a)' width='100%' height='100%'/><rect fill='url(#b)' width='100%' height='100%'/><rect fill='url(#h)' width='100%' height='100%'/><rect fill='url(#c)' width='100%' height='100%'/><rect fill='url(#d)' width='100%' height='100%'/><rect fill='url(#e)' width='100%' height='100%'/><rect fill='url(#f)' width='100%' height='100%'/><rect fill='url(#g)' width='100%' height='100%'/></svg>
|
||||
|
|
@ -0,0 +1 @@
|
|||
<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 2000 1500'><rect fill='#CFF1FF' width='2000' height='1500'/><defs><rect stroke='#CFF1FF' stroke-width='0.5' width='1' height='1' id='s'/><pattern id='a' width='3' height='3' patternUnits='userSpaceOnUse' patternTransform='rotate(156 1000 750) scale(50) translate(-980 -735)'><use fill='#cdeffc' href='#s' y='2'/><use fill='#cdeffc' href='#s' x='1' y='2'/><use fill='#cbecfa' href='#s' x='2' y='2'/><use fill='#cbecfa' href='#s'/><use fill='#c9eaf7' href='#s' x='2'/><use fill='#c9eaf7' href='#s' x='1' y='1'/></pattern><pattern id='b' width='7' height='11' patternUnits='userSpaceOnUse' patternTransform='rotate(156 1000 750) scale(50) translate(-980 -735)'><g fill='#c7e7f5'><use href='#s'/><use href='#s' y='5' /><use href='#s' x='1' y='10'/><use href='#s' x='2' y='1'/><use href='#s' x='2' y='4'/><use href='#s' x='3' y='8'/><use href='#s' x='4' y='3'/><use href='#s' x='4' y='7'/><use href='#s' x='5' y='2'/><use href='#s' x='5' y='6'/><use href='#s' x='6' y='9'/></g></pattern><pattern id='h' width='5' height='13' patternUnits='userSpaceOnUse' patternTransform='rotate(156 1000 750) scale(50) translate(-980 -735)'><g fill='#c7e7f5'><use href='#s' y='5'/><use href='#s' y='8'/><use href='#s' x='1' y='1'/><use href='#s' x='1' y='9'/><use href='#s' x='1' y='12'/><use href='#s' x='2'/><use href='#s' x='2' y='4'/><use href='#s' x='3' y='2'/><use href='#s' x='3' y='6'/><use href='#s' x='3' y='11'/><use href='#s' x='4' y='3'/><use href='#s' x='4' y='7'/><use href='#s' x='4' y='10'/></g></pattern><pattern id='c' width='17' height='13' patternUnits='userSpaceOnUse' patternTransform='rotate(156 1000 750) scale(50) translate(-980 -735)'><g fill='#c4e5f2'><use href='#s' y='11'/><use href='#s' x='2' y='9'/><use href='#s' x='5' y='12'/><use href='#s' x='9' y='4'/><use href='#s' x='12' y='1'/><use href='#s' x='16' y='6'/></g></pattern><pattern id='d' width='19' height='17' patternUnits='userSpaceOnUse' patternTransform='rotate(156 1000 750) scale(50) translate(-980 -735)'><g fill='#CFF1FF'><use href='#s' y='9'/><use href='#s' x='16' y='5'/><use href='#s' x='14' y='2'/><use href='#s' x='11' y='11'/><use href='#s' x='6' y='14'/></g><g fill='#c2e2ef'><use href='#s' x='3' y='13'/><use href='#s' x='9' y='7'/><use href='#s' x='13' y='10'/><use href='#s' x='15' y='4'/><use href='#s' x='18' y='1'/></g></pattern><pattern id='e' width='47' height='53' patternUnits='userSpaceOnUse' patternTransform='rotate(156 1000 750) scale(50) translate(-980 -735)'><g fill='#2E97BE'><use href='#s' x='2' y='5'/><use href='#s' x='16' y='38'/><use href='#s' x='46' y='42'/><use href='#s' x='29' y='20'/></g></pattern><pattern id='f' width='59' height='71' patternUnits='userSpaceOnUse' patternTransform='rotate(156 1000 750) scale(50) translate(-980 -735)'><g fill='#2E97BE'><use href='#s' x='33' y='13'/><use href='#s' x='27' y='54'/><use href='#s' x='55' y='55'/></g></pattern><pattern id='g' width='139' height='97' patternUnits='userSpaceOnUse' patternTransform='rotate(156 1000 750) scale(50) translate(-980 -735)'><g fill='#2E97BE'><use href='#s' x='11' y='8'/><use href='#s' x='51' y='13'/><use href='#s' x='17' y='73'/><use href='#s' x='99' y='57'/></g></pattern></defs><rect fill='url(#a)' width='100%' height='100%'/><rect fill='url(#b)' width='100%' height='100%'/><rect fill='url(#h)' width='100%' height='100%'/><rect fill='url(#c)' width='100%' height='100%'/><rect fill='url(#d)' width='100%' height='100%'/><rect fill='url(#e)' width='100%' height='100%'/><rect fill='url(#f)' width='100%' height='100%'/><rect fill='url(#g)' width='100%' height='100%'/></svg>
|
||||
|
|
@ -0,0 +1 @@
|
|||
<svg xmlns='http://www.w3.org/2000/svg' width='100%'><rect fill='#ffffff' width='540' height='450'/><defs><linearGradient id='a' gradientUnits='userSpaceOnUse' x1='0' x2='0' y1='0' y2='100%' gradientTransform='rotate(147,742,336)'><stop offset='0' stop-color='#ffffff'/><stop offset='1' stop-color='#2FAFA3'/></linearGradient><pattern patternUnits='userSpaceOnUse' id='b' width='353' height='294.2' x='0' y='0' viewBox='0 0 1080 900'><g fill-opacity='0.04'><polygon fill='#444' points='90 150 0 300 180 300'/><polygon points='90 150 180 0 0 0'/><polygon fill='#AAA' points='270 150 360 0 180 0'/><polygon fill='#DDD' points='450 150 360 300 540 300'/><polygon fill='#999' points='450 150 540 0 360 0'/><polygon points='630 150 540 300 720 300'/><polygon fill='#DDD' points='630 150 720 0 540 0'/><polygon fill='#444' points='810 150 720 300 900 300'/><polygon fill='#FFF' points='810 150 900 0 720 0'/><polygon fill='#DDD' points='990 150 900 300 1080 300'/><polygon fill='#444' points='990 150 1080 0 900 0'/><polygon fill='#DDD' points='90 450 0 600 180 600'/><polygon points='90 450 180 300 0 300'/><polygon fill='#666' points='270 450 180 600 360 600'/><polygon fill='#AAA' points='270 450 360 300 180 300'/><polygon fill='#DDD' points='450 450 360 600 540 600'/><polygon fill='#999' points='450 450 540 300 360 300'/><polygon fill='#999' points='630 450 540 600 720 600'/><polygon fill='#FFF' points='630 450 720 300 540 300'/><polygon points='810 450 720 600 900 600'/><polygon fill='#DDD' points='810 450 900 300 720 300'/><polygon fill='#AAA' points='990 450 900 600 1080 600'/><polygon fill='#444' points='990 450 1080 300 900 300'/><polygon fill='#222' points='90 750 0 900 180 900'/><polygon points='270 750 180 900 360 900'/><polygon fill='#DDD' points='270 750 360 600 180 600'/><polygon points='450 750 540 600 360 600'/><polygon points='630 750 540 900 720 900'/><polygon fill='#444' points='630 750 720 600 540 600'/><polygon fill='#AAA' points='810 750 720 900 900 900'/><polygon fill='#666' points='810 750 900 600 720 600'/><polygon fill='#999' points='990 750 900 900 1080 900'/><polygon fill='#999' points='180 0 90 150 270 150'/><polygon fill='#444' points='360 0 270 150 450 150'/><polygon fill='#FFF' points='540 0 450 150 630 150'/><polygon points='900 0 810 150 990 150'/><polygon fill='#222' points='0 300 -90 450 90 450'/><polygon fill='#FFF' points='0 300 90 150 -90 150'/><polygon fill='#FFF' points='180 300 90 450 270 450'/><polygon fill='#666' points='180 300 270 150 90 150'/><polygon fill='#222' points='360 300 270 450 450 450'/><polygon fill='#FFF' points='360 300 450 150 270 150'/><polygon fill='#444' points='540 300 450 450 630 450'/><polygon fill='#222' points='540 300 630 150 450 150'/><polygon fill='#AAA' points='720 300 630 450 810 450'/><polygon fill='#666' points='720 300 810 150 630 150'/><polygon fill='#FFF' points='900 300 810 450 990 450'/><polygon fill='#999' points='900 300 990 150 810 150'/><polygon points='0 600 -90 750 90 750'/><polygon fill='#666' points='0 600 90 450 -90 450'/><polygon fill='#AAA' points='180 600 90 750 270 750'/><polygon fill='#444' points='180 600 270 450 90 450'/><polygon fill='#444' points='360 600 270 750 450 750'/><polygon fill='#999' points='360 600 450 450 270 450'/><polygon fill='#666' points='540 600 630 450 450 450'/><polygon fill='#222' points='720 600 630 750 810 750'/><polygon fill='#FFF' points='900 600 810 750 990 750'/><polygon fill='#222' points='900 600 990 450 810 450'/><polygon fill='#DDD' points='0 900 90 750 -90 750'/><polygon fill='#444' points='180 900 270 750 90 750'/><polygon fill='#FFF' points='360 900 450 750 270 750'/><polygon fill='#AAA' points='540 900 630 750 450 750'/><polygon fill='#FFF' points='720 900 810 750 630 750'/><polygon fill='#222' points='900 900 990 750 810 750'/><polygon fill='#222' points='1080 300 990 450 1170 450'/><polygon fill='#FFF' points='1080 300 1170 150 990 150'/><polygon points='1080 600 990 750 1170 750'/><polygon fill='#666' points='1080 600 1170 450 990 450'/><polygon fill='#DDD' points='1080 900 1170 750 990 750'/></g></pattern></defs><rect x='0' y='0' fill='url(#a)' width='100%' height='100%'/><rect x='0' y='0' fill='url(#b)' width='100%' height='100%'/></svg>
|
||||
|
|
@ -13,14 +13,15 @@ pageScripts:
|
|||
|
||||
<!--? Because this is a portfolio site, i'm building it from scratch myself a a demonstration in itself of my work (in addition to other demos that will be subdomains linked into the site. How I explained it to somebody else earlier is this: consider this landing page as the front door to my house. I want it to be simply designed, approachable, and easy to absorb. From there, the About and Contact pages will be similar to a foyer or atrium, following a similar style but in more detail by expanding the conversation. My demos, each hosted with their own subdomain will represent the different rooms of the house, where each one is able to have its own vibe, its own personality, its own style and purpose. That is my vision for this portfolio website (perhaps it's ambitious, but I think it's genius). Once this is done, my work shifts from building this house, to finding people to visit it. Direct outreach and cold calling is what that means. I've already planned this out. After I've had a few clients, I'm going to add a testimonials section, sort of like decorating a front porch for the holidays. You know how people love to go drive through neighborhoods around Christmas to look at the lights and decorations? That's what I'm hoping will start to happen as people give me a shot, and I (hopefully) deliver on my promises. Once I've got a better flow going, then I'll add in social media. I've got a lot left to build before I get there. But this is what I have planned, using www.dlseitz.dev as my biggest prop. -->
|
||||
|
||||
<!-- ↓ Start Main ↓ -->
|
||||
<!-- ↓ Start Intro Module ↓ -->
|
||||
<div id="top"></div>
|
||||
<div class="intro">
|
||||
<div class="intro module">
|
||||
<h1>Grow Your Online Presence with Me, <span class="accent-name">Derek L. Seitz</span></h1>
|
||||
<p>A great website is often your most powerful sales tool. It's the first impression you make and the cornerstone of your online presence.</p>
|
||||
</div>
|
||||
<div class="benefits-container">
|
||||
<!-- ↓ Start "Benefits" ↓ -->
|
||||
|
||||
<!-- ↓ Start Benefits Module ↓ -->
|
||||
<div class="benefits-container module">
|
||||
<h2>What a Well-Designed Website Can Do</h2>
|
||||
<p>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.</p>
|
||||
|
||||
|
|
@ -28,9 +29,9 @@ pageScripts:
|
|||
|
||||
|
||||
<div class="benefits-visual">
|
||||
<div class="benefits-card">
|
||||
<h3>Grow Your Business</h3>
|
||||
|
||||
<div class="benefits-card" id="card-growth">
|
||||
<h3>Expand Your Business</h3>
|
||||
<div class="hover-list">
|
||||
<ul class="growth">
|
||||
<li>Attract more visitors</li>
|
||||
<li>Expand your availability</li>
|
||||
|
|
@ -38,10 +39,11 @@ pageScripts:
|
|||
<li>Engage with your audience</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="benefits-card">
|
||||
<h3>Establish Your Brand's Authority</h3>
|
||||
|
||||
<div class="benefits-card" id="card-brand">
|
||||
<h3>Establish Brand Authority</h3>
|
||||
<div class="hover-list">
|
||||
<ul class="brand-cred">
|
||||
<li>Share your expertise</li>
|
||||
<li>Build trust and credibility</li>
|
||||
|
|
@ -49,10 +51,11 @@ pageScripts:
|
|||
<li>Communicate your vision</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="benefits-card">
|
||||
<h3>Streamline Your Business Operations</h3>
|
||||
|
||||
<div class="benefits-card" id="card-ops">
|
||||
<h3>Streamline Operations</h3>
|
||||
<div class="hover-list">
|
||||
<ul class="operations">
|
||||
<li>Transform your workflow</li>
|
||||
<li>Provide cost-effective marketing</li>
|
||||
|
|
@ -61,18 +64,19 @@ pageScripts:
|
|||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="transition">
|
||||
<p>Tackling these areas yourself can demand a huge amount of your time. This is where I come in.</p>
|
||||
<p>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.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<p>Tackling these areas yourself can demand a huge amount of your time.</p>
|
||||
<p>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.</p>
|
||||
|
||||
<!-- ↓ Start "Ways I Can Help" ↓ -->
|
||||
<!-- ↓ Start Services Module ↓ -->
|
||||
|
||||
<!--? This section will feature a carousel of services on cards. The carousel will be scrollable, and when the card is clicked or touched, it will expand to provide a clearer description of the service. This will be accomplished with JavaScript-->
|
||||
|
||||
|
||||
<div class="carousel-container">
|
||||
<div class="services-section module">
|
||||
<div class="carousel-container">
|
||||
<h2>The Ways I Can Help</h2>
|
||||
|
||||
<button class="carousel-button prev-button">❮</button>
|
||||
|
|
@ -113,10 +117,14 @@ pageScripts:
|
|||
|
||||
<button class="carousel-button next-button">❯</button>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="cta-section">
|
||||
<p>Perhaps you need inspiration... <a href="/demos/" class="demos-link" target="_blank"> Explore My Work!</a></p>
|
||||
<!-- ↓ Start CTA Module ↓ -->
|
||||
|
||||
<div class="cta-section module">
|
||||
<h2 class="inspiration">Perhaps you need a little inspiration...</h2>
|
||||
<p><a href="/demos/" class="demos-link" target="_blank"> Explore My Work!</a></p>
|
||||
|
||||
<div class="project-steps">
|
||||
<h2>My Project Process</h2>
|
||||
|
|
@ -127,5 +135,6 @@ pageScripts:
|
|||
</ol>
|
||||
</div>
|
||||
|
||||
<p>Ready to get started - or just have a few questions first? <a href="/about/#contact" class="cta-button" target="_blank">Let's Talk About How to Grow Your Business Online!</a></p>
|
||||
<h2 class="call-to-action">Ready to get started - or just have a few questions first?</h2>
|
||||
<p><a href="/about/#contact" class="cta-button" target="_blank">Let's Talk About How to Grow Your Business Online!</a></p>
|
||||
</div>
|
||||
|
|
@ -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');
|
||||
});
|
||||
});
|
||||
});
|
||||
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -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,
|
||||
|
|
|
|||
|
|
@ -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);
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
Loading…
Reference in New Issue