dereklseitz/dlseitz.dev-frontend
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat(services-cards): add accordion feature to section

Browse Source
This commit is contained in:
Derek L. Seitz
2025-08-16 21:44:13 -05:00
parent d742364f46
commit b109387471
9 changed files with 231 additions and 102 deletions
Download Patch File Download Diff File Expand all files Collapse all files

73
src/index.njk
View File

@@ -1,11 +1,12 @@
---
layout: base.njk
metaDesc: "Elevate your business with a custom, high-quality website. Derek L. Seitz provides professional web design and development to help you grow your online presence."
title: "Derek L. Seitz - Portfolio"
stylesheet: styles/index.css
isLandingPage: true
pageScripts:
- "/scripts/benefits.js"
- "/scripts/carousel.js"
- "/scripts/services.js"
---
@@ -76,50 +77,52 @@ pageScripts:
<!--? 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>
<div class="accordion-container">
<h2>How I Can Help</h2>
<p>Click each button below to see ways I can help!</p>
<button class="carousel-button prev-button">&#10094;</button>
<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 class="accordion">
<div class="accordion-item">
<button class="accordion-header">Website Design</button>
<div class="accordion-content">
<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>
</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 class="accordion-item">
<button class="accordion-header">Website Development</button>
<div class="accordion-content">
<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>
</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 class="accordion-item">
<button class="accordion-header">Other Related Services</button>
<div class="accordion-content">
<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>
</div>
<button class="carousel-button next-button">&#10095;</button>
</div>
</div>
<!-- ↓ 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 -->
<!-- ↓ Start CTA Module ↓ -->
<div class="cta-section module">