chore: finalize about and contact pages, fix stylesheet path, add TODO comments for future improvements
This commit is contained in:
120
src/index.njk
120
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
|
||||
|
||||
<!-- ↓ Start Main ↓ -->
|
||||
<div id="top"></div>
|
||||
<h1>Grow Your Online Presence with Me, Derek L. Seitz</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>
|
||||
|
||||
|
||||
<!-- ↓ Start "Benefits" ↓ -->
|
||||
<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>
|
||||
|
||||
<!--? The .benefits-list list will be a JavaScript feature that cycles through the list of benefits. The list likely needs to be lengthened further, and instead of flashing them one by one, perhaps use an accordion feature as a pop-out for different categories, or even a hover that expands the displayed benefits (tap-to-expand using javaScript for mobile devices)-->
|
||||
|
||||
<div class="benefits-container">
|
||||
|
||||
<div class="benefits-card">
|
||||
<h3>Grow Your Business</h3>
|
||||
|
||||
<ul class="growth">
|
||||
<li>Attract more visitors</li>
|
||||
<li>Expand your availability</li>
|
||||
<li>Convert visitors into customers</li>
|
||||
<li>Engage with your audience</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div class="benefits-card">
|
||||
<h3>Establish Your Brand's Authority</h3>
|
||||
|
||||
<ul class="brand-cred">
|
||||
<li>Share your expertise</li>
|
||||
<li>Build trust and credibility</li>
|
||||
<li>Showcase your products and services</li>
|
||||
<li>Communicate your vision</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div class="benefits-card">
|
||||
<h3>Streamline Your Business Operations</h3>
|
||||
|
||||
<ul class="operations">
|
||||
<li>Transform your workflow</li>
|
||||
<li>Provide cost-effective marketing</li>
|
||||
<li>Enhance customer service</li>
|
||||
<li>Improve data analytics</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div class="intro">
|
||||
<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" ↓ -->
|
||||
<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>
|
||||
|
||||
<!--? The .benefits-list list will be a JavaScript feature that cycles through the list of benefits. The list likely needs to be lengthened further, and instead of flashing them one by one, perhaps use an accordion feature as a pop-out for different categories, or even a hover that expands the displayed benefits (tap-to-expand using javaScript for mobile devices)-->
|
||||
|
||||
|
||||
<div class="benefits-visual">
|
||||
<div class="benefits-card">
|
||||
<h3>Grow Your Business</h3>
|
||||
|
||||
<ul class="growth">
|
||||
<li>Attract more visitors</li>
|
||||
<li>Expand your availability</li>
|
||||
<li>Convert visitors into customers</li>
|
||||
<li>Engage with your audience</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div class="benefits-card">
|
||||
<h3>Establish Your Brand's Authority</h3>
|
||||
|
||||
<ul class="brand-cred">
|
||||
<li>Share your expertise</li>
|
||||
<li>Build trust and credibility</li>
|
||||
<li>Showcase your products and services</li>
|
||||
<li>Communicate your vision</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div class="benefits-card">
|
||||
<h3>Streamline Your Business Operations</h3>
|
||||
|
||||
<ul class="operations">
|
||||
<li>Transform your workflow</li>
|
||||
<li>Provide cost-effective marketing</li>
|
||||
<li>Enhance customer service</li>
|
||||
<li>Improve data analytics</li>
|
||||
</ul>
|
||||
</div>
|
||||
</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>
|
||||
@@ -66,7 +72,7 @@ stylesheet: styles/index.css
|
||||
<!--? 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="services-container">
|
||||
<div class="carousel-container">
|
||||
<h2>The Ways I Can Help</h2>
|
||||
|
||||
<button class="carousel-button prev-button">❮</button>
|
||||
@@ -109,15 +115,17 @@ stylesheet: styles/index.css
|
||||
|
||||
</div>
|
||||
|
||||
<p>Perhaps you need inspiration... <a href="#demos" class="demos-link"> Explore My Work!</a></p>
|
||||
<div class="cta-section">
|
||||
<p>Perhaps you need inspiration... <a href="/demos/" class="demos-link" target="_blank"> Explore My Work!</a></p>
|
||||
|
||||
<div class="project-steps">
|
||||
<h2>My Project Process</h2>
|
||||
<ol class="steps-list">
|
||||
<li id="li-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.</li>
|
||||
<li id="li-2">Planning: I will create a custom project plan and proposal that outlines the scope, timeline, and investment required to achieve your objectives.</li>
|
||||
<li id="li-3">Execution: Once we're aligned on the plan, I'll build and launch your website, ensuring it delivers on our shared vision.</li>
|
||||
</ol>
|
||||
</div>
|
||||
<div class="project-steps">
|
||||
<h2>My Project Process</h2>
|
||||
<ol class="steps-list">
|
||||
<li id="li-1"><h3>Discovery</h3> 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.</li>
|
||||
<li id="li-2"><h3>Planning</h3> I will create a custom project plan and proposal that outlines the scope, timeline, and investment required to achieve your objectives.</li>
|
||||
<li id="li-3"><h3>Execution</h3> Once we're aligned on the plan, I'll build and launch your website, ensuring it delivers on our shared vision.</li>
|
||||
</ol>
|
||||
</div>
|
||||
|
||||
<p>Interested in working together? <a href="#contact" class="cta-button">Let's Get Started on a Plan!</a></p>
|
||||
<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>
|
||||
</div>
|
||||
Reference in New Issue
Block a user