.
This commit is contained in:
157
src/index.njk
157
src/index.njk
@@ -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,95 +29,102 @@ pageScripts:
|
||||
|
||||
|
||||
<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 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>
|
||||
<li>Convert visitors into customers</li>
|
||||
<li>Engage with your audience</li>
|
||||
</ul>
|
||||
</div>
|
||||
</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 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>
|
||||
<li>Showcase your products and services</li>
|
||||
<li>Communicate your vision</li>
|
||||
</ul>
|
||||
</div>
|
||||
</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 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>
|
||||
<li>Enhance customer service</li>
|
||||
<li>Improve data analytics</li>
|
||||
</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="services-section module">
|
||||
<div class="carousel-container">
|
||||
<h2>The Ways I Can Help</h2>
|
||||
|
||||
<button class="carousel-button prev-button">❮</button>
|
||||
|
||||
<div class="carousel-container">
|
||||
<h2>The Ways I Can Help</h2>
|
||||
<div class="service-cards">
|
||||
<!-- Website Design -->
|
||||
<div class="service-card">
|
||||
<h3>Website Design</h3>
|
||||
<ul class="design-service">
|
||||
<li>Custom web design & user experience (UX) services</li>
|
||||
<li>Discovery, planning, & wireframing</li>
|
||||
<li>Website redesign & optimization</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<button class="carousel-button prev-button">❮</button>
|
||||
<!-- Website Development -->
|
||||
<div class="service-card">
|
||||
<h3>Website Development</h3>
|
||||
<ul class="development-service">
|
||||
<li>Full-stack web development (Front-End & Back-End)</li>
|
||||
<li>Custom solutions (e.g., CMS, eCommerce, booking systems)</li>
|
||||
<li>Ongoing maintenance & support</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<!-- Other Services -->
|
||||
<div class="service-card">
|
||||
<h3>Other Related Services</h3>
|
||||
<ul class="other-service">
|
||||
<li>Basic SEO setup & Google Analytics integration</li>
|
||||
<li>Hosting services</li>
|
||||
<li>Deployment</li>
|
||||
<li>E-commerce</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div class="service-cards">
|
||||
<!-- Website Design -->
|
||||
<div class="service-card">
|
||||
<h3>Website Design</h3>
|
||||
<ul class="design-service">
|
||||
<li>Custom web design & user experience (UX) services</li>
|
||||
<li>Discovery, planning, & wireframing</li>
|
||||
<li>Website redesign & optimization</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<!-- Website Development -->
|
||||
<div class="service-card">
|
||||
<h3>Website Development</h3>
|
||||
<ul class="development-service">
|
||||
<li>Full-stack web development (Front-End & Back-End)</li>
|
||||
<li>Custom solutions (e.g., CMS, eCommerce, booking systems)</li>
|
||||
<li>Ongoing maintenance & support</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<!-- Other Services -->
|
||||
<div class="service-card">
|
||||
<h3>Other Related Services</h3>
|
||||
<ul class="other-service">
|
||||
<li>Basic SEO setup & Google Analytics integration</li>
|
||||
<li>Hosting services</li>
|
||||
<li>Deployment</li>
|
||||
<li>E-commerce</li>
|
||||
</ul>
|
||||
</div>
|
||||
<button class="carousel-button next-button">❯</button>
|
||||
|
||||
</div>
|
||||
|
||||
<button class="carousel-button next-button">❯</button>
|
||||
|
||||
</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>
|
||||
Reference in New Issue
Block a user