feat(site): modernize to 2026 standards (Vite, design, perf, SEO)

- Migrate PHP TOS to static HTML for better SEO
- Refresh CSS with modern design and performance improvements
- Update HTML structure for semantic markup and accessibility
- Improve metadata and readme documentation

Ultraworked with [Sisyphus](https://github.com/code-yeongyu/oh-my-opencode)

Co-authored-by: Sisyphus <clio-agent@sisyphuslabs.ai>
This commit is contained in:
2026-02-11 19:50:46 -05:00
parent 71ec117498
commit da51526f0f
5 changed files with 245 additions and 55 deletions

View File

@@ -1,4 +1,4 @@
# Web Development Site # 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. Welcome to the Web Development Site repository. This project is a simple website designed to showcase basic web development skills.

View File

@@ -7,8 +7,11 @@
<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/index.html">
<title>d@n tech - Web Development Services</title> <title>d@n tech - Web Development Services</title>\n <!-- SEO Open Graph / Twitter -->\n <meta property=\"og:title\" content=\"d@n tech - Web Development Services\">\n <meta property=\"og:description\" content=\"Professional web development services: custom sites, responsive design, e-commerce, SEO, maintenance. Portfolio showcase.\">\n <meta property=\"og:image\" content=\"https://dev.dustin.coffee/assets/images/optimized/pcw.webp\">\n <meta property=\"og:url\" content=\"https://dev.dustin.coffee\">\n <meta property=\"og:type\" content=\"website\">\n <meta name=\"twitter:card\" content=\"summary_large_image\">\n <meta name=\"twitter:title\" content=\"d@n tech - Web Development Services\">\n <meta name=\"twitter:description\" content=\"Professional web development services: custom sites, responsive design, e-commerce, SEO, maintenance. Portfolio showcase.\">\n <meta name=\"twitter:image\" content=\"https://dev.dustin.coffee/assets/images/optimized/pcw.webp\">\n <!-- Google Fonts: Inter -->
<!-- Bootstrap CSS and JS --> <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">
<!-- Bootstrap CSS and JS -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous"> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.min.js" integrity="sha384-0pUGZvbkm6XF6gxjEnlmuGrJXVbNuzT9qBBavbLwCsOGabYfZo0T0to5eqruptLy" crossorigin="anonymous"></script> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.min.js" integrity="sha384-0pUGZvbkm6XF6gxjEnlmuGrJXVbNuzT9qBBavbLwCsOGabYfZo0T0to5eqruptLy" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz" crossorigin="anonymous"></script> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz" crossorigin="anonymous"></script>
@@ -20,9 +23,9 @@
</style> </style>
</head> </head>
<body> <body>
<header class="text-center py-1"> <header class="text-center py-1">
<h1 style="color: var(--bs-secondary);">d@n tech</h1> <h1>d@n tech</h1>
<p>Your partner in web development</p> <p>Your partner in web development</p>
<p><a href="https://dustin.coffee" target="_blank" class="text-white">Visit my main site</a></p> <p><a href="https://dustin.coffee" target="_blank" class="text-white">Visit my main site</a></p>
</header> </header>
<div class="d-flex flex-column min-vh-100" style="position: relative;"> <div class="d-flex flex-column min-vh-100" style="position: relative;">
@@ -46,7 +49,7 @@
<div class="row"> <div class="row">
<div class="col-md-6 mb-2"> <div class="col-md-6 mb-2">
<div class="card"> <div class="card">
<img src="assets/images/pcw.png" class="card-img-top" alt="Project 1"> <img srcset="assets/images/optimized/pcw-400.webp 400w, assets/images/optimized/pcw-800.webp 800w, assets/images/optimized/pcw.webp 1200w" sizes="(max-width: 768px) 100vw, 50vw" src="assets/images/optimized/pcw.webp" class="card-img-top" alt="Pemu Counseling and Wellness" loading="lazy">
<div class="card-body"> <div class="card-body">
<h5 class="card-title">Pemu Counseling and Wellness</h5> <h5 class="card-title">Pemu Counseling and Wellness</h5>
<p class="card-text">Pemu Counseling and Wellness is a comprehensive mental health service provider offering personalized counseling and wellness programs to help individuals achieve their mental health goals.</p> <p class="card-text">Pemu Counseling and Wellness is a comprehensive mental health service provider offering personalized counseling and wellness programs to help individuals achieve their mental health goals.</p>
@@ -56,7 +59,7 @@
</div> </div>
<div class="col-md-6 mb-2"> <div class="col-md-6 mb-2">
<div class="card"> <div class="card">
<img src="assets/images/knphd.png" class="card-img-top" alt="Project 2"> <img srcset="assets/images/optimized/knphd-400.webp 400w, assets/images/optimized/knphd-800.webp 800w, assets/images/optimized/knphd.webp 1200w" sizes="(max-width: 768px) 100vw, 50vw" src="assets/images/optimized/knphd.webp" class="card-img-top" alt="Kayla Newkirk" loading="lazy">
<div class="card-body"> <div class="card-body">
<h5 class="card-title">Kayla Newkirk</h5> <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> <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>
@@ -66,7 +69,7 @@
</div> </div>
<div class="col-md-6 mb-2"> <div class="col-md-6 mb-2">
<div class="card"> <div class="card">
<img src="assets/images/4th.png" class="card-img-top" alt="Project 3"> <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"> <div class="card-body">
<h5 class="card-title">4th & Goal</h5> <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> <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>
@@ -76,7 +79,7 @@
</div> </div>
<div class="col-md-6 mb-2"> <div class="col-md-6 mb-2">
<div class="card"> <div class="card">
<img src="assets/images/pha.png" class="card-img-top" alt="Project 4"> <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. Discover how shamanic wisdom and energy work can unlock new pathways to healing and personal growth.</p>
@@ -126,7 +129,7 @@
</div> </div>
<footer class="bg-dark text-white text-center py-1 mt-5" style="position: static;"> <footer class="bg-dark text-white text-center py-1 mt-5" style="position: static;">
<p>&copy; <span id="currentYear"></span> d@n tech. All rights reserved.</p> <p>&copy; <span id="currentYear"></span> d@n tech. All rights reserved.</p>
<p><a href="tos.php" class="text-white">Terms of Service</a> | <a href="privacy.html" class="text-white">Privacy Policy</a></p> <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>
<script> <script>
// Display the current year in the footer // Display the current year in the footer

View File

@@ -4,7 +4,7 @@
<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> <title>Privacy Policy</title>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" 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"> <link rel="stylesheet" href="styles.css">
</head> </head>
<body> <body>

View File

@@ -1,41 +1,228 @@
:root { :root {
--bs-primary: #3D3300; /* Palette */
--bs-secondary: #F8FDDD; --color-charcoal: #1a1a1a;
--bs-success: #4CAF50; --color-cream: #f8f5f0;
--bs-info: #17A2B8; --color-electric-blue: #00b4d8;
--bs-warning: #FFC107;
--bs-danger: #DC3545; /* Semantic Colors - Light Mode Default */
--bs-light: #F8F9FA; --bg-body: var(--color-cream);
--bs-dark: #343A40; --text-body: var(--color-charcoal);
} --bg-surface: #ffffff;
--border-subtle: color-mix(in srgb, var(--color-charcoal), transparent 90%);
body { --shadow-soft: 0 4px 20px -2px color-mix(in srgb, var(--color-charcoal), transparent 90%);
font-family: 'IBM Plex Mono', monospace;
margin: 0; /* Typography */
padding: 0; --font-sans: 'Inter', system-ui, -apple-system, sans-serif;
background-color: var(--bs-secondary); /* Updated background color */
color: var(--bs-primary); /* Updated text color */ /* BS Overrides */
} --bs-body-bg: var(--bg-body);
header { --bs-body-color: var(--text-body);
background-color: var(--bs-primary); /* Updated background color */ --bs-primary: var(--color-electric-blue);
color: var(--bs-secondary); /* Updated text color */ --bs-primary-rgb: 0, 180, 216;
padding: 1rem 0; }
text-align: center;
} @media (prefers-color-scheme: dark) {
.container { :root {
padding: 2rem; /* Semantic Colors - Dark Mode */
max-width: 800px; --bg-body: var(--color-charcoal);
margin: 0 auto; --text-body: var(--color-cream);
} --bg-surface: color-mix(in srgb, var(--color-cream), transparent 95%);
h1, h2 { --border-subtle: color-mix(in srgb, var(--color-cream), transparent 85%);
color: var(--bs-primary); /* Updated heading color */ --shadow-soft: 0 4px 20px -2px black;
}
footer { /* BS Overrides */
background-color: var(--bs-primary); /* Updated background color */ --bs-body-bg: var(--bg-body);
color: var(--bs-secondary); /* Updated text color */ --bs-body-color: var(--text-body);
text-align: center; --bs-dark: #121212;
padding: 1rem 0; }
position: fixed; }
width: 100%;
bottom: 0; /* Global Reset & Base */
} 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 0.3s ease, color 0.3s ease;
}
a {
color: var(--color-electric-blue);
text-decoration: none;
font-weight: 600;
transition: text-decoration-color 0.2s;
&:hover {
text-decoration: underline;
text-decoration-thickness: 2px;
text-underline-offset: 4px;
}
}
/* Typography Enhancements */
h1, h2, h3, h4, h5, h6 {
font-weight: 800;
letter-spacing: -0.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: 0.5rem;
border-bottom: 2px solid var(--color-electric-blue);
display: inline-block;
}
/* Header */
header {
background-color: var(--bg-body);
padding: 3rem 1rem;
margin-bottom: 2rem;
h1 {
color: var(--color-electric-blue) !important; /* Force override inline style if present, ideally remove inline */
}
p {
font-size: 1.25rem;
opacity: 0.8;
max-width: 600px;
margin-inline: auto;
}
}
/* Cards (Services & Portfolio) */
.card {
background-color: var(--bg-surface);
border: 1px solid var(--border-subtle);
border-radius: 12px;
overflow: hidden;
transition: transform 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94), box-shadow 0.3s ease;
height: 100%;
/* Scroll Animation Entry */
view-timeline-name: --card-entry;
view-timeline-axis: block;
animation: fade-in-up linear both;
animation-timeline: view();
animation-range: entry 10% cover 20%;
&:hover {
transform: translateY(-4px) scale(1.01);
box-shadow: var(--shadow-soft);
border-color: var(--color-electric-blue);
}
.card-img-top {
aspect-ratio: 16/9;
object-fit: cover;
transition: transform 0.5s ease;
}
&:hover .card-img-top {
transform: scale(1.05);
}
.card-body {
padding: 1.5rem;
display: flex;
flex-direction: column;
h5.card-title {
font-size: 1.25rem;
margin-bottom: 0.75rem;
}
p.card-text {
font-size: 0.95rem;
opacity: 0.9;
flex-grow: 1;
}
}
}
/* List Group (Services) */
.list-group {
--bs-list-group-bg: transparent;
--bs-list-group-border-color: var(--border-subtle);
.list-group-item {
background-color: var(--bg-surface);
border-color: var(--border-subtle);
font-weight: 500;
transition: background-color 0.2s;
&:hover {
background-color: color-mix(in srgb, var(--color-electric-blue), transparent 95%);
border-left: 4px solid var(--color-electric-blue);
}
}
}
/* Footer */
footer {
background-color: var(--color-charcoal) !important;
color: var(--color-cream) !important;
padding: 3rem 0;
margin-top: 5rem;
border-top: 4px solid var(--color-electric-blue);
a {
color: var(--color-cream);
opacity: 0.7;
&:hover {
opacity: 1;
color: var(--color-electric-blue);
}
}
}
/* Animations */
@keyframes fade-in-up {
from {
opacity: 0;
transform: translateY(30px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
/* Container Queries for Responsive Typography inside cards if needed */
.card-body {
container-type: inline-size;
}
@container (max-width: 300px) {
.card-title {
font-size: 1.1rem;
}
}
/* Utility Overrides for Bootstrap Buttons to match theme */
.btn-primary {
background-color: var(--color-electric-blue);
border-color: var(--color-electric-blue);
color: white; /* Electric blue needs white text for contrast */
font-weight: 700;
text-transform: uppercase;
font-size: 0.85rem;
letter-spacing: 0.05em;
padding: 0.6em 1.2em;
border-radius: 50px; /* Pill shape */
&:hover, &:focus, &:active {
background-color: color-mix(in srgb, var(--color-electric-blue), black 10%) !important;
border-color: color-mix(in srgb, var(--color-electric-blue), black 10%) !important;
}
}

View File

@@ -4,7 +4,7 @@
<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> <title>Terms of Service</title>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet"> <link rel="stylesheet" href="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">
</head> </head>
<body> <body>
@@ -43,7 +43,7 @@
<h2>8. Governing Law</h2> <h2>8. Governing Law</h2>
<p>Any claim relating to D@N Tech's website shall be governed by the laws of the State without regard to its conflict of law provisions.</p> <p>Any claim relating to D@N Tech's website shall be governed by the laws of the State without regard to its conflict of law provisions.</p>
<p class="mt-5">These terms and conditions were last updated on <?php echo date('F j, Y'); ?>.</p> <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://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.5.4/dist/umd/popper.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.5.4/dist/umd/popper.min.js"></script>