Compare commits
24 Commits
ec591a9f95
...
main
| Author | SHA1 | Date | |
|---|---|---|---|
| 7323a6f7a8 | |||
| 776188bb5b | |||
| 099cbe2e0c | |||
| 50570947ee | |||
| 72fe58971a | |||
| 0f79940339 | |||
| d01bd46f5c | |||
| 7a76d61bd3 | |||
| 8883b5487b | |||
| 87505afd68 | |||
| a92170d3cc | |||
| e328725331 | |||
| 60a4437bc4 | |||
| 693e044589 | |||
| 6e918bdfd3 | |||
| fb205569e3 | |||
| ae6dd34c07 | |||
| 9216f7f976 | |||
| c3b8d1a9b2 | |||
| eedee5a099 | |||
| 9a98eb3d94 | |||
| 18d7a9ebb1 | |||
| 04310972da | |||
| 31eb93e01b |
35
.github/workflows/ci.yml
vendored
35
.github/workflows/ci.yml
vendored
@@ -1 +1,34 @@
|
|||||||
name: CI & Lighthouse\non:\n push:\n pull_request:\n\njobs:\n test:\n runs-on: ubuntu-latest\n steps:\n - uses: actions/checkout@v4\n - name: Setup Node\n uses: actions/setup-node@v4\n with:\n node-version: '20'\n - name: Install deps\n run: npm ci\n - name: Build\n run: npm run build\n - name: Lighthouse\n uses: lighthouse-checker/action@v1\n with:\n urls: |\n http://localhost:8080/index.html\n prComment: true
|
name: CI & Lighthouse
|
||||||
|
|
||||||
|
on:
|
||||||
|
push:
|
||||||
|
branches: [ main ]
|
||||||
|
pull_request:
|
||||||
|
branches: [ main ]
|
||||||
|
|
||||||
|
jobs:
|
||||||
|
test:
|
||||||
|
runs-on: ubuntu-latest
|
||||||
|
steps:
|
||||||
|
- uses: actions/checkout@v4
|
||||||
|
|
||||||
|
- name: Setup Node.js
|
||||||
|
uses: actions/setup-node@v4
|
||||||
|
with:
|
||||||
|
node-version: '20'
|
||||||
|
cache: 'npm'
|
||||||
|
|
||||||
|
- name: Install dependencies
|
||||||
|
run: npm ci
|
||||||
|
|
||||||
|
- name: Build project
|
||||||
|
run: npm run build
|
||||||
|
|
||||||
|
- name: Run Lighthouse audit
|
||||||
|
uses: lighthouse-checker/action@v1
|
||||||
|
with:
|
||||||
|
urls: |
|
||||||
|
http://localhost:8080/
|
||||||
|
prComment: true
|
||||||
|
serverCommand: 'npm run preview -- --port 8080'
|
||||||
|
waitForServer: true
|
||||||
15
.gitignore
vendored
Normal file
15
.gitignore
vendored
Normal file
@@ -0,0 +1,15 @@
|
|||||||
|
node_modules
|
||||||
|
dist
|
||||||
|
lighthouse-report.json
|
||||||
|
.DS_Store
|
||||||
|
.env
|
||||||
|
screenshot*.png
|
||||||
|
*.md
|
||||||
|
*.py
|
||||||
|
screenshot*
|
||||||
|
*_REPORT*
|
||||||
|
*_SUMMARY*
|
||||||
|
CROSS_BROWSER_TEST_REPORT.md
|
||||||
|
TESTING_SUMMARY.txt
|
||||||
|
VISUAL_INSPECTION_REPORT.md
|
||||||
|
cross_browser_test.py
|
||||||
146
AGENTS.md
Normal file
146
AGENTS.md
Normal file
@@ -0,0 +1,146 @@
|
|||||||
|
# AGENTS.md - Developer Guide for WebDev Portfolio
|
||||||
|
|
||||||
|
Essential information for AI agents working on the webdev portfolio project. Covers build commands, code style, testing, and project structure.
|
||||||
|
|
||||||
|
## Project Overview
|
||||||
|
|
||||||
|
Modern web portfolio built with vanilla JavaScript, CSS, and HTML. Uses Vite for development, Bootstrap 5 foundation, and a coffee-themed design system with light/dark mode support.
|
||||||
|
|
||||||
|
## Build & Development Commands
|
||||||
|
|
||||||
|
### Package Scripts
|
||||||
|
```bash
|
||||||
|
npm run dev # Start Vite dev server (http://localhost:5173)
|
||||||
|
npm run build # Build for production (outputs to /dist)
|
||||||
|
npm run preview # Preview production build (http://localhost:4173)
|
||||||
|
```
|
||||||
|
|
||||||
|
### Testing Commands
|
||||||
|
```bash
|
||||||
|
# Cross-browser tests (requires Python & Playwright)
|
||||||
|
pip install playwright
|
||||||
|
playwright install firefox webkit
|
||||||
|
npm run build && npm run preview &
|
||||||
|
python cross_browser_test.py
|
||||||
|
pkill -f "vite preview"
|
||||||
|
|
||||||
|
# Lighthouse audit
|
||||||
|
npx lighthouse http://localhost:4173 --output json --output html --output-path=./lighthouse-report
|
||||||
|
```
|
||||||
|
|
||||||
|
### CI/CD Pipeline (`.github/workflows/ci.yml`)
|
||||||
|
Runs on push/PR:
|
||||||
|
1. `npm ci` - Clean install
|
||||||
|
2. `npm run build` - Production build
|
||||||
|
3. Lighthouse analysis via `lighthouse-checker/action`
|
||||||
|
|
||||||
|
## Code Style Guidelines
|
||||||
|
|
||||||
|
### JavaScript
|
||||||
|
- **ES6+ modules**: Use `type="module"` in HTML
|
||||||
|
- **Variables**: Prefer `const` over `let`; avoid `var`
|
||||||
|
- **Functions**: Arrow functions for callbacks; named functions for top-level declarations
|
||||||
|
- **Naming**: camelCase for variables/functions; PascalCase for classes
|
||||||
|
- **Error handling**: Check element existence before manipulation; use early returns
|
||||||
|
- **Comments**: Use section headers: `// ===== SECTION NAME =====`
|
||||||
|
- **DOM manipulation**: Use modern APIs (`querySelector`, `classList`, `dataset`)
|
||||||
|
- **Animation**: Respect `prefers-reduced-motion`; use `requestAnimationFrame`
|
||||||
|
|
||||||
|
### CSS
|
||||||
|
- **CSS Custom Properties**: Define design tokens in `:root`; semantic variable names
|
||||||
|
- **CSS Nesting**: Use `&` for nested selectors (modern browsers)
|
||||||
|
- **Responsive Design**: Mobile-first media queries with `min-width`
|
||||||
|
- **Color Scheme**: Support `prefers-color-scheme: dark` with variable overrides
|
||||||
|
- **Naming**: kebab-case for class names
|
||||||
|
- **Modern Features**: Container queries, view transitions, CSS grid, flexbox
|
||||||
|
- **Performance**: Avoid overly specific selectors; use CSS containment
|
||||||
|
|
||||||
|
### HTML
|
||||||
|
- **Semantic HTML5**: Use appropriate sectioning elements (`<header>`, `<main>`, `<section>`)
|
||||||
|
- **Accessibility**: Include ARIA attributes where needed; proper heading hierarchy
|
||||||
|
- **Bootstrap Integration**: Use Bootstrap classes alongside custom styles
|
||||||
|
- **Data Attributes**: Use `data-*` for JavaScript hooks (e.g., `data-text`, `data-score`)
|
||||||
|
- **Performance**: Lazy loading for images; defer non-critical scripts
|
||||||
|
|
||||||
|
### Formatting
|
||||||
|
- **Indentation**: 2 spaces (no tabs)
|
||||||
|
- **Line length**: Keep under 100 characters
|
||||||
|
- **File endings**: LF (Unix)
|
||||||
|
- **Trailing whitespace**: Remove
|
||||||
|
- **Blank lines**: Separate logical sections
|
||||||
|
|
||||||
|
## Project Structure
|
||||||
|
|
||||||
|
```
|
||||||
|
webdev/
|
||||||
|
├── index.html # Main page
|
||||||
|
├── tos.html # Terms of Service
|
||||||
|
├── privacy.html # Privacy Policy
|
||||||
|
├── main.js # All JavaScript functionality
|
||||||
|
├── styles.css # All CSS styles
|
||||||
|
├── vite.config.js # Vite 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
|
||||||
|
```
|
||||||
|
|
||||||
|
## Key Files
|
||||||
|
- `main.js`: All interactive features (typewriter, particles, skill bars, testimonials, parallax, metrics)
|
||||||
|
- `styles.css`: Complete styling with coffee theme, dark mode, animations
|
||||||
|
- `vite.config.js`: Configures multi-page build (index.html, tos.html, privacy.html)
|
||||||
|
- `cross_browser_test.py`: Validates cross-browser compatibility
|
||||||
|
|
||||||
|
## Design System Principles
|
||||||
|
- **Coffee theme**: Use defined color palette (`--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
|
||||||
|
- **Shadows**: `--shadow-soft` and `--shadow-glass` variables
|
||||||
|
- **Transitions**: Cubic-bezier easing for natural motion
|
||||||
|
- **Reduced motion**: Respect `prefers-reduced-motion` media query
|
||||||
|
|
||||||
|
## Development Workflow
|
||||||
|
|
||||||
|
### Adding New Features
|
||||||
|
1. Update HTML with semantic markup
|
||||||
|
2. Add CSS styles using existing design tokens
|
||||||
|
3. Implement JavaScript in `main.js` with appropriate section
|
||||||
|
4. Test across browsers using `cross_browser_test.py`
|
||||||
|
5. Run Lighthouse audit for performance/accessibility
|
||||||
|
|
||||||
|
### Modifying Existing Code
|
||||||
|
- Follow existing patterns and naming conventions
|
||||||
|
- Update all related files (HTML/CSS/JS) consistently
|
||||||
|
- Test changes in multiple browsers
|
||||||
|
- Ensure dark mode compatibility
|
||||||
|
|
||||||
|
## Troubleshooting
|
||||||
|
|
||||||
|
### Common Issues
|
||||||
|
- **CSS variables not working**: Ensure defined in `:root` and referenced correctly
|
||||||
|
- **JavaScript errors**: Check element existence before manipulation
|
||||||
|
- **Build failures**: Clear `node_modules` and reinstall dependencies
|
||||||
|
- **Cross-browser issues**: Run `cross_browser_test.py`
|
||||||
|
|
||||||
|
### Performance Optimization
|
||||||
|
- Use Vite's built-in optimizations (code splitting, minification)
|
||||||
|
- Optimize images in `assets/` directory
|
||||||
|
- Minimize layout thrashing in JavaScript animations
|
||||||
|
- Use CSS containment for complex components
|
||||||
|
|
||||||
|
## Documentation Files
|
||||||
|
|
||||||
|
- **README.md**: Primary project documentation with overview, features, installation, and usage instructions
|
||||||
|
- **AGENTS.md**: Developer guide for AI agents (this file) - covers build commands, code style, project structure
|
||||||
|
- **CROSS_BROWSER_TEST_REPORT.md**: Detailed report from cross-browser compatibility testing
|
||||||
|
- **VISUAL_INSPECTION_REPORT.md**: Visual quality assessment across desktop and mobile viewports
|
||||||
|
- **TESTING_SUMMARY.txt**: Quick summary of cross-browser test results
|
||||||
|
- **.github/workflows/ci.yml**: CI/CD pipeline configuration for automated testing and Lighthouse audits
|
||||||
|
|
||||||
|
All documentation should be kept up-to-date with the codebase. Test reports are generated artifacts that may be regenerated as needed.
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
*This document is maintained for AI agents and developers contributing to the webdev portfolio project.*
|
||||||
67
CONTRIBUTING.md
Normal file
67
CONTRIBUTING.md
Normal file
@@ -0,0 +1,67 @@
|
|||||||
|
# Contributing to d@n tech Portfolio
|
||||||
|
|
||||||
|
Thank you for your interest in contributing to this web development portfolio project! This document provides guidelines for contributing.
|
||||||
|
|
||||||
|
## How to Contribute
|
||||||
|
|
||||||
|
1. **Fork the Repository** - Click the "Fork" button on GitHub to create your own copy.
|
||||||
|
2. **Clone Your Fork** - `git clone https://github.com/YOUR-USERNAME/webdev-site.git`
|
||||||
|
3. **Create a Feature Branch** - `git checkout -b feature/your-feature-name`
|
||||||
|
4. **Make Your Changes** - Follow the code style guidelines below.
|
||||||
|
5. **Test Your Changes** - Ensure the site builds and works across browsers.
|
||||||
|
6. **Commit Your Changes** - `git commit -m "Add your descriptive message"`
|
||||||
|
7. **Push to Your Fork** - `git push origin feature/your-feature-name`
|
||||||
|
8. **Open a Pull Request** - Navigate to the original repository and open a PR.
|
||||||
|
|
||||||
|
## Code Style Guidelines
|
||||||
|
|
||||||
|
Please adhere to the existing code style to maintain consistency:
|
||||||
|
|
||||||
|
### JavaScript
|
||||||
|
- Use ES6+ modules with `type="module"` in HTML
|
||||||
|
- Prefer `const` over `let`; avoid `var`
|
||||||
|
- Arrow functions for callbacks; named functions for top-level declarations
|
||||||
|
- CamelCase for variables/functions; PascalCase for classes
|
||||||
|
- Check element existence before DOM manipulation
|
||||||
|
- Use section headers: `// ===== SECTION NAME =====`
|
||||||
|
|
||||||
|
### CSS
|
||||||
|
- Use 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 `prefers-color-scheme: dark` with variable overrides
|
||||||
|
- Kebab-case for class names
|
||||||
|
|
||||||
|
### HTML
|
||||||
|
- Semantic HTML5 elements (`<header>`, `<main>`, `<section>`)
|
||||||
|
- Include ARIA attributes where needed; proper heading hierarchy
|
||||||
|
- Use Bootstrap classes alongside custom styles
|
||||||
|
- `data-*` attributes for JavaScript hooks
|
||||||
|
- Lazy loading for images; defer non-critical scripts
|
||||||
|
|
||||||
|
## Testing
|
||||||
|
|
||||||
|
Before submitting a pull request, please verify:
|
||||||
|
|
||||||
|
1. **Build Success** - Run `npm run build` to ensure no errors
|
||||||
|
2. **Cross-Browser Compatibility** - Test in at least Firefox and Chrome
|
||||||
|
3. **Responsive Design** - Check mobile (375px) and desktop (1200px) views
|
||||||
|
4. **No Console Errors** - Open browser developer tools and ensure no errors
|
||||||
|
5. **Lighthouse Audit** - Run `npx lighthouse http://localhost:4173` for performance, accessibility, SEO, and best practices
|
||||||
|
|
||||||
|
## Reporting Issues
|
||||||
|
|
||||||
|
When reporting issues, please include:
|
||||||
|
|
||||||
|
- Steps to reproduce the issue
|
||||||
|
- Expected vs. actual behavior
|
||||||
|
- Browser and operating system information
|
||||||
|
- Screenshots if applicable
|
||||||
|
|
||||||
|
## Questions?
|
||||||
|
|
||||||
|
If you have questions, please open an issue or contact the maintainer via the portfolio site: [dev.dustin.coffee](https://dev.dustin.coffee/)
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
*Thank you for contributing!*
|
||||||
21
LICENSE
Normal file
21
LICENSE
Normal file
@@ -0,0 +1,21 @@
|
|||||||
|
MIT License
|
||||||
|
|
||||||
|
Copyright (c) 2026 Dustin Newkirk
|
||||||
|
|
||||||
|
Permission is hereby granted, free of charge, to any person obtaining a copy
|
||||||
|
of this software and associated documentation files (the "Software"), to deal
|
||||||
|
in the Software without restriction, including without limitation the rights
|
||||||
|
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
|
||||||
|
copies of the Software, and to permit persons to whom the Software is
|
||||||
|
furnished to do so, subject to the following conditions:
|
||||||
|
|
||||||
|
The above copyright notice and this permission notice shall be included in all
|
||||||
|
copies or substantial portions of the Software.
|
||||||
|
|
||||||
|
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
||||||
|
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
|
||||||
|
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
|
||||||
|
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
|
||||||
|
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
|
||||||
|
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
|
||||||
|
SOFTWARE.
|
||||||
217
README.md
217
README.md
@@ -1,37 +1,180 @@
|
|||||||
# d@n tech - Modern Web Portfolio (2026 Edition)
|
# d@n tech - Modern Web Portfolio (2026 Edition)
|
||||||
|
|
||||||
Welcome to the Web Development Site repository. This project is a simple website designed to showcase basic web development skills.
|
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.
|
||||||
|
|
||||||
## Features
|
## 🌟 Features
|
||||||
|
|
||||||
- Responsive design
|
- **Modern Coffee Theme**: Elegant color palette with CSS custom properties (--color-coffee, --color-cream, --color-gold, --color-teal)
|
||||||
- Basic HTML, CSS, and JavaScript
|
- **Responsive Design**: Mobile-first approach with Bootstrap 5 grid system and container queries
|
||||||
- Simple and clean layout
|
- **Dark/Light Mode**: Automatic theme switching based on system preferences with manual toggle
|
||||||
|
- **Interactive Elements**:
|
||||||
## Installation
|
- Particle background canvas animation
|
||||||
|
- Typewriter effect for hero section
|
||||||
1. Clone the repository:
|
- Animated skill bars that trigger on scroll
|
||||||
```bash
|
- Testimonial carousel with expandable content
|
||||||
git clone https://git.dustin.coffee/hobokenchicken/webdev-site.git
|
- Scroll progress indicator
|
||||||
```
|
- **Performance Optimized**:
|
||||||
2. Navigate to the project directory:
|
- Vite-based build with code splitting and minification
|
||||||
```bash
|
- WebP image formats with responsive variants
|
||||||
cd web_dev_site
|
- Bootstrap loaded from CDN with fallback
|
||||||
```
|
- **Cross-Browser Compatible**: Fully tested on Firefox, WebKit (Safari), and Chromium
|
||||||
3. Open `index.html` in your web browser to view the website.
|
- **Accessibility**: Semantic HTML5, ARIA attributes, proper heading hierarchy
|
||||||
|
- **Multi-Page Support**: Includes Terms of Service and Privacy Policy pages
|
||||||
## Usage
|
|
||||||
|
## 🛠️ Tech Stack
|
||||||
Feel free to explore the code, modify it, and use it as a reference for your own projects.
|
|
||||||
|
- **Frontend**: Vanilla JavaScript (ES6+), CSS3, HTML5
|
||||||
## Contributing
|
- **Build Tool**: Vite 7.3.1
|
||||||
|
- **CSS Framework**: Bootstrap 5.3.3
|
||||||
Contributions are welcome! Please fork the repository and create a pull request with your changes.
|
- **Fonts**: Inter (body), Playfair Display (headings)
|
||||||
|
- **Development**: npm scripts, Playwright for cross-browser testing
|
||||||
## License
|
- **CI/CD**: GitHub Actions with Lighthouse audits
|
||||||
|
|
||||||
This project is licensed under the MIT License.
|
## 📁 Project Structure
|
||||||
|
|
||||||
## Contact
|
```
|
||||||
|
webdev/
|
||||||
For any questions or feedback, please contact [your email address].
|
├── 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
|
||||||
|
```
|
||||||
|
|
||||||
|
## 🚀 Getting Started
|
||||||
|
|
||||||
|
### Prerequisites
|
||||||
|
|
||||||
|
- Node.js 18+ and npm
|
||||||
|
- Modern web browser
|
||||||
|
|
||||||
|
### Installation
|
||||||
|
|
||||||
|
1. **Clone the repository**
|
||||||
|
```bash
|
||||||
|
git clone https://git.dustin.coffee/hobokenchicken/webdev-site.git
|
||||||
|
cd webdev-site
|
||||||
|
```
|
||||||
|
|
||||||
|
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*
|
||||||
|
|||||||
1
dist/assets/index-BDKv4rRo.css
vendored
1
dist/assets/index-BDKv4rRo.css
vendored
@@ -1 +0,0 @@
|
|||||||
:root{--color-coffee-dark: #3b2f2f;--color-coffee-medium: #6F4E37;--color-cream: #F5E8C7;--color-gold: #D4A574;--color-teal: #1D7874;--color-orange: #E76F51;--bg-body: var(--color-cream);--text-body: var(--color-coffee-dark);--bg-surface: color-mix(in srgb, var(--color-cream), white 40%);--color-primary: var(--color-teal);--color-secondary: var(--color-gold);--border-subtle: color-mix(in srgb, var(--color-coffee-medium), transparent 85%);--shadow-soft: 0 4px 20px -2px color-mix(in srgb, var(--color-coffee-dark), transparent 90%);--font-sans: "Inter", system-ui, -apple-system, sans-serif;--bs-body-bg: var(--bg-body);--bs-body-color: var(--text-body);--bs-primary: var(--color-primary);--bs-primary-rgb: 42, 157, 143}@media(prefers-color-scheme:dark){:root{--bg-body: var(--color-coffee-dark);--text-body: var(--color-cream);--bg-surface: color-mix(in srgb, var(--color-coffee-dark), black 20%);--border-subtle: color-mix(in srgb, var(--color-cream), transparent 85%);--shadow-soft: 0 4px 20px -2px black;--bs-body-bg: var(--bg-body);--bs-body-color: var(--text-body);--bs-dark: #1f1a17}}body{font-family:var(--font-sans);background-color:var(--bg-body);color:var(--text-body);line-height:1.6;-webkit-font-smoothing:antialiased;transition:background-color .3s ease,color .3s ease}a{color:var(--color-primary);text-decoration:none;font-weight:600;transition:text-decoration-color .2s}a:hover{text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:4px}h1,h2,h3,h4,h5,h6{font-weight:800;letter-spacing:-.03em;color:currentColor;margin-bottom:1rem}h1{font-size:clamp(2.5rem,5vw,4rem);line-height:1.1}h2{font-size:clamp(1.75rem,3vw,2.5rem);margin-top:3rem;padding-bottom:.5rem;border-bottom:2px solid var(--color-secondary);display:inline-block}header{background-color:var(--bg-body);padding:3rem 1rem;margin-bottom:2rem}header h1{color:var(--color-coffee-medium)!important}header p{font-size:1.25rem;opacity:.8;max-width:600px;margin-inline:auto}.card{background-color:var(--bg-surface);border:1px solid var(--border-subtle);border-radius:12px;overflow:hidden;transition:transform .3s cubic-bezier(.25,.46,.45,.94),box-shadow .3s ease;height:100%;view-timeline-name:--card-entry;view-timeline-axis:block;animation:fade-in-up linear both;animation-timeline:view();animation-range:entry 10% cover 20%}.card:hover{transform:translateY(-4px) scale(1.01);box-shadow:var(--shadow-soft);border-color:var(--color-secondary)}.card .card-img-top{aspect-ratio:16/9;object-fit:cover;transition:transform .5s ease}.card:hover .card-img-top{transform:scale(1.05)}.card .card-body{padding:1.5rem;display:flex;flex-direction:column}.card .card-body h5.card-title{font-size:1.25rem;margin-bottom:.75rem}.card .card-body p.card-text{font-size:.95rem;opacity:.9;flex-grow:1}.list-group{--bs-list-group-bg: transparent;--bs-list-group-border-color: var(--border-subtle)}.list-group .list-group-item{background-color:var(--bg-surface);border-color:var(--border-subtle);font-weight:500;transition:background-color .2s}.list-group .list-group-item:hover{background-color:color-mix(in srgb,var(--color-primary),transparent 95%);border-left:4px solid var(--color-secondary)}footer{background-color:var(--color-coffee-dark)!important;color:var(--color-cream)!important;padding:3rem 0;margin-top:5rem;border-top:4px solid var(--color-secondary)}footer a{color:var(--color-cream);opacity:.7}footer a:hover{opacity:1;color:var(--color-secondary)}@keyframes fade-in-up{0%{opacity:0;transform:translateY(30px)}to{opacity:1;transform:translateY(0)}}.card-body{container-type:inline-size}@container (max-width: 300px){.card-title{font-size:1.1rem}}.btn-primary{background-color:var(--color-primary);border-color:var(--color-primary);color:#fff;font-weight:700;text-transform:uppercase;font-size:.85rem;letter-spacing:.05em;padding:.6em 1.2em;border-radius:50px}.btn-primary:hover,.btn-primary:focus,.btn-primary:active{background-color:color-mix(in srgb,var(--color-primary),black 10%)!important;border-color:color-mix(in srgb,var(--color-primary),black 10%)!important}
|
|
||||||
677
dist/index.html
vendored
677
dist/index.html
vendored
@@ -6,12 +6,14 @@
|
|||||||
<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="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="keywords" content="web development, custom websites, responsive design, e-commerce, SEO, website maintenance">
|
||||||
<meta name="author" content="Dustin Newkirk">
|
<meta name="author" content="Dustin Newkirk">
|
||||||
<link rel="canonical" href="https://dev.dustin.coffee/index.html">
|
<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>
|
<title>d@n tech - Web Development Services</title>
|
||||||
<meta property="og:title" content="d@n tech - Web Development Services">
|
<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: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:image" content="https://dev.dustin.coffee/assets/images/optimized/pcw.webp">
|
||||||
<meta property="og:url" content="https://dev.dustin.coffee">
|
<meta property="og:url" content="https://dev.dustin.coffee/">
|
||||||
<meta property="og:type" content="website">
|
<meta property="og:type" content="website">
|
||||||
<meta name="twitter:card" content="summary_large_image">
|
<meta name="twitter:card" content="summary_large_image">
|
||||||
<meta name="twitter:title" content="d@n tech - Web Development Services">
|
<meta name="twitter:title" content="d@n tech - Web Development Services">
|
||||||
@@ -23,7 +25,7 @@
|
|||||||
"@type": "ProfessionalService",
|
"@type": "ProfessionalService",
|
||||||
"name": "d@n tech",
|
"name": "d@n tech",
|
||||||
"description": "Professional web development services including custom website development, responsive design, e-commerce solutions, SEO optimization, and website maintenance.",
|
"description": "Professional web development services including custom website development, responsive design, e-commerce solutions, SEO optimization, and website maintenance.",
|
||||||
"url": "https://dev.dustin.coffee",
|
"url": "https://dev.dustin.coffee/",
|
||||||
"provider": {
|
"provider": {
|
||||||
"@type": "Person",
|
"@type": "Person",
|
||||||
"name": "Dustin Newkirk"
|
"name": "Dustin Newkirk"
|
||||||
@@ -34,131 +36,590 @@
|
|||||||
</script>
|
</script>
|
||||||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
<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 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="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
|
||||||
<style>
|
<style>
|
||||||
html {
|
html {
|
||||||
scroll-behavior: smooth;
|
scroll-behavior: smooth;
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
<link rel="stylesheet" crossorigin href="/assets/index-BDKv4rRo.css">
|
<script type="module" crossorigin src="/assets/main-BoFL6OwZ.js"></script>
|
||||||
</head>
|
<link rel="stylesheet" crossorigin href="/assets/styles-CLQNtSg4.css">
|
||||||
<body>
|
</head>
|
||||||
<header class="text-center py-1">
|
<body>
|
||||||
<h1>d@n tech</h1>
|
<!-- Scroll Progress Bar -->
|
||||||
<p>Your partner in web development</p>
|
<div class="scroll-progress" role="progressbar" aria-label="Page scroll progress" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100"></div>
|
||||||
<p><a href="https://dustin.coffee" target="_blank" class="text-white">Visit my main site</a></p>
|
|
||||||
</header>
|
<!-- Particle Canvas -->
|
||||||
<div class="d-flex flex-column min-vh-100" style="position: relative;">
|
<canvas id="particles" aria-hidden="true"></canvas>
|
||||||
<div class="container mt-4">
|
|
||||||
<h2>About Us</h2>
|
<!-- Decorative Layer (Background Elements) -->
|
||||||
<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>
|
<div class="decorative-layer" aria-hidden="true">
|
||||||
|
<!-- Floating Bean 1 -->
|
||||||
<h2>Services</h2>
|
<svg class="floating-bean bean-1" viewBox="0 0 24 24" fill="currentColor">
|
||||||
<ul class="list-group">
|
<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"/>
|
||||||
<li class="list-group-item">Custom Website Development</li>
|
</svg>
|
||||||
<li class="list-group-item">Responsive Design</li>
|
<!-- Floating Bean 2 -->
|
||||||
<li class="list-group-item">E-commerce Solutions</li>
|
<svg class="floating-bean bean-2" viewBox="0 0 24 24" fill="currentColor">
|
||||||
<li class="list-group-item">SEO Optimization</li>
|
<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"/>
|
||||||
<li class="list-group-item">Website Maintenance</li>
|
</svg>
|
||||||
</ul>
|
<!-- Floating Bean 3 -->
|
||||||
|
<svg class="floating-bean bean-3" viewBox="0 0 24 24" fill="currentColor">
|
||||||
</div>
|
<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>
|
||||||
<div class="container mt-4">
|
|
||||||
<h2>Portfolio</h2>
|
<!-- Floating Cup -->
|
||||||
<div class="row">
|
<svg class="floating-cup cup-1" viewBox="0 0 24 24" fill="currentColor">
|
||||||
<div class="col-md-6 mb-2">
|
<path d="M4 2h1v1h-1zM6 2h1v1h-1zM8 2h1v1h-1zM10 2h1v1h-1z" opacity=".5"/> <!-- Steam dots -->
|
||||||
<div class="card">
|
<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"/>
|
||||||
<img srcset="/assets/pcw-400-BITl4qEE.webp 400w, /assets/pcw-800-DsVJRX-Y.webp 800w, /assets/pcw-CGUYeRaN.webp 1200w" sizes="(max-width: 768px) 100vw, 50vw" src="/assets/pcw-CGUYeRaN.webp" class="card-img-top" alt="Pemu Counseling and Wellness" loading="lazy">
|
</svg>
|
||||||
<div class="card-body">
|
</div>
|
||||||
<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>
|
<header class="hero-section">
|
||||||
<a href="https://pemucounselingandwellness.com" target="_blank" class="btn btn-primary">Learn More</a>
|
<div class="steam-container" aria-hidden="true">
|
||||||
</div>
|
<div class="steam-particle"></div>
|
||||||
</div>
|
<div class="steam-particle"></div>
|
||||||
</div>
|
<div class="steam-particle"></div>
|
||||||
<div class="col-md-6 mb-2">
|
</div>
|
||||||
<div class="card">
|
<div class="container hero-content">
|
||||||
<img srcset="/assets/knphd-400-BKC5xx6m.webp 400w, /assets/knphd-800-C-3pFi20.webp 800w, /assets/knphd-O7XzWp2B.webp 1200w" sizes="(max-width: 768px) 100vw, 50vw" src="/assets/knphd-O7XzWp2B.webp" class="card-img-top" alt="Kayla Newkirk" loading="lazy">
|
<h1 class="hero-title">Digital Experiences,<br>Perfectly Brewed.</h1>
|
||||||
<div class="card-body">
|
<p class="typewriter hero-subtitle" data-text="Crafting robust, responsive, and elegant web solutions" aria-label="Crafting robust, responsive, and elegant web solutions"></p>
|
||||||
<h5 class="card-title">Kayla Newkirk</h5>
|
<div class="btn-group-custom">
|
||||||
<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="mailto:info@dustin.coffee" class="btn btn-primary btn-lg">
|
||||||
<a href="https://kaylassafe.space" target="_blank" class="btn btn-primary">Learn More</a>
|
<svg class="btn-icon" width="20" height="20" viewBox="0 0 24 24" fill="currentColor">
|
||||||
</div>
|
<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"/>
|
||||||
</div>
|
</svg>
|
||||||
</div>
|
Start Your Project
|
||||||
<div class="col-md-6 mb-2">
|
</a>
|
||||||
<div class="card">
|
<a href="#portfolio" class="btn btn-outline-coffee btn-lg">View Portfolio</a>
|
||||||
<img srcset="data:image/webp;base64,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 400w, /assets/4th-800-0UtLw_o2.webp 800w, /assets/4th-8qKi-LhK.webp 1200w" sizes="(max-width: 768px) 100vw, 50vw" src="/assets/4th-8qKi-LhK.webp" class="card-img-top" alt="4th & Goal" loading="lazy">
|
</div>
|
||||||
<div class="card-body">
|
<div class="mt-5 d-none d-md-block opacity-50 animate-bounce" aria-hidden="true">
|
||||||
<h5 class="card-title">4th & Goal</h5>
|
<svg width="24" height="24" fill="currentColor" viewBox="0 0 16 16">
|
||||||
<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>
|
<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"/>
|
||||||
<a href="https://4th.hobokenchicken.com" target="_blank" class="btn btn-primary">Learn More</a>
|
</svg>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
|
||||||
<div class="col-md-6 mb-2">
|
<!-- Coffee Drip Separator -->
|
||||||
<div class="card">
|
<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 Us</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 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>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/pcw-400-BITl4qEE.webp 400w, /assets/pcw-800-DsVJRX-Y.webp 800w, /assets/pcw-CGUYeRaN.webp 1200w" sizes="(max-width: 768px) 100vw, 50vw" src="/assets/pcw-CGUYeRaN.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/knphd-400-BKC5xx6m.webp 400w, /assets/knphd-800-C-3pFi20.webp 800w, /assets/knphd-O7XzWp2B.webp 1200w" sizes="(max-width: 768px) 100vw, 50vw" src="/assets/knphd-O7XzWp2B.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="data:image/webp;base64,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 400w, /assets/4th-800-0UtLw_o2.webp 800w, /assets/4th-8qKi-LhK.webp 1200w" sizes="(max-width: 768px) 100vw, 50vw" src="/assets/4th-8qKi-LhK.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/pha-400-CXnsDuHV.webp 400w, /assets/pha-800-BePfxstH.webp 800w, /assets/pha-fSk2kxT2.webp 1200w" sizes="(max-width: 768px) 100vw, 50vw" src="/assets/pha-fSk2kxT2.webp" class="card-img-top" alt="Powerful Healing Arts" loading="lazy">
|
<img srcset="/assets/pha-400-CXnsDuHV.webp 400w, /assets/pha-800-BePfxstH.webp 800w, /assets/pha-fSk2kxT2.webp 1200w" sizes="(max-width: 768px) 100vw, 50vw" src="/assets/pha-fSk2kxT2.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">Learn More</a>
|
<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>
|
||||||
</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/dissertationpath-400-536vXNkR.webp 400w, /assets/dissertationpath-800-YoXTMufk.webp 800w, /assets/dissertationpath-vl3e54ot.webp 1200w" sizes="(max-width: 768px) 100vw, 50vw" src="/assets/dissertationpath-vl3e54ot.webp" class="card-img-top" alt="DissertationPath" loading="lazy">
|
<img srcset="/assets/dissertationpath-400-536vXNkR.webp 400w, /assets/dissertationpath-800-YoXTMufk.webp 800w, /assets/dissertationpath-vl3e54ot.webp 1200w" sizes="(max-width: 768px) 100vw, 50vw" src="/assets/dissertationpath-vl3e54ot.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">Learn More</a>
|
<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>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
</section>
|
||||||
<div class="container mt-4">
|
|
||||||
<h2>Testimonials</h2>
|
<!-- Testimonials Section -->
|
||||||
<div class="row">
|
<section id="testimonials" class="section-padding section-alt">
|
||||||
<div class="col-md-6">
|
<div class="container">
|
||||||
<div class="card">
|
<h2>Testimonials</h2>
|
||||||
<div class="card-body">
|
<div class="row g-4">
|
||||||
<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>
|
<div class="col-md-6">
|
||||||
<p class="card-text">- Margaret Pemu, Pemu Counseling and Wellness</p>
|
|
||||||
</div>
|
<div class="card testimonial-card h-100">
|
||||||
</div>
|
<div class="card-body d-flex flex-column h-100">
|
||||||
</div>
|
<div class="testimonial-quote-icon">“</div>
|
||||||
<div class="col-md-6">
|
|
||||||
<div class="card">
|
<div class="testimonial-header">
|
||||||
<div class="card-body">
|
<div class="testimonial-avatar">MP</div>
|
||||||
<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.
|
<div class="testimonial-meta">
|
||||||
|
<h5>Margaret Pemu</h5>
|
||||||
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>
|
<small>Pemu Counseling and Wellness</small>
|
||||||
<p class="card-text"> -Laura, Woman-Owned Small Business</p>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
|
||||||
</div>
|
<div class="testimonial-rating" aria-label="5 out of 5 stars">
|
||||||
</div>
|
<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>
|
<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 class="container mt-4">
|
<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>
|
||||||
<h2>Contact Us</h2>
|
</div>
|
||||||
<div class="card">
|
|
||||||
<div class="card-body">
|
<div class="testimonial-content mb-4 flex-grow-1">
|
||||||
<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 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">View your invoices at <a href="https://invoice.dustin.coffee/client" target="_blank">invoice.dustin.coffee</a></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>
|
</div>
|
||||||
</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">
|
||||||
<footer class="bg-dark text-white text-center py-1 mt-5" >
|
<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>
|
||||||
|
|
||||||
|
<!-- Metrics Section -->
|
||||||
|
<section id="metrics" class="metrics-banner" aria-label="Performance Metrics">
|
||||||
|
<div class="container">
|
||||||
|
<div class="row g-4 row-cols-2 row-cols-md-4 justify-content-center">
|
||||||
|
<div class="col">
|
||||||
|
<div class="metric-item">
|
||||||
|
<div class="gauge" style="--percent: 98%;" data-score="98"></div>
|
||||||
|
<span class="metric-label">Performance</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="col">
|
||||||
|
<div class="metric-item">
|
||||||
|
<div class="gauge" style="--percent: 100%;" data-score="100"></div>
|
||||||
|
<span class="metric-label">Accessibility</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="col">
|
||||||
|
<div class="metric-item">
|
||||||
|
<div class="gauge" style="--percent: 100%;" data-score="100"></div>
|
||||||
|
<span class="metric-label">Best Practices</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="col">
|
||||||
|
<div class="metric-item">
|
||||||
|
<div class="gauge" style="--percent: 100%;" data-score="100"></div>
|
||||||
|
<span class="metric-label">SEO Score</span>
|
||||||
|
</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 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">
|
||||||
|
<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 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" >
|
||||||
|
<div class="coffee-grounds-pattern" aria-hidden="true"></div>
|
||||||
|
|
||||||
<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>
|
||||||
|
|||||||
675
index.html
675
index.html
@@ -6,12 +6,14 @@
|
|||||||
<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="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="keywords" content="web development, custom websites, responsive design, e-commerce, SEO, website maintenance">
|
||||||
<meta name="author" content="Dustin Newkirk">
|
<meta name="author" content="Dustin Newkirk">
|
||||||
<link rel="canonical" href="https://dev.dustin.coffee/index.html">
|
<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>
|
<title>d@n tech - Web Development Services</title>
|
||||||
<meta property="og:title" content="d@n tech - Web Development Services">
|
<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: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:image" content="https://dev.dustin.coffee/assets/images/optimized/pcw.webp">
|
||||||
<meta property="og:url" content="https://dev.dustin.coffee">
|
<meta property="og:url" content="https://dev.dustin.coffee/">
|
||||||
<meta property="og:type" content="website">
|
<meta property="og:type" content="website">
|
||||||
<meta name="twitter:card" content="summary_large_image">
|
<meta name="twitter:card" content="summary_large_image">
|
||||||
<meta name="twitter:title" content="d@n tech - Web Development Services">
|
<meta name="twitter:title" content="d@n tech - Web Development Services">
|
||||||
@@ -23,7 +25,7 @@
|
|||||||
"@type": "ProfessionalService",
|
"@type": "ProfessionalService",
|
||||||
"name": "d@n tech",
|
"name": "d@n tech",
|
||||||
"description": "Professional web development services including custom website development, responsive design, e-commerce solutions, SEO optimization, and website maintenance.",
|
"description": "Professional web development services including custom website development, responsive design, e-commerce solutions, SEO optimization, and website maintenance.",
|
||||||
"url": "https://dev.dustin.coffee",
|
"url": "https://dev.dustin.coffee/",
|
||||||
"provider": {
|
"provider": {
|
||||||
"@type": "Person",
|
"@type": "Person",
|
||||||
"name": "Dustin Newkirk"
|
"name": "Dustin Newkirk"
|
||||||
@@ -34,7 +36,7 @@
|
|||||||
</script>
|
</script>
|
||||||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
<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 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="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">
|
<link rel="stylesheet" href="styles.css">
|
||||||
<style>
|
<style>
|
||||||
@@ -42,123 +44,582 @@
|
|||||||
scroll-behavior: smooth;
|
scroll-behavior: smooth;
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
</head>
|
<script type="module" src="/main.js" defer></script>
|
||||||
<body>
|
</head>
|
||||||
<header class="text-center py-1">
|
<body>
|
||||||
<h1>d@n tech</h1>
|
<!-- Scroll Progress Bar -->
|
||||||
<p>Your partner in web development</p>
|
<div class="scroll-progress" role="progressbar" aria-label="Page scroll progress" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100"></div>
|
||||||
<p><a href="https://dustin.coffee" target="_blank" class="text-white">Visit my main site</a></p>
|
|
||||||
</header>
|
<!-- Particle Canvas -->
|
||||||
<div class="d-flex flex-column min-vh-100" style="position: relative;">
|
<canvas id="particles" aria-hidden="true"></canvas>
|
||||||
<div class="container mt-4">
|
|
||||||
<h2>About Us</h2>
|
<!-- Decorative Layer (Background Elements) -->
|
||||||
<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>
|
<div class="decorative-layer" aria-hidden="true">
|
||||||
|
<!-- Floating Bean 1 -->
|
||||||
<h2>Services</h2>
|
<svg class="floating-bean bean-1" viewBox="0 0 24 24" fill="currentColor">
|
||||||
<ul class="list-group">
|
<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"/>
|
||||||
<li class="list-group-item">Custom Website Development</li>
|
</svg>
|
||||||
<li class="list-group-item">Responsive Design</li>
|
<!-- Floating Bean 2 -->
|
||||||
<li class="list-group-item">E-commerce Solutions</li>
|
<svg class="floating-bean bean-2" viewBox="0 0 24 24" fill="currentColor">
|
||||||
<li class="list-group-item">SEO Optimization</li>
|
<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"/>
|
||||||
<li class="list-group-item">Website Maintenance</li>
|
</svg>
|
||||||
</ul>
|
<!-- Floating Bean 3 -->
|
||||||
|
<svg class="floating-bean bean-3" viewBox="0 0 24 24" fill="currentColor">
|
||||||
</div>
|
<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>
|
||||||
<div class="container mt-4">
|
|
||||||
<h2>Portfolio</h2>
|
<!-- Floating Cup -->
|
||||||
<div class="row">
|
<svg class="floating-cup cup-1" viewBox="0 0 24 24" fill="currentColor">
|
||||||
<div class="col-md-6 mb-2">
|
<path d="M4 2h1v1h-1zM6 2h1v1h-1zM8 2h1v1h-1zM10 2h1v1h-1z" opacity=".5"/> <!-- Steam dots -->
|
||||||
<div class="card">
|
<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"/>
|
||||||
<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">
|
</svg>
|
||||||
<div class="card-body">
|
</div>
|
||||||
<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>
|
<header class="hero-section">
|
||||||
<a href="https://pemucounselingandwellness.com" target="_blank" class="btn btn-primary">Learn More</a>
|
<div class="steam-container" aria-hidden="true">
|
||||||
</div>
|
<div class="steam-particle"></div>
|
||||||
</div>
|
<div class="steam-particle"></div>
|
||||||
</div>
|
<div class="steam-particle"></div>
|
||||||
<div class="col-md-6 mb-2">
|
</div>
|
||||||
<div class="card">
|
<div class="container hero-content">
|
||||||
<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">
|
<h1 class="hero-title">Digital Experiences,<br>Perfectly Brewed.</h1>
|
||||||
<div class="card-body">
|
<p class="typewriter hero-subtitle" data-text="Crafting robust, responsive, and elegant web solutions" aria-label="Crafting robust, responsive, and elegant web solutions"></p>
|
||||||
<h5 class="card-title">Kayla Newkirk</h5>
|
<div class="btn-group-custom">
|
||||||
<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="mailto:info@dustin.coffee" class="btn btn-primary btn-lg">
|
||||||
<a href="https://kaylassafe.space" target="_blank" class="btn btn-primary">Learn More</a>
|
<svg class="btn-icon" width="20" height="20" viewBox="0 0 24 24" fill="currentColor">
|
||||||
</div>
|
<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"/>
|
||||||
</div>
|
</svg>
|
||||||
</div>
|
Start Your Project
|
||||||
<div class="col-md-6 mb-2">
|
</a>
|
||||||
<div class="card">
|
<a href="#portfolio" class="btn btn-outline-coffee btn-lg">View Portfolio</a>
|
||||||
<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="mt-5 d-none d-md-block opacity-50 animate-bounce" aria-hidden="true">
|
||||||
<h5 class="card-title">4th & Goal</h5>
|
<svg width="24" height="24" fill="currentColor" viewBox="0 0 16 16">
|
||||||
<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>
|
<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"/>
|
||||||
<a href="https://4th.hobokenchicken.com" target="_blank" class="btn btn-primary">Learn More</a>
|
</svg>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
|
||||||
<div class="col-md-6 mb-2">
|
<!-- Coffee Drip Separator -->
|
||||||
<div class="card">
|
<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 Us</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 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>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/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">
|
<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">Learn More</a>
|
<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>
|
||||||
</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">Learn More</a>
|
<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>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
</section>
|
||||||
<div class="container mt-4">
|
|
||||||
<h2>Testimonials</h2>
|
<!-- Testimonials Section -->
|
||||||
<div class="row">
|
<section id="testimonials" class="section-padding section-alt">
|
||||||
<div class="col-md-6">
|
<div class="container">
|
||||||
<div class="card">
|
<h2>Testimonials</h2>
|
||||||
<div class="card-body">
|
<div class="row g-4">
|
||||||
<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>
|
<div class="col-md-6">
|
||||||
<p class="card-text">- Margaret Pemu, Pemu Counseling and Wellness</p>
|
|
||||||
</div>
|
<div class="card testimonial-card h-100">
|
||||||
</div>
|
<div class="card-body d-flex flex-column h-100">
|
||||||
</div>
|
<div class="testimonial-quote-icon">“</div>
|
||||||
<div class="col-md-6">
|
|
||||||
<div class="card">
|
<div class="testimonial-header">
|
||||||
<div class="card-body">
|
<div class="testimonial-avatar">MP</div>
|
||||||
<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.
|
<div class="testimonial-meta">
|
||||||
|
<h5>Margaret Pemu</h5>
|
||||||
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>
|
<small>Pemu Counseling and Wellness</small>
|
||||||
<p class="card-text"> -Laura, Woman-Owned Small Business</p>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
|
||||||
</div>
|
<div class="testimonial-rating" aria-label="5 out of 5 stars">
|
||||||
</div>
|
<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>
|
<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 class="container mt-4">
|
<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>
|
||||||
<h2>Contact Us</h2>
|
</div>
|
||||||
<div class="card">
|
|
||||||
<div class="card-body">
|
<div class="testimonial-content mb-4 flex-grow-1">
|
||||||
<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 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">View your invoices at <a href="https://invoice.dustin.coffee/client" target="_blank">invoice.dustin.coffee</a></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>
|
</div>
|
||||||
</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">
|
||||||
<footer class="bg-dark text-white text-center py-1 mt-5" >
|
<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>
|
||||||
|
|
||||||
|
<!-- Metrics Section -->
|
||||||
|
<section id="metrics" class="metrics-banner" aria-label="Performance Metrics">
|
||||||
|
<div class="container">
|
||||||
|
<div class="row g-4 row-cols-2 row-cols-md-4 justify-content-center">
|
||||||
|
<div class="col">
|
||||||
|
<div class="metric-item">
|
||||||
|
<div class="gauge" style="--percent: 98%;" data-score="98"></div>
|
||||||
|
<span class="metric-label">Performance</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="col">
|
||||||
|
<div class="metric-item">
|
||||||
|
<div class="gauge" style="--percent: 100%;" data-score="100"></div>
|
||||||
|
<span class="metric-label">Accessibility</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="col">
|
||||||
|
<div class="metric-item">
|
||||||
|
<div class="gauge" style="--percent: 100%;" data-score="100"></div>
|
||||||
|
<span class="metric-label">Best Practices</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="col">
|
||||||
|
<div class="metric-item">
|
||||||
|
<div class="gauge" style="--percent: 100%;" data-score="100"></div>
|
||||||
|
<span class="metric-label">SEO Score</span>
|
||||||
|
</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 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">
|
||||||
|
<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 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" >
|
||||||
|
<div class="coffee-grounds-pattern" aria-hidden="true"></div>
|
||||||
|
|
||||||
<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>
|
||||||
|
|||||||
1285
lighthouse-seo.json
Normal file
1285
lighthouse-seo.json
Normal file
File diff suppressed because one or more lines are too long
253
main.js
Normal file
253
main.js
Normal file
@@ -0,0 +1,253 @@
|
|||||||
|
// ===== TYPEWRITER EFFECT =====
|
||||||
|
function initTypewriter() {
|
||||||
|
const el = document.querySelector('.typewriter');
|
||||||
|
if (!el) return;
|
||||||
|
|
||||||
|
const text = el.getAttribute('data-text');
|
||||||
|
let i = 0;
|
||||||
|
|
||||||
|
el.textContent = '';
|
||||||
|
el.style.opacity = '1';
|
||||||
|
|
||||||
|
function type() {
|
||||||
|
if (i < text.length) {
|
||||||
|
el.textContent += text.charAt(i);
|
||||||
|
i++;
|
||||||
|
setTimeout(type, 80);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
setTimeout(type, 500);
|
||||||
|
}
|
||||||
|
|
||||||
|
// ===== SCROLL PROGRESS BAR =====
|
||||||
|
function initScrollProgress() {
|
||||||
|
const progressBar = document.querySelector('.scroll-progress');
|
||||||
|
if (!progressBar) return;
|
||||||
|
|
||||||
|
function updateProgress() {
|
||||||
|
const docHeight = document.documentElement.scrollHeight - window.innerHeight;
|
||||||
|
const scrolled = window.scrollY;
|
||||||
|
const progress = (scrolled / docHeight) * 100;
|
||||||
|
|
||||||
|
progressBar.style.setProperty('--scroll-progress', `${progress}%`);
|
||||||
|
progressBar.setAttribute('aria-valuenow', Math.round(progress));
|
||||||
|
}
|
||||||
|
|
||||||
|
window.addEventListener('scroll', updateProgress, { passive: true });
|
||||||
|
updateProgress();
|
||||||
|
}
|
||||||
|
|
||||||
|
// ===== ANIMATED SKILLS BARS =====
|
||||||
|
function initSkillBars() {
|
||||||
|
const skillItems = document.querySelectorAll('.skill-item');
|
||||||
|
if (!skillItems.length) return;
|
||||||
|
|
||||||
|
const observer = new IntersectionObserver((entries) => {
|
||||||
|
entries.forEach(entry => {
|
||||||
|
if (entry.isIntersecting) {
|
||||||
|
entry.target.classList.add('animate');
|
||||||
|
observer.unobserve(entry.target);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}, { threshold: 0.3 });
|
||||||
|
|
||||||
|
skillItems.forEach(item => observer.observe(item));
|
||||||
|
}
|
||||||
|
|
||||||
|
// ===== PARTICLE BACKGROUND =====
|
||||||
|
function initParticles() {
|
||||||
|
const canvas = document.getElementById('particles');
|
||||||
|
if (!canvas) return;
|
||||||
|
|
||||||
|
const ctx = canvas.getContext('2d');
|
||||||
|
let particles = [];
|
||||||
|
let animationId;
|
||||||
|
|
||||||
|
function resize() {
|
||||||
|
canvas.width = window.innerWidth;
|
||||||
|
canvas.height = window.innerHeight;
|
||||||
|
}
|
||||||
|
|
||||||
|
class Particle {
|
||||||
|
constructor() {
|
||||||
|
this.x = Math.random() * canvas.width;
|
||||||
|
this.y = Math.random() * canvas.height;
|
||||||
|
this.vx = (Math.random() - 0.5) * 0.3;
|
||||||
|
this.vy = (Math.random() - 0.5) * 0.3;
|
||||||
|
this.radius = Math.random() * 1.5 + 0.5;
|
||||||
|
this.opacity = Math.random() * 0.3 + 0.1;
|
||||||
|
}
|
||||||
|
|
||||||
|
update() {
|
||||||
|
this.x += this.vx;
|
||||||
|
this.y += this.vy;
|
||||||
|
|
||||||
|
if (this.x < 0 || this.x > canvas.width) this.vx *= -1;
|
||||||
|
if (this.y < 0 || this.y > canvas.height) this.vy *= -1;
|
||||||
|
}
|
||||||
|
|
||||||
|
draw() {
|
||||||
|
ctx.beginPath();
|
||||||
|
ctx.arc(this.x, this.y, this.radius, 0, Math.PI * 2);
|
||||||
|
ctx.fillStyle = `rgba(111, 78, 55, ${this.opacity})`;
|
||||||
|
ctx.fill();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function init() {
|
||||||
|
resize();
|
||||||
|
particles = [];
|
||||||
|
const particleCount = Math.floor((canvas.width * canvas.height) / 15000);
|
||||||
|
for (let i = 0; i < particleCount; i++) {
|
||||||
|
particles.push(new Particle());
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function animate() {
|
||||||
|
ctx.clearRect(0, 0, canvas.width, canvas.height);
|
||||||
|
|
||||||
|
particles.forEach(particle => {
|
||||||
|
particle.update();
|
||||||
|
particle.draw();
|
||||||
|
});
|
||||||
|
|
||||||
|
animationId = requestAnimationFrame(animate);
|
||||||
|
}
|
||||||
|
|
||||||
|
window.addEventListener('resize', () => {
|
||||||
|
cancelAnimationFrame(animationId);
|
||||||
|
init();
|
||||||
|
animate();
|
||||||
|
});
|
||||||
|
|
||||||
|
init();
|
||||||
|
animate();
|
||||||
|
}
|
||||||
|
|
||||||
|
// ===== INTERACTIVE TESTIMONIALS =====
|
||||||
|
function initTestimonials() {
|
||||||
|
const testimonialCards = document.querySelectorAll('.testimonial-card');
|
||||||
|
|
||||||
|
testimonialCards.forEach(card => {
|
||||||
|
const toggle = card.querySelector('.testimonial-toggle');
|
||||||
|
const excerpt = card.querySelector('.testimonial-excerpt');
|
||||||
|
const full = card.querySelector('.testimonial-full');
|
||||||
|
|
||||||
|
if (!toggle || !excerpt || !full) return;
|
||||||
|
|
||||||
|
toggle.addEventListener('click', () => {
|
||||||
|
const isExpanded = card.classList.contains('expanded');
|
||||||
|
|
||||||
|
card.classList.toggle('expanded');
|
||||||
|
toggle.textContent = isExpanded ? 'Read More' : 'Read Less';
|
||||||
|
toggle.setAttribute('aria-expanded', !isExpanded);
|
||||||
|
|
||||||
|
if (!isExpanded) {
|
||||||
|
excerpt.style.display = 'none';
|
||||||
|
full.style.display = 'block';
|
||||||
|
} else {
|
||||||
|
excerpt.style.display = 'block';
|
||||||
|
full.style.display = 'none';
|
||||||
|
}
|
||||||
|
});
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
// ===== PARALLAX EFFECT FOR DECORATIVE ELEMENTS =====
|
||||||
|
function initParallax() {
|
||||||
|
const floatingElements = document.querySelectorAll('.floating-bean, .floating-cup');
|
||||||
|
if (!floatingElements.length) return;
|
||||||
|
|
||||||
|
let ticking = false;
|
||||||
|
|
||||||
|
window.addEventListener('scroll', () => {
|
||||||
|
if (!ticking) {
|
||||||
|
window.requestAnimationFrame(() => {
|
||||||
|
const scrolled = window.scrollY;
|
||||||
|
|
||||||
|
floatingElements.forEach((el, index) => {
|
||||||
|
const speed = 0.05 + (index * 0.02); // Vary speed per element
|
||||||
|
const yPos = -(scrolled * speed);
|
||||||
|
// Use CSS variable to avoid overwriting the float animation transform
|
||||||
|
el.style.transform = `translateY(${yPos}px)`;
|
||||||
|
});
|
||||||
|
|
||||||
|
ticking = false;
|
||||||
|
});
|
||||||
|
ticking = true;
|
||||||
|
}
|
||||||
|
}, { passive: true });
|
||||||
|
}
|
||||||
|
|
||||||
|
// ===== METRICS COUNTER ANIMATION =====
|
||||||
|
function initMetricsCounter() {
|
||||||
|
const gauges = document.querySelectorAll('.gauge');
|
||||||
|
if (!gauges.length) return;
|
||||||
|
|
||||||
|
const observer = new IntersectionObserver((entries) => {
|
||||||
|
entries.forEach(entry => {
|
||||||
|
if (entry.isIntersecting) {
|
||||||
|
animateGauge(entry.target);
|
||||||
|
observer.unobserve(entry.target);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}, { threshold: 0.5 });
|
||||||
|
|
||||||
|
gauges.forEach(gauge => {
|
||||||
|
// Store original values
|
||||||
|
gauge.dataset.target = gauge.getAttribute('data-score');
|
||||||
|
// Reset to 0 for animation start
|
||||||
|
gauge.setAttribute('data-score', '0');
|
||||||
|
gauge.style.setProperty('--percent', '0%');
|
||||||
|
observer.observe(gauge);
|
||||||
|
});
|
||||||
|
|
||||||
|
function animateGauge(gauge) {
|
||||||
|
// Check for reduced motion preference
|
||||||
|
const prefersReducedMotion = window.matchMedia('(prefers-reduced-motion: reduce)').matches;
|
||||||
|
const target = parseInt(gauge.dataset.target, 10);
|
||||||
|
|
||||||
|
if (prefersReducedMotion) {
|
||||||
|
gauge.setAttribute('data-score', target);
|
||||||
|
gauge.style.setProperty('--percent', `${target}%`);
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
const duration = 2000; // ms
|
||||||
|
const startTime = performance.now();
|
||||||
|
|
||||||
|
function update(currentTime) {
|
||||||
|
const elapsed = currentTime - startTime;
|
||||||
|
const progress = Math.min(elapsed / duration, 1);
|
||||||
|
|
||||||
|
// Easing (easeOutQuart)
|
||||||
|
const ease = 1 - Math.pow(1 - progress, 4);
|
||||||
|
|
||||||
|
const currentVal = Math.floor(ease * target);
|
||||||
|
gauge.setAttribute('data-score', currentVal);
|
||||||
|
gauge.style.setProperty('--percent', `${currentVal}%`);
|
||||||
|
|
||||||
|
if (progress < 1) {
|
||||||
|
requestAnimationFrame(update);
|
||||||
|
} else {
|
||||||
|
// Ensure final value is exact
|
||||||
|
gauge.setAttribute('data-score', target);
|
||||||
|
gauge.style.setProperty('--percent', `${target}%`);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
requestAnimationFrame(update);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// ===== INITIALIZE ALL =====
|
||||||
|
document.addEventListener('DOMContentLoaded', () => {
|
||||||
|
initTypewriter();
|
||||||
|
initScrollProgress();
|
||||||
|
initSkillBars();
|
||||||
|
initParticles();
|
||||||
|
initTestimonials();
|
||||||
|
initParallax();
|
||||||
|
initMetricsCounter();
|
||||||
|
});
|
||||||
@@ -1,7 +1,7 @@
|
|||||||
{
|
{
|
||||||
"name": "webdev",
|
"name": "webdev",
|
||||||
"version": "1.0.0",
|
"version": "1.0.0",
|
||||||
"description": "Welcome to the Web Development Site repository. This project is a simple website designed to showcase basic web development skills.",
|
"description": "Modern coffee-themed web development portfolio built with vanilla JavaScript, CSS, and HTML. Uses Vite, Bootstrap 5, and features dark/light mode, particle animations, and cross-browser compatibility.",
|
||||||
"main": "index.js",
|
"main": "index.js",
|
||||||
"scripts": {
|
"scripts": {
|
||||||
"test": "echo \"Error: no test specified\" && exit 1",
|
"test": "echo \"Error: no test specified\" && exit 1",
|
||||||
@@ -13,9 +13,9 @@
|
|||||||
"type": "git",
|
"type": "git",
|
||||||
"url": "https://git.dustin.coffee/hobokenchicken/webdev-site.git"
|
"url": "https://git.dustin.coffee/hobokenchicken/webdev-site.git"
|
||||||
},
|
},
|
||||||
"keywords": [],
|
"keywords": ["portfolio", "web development", "coffee theme", "bootstrap", "vite", "vanilla javascript", "dark mode"],
|
||||||
"author": "",
|
"author": "Dustin Newkirk",
|
||||||
"license": "ISC",
|
"license": "MIT",
|
||||||
"type": "module",
|
"type": "module",
|
||||||
"devDependencies": {
|
"devDependencies": {
|
||||||
"vite": "^7.3.1"
|
"vite": "^7.3.1"
|
||||||
|
|||||||
BIN
portfolio-preview.png
Normal file
BIN
portfolio-preview.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 222 KiB |
71
privacy.html
71
privacy.html
@@ -1,15 +1,43 @@
|
|||||||
<!DOCTYPE html>
|
<!DOCTYPE html>
|
||||||
<html lang="en">
|
<html lang="en">
|
||||||
<head>
|
<head>
|
||||||
<meta charset="UTF-8">
|
<meta charset="UTF-8">
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
<title>Privacy Policy</title>
|
<meta name="description" content="Privacy Policy for d@n tech web development services. Learn how we collect, use, and protect your personal information.">
|
||||||
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
|
<meta name="keywords" content="privacy policy, data protection, personal information, web development, GDPR">
|
||||||
<link rel="stylesheet" href="styles.css">
|
<meta name="author" content="Dustin Newkirk">
|
||||||
</head>
|
<link rel="canonical" href="https://dev.dustin.coffee/privacy.html">
|
||||||
<body>
|
<link rel="icon" href="favicon.svg" type="image/svg+xml">
|
||||||
<div class="container mt-5">
|
<link rel="icon" href="favicon.ico" sizes="any">
|
||||||
<h1 class="text-center">Privacy Policy</h1>
|
<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">
|
||||||
|
<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">
|
||||||
|
|
||||||
<p class="mt-4">
|
<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.
|
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>
|
</p>
|
||||||
@@ -36,9 +64,18 @@
|
|||||||
<p class="mt-4">
|
<p class="mt-4">
|
||||||
If you have any questions about this Privacy Policy, please contact us.
|
If you have any questions about this Privacy Policy, please contact us.
|
||||||
</p>
|
</p>
|
||||||
</div>
|
</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>
|
<footer class="bg-dark text-white text-center py-4 mt-5">
|
||||||
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
|
<div class="container">
|
||||||
</body>
|
<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>
|
||||||
|
</div>
|
||||||
|
</footer>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
// Display the current year in the footer
|
||||||
|
document.getElementById('currentYear').textContent = new Date().getFullYear();
|
||||||
|
</script>
|
||||||
|
</body>
|
||||||
</html>
|
</html>
|
||||||
BIN
public/favicon.ico
Normal file
BIN
public/favicon.ico
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 21 KiB |
BIN
public/favicon.png
Normal file
BIN
public/favicon.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 313 B |
12
public/favicon.svg
Normal file
12
public/favicon.svg
Normal file
@@ -0,0 +1,12 @@
|
|||||||
|
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" width="32" height="32">
|
||||||
|
<!-- Coffee cup body -->
|
||||||
|
<rect x="8" y="10" width="16" height="14" rx="2" ry="2" fill="#6F4E37"/>
|
||||||
|
<!-- Coffee surface -->
|
||||||
|
<rect x="10" y="12" width="12" height="10" rx="1" ry="1" fill="#D4A574"/>
|
||||||
|
<!-- Cup handle -->
|
||||||
|
<path d="M22 12 C24 12 24 14 24 16 C24 18 22 18 20 18" stroke="#6F4E37" stroke-width="2" fill="none"/>
|
||||||
|
<!-- Steam lines -->
|
||||||
|
<line x1="12" y1="6" x2="12" y2="10" stroke="#1D7874" stroke-width="1.5" stroke-linecap="round"/>
|
||||||
|
<line x1="16" y1="5" x2="16" y2="9" stroke="#1D7874" stroke-width="1.5" stroke-linecap="round"/>
|
||||||
|
<line x1="20" y1="6" x2="20" y2="10" stroke="#1D7874" stroke-width="1.5" stroke-linecap="round"/>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 743 B |
3
public/robots.txt
Normal file
3
public/robots.txt
Normal file
@@ -0,0 +1,3 @@
|
|||||||
|
User-agent: *
|
||||||
|
Allow: /
|
||||||
|
Sitemap: https://dev.dustin.coffee/sitemap.xml
|
||||||
9
public/sitemap.xml
Normal file
9
public/sitemap.xml
Normal file
@@ -0,0 +1,9 @@
|
|||||||
|
<?xml version="1.0" encoding="UTF-8"?>
|
||||||
|
<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">
|
||||||
|
<url>
|
||||||
|
<loc>https://dev.dustin.coffee/</loc>
|
||||||
|
<lastmod>2026-02-11</lastmod>
|
||||||
|
<changefreq>monthly</changefreq>
|
||||||
|
<priority>1.0</priority>
|
||||||
|
</url>
|
||||||
|
</urlset>
|
||||||
1309
styles.css
1309
styles.css
File diff suppressed because it is too large
Load Diff
71
tos.html
71
tos.html
@@ -1,15 +1,43 @@
|
|||||||
<!DOCTYPE html>
|
<!DOCTYPE html>
|
||||||
<html lang="en">
|
<html lang="en">
|
||||||
<head>
|
<head>
|
||||||
<meta charset="UTF-8">
|
<meta charset="UTF-8">
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
<title>Terms of Service</title>
|
<meta name="description" content="Terms of Service for d@n tech web development services. Please read our terms and conditions carefully.">
|
||||||
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
|
<meta name="keywords" content="terms of service, legal, web development, agreement, conditions">
|
||||||
<link rel="stylesheet" href="styles.css">
|
<meta name="author" content="Dustin Newkirk">
|
||||||
</head>
|
<link rel="canonical" href="https://dev.dustin.coffee/tos.html">
|
||||||
<body>
|
<link rel="icon" href="favicon.svg" type="image/svg+xml">
|
||||||
<div class="container mt-5">
|
<link rel="icon" href="favicon.ico" sizes="any">
|
||||||
<h1 class="text-center">Terms of Service</h1>
|
<title>Terms of Service - d@n tech</title>
|
||||||
|
<meta property="og:title" content="Terms of Service - d@n tech">
|
||||||
|
<meta property="og:description" content="Terms of Service for d@n tech web development services.">
|
||||||
|
<meta property="og:image" content="https://dev.dustin.coffee/assets/images/optimized/pcw.webp">
|
||||||
|
<meta property="og:url" content="https://dev.dustin.coffee/tos.html">
|
||||||
|
<meta property="og:type" content="website">
|
||||||
|
<meta name="twitter:card" content="summary">
|
||||||
|
<meta name="twitter:title" content="Terms of Service - d@n tech">
|
||||||
|
<meta name="twitter:description" content="Terms of Service for d@n tech web development services.">
|
||||||
|
<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">
|
||||||
|
<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">Terms of Service</p>
|
||||||
|
</header>
|
||||||
|
|
||||||
|
<div class="container mt-5">
|
||||||
|
|
||||||
<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>
|
<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>
|
<h2>1. Terms</h2>
|
||||||
@@ -44,9 +72,18 @@
|
|||||||
<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>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 February 11, 2026.</p>
|
<p class="mt-5">These terms and conditions were last updated on February 11, 2026.</p>
|
||||||
</div>
|
</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>
|
<footer class="bg-dark text-white text-center py-4 mt-5">
|
||||||
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
|
<div class="container">
|
||||||
</body>
|
<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>
|
||||||
|
</div>
|
||||||
|
</footer>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
// Display the current year in the footer
|
||||||
|
document.getElementById('currentYear').textContent = new Date().getFullYear();
|
||||||
|
</script>
|
||||||
|
</body>
|
||||||
</html>
|
</html>
|
||||||
13
vite.config.js
Normal file
13
vite.config.js
Normal file
@@ -0,0 +1,13 @@
|
|||||||
|
import { defineConfig } from 'vite'
|
||||||
|
|
||||||
|
export default defineConfig({
|
||||||
|
build: {
|
||||||
|
rollupOptions: {
|
||||||
|
input: {
|
||||||
|
main: 'index.html',
|
||||||
|
tos: 'tos.html',
|
||||||
|
privacy: 'privacy.html'
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
})
|
||||||
Reference in New Issue
Block a user