568 lines
43 KiB
HTML
568 lines
43 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<meta name="description" content="d@n tech offers professional web development services including custom website development, responsive design, e-commerce solutions, SEO optimization, and website maintenance.">
|
|
<meta name="keywords" content="web development, custom websites, responsive design, e-commerce, SEO, website maintenance">
|
|
<meta name="author" content="Dustin Newkirk">
|
|
<link rel="canonical" href="https://dev.dustin.coffee/">
|
|
<link rel="icon" href="favicon.svg" type="image/svg+xml">
|
|
<link rel="icon" href="favicon.ico" sizes="any">
|
|
<title>d@n tech - Web Development Services</title>
|
|
<meta property="og:title" content="d@n tech - Web Development Services">
|
|
<meta property="og:description" content="Professional web development services: custom sites, responsive design, e-commerce, SEO, maintenance. Portfolio showcase.">
|
|
<meta property="og:image" content="https://dev.dustin.coffee/assets/images/optimized/pcw.webp">
|
|
<meta property="og:url" content="https://dev.dustin.coffee/">
|
|
<meta property="og:type" content="website">
|
|
<meta name="twitter:card" content="summary_large_image">
|
|
<meta name="twitter:title" content="d@n tech - Web Development Services">
|
|
<meta name="twitter:description" content="Professional web development services: custom sites, responsive design, e-commerce, SEO, maintenance. Portfolio showcase.">
|
|
<meta name="twitter:image" content="https://dev.dustin.coffee/assets/images/optimized/pcw.webp">
|
|
<script type="application/ld+json">
|
|
{
|
|
"@context": "https://schema.org",
|
|
"@type": "ProfessionalService",
|
|
"name": "d@n tech",
|
|
"description": "Professional web development services including custom website development, responsive design, e-commerce solutions, SEO optimization, and website maintenance.",
|
|
"url": "https://dev.dustin.coffee/",
|
|
"provider": {
|
|
"@type": "Person",
|
|
"name": "Dustin Newkirk"
|
|
},
|
|
"serviceType": "Web Development",
|
|
"areaServed": "Worldwide"
|
|
}
|
|
</script>
|
|
<link rel="preconnect" href="https://fonts.googleapis.com">
|
|
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
|
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;600;800&display=swap" rel="stylesheet">
|
|
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
|
|
<link rel="stylesheet" href="styles.css">
|
|
<style>
|
|
html {
|
|
scroll-behavior: smooth;
|
|
}
|
|
</style>
|
|
<script type="module" src="/main.js" defer></script>
|
|
</head>
|
|
<body>
|
|
<!-- Scroll Progress Bar -->
|
|
<div class="scroll-progress" role="progressbar" aria-label="Page scroll progress" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100"></div>
|
|
|
|
<!-- Particle Canvas -->
|
|
<canvas id="particles" aria-hidden="true"></canvas>
|
|
|
|
<header class="hero-section">
|
|
<div class="container hero-content">
|
|
<h1 class="hero-title">Digital Experiences,<br>Perfectly Brewed.</h1>
|
|
<p class="typewriter hero-subtitle" data-text="Crafting robust, responsive, and elegant web solutions" aria-label="Crafting robust, responsive, and elegant web solutions"></p>
|
|
<div class="btn-group-custom">
|
|
<a href="mailto:info@dustin.coffee" class="btn btn-primary btn-lg">Start Your Project</a>
|
|
<a href="#portfolio" class="btn btn-outline-coffee btn-lg">View Portfolio</a>
|
|
</div>
|
|
<div class="mt-5 d-none d-md-block opacity-50 animate-bounce" aria-hidden="true">
|
|
<svg width="24" height="24" fill="currentColor" viewBox="0 0 16 16">
|
|
<path d="M8 1a.5.5 0 0 1 .5.5v11.793l3.146-3.147a.5.5 0 0 1 .708.708l-4 4a.5.5 0 0 1-.708 0l-4-4a.5.5 0 0 1 .708-.708L7.5 13.293V1.5A.5.5 0 0 1 8 1z"/>
|
|
</svg>
|
|
</div>
|
|
</div>
|
|
</header>
|
|
<div class="d-flex flex-column min-vh-100" style="position: relative;">
|
|
|
|
<!-- About Section -->
|
|
<section id="about" class="section-padding">
|
|
<div class="container">
|
|
<h2>About Us</h2>
|
|
<div class="row">
|
|
<div class="col-lg-8">
|
|
<p class="lead mb-4">Welcome to d@n tech! We specialize in creating stunning and efficient websites for businesses of all sizes.</p>
|
|
<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>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Services Section -->
|
|
<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>
|
|
</section>
|
|
|
|
<!-- Technologies & Stack Section -->
|
|
<section id="technologies" class="section-padding">
|
|
<div class="container">
|
|
<h2>Technologies & Tools</h2>
|
|
<div class="row g-4 row-cols-2 row-cols-md-3 row-cols-lg-4">
|
|
<!-- HTML5 -->
|
|
<div class="col">
|
|
<div class="tech-card">
|
|
<div class="tech-icon-wrapper">
|
|
<svg width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
|
<path d="M12 2L2 7l10 5 10-5-10-5zM2 17l10 5 10-5M2 12l10 5 10-5"/>
|
|
</svg>
|
|
</div>
|
|
<h3 class="tech-name">HTML5</h3>
|
|
<p class="tech-desc">Semantic Markup</p>
|
|
</div>
|
|
</div>
|
|
<!-- CSS3 -->
|
|
<div class="col">
|
|
<div class="tech-card">
|
|
<div class="tech-icon-wrapper">
|
|
<svg width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
|
<path d="M12 2L2 7l10 5 10-5-10-5zM2 17l10 5 10-5M2 12l10 5 10-5"/>
|
|
</svg>
|
|
</div>
|
|
<h3 class="tech-name">CSS3</h3>
|
|
<p class="tech-desc">Modern Styling</p>
|
|
</div>
|
|
</div>
|
|
<!-- JavaScript -->
|
|
<div class="col">
|
|
<div class="tech-card">
|
|
<div class="tech-icon-wrapper">
|
|
<svg width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
|
<path d="M16 18l6-6-6-6"/>
|
|
<path d="M8 6l-6 6 6 6"/>
|
|
</svg>
|
|
</div>
|
|
<h3 class="tech-name">JavaScript</h3>
|
|
<p class="tech-desc">Interactive Logic</p>
|
|
</div>
|
|
</div>
|
|
<!-- Bootstrap -->
|
|
<div class="col">
|
|
<div class="tech-card">
|
|
<div class="tech-icon-wrapper">
|
|
<svg width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
|
<path d="M12 2l9 4.9V17L12 22l-9-4.9V7z"/>
|
|
</svg>
|
|
</div>
|
|
<h3 class="tech-name">Bootstrap 5</h3>
|
|
<p class="tech-desc">Responsive UI</p>
|
|
</div>
|
|
</div>
|
|
<!-- Vite -->
|
|
<div class="col">
|
|
<div class="tech-card">
|
|
<div class="tech-icon-wrapper">
|
|
<svg width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
|
<path d="M13 2L3 14h9l-1 8 10-12h-9l1-8z"/>
|
|
</svg>
|
|
</div>
|
|
<h3 class="tech-name">Vite</h3>
|
|
<p class="tech-desc">Fast Build Tool</p>
|
|
</div>
|
|
</div>
|
|
<!-- Git -->
|
|
<div class="col">
|
|
<div class="tech-card">
|
|
<div class="tech-icon-wrapper">
|
|
<svg width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
|
<line x1="6" y1="3" x2="6" y2="15"></line>
|
|
<circle cx="18" cy="6" r="3"></circle>
|
|
<circle cx="6" cy="18" r="3"></circle>
|
|
<path d="M18 9a9 9 0 0 1-9 9"></path>
|
|
</svg>
|
|
</div>
|
|
<h3 class="tech-name">Git</h3>
|
|
<p class="tech-desc">Version Control</p>
|
|
</div>
|
|
</div>
|
|
<!-- SEO -->
|
|
<div class="col">
|
|
<div class="tech-card">
|
|
<div class="tech-icon-wrapper">
|
|
<svg width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
|
<circle cx="11" cy="11" r="8"></circle>
|
|
<line x1="21" y1="21" x2="16.65" y2="16.65"></line>
|
|
</svg>
|
|
</div>
|
|
<h3 class="tech-name">SEO</h3>
|
|
<p class="tech-desc">Search Visibility</p>
|
|
</div>
|
|
</div>
|
|
<!-- Accessibility -->
|
|
<div class="col">
|
|
<div class="tech-card">
|
|
<div class="tech-icon-wrapper">
|
|
<svg width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
|
<circle cx="12" cy="5" r="1"></circle>
|
|
<path d="M12 22V8M5 12H2a10 10 0 0 0 20 0h-3"/>
|
|
</svg>
|
|
</div>
|
|
<h3 class="tech-name">Accessibility</h3>
|
|
<p class="tech-desc">Inclusive Design</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Process Section -->
|
|
<section id="process" class="section-padding section-alt">
|
|
<div class="container">
|
|
<h2>Our Brewing Process</h2>
|
|
<div class="row g-4 row-cols-1 row-cols-md-2 row-cols-lg-3">
|
|
<!-- Phase 1 -->
|
|
<div class="col">
|
|
<div class="process-card">
|
|
<span class="process-number">01</span>
|
|
<div class="process-icon-wrapper">
|
|
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"></circle><line x1="12" y1="16" x2="12" y2="12"></line><line x1="12" y1="8" x2="12.01" y2="8"></line></svg>
|
|
</div>
|
|
<h3 class="process-title">Discovery (The Roast)</h3>
|
|
<p class="process-desc">We start by selecting the finest beans—gathering your requirements, understanding your goals, and defining the scope of the project.</p>
|
|
</div>
|
|
</div>
|
|
<!-- Phase 2 -->
|
|
<div class="col">
|
|
<div class="process-card">
|
|
<span class="process-number">02</span>
|
|
<div class="process-icon-wrapper">
|
|
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 19l7-7 3 3-7 7-3-3z"></path><path d="M18 13l-1.5-7.5L2 2l3.5 14.5L13 18l5-5z"></path><path d="M2 2l7.586 7.586"></path><circle cx="11" cy="11" r="2"></circle></svg>
|
|
</div>
|
|
<h3 class="process-title">Design (The Grind)</h3>
|
|
<p class="process-desc">We prepare the perfect grind consistency. This involves creating wireframes, designing the UI/UX, and prototyping the visual experience.</p>
|
|
</div>
|
|
</div>
|
|
<!-- Phase 3 -->
|
|
<div class="col">
|
|
<div class="process-card">
|
|
<span class="process-number">03</span>
|
|
<div class="process-icon-wrapper">
|
|
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="16 18 22 12 16 6"></polyline><polyline points="8 6 2 12 8 18"></polyline></svg>
|
|
</div>
|
|
<h3 class="process-title">Development (The Brew)</h3>
|
|
<p class="process-desc">The magic happens here. We write clean, efficient code to bring the designs to life, ensuring everything functions perfectly.</p>
|
|
</div>
|
|
</div>
|
|
<!-- Phase 4 -->
|
|
<div class="col">
|
|
<div class="process-card">
|
|
<span class="process-number">04</span>
|
|
<div class="process-icon-wrapper">
|
|
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"></path><polyline points="22 4 12 14.01 9 11.01"></polyline></svg>
|
|
</div>
|
|
<h3 class="process-title">Testing (The Taste Test)</h3>
|
|
<p class="process-desc">Quality assurance is key. We rigorously test for bugs, performance issues, and responsiveness across all devices and browsers.</p>
|
|
</div>
|
|
</div>
|
|
<!-- Phase 5 -->
|
|
<div class="col">
|
|
<div class="process-card">
|
|
<span class="process-number">05</span>
|
|
<div class="process-icon-wrapper">
|
|
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M13 2L3 14h9l-1 8 10-12h-9l1-8z"></path></svg>
|
|
</div>
|
|
<h3 class="process-title">Launch (The Pour)</h3>
|
|
<p class="process-desc">It's serving time. We handle the deployment, DNS settings, and final checks to ensure a smooth go-live experience.</p>
|
|
</div>
|
|
</div>
|
|
<!-- Phase 6 -->
|
|
<div class="col">
|
|
<div class="process-card">
|
|
<span class="process-number">06</span>
|
|
<div class="process-icon-wrapper">
|
|
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M14.7 6.3a1 1 0 0 0 0 1.4l1.6 1.6a1 1 0 0 0 1.4 0l3.77-3.77a6 6 0 0 1-7.94 7.94l-6.91 6.91a2.12 2.12 0 0 1-3-3l6.91-6.91a6 6 0 0 1 7.94-7.94l-3.76 3.76z"></path></svg>
|
|
</div>
|
|
<h3 class="process-title">Support (The Refill)</h3>
|
|
<p class="process-desc">We don't just leave you with the cup. We offer ongoing maintenance, updates, and support to keep your site fresh.</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Portfolio Section -->
|
|
<section id="portfolio" class="section-padding">
|
|
<div class="container">
|
|
<h2>Portfolio</h2>
|
|
<div class="row g-4">
|
|
|
|
<div class="col-md-6 col-lg-6 mb-2">
|
|
<div class="card h-100">
|
|
<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">
|
|
<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>
|
|
<div class="d-flex flex-wrap gap-2 mb-3">
|
|
<span class="badge-coffee" aria-label="Technology: Responsive Design">
|
|
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"><rect x="5" y="2" width="14" height="20" rx="2" ry="2"></rect><line x1="12" y1="18" x2="12.01" y2="18"></line></svg> Responsive
|
|
</span>
|
|
<span class="badge-coffee" aria-label="Technology: SEO Optimized">
|
|
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"><circle cx="11" cy="11" r="8"></circle><line x1="21" y1="21" x2="16.65" y2="16.65"></line></svg> SEO
|
|
</span>
|
|
<span class="badge-coffee" aria-label="Technology: Accessibility">
|
|
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="5" r="1"></circle><path d="M12 22V8M5 12H2a10 10 0 0 0 20 0h-3"></path></svg> A11y
|
|
</span>
|
|
<span class="badge-coffee" aria-label="Technology: Bootstrap Framework">
|
|
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"><path d="M12 2l9 4.9V17L12 22l-9-4.9V7z"></path></svg> Bootstrap
|
|
</span>
|
|
</div>
|
|
<div class="mt-auto">
|
|
<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 class="col-md-6 col-lg-6 mb-2">
|
|
<div class="card h-100">
|
|
<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-body">
|
|
<h5 class="card-title">Kayla Newkirk</h5>
|
|
<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 class="d-flex flex-wrap gap-2 mb-3">
|
|
<span class="badge-coffee" aria-label="Technology: Responsive Design">
|
|
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"><rect x="5" y="2" width="14" height="20" rx="2" ry="2"></rect><line x1="12" y1="18" x2="12.01" y2="18"></line></svg> Responsive
|
|
</span>
|
|
<span class="badge-coffee" aria-label="Technology: Academic Research">
|
|
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"><path d="M22 10v6M2 10l10-5 10 5-10 5z"></path><path d="M6 12v5c3 3 9 3 12 0v-5"></path></svg> Academic
|
|
</span>
|
|
<span class="badge-coffee" aria-label="Technology: SEO Optimized">
|
|
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"><circle cx="11" cy="11" r="8"></circle><line x1="21" y1="21" x2="16.65" y2="16.65"></line></svg> SEO
|
|
</span>
|
|
</div>
|
|
<div class="mt-auto">
|
|
<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>
|
|
</div>
|
|
<div class="col-md-6 col-lg-6 mb-2">
|
|
<div class="card h-100">
|
|
<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 class="card-body">
|
|
<h5 class="card-title">4th & Goal</h5>
|
|
<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 class="d-flex flex-wrap gap-2 mb-3">
|
|
<span class="badge-coffee" aria-label="Technology: High Performance">
|
|
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"><polygon points="13 2 3 14 12 14 11 22 21 10 12 10 13 2"></polygon></svg> Fast
|
|
</span>
|
|
<span class="badge-coffee" aria-label="Technology: Media Integration">
|
|
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"><polygon points="5 3 19 12 5 21 5 3"></polygon></svg> Media
|
|
</span>
|
|
<span class="badge-coffee" aria-label="Technology: Responsive Design">
|
|
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"><rect x="5" y="2" width="14" height="20" rx="2" ry="2"></rect><line x1="12" y1="18" x2="12.01" y2="18"></line></svg> Responsive
|
|
</span>
|
|
</div>
|
|
<div class="mt-auto">
|
|
<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>
|
|
</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">
|
|
<div class="card-body">
|
|
<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.</p>
|
|
<div class="d-flex flex-wrap gap-2 mb-3">
|
|
<span class="badge-coffee" aria-label="Technology: CMS Integration">
|
|
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"></path><polyline points="14 2 14 8 20 8"></polyline><line x1="16" y1="13" x2="8" y2="13"></line><line x1="16" y1="17" x2="8" y2="17"></line><polyline points="10 9 9 9 8 9"></polyline></svg> Content
|
|
</span>
|
|
<span class="badge-coffee" aria-label="Technology: SEO Optimized">
|
|
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"><circle cx="11" cy="11" r="8"></circle><line x1="21" y1="21" x2="16.65" y2="16.65"></line></svg> SEO
|
|
</span>
|
|
<span class="badge-coffee" aria-label="Technology: Responsive Design">
|
|
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"><rect x="5" y="2" width="14" height="20" rx="2" ry="2"></rect><line x1="12" y1="18" x2="12.01" y2="18"></line></svg> Responsive
|
|
</span>
|
|
</div>
|
|
<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 class="col-md-6 col-lg-6 mb-2">
|
|
<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">
|
|
<div class="card-body">
|
|
<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.</p>
|
|
<div class="d-flex flex-wrap gap-2 mb-3">
|
|
<span class="badge-coffee" aria-label="Technology: Platform Architecture">
|
|
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"><rect x="2" y="3" width="20" height="14" rx="2" ry="2"></rect><line x1="8" y1="21" x2="16" y2="21"></line><line x1="12" y1="17" x2="12" y2="21"></line></svg> Platform
|
|
</span>
|
|
<span class="badge-coffee" aria-label="Technology: Educational Resources">
|
|
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"><path d="M4 19.5A2.5 2.5 0 0 1 6.5 17H20"></path><path d="M6.5 2H20v20H6.5A2.5 2.5 0 0 1 4 19.5v-15A2.5 2.5 0 0 1 6.5 2z"></path></svg> EdTech
|
|
</span>
|
|
<span class="badge-coffee" aria-label="Technology: Responsive Design">
|
|
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"><rect x="5" y="2" width="14" height="20" rx="2" ry="2"></rect><line x1="12" y1="18" x2="12.01" y2="18"></line></svg> Responsive
|
|
</span>
|
|
</div>
|
|
<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>
|
|
</section>
|
|
|
|
<!-- Testimonials Section -->
|
|
<section id="testimonials" class="section-padding section-alt">
|
|
<div class="container">
|
|
<h2>Testimonials</h2>
|
|
<div class="row g-4">
|
|
<div class="col-md-6">
|
|
|
|
<div class="card testimonial-card h-100">
|
|
<div class="card-body d-flex flex-column h-100">
|
|
<div class="testimonial-quote-icon">“</div>
|
|
|
|
<div class="testimonial-header">
|
|
<div class="testimonial-avatar">MP</div>
|
|
<div class="testimonial-meta">
|
|
<h5>Margaret Pemu</h5>
|
|
<small>Pemu Counseling and Wellness</small>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="testimonial-rating" aria-label="5 out of 5 stars">
|
|
<svg width="18" height="18" viewBox="0 0 24 24" fill="currentColor" stroke="none"><polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"></polygon></svg>
|
|
<svg width="18" height="18" viewBox="0 0 24 24" fill="currentColor" stroke="none"><polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"></polygon></svg>
|
|
<svg width="18" height="18" viewBox="0 0 24 24" fill="currentColor" stroke="none"><polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"></polygon></svg>
|
|
<svg width="18" height="18" viewBox="0 0 24 24" fill="currentColor" stroke="none"><polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"></polygon></svg>
|
|
<svg width="18" height="18" viewBox="0 0 24 24" fill="currentColor" stroke="none"><polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"></polygon></svg>
|
|
</div>
|
|
|
|
<div class="testimonial-content mb-4 flex-grow-1">
|
|
<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>
|
|
</div>
|
|
<button class="testimonial-toggle align-self-start" aria-label="Read full testimonial">Read More</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-md-6">
|
|
<div class="card testimonial-card h-100">
|
|
<div class="card-body d-flex flex-column h-100">
|
|
<div class="testimonial-quote-icon">“</div>
|
|
|
|
<div class="testimonial-header">
|
|
<div class="testimonial-avatar">L</div>
|
|
<div class="testimonial-meta">
|
|
<h5>Laura</h5>
|
|
<small>Woman-Owned Small Business</small>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="testimonial-rating" aria-label="5 out of 5 stars">
|
|
<svg width="18" height="18" viewBox="0 0 24 24" fill="currentColor" stroke="none"><polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"></polygon></svg>
|
|
<svg width="18" height="18" viewBox="0 0 24 24" fill="currentColor" stroke="none"><polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"></polygon></svg>
|
|
<svg width="18" height="18" viewBox="0 0 24 24" fill="currentColor" stroke="none"><polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"></polygon></svg>
|
|
<svg width="18" height="18" viewBox="0 0 24 24" fill="currentColor" stroke="none"><polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"></polygon></svg>
|
|
<svg width="18" height="18" viewBox="0 0 24 24" fill="currentColor" stroke="none"><polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"></polygon></svg>
|
|
</div>
|
|
|
|
<div class="testimonial-content mb-4 flex-grow-1">
|
|
<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.
|
|
His patience and technical skills are truly impressive. Furthermore, he was responsive throughout the entire process, always open to feedback, and quick to implement changes. What I appreciated most was how he spent time working toward what I wanted and was supportive in my goals."</p>
|
|
</div>
|
|
<button class="testimonial-toggle align-self-start" aria-label="Read full testimonial">Read More</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
<div class="col-md-6">
|
|
<div class="card testimonial-card h-100">
|
|
<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-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.
|
|
|
|
His patience and technical skills are truly impressive. Furthermore, he was responsive throughout the entire process, always open to feedback, and quick to implement changes. What I appreciated most was how he spent time working toward what I wanted and was supportive in my goals."</p>
|
|
<p class="card-text testimonial-author"> -Laura, Woman-Owned Small Business</p>
|
|
<button class="testimonial-toggle" aria-label="Read full testimonial">Read More</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Contact Section -->
|
|
<section id="contact" class="section-padding">
|
|
<div class="container">
|
|
<h2>Contact Us</h2>
|
|
<div class="row justify-content-center">
|
|
<div class="col-md-8 text-center">
|
|
<div class="card bg-transparent border-0 shadow-none">
|
|
<div class="card-body">
|
|
<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>
|
|
</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><a href="tos.html" class="text-white">Terms of Service</a> | <a href="privacy.html" class="text-white">Privacy Policy</a></p>
|
|
</footer>
|
|
<script>
|
|
// Display the current year in the footer
|
|
document.getElementById('currentYear').textContent = new Date().getFullYear();
|
|
</script>
|
|
</div>
|
|
</body>
|
|
</html>
|