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

style: drop icon slop, swap primary to caramel, kill particles
CI & Lighthouse / test (push) Has been cancelled
Details

Browse Source 
- Remove 8 duplicated generic SVG icons from tech cards
- Switch --color-primary from teal (#1D7874) to gold (#D4A574)
- Remove particle canvas system (~70 lines JS, canvas element, CSS)
- Grain texture + steam now carry atmosphere alone
This commit is contained in:
Dustin Newkirk
2026-04-30 13:07:23 -04:00
parent 841794830b
commit f40cf11ef8
5 changed files with 123 additions and 295 deletions
Download Patch File Download Diff File Expand all files Collapse all files
.gitignore
+1 -1
View File
@@ -12,4 +12,4 @@ screenshot*
CROSS_BROWSER_TEST_REPORT.md CROSS_BROWSER_TEST_REPORT.md
TESTING_SUMMARY.txt TESTING_SUMMARY.txt
VISUAL_INSPECTION_REPORT.md VISUAL_INSPECTION_REPORT.md
cross_browser_test.py cross_browser_test.py.pi-lens/
dist/index.html
Vendored
+60 -107
View File
@@ -43,15 +43,14 @@
html { html {
scroll-behavior: smooth; scroll-behavior: smooth;
} }
</style> </style>
<script type="module" crossorigin src="/assets/main-DpCfeRNB.js"></script> <script type="module" crossorigin src="/assets/main-DpCfeRNB.js"></script>
<link rel="stylesheet" crossorigin href="/assets/styles-HyXWe5el.css"> <link rel="stylesheet" crossorigin href="/assets/styles-HyXWe5el.css">
</head> </head>
<body> <body>
<!-- Scroll Progress Bar --> <!-- Scroll Progress Bar -->
<div class="scroll-progress" role="progressbar" aria-label="Page scroll progress" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100"></div> <div class="scroll-progress" role="progressbar" aria-label="Page scroll progress" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100"></div>
<!-- Particle canvas removed -- grain texture + steam carry the atmosphere --> <!-- Particle canvas removed -- grain texture + steam carry the atmosphere -->
@@ -201,108 +200,62 @@
<!-- Technologies & Stack Section --> <!-- Technologies & Stack Section -->
<section id="technologies" class="section-padding"> <section id="technologies" class="section-padding">
<div class="container"> <div class="container">
<h2>Technologies & Tools</h2> <h2>Technologies & Tools</h2>
<div class="row g-4 row-cols-2 row-cols-md-3 row-cols-lg-4"> <div class="row g-4 row-cols-2 row-cols-md-3 row-cols-lg-4">
<!-- HTML5 --> <!-- HTML5 -->
<div class="col"> <div class="col">
<div class="tech-card"> <div class="tech-card">
<div class="tech-icon-wrapper"> <h3 class="tech-name">HTML5</h3>
<svg width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"> <p class="tech-desc">Semantic Markup</p>
<path d="M12 2L2 7l10 5 10-5-10-5zM2 17l10 5 10-5M2 12l10 5 10-5"/> </div>
</svg> </div>
</div> <!-- CSS3 -->
<h3 class="tech-name">HTML5</h3> <div class="col">
<p class="tech-desc">Semantic Markup</p> <div class="tech-card">
</div> <h3 class="tech-name">CSS3</h3>
</div> <p class="tech-desc">Modern Styling</p>
<!-- CSS3 --> </div>
<div class="col"> </div>
<div class="tech-card"> <!-- JavaScript -->
<div class="tech-icon-wrapper"> <div class="col">
<svg width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"> <div class="tech-card">
<path d="M12 2L2 7l10 5 10-5-10-5zM2 17l10 5 10-5M2 12l10 5 10-5"/> <h3 class="tech-name">JavaScript</h3>
</svg> <p class="tech-desc">Interactive Logic</p>
</div> </div>
<h3 class="tech-name">CSS3</h3> </div>
<p class="tech-desc">Modern Styling</p> <!-- Bootstrap -->
</div> <div class="col">
</div> <div class="tech-card">
<!-- JavaScript --> <h3 class="tech-name">Bootstrap 5</h3>
<div class="col"> <p class="tech-desc">Responsive UI</p>
<div class="tech-card"> </div>
<div class="tech-icon-wrapper"> </div>
<svg width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"> <!-- Vite -->
<path d="M16 18l6-6-6-6"/> <div class="col">
<path d="M8 6l-6 6 6 6"/> <div class="tech-card">
</svg> <h3 class="tech-name">Vite</h3>
</div> <p class="tech-desc">Fast Build Tool</p>
<h3 class="tech-name">JavaScript</h3> </div>
<p class="tech-desc">Interactive Logic</p> </div>
</div> <!-- Git -->
</div> <div class="col">
<!-- Bootstrap --> <div class="tech-card">
<div class="col"> <h3 class="tech-name">Git</h3>
<div class="tech-card"> <p class="tech-desc">Version Control</p>
<div class="tech-icon-wrapper"> </div>
<svg width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"> </div>
<path d="M12 2l9 4.9V17L12 22l-9-4.9V7z"/> <!-- SEO -->
</svg> <div class="col">
</div> <div class="tech-card">
<h3 class="tech-name">Bootstrap 5</h3> <h3 class="tech-name">SEO</h3>
<p class="tech-desc">Responsive UI</p> <p class="tech-desc">Search Visibility</p>
</div> </div>
</div> </div>
<!-- Vite --> <!-- Accessibility -->
<div class="col"> <div class="col">
<div class="tech-card"> <div class="tech-card">
<div class="tech-icon-wrapper"> <h3 class="tech-name">Accessibility</h3>
<svg width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"> <p class="tech-desc">Inclusive Design</p>
<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>
</div> </div>
index.html
+58 -105
View File
@@ -49,9 +49,8 @@
<body> <body>
<!-- Scroll Progress Bar --> <!-- Scroll Progress Bar -->
<div class="scroll-progress" role="progressbar" aria-label="Page scroll progress" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100"></div> <div class="scroll-progress" role="progressbar" aria-label="Page scroll progress" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100"></div>
<!-- Particle Canvas --> <!-- Particle canvas removed -- grain texture + steam carry the atmosphere -->
<canvas id="particles" aria-hidden="true"></canvas>
<!-- Decorative Layer (Background Elements) --> <!-- Decorative Layer (Background Elements) -->
<div class="decorative-layer" aria-hidden="true"> <div class="decorative-layer" aria-hidden="true">
@@ -201,108 +200,62 @@
<div class="container"> <div class="container">
<h2>Technologies & Tools</h2> <h2>Technologies & Tools</h2>
<div class="row g-4 row-cols-2 row-cols-md-3 row-cols-lg-4"> <div class="row g-4 row-cols-2 row-cols-md-3 row-cols-lg-4">
<!-- HTML5 --> <!-- HTML5 -->
<div class="col"> <div class="col">
<div class="tech-card"> <div class="tech-card">
<div class="tech-icon-wrapper"> <h3 class="tech-name">HTML5</h3>
<svg width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"> <p class="tech-desc">Semantic Markup</p>
<path d="M12 2L2 7l10 5 10-5-10-5zM2 17l10 5 10-5M2 12l10 5 10-5"/> </div>
</svg> </div>
</div> <!-- CSS3 -->
<h3 class="tech-name">HTML5</h3> <div class="col">
<p class="tech-desc">Semantic Markup</p> <div class="tech-card">
</div> <h3 class="tech-name">CSS3</h3>
</div> <p class="tech-desc">Modern Styling</p>
<!-- CSS3 --> </div>
<div class="col"> </div>
<div class="tech-card"> <!-- JavaScript -->
<div class="tech-icon-wrapper"> <div class="col">
<svg width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"> <div class="tech-card">
<path d="M12 2L2 7l10 5 10-5-10-5zM2 17l10 5 10-5M2 12l10 5 10-5"/> <h3 class="tech-name">JavaScript</h3>
</svg> <p class="tech-desc">Interactive Logic</p>
</div> </div>
<h3 class="tech-name">CSS3</h3> </div>
<p class="tech-desc">Modern Styling</p> <!-- Bootstrap -->
</div> <div class="col">
</div> <div class="tech-card">
<!-- JavaScript --> <h3 class="tech-name">Bootstrap 5</h3>
<div class="col"> <p class="tech-desc">Responsive UI</p>
<div class="tech-card"> </div>
<div class="tech-icon-wrapper"> </div>
<svg width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"> <!-- Vite -->
<path d="M16 18l6-6-6-6"/> <div class="col">
<path d="M8 6l-6 6 6 6"/> <div class="tech-card">
</svg> <h3 class="tech-name">Vite</h3>
</div> <p class="tech-desc">Fast Build Tool</p>
<h3 class="tech-name">JavaScript</h3> </div>
<p class="tech-desc">Interactive Logic</p> </div>
</div> <!-- Git -->
</div> <div class="col">
<!-- Bootstrap --> <div class="tech-card">
<div class="col"> <h3 class="tech-name">Git</h3>
<div class="tech-card"> <p class="tech-desc">Version Control</p>
<div class="tech-icon-wrapper"> </div>
<svg width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"> </div>
<path d="M12 2l9 4.9V17L12 22l-9-4.9V7z"/> <!-- SEO -->
</svg> <div class="col">
</div> <div class="tech-card">
<h3 class="tech-name">Bootstrap 5</h3> <h3 class="tech-name">SEO</h3>
<p class="tech-desc">Responsive UI</p> <p class="tech-desc">Search Visibility</p>
</div> </div>
</div> </div>
<!-- Vite --> <!-- Accessibility -->
<div class="col"> <div class="col">
<div class="tech-card"> <div class="tech-card">
<div class="tech-icon-wrapper"> <h3 class="tech-name">Accessibility</h3>
<svg width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"> <p class="tech-desc">Inclusive Design</p>
<path d="M13 2L3 14h9l-1 8 10-12h-9l1-8z"/> </div>
</svg> </div>
</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>
</div> </div>
</section> </section>
main.js
+2 -70
View File
@@ -55,75 +55,8 @@ function initSkillBars() {
skillItems.forEach(item => observer.observe(item)); skillItems.forEach(item => observer.observe(item));
} }
// ===== PARTICLE BACKGROUND ===== // ===== PARTICLE BACKGROUND (removed) =====
function initParticles() { // initParticles removed — grain texture + steam carry the atmosphere
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 ===== // ===== INTERACTIVE TESTIMONIALS =====
function initTestimonials() { function initTestimonials() {
@@ -246,7 +179,6 @@ document.addEventListener('DOMContentLoaded', () => {
initTypewriter(); initTypewriter();
initScrollProgress(); initScrollProgress();
initSkillBars(); initSkillBars();
initParticles();
initTestimonials(); initTestimonials();
initParallax(); initParallax();
initMetricsCounter(); initMetricsCounter();
styles.css
+2 -12
View File
@@ -17,7 +17,7 @@
--text-body: var(--color-coffee-dark); --text-body: var(--color-coffee-dark);
--bg-surface-rgb: 255, 255, 255; --bg-surface-rgb: 255, 255, 255;
--bg-surface: rgba(var(--bg-surface-rgb), 0.7); --bg-surface: rgba(var(--bg-surface-rgb), 0.7);
--color-primary: var(--color-teal); --color-primary: var(--color-gold);
--color-secondary: var(--color-gold); --color-secondary: var(--color-gold);
--border-subtle: rgba(111, 78, 55, 0.15); --border-subtle: rgba(111, 78, 55, 0.15);
@@ -934,17 +934,7 @@ footer a:hover {
transition: none; transition: none;
} }
/* ===== PARTICLE CANVAS ===== */ /* ===== PARTICLE CANVAS (removed) ===== */
#particles {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
pointer-events: none;
z-index: -1;
opacity: 0.6;
}
/* ===== TYPEWRITER EFFECT ===== */ /* ===== TYPEWRITER EFFECT ===== */
.typewriter { .typewriter {