feat(ui): refactor page structure with section tags, better spacing, and clean cleanup of legacy containers
This commit is contained in:
249
index.html
249
index.html
@@ -68,109 +68,152 @@
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</header>
|
</header>
|
||||||
<div class="d-flex flex-column min-vh-100" style="position: relative;">
|
<div class="d-flex flex-column min-vh-100" style="position: relative;">
|
||||||
<div class="container mt-4">
|
|
||||||
<h2>About Us</h2>
|
<!-- About Section -->
|
||||||
<p>Welcome to d@n tech! We specialize in creating stunning and efficient websites for businesses of all sizes. Our team of experienced developers is dedicated to delivering high-quality web solutions that meet your unique needs.</p>
|
<section id="about" class="section-padding">
|
||||||
|
<div class="container">
|
||||||
<h2>Services</h2>
|
<h2>About Us</h2>
|
||||||
<ul class="list-group skill-bars">
|
<div class="row">
|
||||||
<li class="list-group-item skill-item" data-skill="95">
|
<div class="col-lg-8">
|
||||||
<span class="skill-name">Custom Website Development</span>
|
<p class="lead mb-4">Welcome to d@n tech! We specialize in creating stunning and efficient websites for businesses of all sizes.</p>
|
||||||
<div class="skill-bar-track">
|
<p>Our team of experienced developers is dedicated to delivering high-quality web solutions that meet your unique needs. We believe in code that is as clean as a fresh pour-over and designs that are as rich as a dark roast.</p>
|
||||||
<div class="skill-bar-fill" style="--skill-level: 95%;"></div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</li>
|
</div>
|
||||||
<li class="list-group-item skill-item" data-skill="90">
|
</section>
|
||||||
<span class="skill-name">Responsive Design</span>
|
|
||||||
<div class="skill-bar-track">
|
<!-- Services Section -->
|
||||||
<div class="skill-bar-fill" style="--skill-level: 90%;"></div>
|
<section id="services" class="section-padding section-alt">
|
||||||
|
<div class="container">
|
||||||
|
<h2>Services</h2>
|
||||||
|
<div class="row align-items-center">
|
||||||
|
<div class="col-lg-8">
|
||||||
|
<ul class="list-group skill-bars">
|
||||||
|
<li class="list-group-item skill-item" data-skill="95">
|
||||||
|
<span class="skill-name">Custom Website Development</span>
|
||||||
|
<div class="skill-bar-track">
|
||||||
|
<div class="skill-bar-fill" style="--skill-level: 95%;"></div>
|
||||||
|
</div>
|
||||||
|
</li>
|
||||||
|
<li class="list-group-item skill-item" data-skill="90">
|
||||||
|
<span class="skill-name">Responsive Design</span>
|
||||||
|
<div class="skill-bar-track">
|
||||||
|
<div class="skill-bar-fill" style="--skill-level: 90%;"></div>
|
||||||
|
</div>
|
||||||
|
</li>
|
||||||
|
<li class="list-group-item skill-item" data-skill="85">
|
||||||
|
<span class="skill-name">E-commerce Solutions</span>
|
||||||
|
<div class="skill-bar-track">
|
||||||
|
<div class="skill-bar-fill" style="--skill-level: 85%;"></div>
|
||||||
|
</div>
|
||||||
|
</li>
|
||||||
|
<li class="list-group-item skill-item" data-skill="92">
|
||||||
|
<span class="skill-name">SEO Optimization</span>
|
||||||
|
<div class="skill-bar-track">
|
||||||
|
<div class="skill-bar-fill" style="--skill-level: 92%;"></div>
|
||||||
|
</div>
|
||||||
|
</li>
|
||||||
|
<li class="list-group-item skill-item" data-skill="98">
|
||||||
|
<span class="skill-name">Website Maintenance</span>
|
||||||
|
<div class="skill-bar-track">
|
||||||
|
<div class="skill-bar-fill" style="--skill-level: 98%;"></div>
|
||||||
|
</div>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
<div class="col-lg-4 d-none d-lg-block text-center opacity-75">
|
||||||
|
<!-- Decorative Icon/Illustration placeholder or just empty space for balance -->
|
||||||
|
<svg width="120" height="120" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1" stroke-linecap="round" stroke-linejoin="round" class="text-primary">
|
||||||
|
<path d="M18 8h1a4 4 0 0 1 0 8h-1"></path>
|
||||||
|
<path d="M2 8h16v9a4 4 0 0 1-4 4H6a4 4 0 0 1-4-4V8z"></path>
|
||||||
|
<line x1="6" y1="1" x2="6" y2="4"></line>
|
||||||
|
<line x1="10" y1="1" x2="10" y2="4"></line>
|
||||||
|
<line x1="14" y1="1" x2="14" y2="4"></line>
|
||||||
|
</svg>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</li>
|
</div>
|
||||||
<li class="list-group-item skill-item" data-skill="85">
|
</section>
|
||||||
<span class="skill-name">E-commerce Solutions</span>
|
|
||||||
<div class="skill-bar-track">
|
<!-- Portfolio Section -->
|
||||||
<div class="skill-bar-fill" style="--skill-level: 85%;"></div>
|
<section id="portfolio" class="section-padding">
|
||||||
</div>
|
<div class="container">
|
||||||
</li>
|
|
||||||
<li class="list-group-item skill-item" data-skill="92">
|
|
||||||
<span class="skill-name">SEO Optimization</span>
|
|
||||||
<div class="skill-bar-track">
|
|
||||||
<div class="skill-bar-fill" style="--skill-level: 92%;"></div>
|
|
||||||
</div>
|
|
||||||
</li>
|
|
||||||
<li class="list-group-item skill-item" data-skill="98">
|
|
||||||
<span class="skill-name">Website Maintenance</span>
|
|
||||||
<div class="skill-bar-track">
|
|
||||||
<div class="skill-bar-fill" style="--skill-level: 98%;"></div>
|
|
||||||
</div>
|
|
||||||
</li>
|
|
||||||
</ul>
|
|
||||||
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="container mt-4" id="portfolio">
|
|
||||||
<h2>Portfolio</h2>
|
<h2>Portfolio</h2>
|
||||||
|
<div class="row g-4">
|
||||||
|
|
||||||
<div class="row">
|
<div class="col-md-6 col-lg-6 mb-2">
|
||||||
<div class="col-md-6 mb-2">
|
<div class="card h-100">
|
||||||
<div class="card">
|
<img srcset="assets/images/optimized/pcw-400.webp 400w, assets/images/optimized/pcw-800.webp 800w, assets/images/optimized/pcw.webp 1200w" sizes="(max-width: 768px) 100vw, 50vw" src="assets/images/optimized/pcw.webp" class="card-img-top" alt="Pemu Counseling and Wellness" loading="lazy">
|
||||||
<img srcset="assets/images/optimized/pcw-400.webp 400w, assets/images/optimized/pcw-800.webp 800w, assets/images/optimized/pcw.webp 1200w" sizes="(max-width: 768px) 100vw, 50vw" src="assets/images/optimized/pcw.webp" class="card-img-top" alt="Pemu Counseling and Wellness" loading="lazy">
|
<div class="card-body">
|
||||||
<div class="card-body">
|
<h5 class="card-title">Pemu Counseling and Wellness</h5>
|
||||||
<h5 class="card-title">Pemu Counseling and Wellness</h5>
|
<p class="card-text">Pemu Counseling and Wellness is a comprehensive mental health service provider offering personalized counseling and wellness programs to help individuals achieve their mental health goals.</p>
|
||||||
<p class="card-text">Pemu Counseling and Wellness is a comprehensive mental health service provider offering personalized counseling and wellness programs to help individuals achieve their mental health goals.</p>
|
<div class="mt-auto">
|
||||||
<a href="https://pemucounselingandwellness.com" target="_blank" class="btn btn-primary" aria-label="View Pemu Counseling and Wellness project">View project<span class="visually-hidden"> about Pemu Counseling and Wellness</span></a>
|
<a href="https://pemucounselingandwellness.com" target="_blank" class="btn btn-outline-coffee btn-sm" aria-label="View Pemu Counseling and Wellness project">View project<span class="visually-hidden"> about Pemu Counseling and Wellness</span></a>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="col-md-6 mb-2">
|
</div>
|
||||||
<div class="card">
|
<div class="col-md-6 col-lg-6 mb-2">
|
||||||
<img srcset="assets/images/optimized/knphd-400.webp 400w, assets/images/optimized/knphd-800.webp 800w, assets/images/optimized/knphd.webp 1200w" sizes="(max-width: 768px) 100vw, 50vw" src="assets/images/optimized/knphd.webp" class="card-img-top" alt="Kayla Newkirk" loading="lazy">
|
<div class="card h-100">
|
||||||
<div class="card-body">
|
<img srcset="assets/images/optimized/knphd-400.webp 400w, assets/images/optimized/knphd-800.webp 800w, assets/images/optimized/knphd.webp 1200w" sizes="(max-width: 768px) 100vw, 50vw" src="assets/images/optimized/knphd.webp" class="card-img-top" alt="Kayla Newkirk" loading="lazy">
|
||||||
<h5 class="card-title">Kayla Newkirk</h5>
|
<div class="card-body">
|
||||||
<p class="card-text">Kayla Newkirk is a PhD candidate specializing in mental health counseling and supervision, dedicated to advancing the field through research and practice.</p>
|
<h5 class="card-title">Kayla Newkirk</h5>
|
||||||
<a href="https://kaylassafe.space" target="_blank" class="btn btn-primary" aria-label="View Kayla Newkirk project">View project<span class="visually-hidden"> about Kayla Newkirk</span></a>
|
<p class="card-text">Kayla Newkirk is a PhD candidate specializing in mental health counseling and supervision, dedicated to advancing the field through research and practice.</p>
|
||||||
</div>
|
<div class="mt-auto">
|
||||||
</div>
|
<a href="https://kaylassafe.space" target="_blank" class="btn btn-outline-coffee btn-sm" aria-label="View Kayla Newkirk project">View project<span class="visually-hidden"> about Kayla Newkirk</span></a>
|
||||||
</div>
|
</div>
|
||||||
<div class="col-md-6 mb-2">
|
</div>
|
||||||
<div class="card">
|
</div>
|
||||||
<img srcset="assets/images/optimized/4th-400.webp 400w, assets/images/optimized/4th-800.webp 800w, assets/images/optimized/4th.webp 1200w" sizes="(max-width: 768px) 100vw, 50vw" src="assets/images/optimized/4th.webp" class="card-img-top" alt="4th & Goal" loading="lazy">
|
</div>
|
||||||
<div class="card-body">
|
<div class="col-md-6 col-lg-6 mb-2">
|
||||||
<h5 class="card-title">4th & Goal</h5>
|
<div class="card h-100">
|
||||||
<p class="card-text">4th & Goal is a hardcore band based out of Syracuse, NY, known for their intense performances and powerful music that resonates with fans across the state.</p>
|
<img srcset="assets/images/optimized/4th-400.webp 400w, assets/images/optimized/4th-800.webp 800w, assets/images/optimized/4th.webp 1200w" sizes="(max-width: 768px) 100vw, 50vw" src="assets/images/optimized/4th.webp" class="card-img-top" alt="4th & Goal" loading="lazy">
|
||||||
<a href="https://4th.hobokenchicken.com" target="_blank" class="btn btn-primary" aria-label="View 4th & Goal project">View project<span class="visually-hidden"> about 4th & Goal</span></a>
|
<div class="card-body">
|
||||||
</div>
|
<h5 class="card-title">4th & Goal</h5>
|
||||||
</div>
|
<p class="card-text">4th & Goal is a hardcore band based out of Syracuse, NY, known for their intense performances and powerful music that resonates with fans across the state.</p>
|
||||||
</div>
|
<div class="mt-auto">
|
||||||
<div class="col-md-6 mb-2">
|
<a href="https://4th.hobokenchicken.com" target="_blank" class="btn btn-outline-coffee btn-sm" aria-label="View 4th & Goal project">View project<span class="visually-hidden"> about 4th & Goal</span></a>
|
||||||
<div class="card">
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="col-md-6 col-lg-6 mb-2">
|
||||||
|
<div class="card h-100">
|
||||||
<img srcset="assets/images/optimized/pha-400.webp 400w, assets/images/optimized/pha-800.webp 800w, assets/images/optimized/pha.webp 1200w" sizes="(max-width: 768px) 100vw, 50vw" src="assets/images/optimized/pha.webp" class="card-img-top" alt="Powerful Healing Arts" loading="lazy">
|
<img srcset="assets/images/optimized/pha-400.webp 400w, assets/images/optimized/pha-800.webp 800w, assets/images/optimized/pha.webp 1200w" sizes="(max-width: 768px) 100vw, 50vw" src="assets/images/optimized/pha.webp" class="card-img-top" alt="Powerful Healing Arts" loading="lazy">
|
||||||
<div class="card-body">
|
<div class="card-body">
|
||||||
<h5 class="card-title">Powerful Healing Arts</h5>
|
<h5 class="card-title">Powerful Healing Arts</h5>
|
||||||
<p class="card-text">Powerful Healing Arts is a sanctuary for women seeking to move beyond physical healing into deeper, energetic and spiritual transformation. Discover how shamanic wisdom and energy work can unlock new pathways to healing and personal growth.</p>
|
<p class="card-text">Powerful Healing Arts is a sanctuary for women seeking to move beyond physical healing into deeper, energetic and spiritual transformation.</p>
|
||||||
<a href="https://powerfulhealingarts.com" target="_blank" class="btn btn-primary" aria-label="View Powerful Healing Arts project">View project<span class="visually-hidden"> about Powerful Healing Arts</span></a>
|
<div class="mt-auto">
|
||||||
|
<a href="https://powerfulhealingarts.com" target="_blank" class="btn btn-outline-coffee btn-sm" aria-label="View Powerful Healing Arts project">View project<span class="visually-hidden"> about Powerful Healing Arts</span></a>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="col-md-6 mb-2">
|
<div class="col-md-6 col-lg-6 mb-2">
|
||||||
<div class="card">
|
<div class="card h-100">
|
||||||
<img srcset="assets/images/optimized/dissertationpath-400.webp 400w, assets/images/optimized/dissertationpath-800.webp 800w, assets/images/optimized/dissertationpath.webp 1200w" sizes="(max-width: 768px) 100vw, 50vw" src="assets/images/optimized/dissertationpath.webp" class="card-img-top" alt="DissertationPath" loading="lazy">
|
<img srcset="assets/images/optimized/dissertationpath-400.webp 400w, assets/images/optimized/dissertationpath-800.webp 800w, assets/images/optimized/dissertationpath.webp 1200w" sizes="(max-width: 768px) 100vw, 50vw" src="assets/images/optimized/dissertationpath.webp" class="card-img-top" alt="DissertationPath" loading="lazy">
|
||||||
<div class="card-body">
|
<div class="card-body">
|
||||||
<h5 class="card-title">DissertationPath</h5>
|
<h5 class="card-title">DissertationPath</h5>
|
||||||
<p class="card-text">DissertationPath is a comprehensive platform designed to help doctoral candidates navigate the dissertation process with expert guidance, resources, and mentorship to ensure academic success.</p>
|
<p class="card-text">DissertationPath is a comprehensive platform designed to help doctoral candidates navigate the dissertation process with expert guidance.</p>
|
||||||
<a href="https://dissertationpath.com" target="_blank" class="btn btn-primary" aria-label="View DissertationPath project">View project<span class="visually-hidden"> about DissertationPath</span></a>
|
<div class="mt-auto">
|
||||||
|
<a href="https://dissertationpath.com" target="_blank" class="btn btn-outline-coffee btn-sm" aria-label="View DissertationPath project">View project<span class="visually-hidden"> about DissertationPath</span></a>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
</section>
|
||||||
<div class="container mt-4">
|
|
||||||
|
<!-- Testimonials Section -->
|
||||||
|
<section id="testimonials" class="section-padding section-alt">
|
||||||
|
<div class="container">
|
||||||
<h2>Testimonials</h2>
|
<h2>Testimonials</h2>
|
||||||
<div class="row">
|
<div class="row g-4">
|
||||||
<div class="col-md-6">
|
<div class="col-md-6">
|
||||||
<div class="card testimonial-card">
|
|
||||||
|
<div class="card testimonial-card h-100">
|
||||||
<div class="card-body">
|
<div class="card-body">
|
||||||
<p class="card-text testimonial-excerpt">"It was a pleasure working with Dustin on my counseling practice website. Throughout the process, he was thoughtful, responsive, and truly understood my vision..."</p>
|
<p class="card-text testimonial-excerpt">"It was a pleasure working with Dustin on my counseling practice website. Throughout the process, he was thoughtful, responsive, and truly understood my vision..."</p>
|
||||||
<p class="card-text testimonial-full">"It was a pleasure working with Dustin on my counseling practice website. Throughout the process, he was thoughtful, responsive, and truly understood my vision. In addition to bringing my ideas to life with a clean, professional design, he made the entire process enjoyable and easy. His attention to detail, creativity, and technical skills are excellent. As a result of Dustin's work, I now have a website that truly represents my practice. There is no better person to recommend than him!"</p>
|
<p class="card-text testimonial-full">"It was a pleasure working with Dustin on my counseling practice website. Throughout the process, he was thoughtful, responsive, and truly understood my vision. In addition to bringing my ideas to life with a clean, professional design, he made the entire process enjoyable and easy. His attention to detail, creativity, and technical skills are excellent. As a result of Dustin's work, I now have a website that truly represents my practice. There is no better person to recommend than him!"</p>
|
||||||
@@ -180,7 +223,7 @@
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="col-md-6">
|
<div class="col-md-6">
|
||||||
<div class="card testimonial-card">
|
<div class="card testimonial-card h-100">
|
||||||
<div class="card-body">
|
<div class="card-body">
|
||||||
<p class="card-text testimonial-excerpt">"Working with Dustin at d@n tech was an absolute pleasure from start to finish. He is funny, engaging, and listens well. He offered grace for my lack of technical skill..."</p>
|
<p class="card-text testimonial-excerpt">"Working with Dustin at d@n tech was an absolute pleasure from start to finish. He is funny, engaging, and listens well. He offered grace for my lack of technical skill..."</p>
|
||||||
<p class="card-text testimonial-full">"Working with Dustin at d@n tech was an absolute pleasure from start to finish. He is funny, engaging, and listens well. He offered grace for my lack of technical skill and worked from simple examples provided, which translated into a functional and funky-professional website that represents my brand.
|
<p class="card-text testimonial-full">"Working with Dustin at d@n tech was an absolute pleasure from start to finish. He is funny, engaging, and listens well. He offered grace for my lack of technical skill and worked from simple examples provided, which translated into a functional and funky-professional website that represents my brand.
|
||||||
@@ -193,21 +236,29 @@
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
<div class="container mt-4">
|
<!-- Contact Section -->
|
||||||
<h2>Contact Us</h2>
|
<section id="contact" class="section-padding">
|
||||||
<div class="card">
|
<div class="container">
|
||||||
<div class="card-body">
|
<h2>Contact Us</h2>
|
||||||
<p class="card-text">For inquiries, please email us at <a href="mailto:info@dustin.coffee">info@dustin.coffee</a></p>
|
<div class="row justify-content-center">
|
||||||
<p class="card-text">View your invoices at <a href="https://invoice.dustin.coffee/client" target="_blank">invoice.dustin.coffee</a></p>
|
<div class="col-md-8 text-center">
|
||||||
</div>
|
<div class="card bg-transparent border-0 shadow-none">
|
||||||
</div>
|
<div class="card-body">
|
||||||
</div>
|
<p class="lead mb-4">Ready to start your next project? Let's connect over coffee (or email).</p>
|
||||||
|
<a href="mailto:info@dustin.coffee" class="btn btn-primary btn-lg mb-3">Send an Email</a>
|
||||||
|
<p class="card-text text-muted mt-3">View your invoices at <a href="https://invoice.dustin.coffee/client" target="_blank" class="text-decoration-underline">invoice.dustin.coffee</a></p>
|
||||||
</div>
|
</div>
|
||||||
<footer class="bg-dark text-white text-center py-1 mt-5" >
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
<footer class="bg-dark text-white text-center py-5" >
|
||||||
|
|
||||||
<p>© <span id="currentYear"></span> d@n tech. All rights reserved.</p>
|
<p>© <span id="currentYear"></span> d@n tech. All rights reserved.</p>
|
||||||
<p><a href="tos.html" class="text-white">Terms of Service</a> | <a href="privacy.html" class="text-white">Privacy Policy</a></p>
|
<p><a href="tos.html" class="text-white">Terms of Service</a> | <a href="privacy.html" class="text-white">Privacy Policy</a></p>
|
||||||
</footer>
|
</footer>
|
||||||
|
|||||||
Reference in New Issue
Block a user