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

feat(ui): add rich coffee-themed decorative elements

Browse Source 
- Add floating coffee cups and steam wisps
- Implement coffee drip separators between sections
- Add subtle coffee stain background accents
- Enhance buttons with icons and ripple effects
- Improve scroll progress bar visibility
- Add coffee grounds pattern to footer
This commit is contained in:
Dustin Newkirk
2026-02-12 09:17:00 -05:00
parent a92170d3cc
commit 87505afd68
2 changed files with 162 additions and 26 deletions
Download Patch File Download Diff File Expand all files Collapse all files

29
index.html
View File

@@ -67,6 +67,12 @@
<svg class="floating-bean bean-3" viewBox="0 0 24 24" fill="currentColor">
<path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-1 15c-1.66 0-3-1.34-3-3s1.34-3 3-3 3 1.34 3 3-1.34 3-3 3z"/>
</svg>
<!-- Floating Cup -->
<svg class="floating-cup cup-1" viewBox="0 0 24 24" fill="currentColor">
<path d="M4 2h1v1h-1zM6 2h1v1h-1zM8 2h1v1h-1zM10 2h1v1h-1z" opacity=".5"/> <!-- Steam dots -->
<path d="M18.5 4h-13c-1.1 0-2 .9-2 2v5.71c0 3.83 2.95 7.18 6.78 7.29 3.96.12 7.22-3.06 7.22-7v-1h.5c1.93 0 3.5-1.57 3.5-3.5S20.43 4 18.5 4zM16 11V6h-3v5h3zm-5 0V6H8v5h3zm8-3.5h-1.5V6H19c.83 0 1.5.67 1.5 1.5S19.83 9 19 9z"/>
</svg>
</div>
<header class="hero-section">
@@ -79,7 +85,12 @@
<h1 class="hero-title">Digital Experiences,<br>Perfectly Brewed.</h1>
<p class="typewriter hero-subtitle" data-text="Crafting robust, responsive, and elegant web solutions" aria-label="Crafting robust, responsive, and elegant web solutions"></p>
<div class="btn-group-custom">
<a href="mailto:info@dustin.coffee" class="btn btn-primary btn-lg">Start Your Project</a>
<a href="mailto:info@dustin.coffee" class="btn btn-primary btn-lg">
<svg class="btn-icon" width="20" height="20" viewBox="0 0 24 24" fill="currentColor">
<path d="M20 4H4c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2zm0 4l-8 5-8-5V6l8 5 8-5v2z"/>
</svg>
Start Your Project
</a>
<a href="#portfolio" class="btn btn-outline-coffee btn-lg">View Portfolio</a>
</div>
<div class="mt-5 d-none d-md-block opacity-50 animate-bounce" aria-hidden="true">
@@ -88,6 +99,13 @@
</svg>
</div>
</div>
<!-- Coffee Drip Separator -->
<div class="drip-separator bottom" aria-hidden="true">
<svg viewBox="0 0 1440 100" preserveAspectRatio="none">
<path fill="currentColor" d="M0,0 C240,90 480,90 720,50 C960,10 1200,10 1440,50 L1440,0 L0,0 Z"></path>
</svg>
</div>
</header>
<div class="d-flex flex-column min-vh-100" style="position: relative;">
@@ -589,6 +607,7 @@
<!-- 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">
@@ -596,7 +615,12 @@
<div class="card bg-transparent border-0 shadow-none">
<div class="card-body">
<p class="lead mb-4">Ready to start your next project? Let's connect over coffee (or email).</p>
<a href="mailto:info@dustin.coffee" class="btn btn-primary btn-lg mb-3">Send an Email</a>
<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>
@@ -607,6 +631,7 @@
</div>
<footer class="bg-dark text-white text-center py-5" >
<div class="coffee-grounds-pattern" aria-hidden="true"></div>
<p>&copy; <span id="currentYear"></span> d@n tech. All rights reserved.</p>
<p><a href="tos.html" class="text-white">Terms of Service</a> | <a href="privacy.html" class="text-white">Privacy Policy</a></p>