hobokenchicken/webdev-site
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Initial push
CI & Lighthouse / test (push) Has been cancelled
Details

Browse Source
This commit is contained in:
Dustin Newkirk
2025-08-22 18:12:32 -04:00
parent f40cf11ef8
commit 03c391afcf
5 changed files with 244 additions and 2156 deletions
Download Patch File Download Diff File Expand all files Collapse all files
README.md
+24 -167
View File
@@ -1,180 +1,37 @@
# d@n tech - Modern Web Portfolio (2026 Edition)
# Web Development Site
A modern, coffee-themed web development portfolio showcasing professional web development services. Built with vanilla JavaScript, CSS, and HTML using Vite for development, Bootstrap 5 foundation, and a responsive design system with light/dark mode support.
Welcome to the Web Development Site repository. This project is a simple website designed to showcase basic web development skills.
## 🌟 Features
## Features
- **Modern Coffee Theme**: Elegant color palette with CSS custom properties (--color-coffee, --color-cream, --color-gold, --color-teal)
- **Responsive Design**: Mobile-first approach with Bootstrap 5 grid system and container queries
- **Dark/Light Mode**: Automatic theme switching based on system preferences with manual toggle
- **Interactive Elements**:
- Particle background canvas animation
- Typewriter effect for hero section
- Service cards with icons and descriptions
- Testimonial carousel with expandable content
- Scroll progress indicator
- **Performance Optimized**:
- Vite-based build with code splitting and minification
- WebP image formats with responsive variants
- Bootstrap loaded from CDN with fallback
- **Cross-Browser Compatible**: Fully tested on Firefox, WebKit (Safari), and Chromium
- **Accessibility**: Semantic HTML5, ARIA attributes, proper heading hierarchy
- **Multi-Page Support**: Includes Terms of Service and Privacy Policy pages
- Responsive design
- Basic HTML, CSS, and JavaScript
- Simple and clean layout
## 🛠️ Tech Stack
## Installation
- **Frontend**: Vanilla JavaScript (ES6+), CSS3, HTML5
- **Build Tool**: Vite 7.3.1
- **CSS Framework**: Bootstrap 5.3.3
- **Fonts**: Inter (body), Playfair Display (headings)
- **Development**: npm scripts, Playwright for cross-browser testing
- **CI/CD**: GitHub Actions with Lighthouse audits
1. Clone the repository:
```bash
git clone https://github.com/yourusername/web_dev_site.git
```
2. Navigate to the project directory:
```bash
cd web_dev_site
```
3. Open `index.html` in your web browser to view the website.
## 📁 Project Structure
## Usage
```
webdev/
├── index.html # Main portfolio page
├── tos.html # Terms of Service
├── privacy.html # Privacy Policy
├── main.js # All JavaScript functionality
├── styles.css # Complete CSS with coffee theme
├── vite.config.js # Vite multi-page configuration
├── package.json # Dependencies and scripts
├── assets/ # Static assets (images, fonts)
├── public/ # Public files served as-is
├── dist/ # Production build (generated)
├── cross_browser_test.py # Playwright cross-browser tests
├── .github/workflows/ci.yml # CI/CD pipeline
└── AGENTS.md # Developer guide for AI agents
```
Feel free to explore the code, modify it, and use it as a reference for your own projects.
## 🚀 Getting Started
## Contributing
### Prerequisites
Contributions are welcome! Please fork the repository and create a pull request with your changes.
- Node.js 18+ and npm
- Modern web browser
## License
### Installation
This project is licensed under the MIT License.
1. **Clone the repository**
```bash
git clone https://git.dustin.coffee/hobokenchicken/webdev-site.git
cd webdev-site
```
## Contact
2. **Install dependencies**
```bash
npm install
```
3. **Start development server**
```bash
npm run dev
```
Open [http://localhost:5173](http://localhost:5173) in your browser.
## 📦 Development Commands
| Command | Description |
|---------|-------------|
| `npm run dev` | Start Vite development server (localhost:5173) |
| `npm run build` | Build for production (outputs to `/dist`) |
| `npm run preview` | Preview production build (localhost:4173) |
| `npm test` | *Placeholder for future test suite* |
## 🧪 Testing
### Cross-Browser Testing
Run comprehensive browser compatibility tests using Playwright:
```bash
# Install Playwright (Python)
pip install playwright
playwright install firefox webkit
# Build and preview the site
npm run build && npm run preview &
# Run cross-browser tests
python cross_browser_test.py
pkill -f "vite preview"
```
### Lighthouse Audit
Generate performance, accessibility, and SEO reports:
```bash
npm run build && npm run preview &
npx lighthouse http://localhost:4173 --output json --output html --output-path=./lighthouse-report
```
### CI/CD Pipeline
The project includes GitHub Actions workflow (`.github/workflows/ci.yml`) that runs on every push/PR:
1. `npm ci` - Clean install
2. `npm run build` - Production build verification
3. Lighthouse analysis via `lighthouse-checker/action`
## 🎨 Design System
The portfolio follows a consistent design language:
- **Color Palette**: Coffee-themed semantic variables (`--color-coffee-*`, `--color-cream`, `--color-gold`, `--color-teal`)
- **Typography**: `--font-sans` (Inter) for body, `--font-display` (Playfair Display) for headings
- **Spacing**: Consistent padding/margin scales using CSS custom properties
- **Shadows**: `--shadow-soft` and `--shadow-glass` variables
- **Transitions**: Cubic-bezier easing for natural motion
- **Reduced Motion**: Respects `prefers-reduced-motion` media query
## 📝 Code Style
### JavaScript
- ES6+ modules with `type="module"` in HTML
- `const` over `let`; avoid `var`
- Arrow functions for callbacks; named functions for top-level declarations
- CamelCase for variables/functions; PascalCase for classes
- Early returns and element existence checks before DOM manipulation
- Section headers: `// ===== SECTION NAME =====`
### CSS
- CSS Custom Properties defined in `:root` with semantic names
- CSS Nesting with `&` for nested selectors (modern browsers)
- Mobile-first media queries with `min-width`
- Support for `prefers-color-scheme: dark` with variable overrides
- Kebab-case for class names
- Modern features: container queries, view transitions, CSS grid, flexbox
### HTML
- Semantic HTML5 elements (`<header>`, `<main>`, `<section>`)
- ARIA attributes where needed; proper heading hierarchy
- Bootstrap classes alongside custom styles
- `data-*` attributes for JavaScript hooks (e.g., `data-text`, `data-score`)
- Lazy loading for images; defer non-critical scripts
## 🤝 Contributing
Contributions are welcome! Please follow these steps:
1. Fork the repository
2. Create a feature branch (`git checkout -b feature/amazing-feature`)
3. Commit your changes (`git commit -m 'Add amazing feature'`)
4. Push to the branch (`git push origin feature/amazing-feature`)
5. Open a Pull Request
Please ensure your code follows the existing style conventions and includes appropriate tests.
## 📄 License
This project is licensed under the MIT License - see the [LICENSE](LICENSE) file for details.
## 📬 Contact
- **Portfolio**: [dev.dustin.coffee](https://dev.dustin.coffee/)
- **Email**: [Contact via portfolio](https://dev.dustin.coffee/#contact)
- **GitHub**: [@hobokenchicken](https://github.com/hobokenchicken)
---
*Built with ☕ by Dustin Newkirk | Last updated: February 2026*
For any questions or feedback, please contact [your email address].
index.html
+134 -545
View File
@@ -1,548 +1,137 @@
<!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;500;600;800&family=Playfair+Display:ital,wght@0,400;0,700;0,900;1,400;1,700&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>
<!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/index.html">
<title>d@n tech - Web Development Services</title>
<!-- Bootstrap CSS and JS -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.min.js" integrity="sha384-0pUGZvbkm6XF6gxjEnlmuGrJXVbNuzT9qBBavbLwCsOGabYfZo0T0to5eqruptLy" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz" crossorigin="anonymous"></script>
<link rel="stylesheet" href="styles.css">
<style>
html {
scroll-behavior: smooth;
}
</style>
</head>
<body>
<header class="text-center py-1">
<h1 style="color: var(--bs-secondary);">d@n tech</h1>
<p>Your partner in web development</p>
<p><a href="https://dustin.coffee" target="_blank" class="text-white">Visit my main site</a></p>
</header>
<div class="d-flex flex-column min-vh-100" style="position: relative;">
<div class="container mt-4">
<h2>About Us</h2>
<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>
<h2>Services</h2>
<ul class="list-group">
<li class="list-group-item">Custom Website Development</li>
<li class="list-group-item">Responsive Design</li>
<li class="list-group-item">E-commerce Solutions</li>
<li class="list-group-item">SEO Optimization</li>
<li class="list-group-item">Website Maintenance</li>
</ul>
</div>
<div class="container mt-4">
<h2>Portfolio</h2>
<div class="row">
<div class="col-md-6 mb-2">
<div class="card">
<img src="assets/images/pcw.png" class="card-img-top" alt="Project 1">
<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>
<a href="https://pemucounselingandwellness.com" target="_blank" class="btn btn-primary">Learn More</a>
</div>
</div>
</div>
<div class="col-md-6 mb-2">
<div class="card">
<img src="assets/images/knphd.png" class="card-img-top" alt="Project 2">
<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>
<a href="https://kaylassafe.space" target="_blank" class="btn btn-primary">Learn More</a>
</div>
</div>
</div>
<div class="col-md-6 mb-2">
<div class="card">
<img src="assets/images/4th.png" class="card-img-top" alt="Project 3">
<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>
<a href="https://4th.hobokenchicken.com" target="_blank" class="btn btn-primary">Learn More</a>
</div>
</div>
</div>
<div class="col-md-6 mb-2">
<div class="card">
<img src="assets/images/pha.png" class="card-img-top" alt="Project 4">
<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. Discover how shamanic wisdom and energy work can unlock new pathways to healing and personal growth.</p>
<a href="https://powerfulhealingarts.com" target="_blank" class="btn btn-primary">Learn More</a>
</div>
</div>
</div>
</div>
</div>
<div class="container mt-4">
<h2>Testimonials</h2>
<div class="row">
<div class="col-md-6">
<div class="card">
<div class="card-body">
<p class="card-text">"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">- Margaret Pemu, Pemu Counseling and Wellness</p>
</div>
</div>
</div>
<div class="col-md-6">
<div class="card">
<div class="card-body">
<p class="card-text">"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.
<!-- Particle canvas removed -- grain texture + steam carry the atmosphere -->
<!-- Decorative Layer (Background Elements) -->
<div class="decorative-layer" aria-hidden="true">
<!-- Floating Bean 1 -->
<svg class="floating-bean bean-1" viewBox="0 0 24 24" fill="currentColor">
<path d="M12,2C6.48,2,2,6.48,2,12s4.48,10,10,10s10-4.48,10-10S17.52,2,12,2z M13,16c-1.1,0-2-0.9-2-2s-0.9-2-2-2 s-2-0.9-2-2s0.9-2,2-2s2,0.9,2,2s0.9,2,2,2s2,0.9,2,2S14.1,16,13,16z"/>
</svg>
<!-- Floating Bean 2 -->
<svg class="floating-bean bean-2" viewBox="0 0 24 24" fill="currentColor">
<path d="M19.07,4.93C17.22,3.03,14.76,2,12.05,2C6.5,2,2,6.5,2,12.05C2,17.6,6.5,22.1,12.05,22.1c2.71,0,5.17-1.03,7.02-2.93 c1.85-1.9,2.83-4.41,2.83-7.12C21.9,9.34,20.92,6.83,19.07,4.93z M14.23,15.76c-1.07,1.07-2.8,1.07-3.87,0 c-1.07-1.07-1.07-2.8,0-3.87c1.07-1.07,2.8-1.07,3.87,0C15.3,12.96,15.3,14.69,14.23,15.76z"/>
</svg>
<!-- Floating Bean 3 -->
<svg class="floating-bean bean-3" viewBox="0 0 24 24" fill="currentColor">
<path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-1 15c-1.66 0-3-1.34-3-3s1.34-3 3-3 3 1.34 3 3-1.34 3-3 3z"/>
</svg>
<!-- Floating Cup -->
<svg class="floating-cup cup-1" viewBox="0 0 24 24" fill="currentColor">
<path d="M4 2h1v1h-1zM6 2h1v1h-1zM8 2h1v1h-1zM10 2h1v1h-1z" opacity=".5"/> <!-- Steam dots -->
<path d="M18.5 4h-13c-1.1 0-2 .9-2 2v5.71c0 3.83 2.95 7.18 6.78 7.29 3.96.12 7.22-3.06 7.22-7v-1h.5c1.93 0 3.5-1.57 3.5-3.5S20.43 4 18.5 4zM16 11V6h-3v5h3zm-5 0V6H8v5h3zm8-3.5h-1.5V6H19c.83 0 1.5.67 1.5 1.5S19.83 9 19 9z"/>
</svg>
</div>
<header class="hero-section">
<div class="steam-container" aria-hidden="true">
<div class="steam-particle"></div>
<div class="steam-particle"></div>
<div class="steam-particle"></div>
</div>
<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">
<svg class="btn-icon" width="20" height="20" viewBox="0 0 24 24" fill="currentColor">
<path d="M20 4H4c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2zm0 4l-8 5-8-5V6l8 5 8-5v2z"/>
</svg>
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>
<!-- Coffee Drip Separator -->
<div class="drip-separator bottom" aria-hidden="true">
<svg viewBox="0 0 1440 100" preserveAspectRatio="none">
<path fill="currentColor" d="M0,0 C240,90 480,90 720,50 C960,10 1200,10 1440,50 L1440,0 L0,0 Z"></path>
</svg>
</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 Me</h2>
<div class="row">
<div class="col-lg-8">
<p class="lead mb-4 drop-cap">Welcome to d@n tech! I specialize in creating stunning and efficient websites for businesses of all sizes.</p>
<p>As an experienced developer, I'm dedicated to delivering high-quality web solutions that meet your unique needs. I 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 g-4 row-cols-1 row-cols-md-2">
<div class="col">
<div class="card h-100">
<div class="card-body">
<div class="mb-3 text-primary">
<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>
<h5 class="card-title">Custom Website Development</h5>
<p class="card-text">Tailored websites built from scratch to match your brand, goals, and user needs.</p>
</div>
</div>
</div>
<div class="col">
<div class="card h-100">
<div class="card-body">
<div class="mb-3 text-primary">
<svg width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" 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>
</div>
<h5 class="card-title">Responsive Design</h5>
<p class="card-text">Sites that look and function beautifully on every device, from phones to desktops.</p>
</div>
</div>
</div>
<div class="col">
<div class="card h-100">
<div class="card-body">
<div class="mb-3 text-primary">
<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="9" cy="21" r="1"></circle><circle cx="20" cy="21" r="1"></circle><path d="M1 1h4l2.68 13.39a2 2 0 0 0 2 1.61h9.72a2 2 0 0 0 2-1.61L23 6H6"></path>
</svg>
</div>
<h5 class="card-title">E-commerce Solutions</h5>
<p class="card-text">Online stores designed to convert visitors into customers with secure checkout.</p>
</div>
</div>
</div>
<div class="col">
<div class="card h-100">
<div class="card-body">
<div class="mb-3 text-primary">
<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>
<h5 class="card-title">SEO Optimization</h5>
<p class="card-text">Improved visibility on search engines to help clients find you organically.</p>
</div>
</div>
</div>
<div class="col">
<div class="card h-100">
<div class="card-body">
<div class="mb-3 text-primary">
<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="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>
<h5 class="card-title">Website Maintenance</h5>
<p class="card-text">Ongoing updates, security patches, and support to keep your site running smoothly.</p>
</div>
</div>
</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">
<h3 class="tech-name">HTML5</h3>
<p class="tech-desc">Semantic Markup</p>
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"> -Laura, Woman-Owned Small Business</p>
</div>
</div>
</div>
<!-- CSS3 -->
<div class="col">
<div class="tech-card">
<h3 class="tech-name">CSS3</h3>
<p class="tech-desc">Modern Styling</p>
</div>
</div>
<!-- JavaScript -->
<div class="col">
<div class="tech-card">
<h3 class="tech-name">JavaScript</h3>
<p class="tech-desc">Interactive Logic</p>
</div>
</div>
<!-- Bootstrap -->
<div class="col">
<div class="tech-card">
<h3 class="tech-name">Bootstrap 5</h3>
<p class="tech-desc">Responsive UI</p>
</div>
</div>
<!-- Vite -->
<div class="col">
<div class="tech-card">
<h3 class="tech-name">Vite</h3>
<p class="tech-desc">Fast Build Tool</p>
</div>
</div>
<!-- Git -->
<div class="col">
<div class="tech-card">
<h3 class="tech-name">Git</h3>
<p class="tech-desc">Version Control</p>
</div>
</div>
<!-- SEO -->
<div class="col">
<div class="tech-card">
<h3 class="tech-name">SEO</h3>
<p class="tech-desc">Search Visibility</p>
</div>
</div>
<!-- Accessibility -->
<div class="col">
<div class="tech-card">
<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>The 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">I 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">I 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. I 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. I 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">I don't just leave you with the cup. I 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/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/pwlmyers-400.webp 400w, assets/images/optimized/pwlmyers-800.webp 800w, assets/images/optimized/pwlmyers.webp 1200w" sizes="(max-width: 768px) 100vw, 50vw" src="assets/images/optimized/pwlmyers.webp" class="card-img-top" alt="P.W.L. Myers" loading="lazy">
<div class="card-body">
<h5 class="card-title">P.W.L. Myers</h5>
<p class="card-text">P.W.L. Myers provides leadership counseling and professional development services, empowering individuals to achieve their full potential through personalized guidance and strategic career support.</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>
</div>
<div class="mt-auto">
<a href="https://pwlmyers.org" target="_blank" class="btn btn-outline-coffee btn-sm" aria-label="View P.W.L. Myers project">View project<span class="visually-hidden"> about P.W.L. Myers</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>
</section>
<!-- Contact Section -->
<section id="contact" class="section-padding">
<div class="coffee-stain stain-2" aria-hidden="true"></div>
<div class="container">
<h2>Contact Me</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">
<svg class="btn-icon" width="20" height="20" viewBox="0 0 24 24" fill="currentColor">
<path d="M20 4H4c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2zm0 4l-8 5-8-5V6l8 5 8-5v2z"/>
</svg>
Send an Email
</a>
<p class="card-text 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" >
<div class="coffee-grounds-pattern" aria-hidden="true"></div>
<p>&copy; <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>
</div>
</div>
<div class="container mt-4">
<h2>Contact Us</h2>
<div class="card">
<div class="card-body">
<p class="card-text">For inquiries, please email us at <a href="mailto:info@dustin.coffee">info@dustin.coffee</a></p>
<p class="card-text">View your invoices at <a href="https://invoice.dustin.coffee/client" target="_blank">invoice.dustin.coffee</a></p>
</div>
</div>
</div>
</div>
<footer class="bg-dark text-white text-center py-1 mt-5" style="position: static;">
<p>&copy; <span id="currentYear"></span> d@n tech. All rights reserved.</p>
<p><a href="tos.php" 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>
privacy.html
+8 -52
View File
@@ -3,41 +3,13 @@
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="Privacy Policy for d@n tech web development services. Learn how we collect, use, and protect your personal information.">
<meta name="keywords" content="privacy policy, data protection, personal information, web development, GDPR">
<meta name="author" content="Dustin Newkirk">
<link rel="canonical" href="https://dev.dustin.coffee/privacy.html">
<link rel="icon" href="favicon.svg" type="image/svg+xml">
<link rel="icon" href="favicon.ico" sizes="any">
<title>Privacy Policy - d@n tech</title>
<meta property="og:title" content="Privacy Policy - d@n tech">
<meta property="og:description" content="Privacy Policy for d@n tech web development services. Learn how we collect, use, and protect your personal information.">
<meta property="og:image" content="https://dev.dustin.coffee/assets/images/optimized/pcw.webp">
<meta property="og:url" content="https://dev.dustin.coffee/privacy.html">
<meta property="og:type" content="website">
<meta name="twitter:card" content="summary">
<meta name="twitter:title" content="Privacy Policy - d@n tech">
<meta name="twitter:description" content="Privacy Policy for d@n tech web development services. Learn how we collect, use, and protect your personal information.">
<meta name="twitter:image" content="https://dev.dustin.coffee/assets/images/optimized/pcw.webp">
<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">
<title>Privacy Policy</title>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" href="styles.css">
<style>
html {
scroll-behavior: smooth;
}
</style>
</head>
<body>
<header class="text-center py-1">
<h1><a href="index.html" class="text-decoration-none">d@n tech</a></h1>
<p class="lead">Privacy Policy</p>
</header>
<div class="container mt-5">
<h1 class="text-center">Privacy Policy</h1>
<p class="mt-4">
Your privacy is important to us. It is our policy to respect your privacy regarding any information we may collect from you across our website, D@N Tech, and other sites we own and operate.
</p>
@@ -53,18 +25,11 @@
<p>
We do not share your personal information with anyone except to comply with the law, develop our products, or protect our rights.
</p>
<h2>4. SMS / Mobile Information</h2>
<p>
No mobile information will be shared with third parties or affiliates for any marketing or promotional purposes.
</p>
<p>
We do not sell, rent, or share SMS opt-in data or consent with third parties. Your mobile information is used solely to deliver the services you requested and to communicate with you directly.
</p>
<h2>5. Security</h2>
<h2>4. Security</h2>
<p>
We take the security of your personal information seriously and take reasonable measures to protect it.
</p>
<h2>6. Changes to this policy</h2>
<h2>5. Changes to this policy</h2>
<p>
We may update our Privacy Policy from time to time. We will notify you of any changes by posting the new Privacy Policy on this page.
</p>
@@ -72,17 +37,8 @@
If you have any questions about this Privacy Policy, please contact us.
</p>
</div>
<footer class="bg-dark text-white text-center py-4 mt-5">
<div class="container">
<p>&copy; <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>
</div>
</footer>
<script>
// Display the current year in the footer
document.getElementById('currentYear').textContent = new Date().getFullYear();
</script>
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.5.4/dist/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
</body>
</html>
styles.css
+26 -1392
View File
File diff suppressed because it is too large Load Diff
tos.php
+52
View File
@@ -0,0 +1,52 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Terms of Service</title>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="container mt-5">
<h1 class="text-center">Terms of Service</h1>
<p class="mt-4">Welcome to our website. If you continue to browse and use this website, you are agreeing to comply with and be bound by the following terms and conditions of use, which together with our privacy policy govern D@N Tech's relationship with you in relation to this website. If you disagree with any part of these terms and conditions, please do not use our website.</p>
<h2>1. Terms</h2>
<p>By accessing this website, you are agreeing to be bound by these website Terms and Conditions of Use, all applicable laws and regulations, and agree that you are responsible for compliance with any applicable local laws. If you do not agree with any of these terms, you are prohibited from using or accessing this site.</p>
<h2>2. Use License</h2>
<p>Permission is granted to temporarily download one copy of the materials (information or software) on D@N Tech's website for personal, non-commercial transitory viewing only. This is the grant of a license, not a transfer of title, and under this license you may not:</p>
<ul>
<li>modify or copy the materials;</li>
<li>use the materials for any commercial purpose, or for any public display (commercial or non-commercial);</li>
<li>attempt to decompile or reverse engineer any software contained on D@N Tech's website;</li>
<li>remove any copyright or other proprietary notations from the materials; or</li>
<li>transfer the materials to another person or "mirror" the materials on any other server.</li>
</ul>
<h2>3. Disclaimer</h2>
<p>The materials on D@N Tech's website are provided "as is". D@N Tech makes no warranties, expressed or implied, and hereby disclaims and negates all other warranties, including without limitation, implied warranties or conditions of merchantability, fitness for a particular purpose, or non-infringement of intellectual property or other violation of rights.</p>
<h2>4. Limitations</h2>
<p>In no event shall D@N Tech or its suppliers be liable for any damages (including, without limitation, damages for loss of data or profit, or due to business interruption) arising out of the use or inability to use the materials on D@N Tech's website, even if D@N Tech or a D@N Tech authorized representative has been notified orally or in writing of the possibility of such damage.</p>
<h2>5. Revisions and Errata</h2>
<p>The materials appearing on D@N Tech's website could include technical, typographical, or photographic errors. D@N Tech does not warrant that any of the materials on its website are accurate, complete, or current. D@N Tech may make changes to the materials contained on its website at any time without notice. D@N Tech does not, however, make any commitment to update the materials.</p>
<h2>6. Links</h2>
<p>D@N Tech has not reviewed all of the sites linked to its website and is not responsible for the contents of any such linked site. The inclusion of any link does not imply endorsement by D@N Tech of the site. Use of any such linked website is at the user's own risk.</p>
<h2>7. Site Terms of Use Modifications</h2>
<p>D@N Tech may revise these terms of use for its website at any time without notice. By using this website you are agreeing to be bound by the then current version of these Terms and Conditions of Use.</p>
<h2>8. Governing Law</h2>
<p>Any claim relating to D@N Tech's website shall be governed by the laws of the State without regard to its conflict of law provisions.</p>
<p class="mt-5">These terms and conditions were last updated on <?php echo date('F j, Y'); ?>.</p>
</div>
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.5.4/dist/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
</body>
</html>